How this site is built

This site is the first system on the Systems index, so here is how it is built, for the reader who wants to check the work before booking.

Stack

Next.js 16 · TypeScript · Tailwind 4 · next-intl · MDX · Vercel

Languages

messages/en.json · messages/de.json · scripts/check-messages.mjs fails the build on a missing key

Booking

two-click scheduler · no third-party request before the click · self-hosted fonts

Diagram data model

Diagram {
  id, title: { en, de }
  nodes[]: { id, kind: trigger | tool | agent | check | output, label, detail?, tool? }
  edges[]: { from, to, label? }
  checks[]: { node, rule }          // where a person decides
}
layoutDiagram(diagram, "h" | "v")  // ranks by longest path, 8 px grid, no measuring
SystemDiagram                       // inline SVG + visually hidden ordered list
DiagramInteractive                  // draw-in once, node panel, Play narrates the story, Reset

Numbers

Lighthouse performance, home (mobile)

to be measured

Lighthouse performance, system detail (mobile)

to be measured

Lighthouse performance, book (mobile)

to be measured

JavaScript on the home page, gzipped

to be measured

Measured on

to be measured

Last measured

Lighthouse numbers go here after the first production deploy, with the date of the run. Fonts: Bricolage Grotesque, Instrument Sans and IBM Plex Mono, subset to Latin, 193 KB in total, served from this domain. Home page JavaScript budget: 120 KB gzipped before the scheduler loads. Diagrams are typed data (nodes, edges, checks) rendered as SVG and as a plain list for screen readers. No cookies, so no cookie banner. Analytics: Vercel, cookieless.