Mehedi Hasan
← Home

How this site was built

mehedihsn.com

Designing and building a personal website to share my work at conferences, networking events, and meetings, and to learn how the web works along the way.

Role
Owner · Project lead
Timeline
2026
Built with
HTML · CSS · JavaScript
Status
Ongoing

At a glance

Status
Ongoing: designed, built, and tested, and updated over time
Role
Owner and project lead
Challenge
One place to send people I meet: who I am, what I do, and how to reach me
Approach
Content first, an editorial design, and simple, durable technology

01Context

When I meet people at events, I want one simple place to send them: who I am, what I do, what I've built, and how to reach me. A personal website does that better than a business card, and owning my own domain means it is mine to shape over time.

02Problem

The site needed to feel premium and personal, not like a template. It also had to load quickly on a phone and be easy to scan in under a minute. Just as important, it had to be simple enough for me to maintain and update myself.

03Key moves

  1. Content first

    I started from what a visitor needs to know (introduction, background, experience, work, and contact) before deciding how it should look.

  2. Research, then an original direction

    I studied respected founder sites and editorial portfolios, then developed a distinct look: warm ivory, charcoal, and a muted ledger green, with indexed sections and “case files” inspired by operations work.

  3. Simple, durable technology

    Plain HTML, CSS, and JavaScript with self-hosted fonts, and no complicated tooling. It is responsive on phones, tablets, and desktops, with accessibility and search basics built in.

  4. Made for networking

    A “Save my contact” button and a quick-contact bar on phones make it easy for someone I’ve just met to keep in touch.

04Completed so far

  • Built and testedThe full site was designed, built, and tested on my own computer first.
  • ResponsiveLayouts checked on phone, tablet, and desktop sizes.
  • AccessibleKeyboard navigation, semantic structure, and reduced-motion support.
BackMehedi Hasan Home →