Build notes · 2026-07-15
How the portfolio hub was built
This page is the index of every showcase in the series — and, per the series convention, it documents itself. Here is where the design came from, what drives the cards, and how it was verified.
The pattern: a portfolio homepage
The direct inspiration is the fable-25 portfolio homepage — a hub over ~105 AI-built sites. Its technique, read live from the DOM: each card is a single anchor carrying data-tags, holding a lazy-loaded webp screenshot (real pixels, not an iframe), a serif title, a one-line description, and a small mono technique tag; a sticky pill bar filters cards by matching data-tags; a stat strip up top sets the scale of the collection.
We kept the bones — screenshot cards, tag filters, stat strip — and changed two things. First, every entry here links its build guide right on the card (fable-25 keeps guides one click deeper). Second, the layout is a full-width ledger of horizontal entries rather than a masonry grid: six pages deserve dossier rows, not thumbnail soup.
Its own style, on purpose
The series rule is that no two pages share a style — and the hub frames the range instead of competing with it. So it borrows from none of its entries: no WebGL, no particles, no ivory journal serifs. The identity is a studio ledger — Swiss-index typography (Archivo black weights + IBM Plex Mono), a graph-paper hairline grid, hairline-ruled entries with ghost entry numerals, a rubber-stamp corner mark, and one gold marker-highlight in the headline.
The palette is the Zero2Webmaster brand under its accessibility rules: the bright brand green #82C92B appears only as fills, markers, and outlines; anything green that must be read uses the darkened text tier #4a7a10 (5.1:1 on white); the brand gold #FFD700 is never text — it exists as the headline highlight fill and the booking button.
One JSON file drives everything
The cards are not hand-written HTML. A single pages.json registry holds every page's title, URL, guide URL, brand, style tags, date, and thumbnail reference; a small build.mjs bakes it into the page between marker comments — cards, filter pills, the stat strip, even the structured-data ItemList. The numbers in the hero are computed from the data, so they can't drift from the ledger.
Design intent: when a real content-management system takes over page tracking, it only has to emit this same shape — the hub re-bakes and nothing about the design changes.
Everything is still fully static: the baked HTML ships complete, filters are a progressive enhancement (no JavaScript, no problem — you just see all six entries), and entrance fades respect prefers-reduced-motion.
Real screenshots only
Every thumbnail is the actual page, loaded live in a real browser at 1440×900 and captured as webp — WebGL shaders rendered and all. No mockups, no placeholder art. The screenshots double as an honesty check: if a page's hero doesn't sell itself at thumbnail size, that's a finding.
Verification
- Three screenshot-critique passes at desktop (1440×900) and mobile (390×844) sizes, checking the pixels — spacing, widows, filter states, hover states.
- Programmatic audit each pass: zero console errors, exactly one
h1, alt text on every image, computed font size of every text role ≥ 20px, no horizontal overflow. - Link-contrast check on this light ground: all text links use the AA green-ink tier; the reduced-motion render was verified separately.
- The full SEO baseline: per-page metadata, Open Graph image, CollectionPage + ItemList structured data, and sitemap entries.