How this site is built.
A product designer who codes should pass his own audit. So this site is built the way I’d build anything: light, legible, and honest. Right-click → view source — it’s tidy in there. Or read the case studies, where real code sits next to the work it builds.
- Framework Astro — static, zero-JS-by-default. The whole site ships a few KB of hand-written JavaScript: the theme toggle, the command palette, and the hero’s animation loop.
- The hero A “Living Index” — the role rendered as live Fraunces glyphs that settle on load, breathe, and respond to the cursor (variable-axis morph + a per-glyph RGB-split). Pure DOM + CSS variables + one requestAnimationFrame loop. The medium is the portfolio piece.
- Type Fraunces (display, variable axes — opsz/wght/SOFT/WONK), Geist (body), Geist Mono (labels + code). All self-hosted woff2 — zero external font requests.
- Colour Graphite Mono: a cool near-black (#0b0c0e) with near-white ink and no chromatic accent — contrast and the serif do the work. The footer flips to a tonal block (paper-on-dark, graphite-on-light). Film grain at ~5% for analog warmth.
- Code highlighting A hand-rolled highlighter that runs at build time, so zero highlighter code ships to your browser. The thing that colours the code on this site is itself my code.
- Command menu Press ⌘K (or Ctrl K) anywhere to jump around, copy my email, or switch theme.
- Theme Dark, light, or system — persisted to localStorage and applied before first paint, so there’s no flash.
- Accessibility Keyboard-navigable with visible focus, reduced-motion respected, real alt text, a skip link, and AA-minded contrast.
- Hosting Static files on a CDN. Fast everywhere, cheap to run.