How this site is built.

Astro 7, static output, with React 19 islands only where a React library earns it. Storyblok owns the words and the work through a content schema this repository generates; until the space is connected the site builds from local JSON with the same shape. Netlify serves the static build with security headers and an immutable cache on hashed assets.

Every color, space, radius and duration on this site is a CSS custom property, layered Style, then Brand, then Theme. Both themes are contrast-checked by a test: every text-on-surface pair passes WCAG AA at 4.5:1, in light and in dark. Amber has one job: the ruling, the primary action, the focus ring. Green only marks a pass; red only appears when a check catches something.

format, lint, typecheck, architecture, self-proof, tests, coverage, e2e, duplication, security. The strip at the top of every page is those ten gates, and the workflow runs one job per gate under exactly those names, so the count in the footer is a mapping rather than a tally. Locally, pnpm check runs format, lint, typecheck, the four architecture rules and a scan for the two dashes this site never uses; pnpm test runs the token contrast test, the content tests and the self-proof test, which points every check at a fixture that is deliberately wrong and fails if the check has stopped catching it; pnpm test:coverage holds the covered modules to their thresholds; pnpm build builds; pnpm test:e2e renders every route in a browser, checks for one h1, no console errors, no horizontal scroll on a phone, and runs axe. No CI or Lighthouse figure on this site is invented.

• site_settings: name, role, location, availability, links, resume, default SEO.
• case_study: title, one-liner, company, role, years, stack, proof stats with sources, plates, body blocks, links, order, category.
• page: sections of blocks (rich text, plates, stat rows, quotes, code excerpts, diagrams by key, hire lanes).
• gallery: groups of items with captions and credits.
• Diagram keys: delivery-loop, tenancy, quality-ladder, token-layers, exploded-button, count-grid.

Budgets at the 75th percentile: LCP 2.5 s, INP 200 ms, CLS 0. Critical JavaScript under 50 KB gzip, islands excluded; GSAP and Lenis load lazily, after the page is interactive. That figure is measured against the production build after every build and printed below, never guessed from the load you are on. Images are served as WebP, resized to the widths the layout actually uses, with a width and a height on every image. The largest contentful paint is real text.

Bricolage Grotesque for display at high optical size, with its weight animated in the hero. Newsreader for reading. JetBrains Mono for labels, tokens and status lines, never running text. Self-hosted through the Astro Fonts API, subset to Latin, preloaded, with metric-matched fallbacks so nothing shifts when they arrive.

Transform and opacity only, except the headline's variable weight in the hero and the clip-path on reveals. 300 to 500 ms, staggered 60 to 90 ms, on springs. Smooth scrolling runs only on fine-pointer desktops. Under prefers-reduced-motion every state renders finished: no tweens, no smooth scroll, no page-transition animation. The Segmented control in the hero sets the same preference by hand, and a stored choice outlives the visit. On a mouse or trackpad the cursor springs a frame around whatever a click will act on and names the action in a mono label, amber only for the ruling and the primary action; it never replaces the system cursor, and under reduced motion the frame appears without moving.

Contrast is tested on both themes. Every control works from the keyboard, with an amber focus ring the sticky bar never covers. One h1 per page, landmarks, a skip link, alt text on every image, aria-live toasts and 44 px targets. Inspect mode has a visible toggle and a Shift+Alt+I shortcut, so no single-key shortcut is required. Nothing on the site moves for longer than five seconds, and nothing loops.

Found a problem? Write to deitchwesley@gmail.com.