Case study
This portfolio
The site you are reading. Astro with a two-layer token design system, internationalisation from the start, and eight guards that check the built output itself.
Overview
The site you are reading. It is included because the decisions in it are the same ones I would defend on a client project, and because a portfolio that does not survive its own standards is not much of an argument.
What I own
Design and build.
Complexities tackled
A green build proves almost nothing. Three separate times during this rebuild, a page produced zero output and the build reported success: a content collection whose identifiers no longer carried a locale segment, a component rendering a promise as text, and a set of utility variants that compiled to nothing. Every one of them looked fine in the terminal. The response was eight guard scripts that read the built pages rather than the source, covering search metadata, the design system, accessibility, the skills registry, content rules, portfolio coverage, translation completeness and colour contrast.
Colour decided by measurement, not by taste. Every foreground and background pair in the palette is checked against WCAG contrast on every build, and the guard also asserts that the combinations the system forbids still fail. If a colour drifts far enough that an illegal pair starts passing, the build stops. Where a decision was taken knowingly against the measurement, the guard prints the real number rather than hiding it.
Accessibility found by parsing, not by squinting. The site’s own guard parses each built page and enforces heading order, landmark labelling, accessible names, definition list ordering, tap targets and status announcements. It found a definition list whose terms and values were reversed, which meant the four strongest facts on the home page were being read out backwards.
Every claim on the site is traceable. The counts, the ratings and the project total are derived from records rather than typed in. The project figure in the page header is counted from the content collection at build time, so it cannot drift from what is actually published.
Stack
Astro with the content layer, Tailwind CSS driven entirely by CSS custom properties in two layers, TypeScript throughout, a small amount of Vue for the interactive pieces, self-hosted variable fonts subsetted to the characters used, and build-time social images generated from the same frontmatter the pages use.
Working on something similar?
Tell me what you are building and what is in the way. I will tell you honestly whether I am the right person for it.