Building the landing-page variant gallery
(Sample post — placeholder content for the new posts collection.)
This site’s front door is not one landing page but a gallery of them: each variant is a self-contained, full-screen experiment that inlines its own markup, styles, and script. No shared layout, on purpose — divergence is the point.
The thing that keeps it manageable is a single data file, src/data/variants.ts. Every
variant registers a slug, a label, and a CSS hint gradient that gets painted into its
selector dot. The index gallery, the dot-row selector, and the ENTER button all derive
from that one list, so adding a variant is three steps: create the page, add the entry,
drop in the selector component.
A few things I’d do again:
- One source of truth for the list. The moment two components each kept their own array of pages, they disagreed.
- CSS gradients as thumbnails. No screenshot pipeline, no image assets — each variant’s swatch is a hand-tuned gradient that evokes the real page.
- Gate with CSS, not JS. Hidden features are revealed by a
data-attribute on<html>, set before first paint, so gated content never flashes.