How I Designed This Site (and Why It Looks Like a Magazine)
My old site was fine. It loaded fast. It was responsive. It had all the right sections. It also looked exactly like every other personal site on the internet — white background, system font, minimal styling, zero personality.
The problem wasn't technical. The problem was that it didn't feel like anything. You could have swapped my name for anyone else's and nothing would have changed.
So I tore it down and started with a question: what should a personal site feel like?
The Magazine Answer
Most personal sites land in one of two camps. The minimal developer portfolio — barely styled, because styling is supposedly frivolous. Or the over-designed agency showcase — parallax scrolling, loading animations, every trendy effect stacked on top of each other.
I wanted neither. I wanted something that felt intentional without being distracting. Something where every design choice had a reason.
Magazine editorial design gave me that. In editorial design, nothing is accidental. The whitespace is deliberate. The typography scale is structured. The rhythm between sections is planned. Content drives layout, not the other way around.
Typography Is the Entire Game
The single biggest design decision was choosing two fonts and being disciplined about how I used them.
Space Grotesk for headings — geometric, modern, a little unexpected. It has personality without being gimmicky.
DM Sans for body text — clean and readable at any size. It disappears, which is exactly what body text should do.
The heading scale uses clamp() for fluid sizing:
font-size: clamp(2rem, 5vw, 3.5rem);
Headings look proportional on every screen size without a single media query. This one line of CSS replaced what used to be four breakpoints.
The Three-Color Constraint
I limited the entire palette to three values:
#FAFAFA— off-white background, warmer than pure white#1A1A1A— near-black text, softer than pure black#C4616C— dusty rose accent, used sparingly
This constraint was the best design decision I made. When you can't rely on color to differentiate elements, you have to get better at spacing, weight, and layout. Every hierarchy has to come from typography and whitespace alone. The accent color only appears on things that matter — interactive elements, key highlights, the occasional decorative touch.
The dark mode version flips the background and text values while shifting the accent slightly warmer. Same three-color philosophy, just inverted.
The Stack (and the Tailwind v4 War Story)
The technical choices were straightforward:
- Next.js 15 with the App Router
- Tailwind CSS v4 for styling
- TypeScript throughout
- MDX for blog content
- Netlify for deployment
The interesting story is Tailwind v4. It's a major rewrite with a new engine, and at the time I built this site, it had a showstopper bug with Next.js: the @import "tailwindcss" directive fails to process in development mode. Pages load completely unstyled. Blank white screen.
The workaround is to skip npm run dev entirely and build for production every time. npm run build && npm start instead of npm run dev. Not ideal for hot reload, but production builds are fast enough that it didn't slow me down. I got used to it within a day.
The App Router also changed how I think about components. Server components are the default — fetch data, render HTML, ship zero JavaScript. Client components are opt-in, only for things that genuinely need interactivity: scroll animations, form state, the theme toggle. Most of the site sends no JavaScript to the browser at all.
What's Next
The site is live and I'm happy with how it turned out. It feels like mine, which was the whole point.
What comes next is content. Real case studies with actual numbers, not placeholder summaries. More writing about the intersection of product, growth, and ecommerce. Maybe some interactive pieces where I can show work instead of just describing it.
The foundation is solid. Now it's about filling it with things worth reading.