How this site is built
A short colophon: Next.js static export, a design system built on CSS custom properties, and why the whole thing ships as plain HTML.
- Next.js
- Performance
- Web
This site is a Next.js App Router project that compiles to a folder of static HTML, CSS and JavaScript. There is no server, no database and no runtime cost.
Why static export
Every page here is known at build time: a homepage, a set of case studies, a
résumé and these notes. Rendering them on demand would add latency and
operational surface for no benefit. output: "export" turns the whole project
into files that any CDN can serve, which also means it deploys identically to
GitHub Pages, Cloudflare Pages, Netlify or Vercel.
The design system is CSS custom properties
Colour, spacing and typography live in src/app/globals.css as custom
properties, mapped into Tailwind through @theme inline. Light and dark mode
are the same tokens with different values, so a component never needs to know
which theme is active:
:root {
--accent: #0e7490;
}
.dark {
--accent: #22d3ee;
}
Content is typed, not hard-coded
Experience, case studies, skills and certifications are TypeScript objects in
src/content/. Adding a role means editing one array, and TypeScript catches a
missing field before the build finishes.
What I optimise for
Three things, in order: does a recruiter find what they need in fifteen seconds, does it work with a keyboard and a screen reader, and does it load fast on a phone on a bad connection. Everything else is negotiable.