Skip to content
shaostassen.com

Colophon

This site is one of the projects. Here is how it is built and what I decided along the way.

performance
96
accessibility
100
best practices
100
seo
100

Lighthouse, asserted on every build — not a one-off screenshot

Stack

Next.js 15 (App Router) with React 19 and TypeScript in strict mode, styled with Tailwind CSS 4. Case studies are MDX validated with Zod. Tests are Playwright, including accessibility scans with axe-core. Hosted on Vercel, deployed on every push to main.

There is no database, no CMS, and no analytics. The whole site is a static export — output: 'export' — so it could move to GitHub Pages tomorrow without a code change.

Decisions worth explaining

Static export as a constraint from commit one. Turning it on at the start means nothing can quietly grow a server dependency. It forced one interesting call: the projects filter avoids Next's useSearchParams, because that would replace the prerendered card list with an empty loading fallback in the exported HTML. Filter state is ordinary React state plus history.replaceState, so deep links work and every card is still in the source.

Theming with no dark-mode variants. Colors are semantic tokens declared with the CSS light-dark() function, so components write text-muted rather than text-neutral-600 dark:text-neutral-300. The toggle sets one attribute; an inline script applies a saved preference before first paint so there is no flash.

Content validated at the boundary. Every case study's frontmatter is parsed with Zod during the build. A category typo or a slug that disagrees with its filename fails the build rather than rendering something broken.

Accessibility measured, not claimed. axe-core runs over every route in both themes and both viewports on each test run. It has already earned its place: it caught a reduced-motion rule that zeroed animation durations but not delays, which left content invisible for 240 ms for exactly the users who had asked for less motion.

What I would do next

  • Migrate the Fast Robots lab reports into native MDX so everything lives under one domain and one design system.
  • Add an interactive control-systems demo — a PID or Kalman visualizer — as the one piece of the site that shows rather than describes.
  • Push the remaining case studies past the write-up stage, and revisit the performance score once real images land.

The source, including the build plan and a per-story log of decisions and mistakes, is on GitHub.

see the projects →