Article · · 2 min read
The deterministic plate
For most of its life this index was the best-looking thing here, and the project pages were its quiet embarrassment: title, summary, a stack list, a status dot. Correct, but weightless. Every portfolio solves this the same way — with screenshots. We went the other direction and let each project draw its own surface instead.
Why not screenshots
- They rot. The work changes; the image does not. A stale screenshot is a small lie rendered at full fidelity.
- They leak. Half of what we build is private by design. Screenshots drag interiors across the boundary.
- They perform. Staged states, curated scroll positions, the same three devices. That is marketing wearing engineering clothes.
What draws instead
Each project detail page opens with a plate — a hairline-framed surface running the same atmosphere recipe as the shell, with one of three compositions: zenith, aurora, or tide. Which one a project gets is not a choice anyone makes. It is hashed from the slug:
function plateVariantForSlug(slug: string): PlateVariant {
let hash = 5381;
for (let i = 0; i < slug.length; i += 1) {
hash = (hash * 33 + slug.charCodeAt(i)) % 100_003;
}
return plateVariants[hash % plateVariants.length];
}
Deterministic across builds and runtimes: the same slug always lands on the same composition, so the plate behaves like a property of the project rather than a mood of the deploy. Adding a project means adding an entry — no art direction session, no asset pipeline, nothing to forget.
Rules the plate follows
- It carries no information. It is
aria-hiddendecoration. Every fact about the work stays in the text, where facts belong. - It borrows, never invents. The gradients, the inner highlight, the radius — all lifted from the shell's existing tokens. Green appears only as the whisper it is everywhere else here.
- It costs nothing. Pure CSS, one rise on mount, silenced entirely under reduced motion.
A screenshot promises what a page will keep looking like. The plate states what the system is. One of those expires.