Skip to content
Index

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-hidden decoration. 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.