How this site is built

Stack

This site is a Next.js application written in TypeScript with React, styled with Tailwind CSS and hosted on Vercel. Every page is generated at build time. The only server code is the contact form, which hides itself when it is not configured.

Why it is built this way

• Static pages. A portfolio changes when the resume changes, not on each request, so every route is built once and served as files.
• Content as data. Resume text lives in typed data files and case-study prose in MDX; components carry none of it. A content test fails the build on invented metrics, certification wording and straight quotes.
• Demos that load late. Each demo in How I build fetches its own code only when it nears the screen, so none of it weighs on the first load.
• Motion with rules. CSS draws the hero and the diagrams; the Motion library runs section reveals, hover springs and tab indicators. Every animation runs once, moves only transform, opacity and stroke, and switches off when the system asks for reduced motion.
• Icons and marks. Interface icons come from Phosphor; technology marks come from Simple Icons, in one colour. Microsoft products are named in text.

Design

The visual language borrows from threat-model diagrams. A dashed line is a trust boundary, a solid arrow is a request, and a dotted arrow is an asynchronous message. Steel blue is the only interactive colour; green and red appear only where an authorization decision is permitted or denied.

Accessibility and testing

Unit tests in Vitest check the content rules and the geometry of every architecture diagram. Playwright runs the end-to-end tests in Chromium and WebKit on every push: axe checks each page for accessibility violations, and the tests walk each demo by keyboard, check its announcements, and check that nothing moves under reduced motion. Lighthouse CI then measures the built site and fails the build when it goes over budget; its latest numbers are below.