This website
The one project on this page you can audit yourself: view source, run Lighthouse, tab through it.
- Area
- Web apps and websites
- Written
- 2026
- Built with
- Astro
- TypeScript
- Tailwind CSS
- MDX
- Self-hosted fonts
- 100 / 100 / 100Lighthouse accessibility, best practices and SEO, every page
- 99–100Lighthouse performance, mobile profile, across five pages
- 9.4 KBAll JavaScript on a page, gzipped
Inside this project
Why it is here
A new studio’s portfolio has a credibility problem: every claim about craft is unverifiable. So the first entry is the artefact you are already looking at. Everything below is checkable from your own browser.
The decisions
Ship almost no JavaScript
The site is static HTML and CSS with no client framework. All of our own behaviour — scroll reveals, the navigation toggle, the reading-progress line, the section index and the contact form — is one 3.6 KB module. Astro’s view-transition router and link prefetching add 5.8 KB more. Everything degrades: if none of it runs, every page is still complete, navigable and submittable.
Two deliberate consequences of that budget: the reveal system can never leave content hidden (three fallbacks, including a deadline that abandons the animation rather than the content), and all behaviour lives in one module rather than in component scripts, because a component script runs only once under a client-side router.
Own the fonts, and the images, and the icons
Archivo and IBM Plex Mono are self-hosted and subset to Latin, preloaded as
WOFF2 with font-display: swap, and backed by a metric-matched fallback so
nothing shifts while they load. Icons are Lucide SVGs inlined at build time.
Photographs are processed into AVIF and WebP at five widths each. The result
is a site that makes no third-party requests at all — no font CDN, no image
host, no analytics, nothing to disclose in a cookie banner.
Tokens before pages
Colour, type, spacing, shape and motion are defined once as CSS custom
properties and consumed everywhere. Surfaces flip by setting three variables
on a section, which is why the dark bands cost nothing extra to maintain.
There is a component showcase at /design-system that renders every state.
Accessibility as a build step, not an audit
Landmarks and one h1 per page, a skip link, visible focus on every
interactive element, prefers-reduced-motion honoured, contrast checked
against the tokens rather than eyeballed, and the whole site operable from the
keyboard.
One image policy, applied everywhere
Every photograph is public domain, CC0 or CC BY — never share-alike, because all of them are modified. All are rendered monochrome so a dozen sources read as one set, and colour returns only when you hover or focus the link that owns the image. Author, licence and source for each file are published at /credits, generated from the same registry that renders the images, so it cannot fall out of date.
Honest content model
Work entries are MDX with a schema that requires an explicit kind:
client, internal, reference-architecture or concept. The badge you see
on each card comes from that field, so an unproven entry cannot quietly read
as delivered client work.
What it is built with
Astro for static output and content collections, TypeScript, Tailwind CSS v4
for the token layer, MDX for long-form entries, and sharp for image
processing at build time. It deploys as a folder of static files to any host.
Measured, not asserted
The numbers in the strip above were measured on the production build of this
site with Lighthouse 12 against a local preview, on its mobile profile. Page
weight ranges from 75 KB on a text page to 250 KB on the home page, which
carries the hero photograph. The method and the raw output are in
docs/05-verification.md in the repository, so you can re-run them.
Typical architecture