This site

The site you are reading. I am including it because the interesting part is not that it exists — it is what had to be decided before a single component got written.

Built human-led and AI-assisted: I set the brief, made the design and architecture decisions, ran the reviews and the testing, and held the quality bar. AI tools carried a large share of the implementation. The decisions below are the part that mattered.

The actual problem

A portfolio is easy. This is not a portfolio. It has to serve three people who want completely different things:

• someone who might hire me, who wants proof I can build
• someone who might build something with me, who wants to know how I think
• someone who just watched a sixty-second video and wants the prompt

Those pull in opposite directions. Optimise for the first and you get an agency site. Optimise for the third and you get a link dump. The compromise most personal sites reach is a homepage with one call to action that suits exactly one of them.

The decision that shaped everything else

The homepage does not have a primary CTA. It has four routes — Projects, Content, Resources, Collaborate — as a full-width rail under the headline, each with a sentence explaining who it is for.

That sounds like indecision. It is the opposite: it is a bet that self-selection beats funnelling when your visitors genuinely want different things. A recruiter and a person who wants a prompt should not be pushed down the same path.

Content architecture

Five collections, one folder of .mdx files each:

Adding anything means adding one file. No CMS, no database, no admin panel. Tags link entries across collections, so a project tagged nextjs automatically surfaces a resource tagged nextjs in its related rail. The site cross-links itself as it grows.

Every route is prerendered at build time.

Design system

Warm near-black, not the blue-black that every AI product landing page uses. One hot accent for energy, one cool accent held back for state and links, one warm accent for reference material — so colour carries meaning rather than just being present. Each section of the site announces itself by which accent it uses.

The whole system is one @theme block in one CSS file. Colour, type scale, spacing, easing curves, durations. Changing the brand means changing that block.

Three bugs the review caught

Content stranded invisible. Scroll reveals started at opacity: 0 and were revealed by an IntersectionObserver. In a backgrounded tab the observer never fires — so the page loaded and stayed blank. Now the entry styles only apply inside @media (scripting: enabled), with a 2.5 second failsafe timer behind that. Motion is a nicety; the content is not.

The mobile menu collapsed to nothing. The header had backdrop-blur, which quietly makes an element a containing block for position: fixed children. The full-screen panel inside it was being sized against a 72px header. It computed to 0.63 pixels tall.

White text on the accent orange was 3.12:1 — below the WCAG AA threshold, on the primary button. Near-black on orange measures 6.18:1 and, as it turns out, looks better.

What I would change

The Lab section is supposed to be the most visually experimental part of the site and right now it follows the same grid logic as everything else. That is the next thing to break on purpose.

I also want per-entry reading progress on long resources, and I have not decided whether that is genuinely useful or just a thing sites do.