How this site was built.

01Design language — “Navy Precision”

A restrained dark-navy system with a single warm accent. Type pairing: Plus Jakarta Sans (800 display / 300 body), Instrument Serif for editorial italics, and IBM Plex Mono for uppercase labels. Whitespace is the primary design material — one idea per viewport, sections separated by hairline rules rather than boxes.

02Stack & principles

• StackHand-written semantic HTML, vanilla CSS and JavaScript. No framework, no build step. Deployed on Vercel.
• AccessibilityWCAG 2.2 AA — ARIA landmarks, skip link, visible focus states, 4.5:1 contrast, reduced-motion support, 44px touch targets.
• PerformanceOptimised local images with explicit dimensions, system-cached Google Fonts, no base64 embedding, minimal JavaScript.
• OpennessNo right-click blocking, no devtools traps, nothing copy-protected. View source is a feature.
• SEOJSON-LD (Person, ProfilePage, WebSite, CreativeWork), Open Graph, sitemap with image extensions, IndexNow, canonical and hreflang.

03Process

The site is designed and built by me, with AI-assisted coding (Claude) as a pair programmer — the same intent-driven, human-in-command workflow I design for professionally. Every generation was reviewed, refined or rejected before landing; the judgement calls are mine.

Version 1 (2026) was a maximalist single-page archive — 13 build phases, an embedded design-system tour, five NDA slide viewers. Version 2, this site, is the edit: a deliberate exercise in ruthless curation after candid feedback that the archive buried the argument. The redesign brief, personas and acceptance criteria were written first; the code followed.