Back to the portfolio

Colophon

How this site was built.

This site is a small piece of evidence for the process it describes: written spec first, agents doing the typing, and me reviewing every diff before it shipped.

Stack

  • Next.js 15 App Router with React 19, statically exported. No server at runtime.
  • TypeScript in strict mode, Tailwind CSS v4 with design tokens in OKLCH.
  • No animation library: CSS transitions plus a single requestAnimationFrame clock per animated island.
  • Geist, Geist Mono and Instrument Serif via next/font, self-hosted at build time.

The Ship Graph

  • A pure function maps time to every visual state, so pause, replay and step-through are exact.
  • One requestAnimationFrame clock that stops when the panel is off-screen or the tab is hidden.
  • Optional WebGL dot field, loaded on idle on capable desktops, with a CSS fallback everywhere else.
  • Reduced motion renders the finished state with a step-through control and a text transcript.

Performance

  • Every section is a server component; only the hero, terminal, palette and toggles hydrate.
  • The command menu is code-split and loaded on idle or first use.
  • No raster images above the fold, no third-party scripts, no analytics.
  • First Load JS for the home page is 120 KB, of which 103 KB is the shared React and Next.js runtime.

Accessibility

  • Skip link, landmarks, one h1 per page and visible focus everywhere.
  • Every animation has a pause or a text equivalent, and honours reduced motion plus an in-site toggle.
  • The command menu follows the combobox and listbox pattern with full keyboard support.
  • Light and dark themes, set before first paint so there is no flash.

Workflow

  • Positioning and copy written as a spec first, then a separate design spec.
  • Claude Code agents for research, implementation and review, each with a narrow brief.
  • Type checks, lint, a static build and real-browser checks at desktop and phone widths before shipping.

House rules

  • No invented numbers, logos, clients or testimonials.
  • The Answers in the command menu are written by me. No AI call happens on this site.
  • The hero builds and the terminal session are illustrative examples of how I work, and are labelled that way.