Skip to content

/specs · technical sheet

How this site is built

This site is one of the projects too. Here's what it runs on: the stack, the tokens, and the small engines behind the animations.

everything below is running live, not screenshots

Stack

  • Next.js 16 · App Routerstatic generation for all 15 case studies
  • TypeScript, stricttyped project registry: wrong slug = build error
  • Tailwind CSS v4@theme tokens; engineer mode is one custom variant
  • MDX via next-mdx-remote/rsccompiled server-side, zero client MDX runtime
  • Motionpage transitions, scroll reveals, the takeover menu; micro-interactions stay CSS
  • ASCII enginestwo tiny renderers, zero deps: canvas for the hero field + portrait, text for the flower and side fields
  • sharpone-shot pipeline: ~30MB of PNGs → a few MB of WebP

Color system

click a chip to copy

Type system

  • --font-displayHedvig Letters Serif · headlines, titles
  • --font-sansSatoshi (variable, self-hosted) · body text
  • --font-monoGeist Mono · tnum lnum zero · numbers, tags, annotations

All numerals render tabular, lining, slashed-zero: 0123456789 · $217,600,000 · 24h TTL

Engine room

Nothing below is an image. These are the site's own components, running.

ascii engine · pattern: flower · 14fps

design0%design: 100 percent
code0%code: 80 percent
business0%business: 80 percent

meters · fill on scroll into view

Engineer mode

Press / anywhere (or use the nav switch). One attribute lands on <html>, and a single Tailwind custom variant does the rest: the construction grid fades in, sections reveal their spec comments, project rows flip from taglines to stacks, a crosshair reticle reads out coordinates, and a HUD reports route, viewport, and scroll.

No parallel page tree, no forked components. The entire mode is CSS reacting to data-mode="engineer", persisted in localStorage and applied pre-hydration so a reload never flashes.