This site

On a portfolio you’re the designer, the client and the engineer, so it’s a good test of what “designer who builds” really means. Here’s what I built and how.

What’s under it

It’s Next.js with MDX. Every entry is a Markdown file with a few lines of settings at the top, and the work and writing lists, the Pokédex and the RSS feed all read from the same folder. Fraunces is the display type and Instrument Sans does everything else, including the small labels. Motion is CSS plus the motion library, the gooey effects come from liquid-gooey, and while I’m working there’s a DialKit panel attached to the carousel so I can tune it by feel instead of by number.

Things you can play with

• The ring. Twelve real screens on a 3D wheel. Each card’s angle from the front sets how blurry, faded and tilted it is. Drag it and it keeps spinning with your momentum. Hover and it stops.
• The verb and the switch. The word after “designer who” and the work and writing switch are the same control, so moving one moves the other.
• The nav marker. A shape that slides between links and stretches as it moves.
• The light switch. Dark mode spreads out from the button you pressed like an eclipse, using the browser’s View Transitions API.
• The pokéball. There’s one hidden in the nav and one in the footer. Catch it and you get a Pokédex: the whole site again, same content, as a field guide.

How it’s made

I don’t edit files. Every change to this site, including this sentence, came from a conversation with Claude Code. I describe what’s wrong or what I want, look at the result, and push back until it’s right. A new post is a message. A new video is a file in a folder and a sentence about where it goes.

I’m not embarrassed about that. It’s how I work at Daimler now too. The judgment is still mine: what to build, what to cut, what done looks like, and when something sounds like a machine wrote it.

What was hard

• Even spacing on a curve. I built three carousels before this one. Cards with different shapes never look evenly spaced on a ring, however right the math is. The fix was making every card square.
• Dialogs inside 3D elements. A dialog inside something with a 3D transform doesn’t stay put on screen. Every overlay on this site now attaches to the page itself.
• Exit animations that never ran. In one mode the animation library never ran its exit step and left old rows on screen. Now everything just re-renders instead.
• All caps. Small all-caps labels give away a template. There isn’t one on this site, and that’s a rule.