PageSpeed flagged 470ms of render-blocking requests: all three template
stylesheets plus a Google Fonts request carrying all six families loaded
on every page view, though only one template is active per load (warp
switches reload the page). The head script that resolves the template
before paint now injects just that template's stylesheet (with
blocking=render to avoid a theme flash) and a per-template font subset
loaded off the critical path via the media=print onload swap. Only the
base styles.css remains render-blocking.
Claude-Session: https://claude.ai/code/session_011XPqEdbBpGpuD6PucEuU7E
- Removed the cosmos turtle (CSS rules + auto-load probe + JS hook).
Reduced-motion turtle branch removed too.
- ?template=editorial|swiss|cosmos URL param now wins over the value
in data/links.json (and the cached localStorage fallback). Wired in
both the pre-paint boot script and main() so deep links work
without flashing the wrong template.
- New hidden easter egg: type the letters w-a-r-p anywhere on the
page (no input focused) and the page reloads on the next template
in the cycle editorial -> swiss -> cosmos -> editorial. The URL is
updated with the new ?template= param so the override survives
refresh and is shareable. A small "↯ <name>" toast pops up after
the reload via sessionStorage handoff, fades after ~2.5s, respects
prefers-reduced-motion.
- README documents both the URL param and the warp keyword.
Third theme template scoped to :root[data-template="cosmos"], joining
editorial and swiss. Set "theme.template": "cosmos" in links.json to
activate.
Background — full-viewport WebGL fragment shader running a 5-octave
warped fBm nebula in indigo/violet/magenta/cyan, with a two-layer
procedural starfield (small dense + sparse blue-white halo) twinkling
on independent phases. Pointer-tracking gravity well subtly perturbs
sampling around the cursor. Pixel ratio capped at 1.5x for fill-rate;
loop pauses on visibility change.
UI — Orbitron display + Geist body, glassmorphic cards with
backdrop-filter, conic-gradient holographic borders driven by
@property --cosmos-hue rotating on hover, gradient-clip section
numbers and project titles, chromatic-split hero last name on hover
(::before + ::after pseudos with mix-blend-mode screen using a
data-text attr), glowing drift-orb in place of the editorial asterism,
animated section-head accent line.
Fallbacks — prefers-reduced-motion or WebGL-unavailable triggers the
.cosmos-static class with a CSS-only radial-gradient nebula and all
heavy animations disabled. Always-dark regardless of theme toggle.
README documents the new template; links.example.json unchanged.
Swiss: drop all-caps on titles, soften heavy ink borders to muted rules
or remove them where background contrast carries the form, balance hero
name weights (smaller lighter first name vs heavier italic last name),
fix unreadable white description text on portfolio hover.
Editorial: enlarge the section "No" mark and set it in italic Fraunces so
it reads as typography instead of a tick, swap the first name into DM
Serif Display for a different J, sharpen the section number caption.
Client tile: contain custom logos at 86% so wide marks like
"The Cooperative Way" stop getting cropped to "operative".
New: optional `date` field on every item type (link/card/portfolio/
youtube/client). Accepts YYYY, YYYY-MM, or YYYY-MM-DD. Rendered
human-friendly with the raw ISO preserved in <time datetime>.
Documented in README and demonstrated in links.example.json.
A hand-rolled linktree alternative — pure static HTML/CSS/JS, no build
step. Drop on any shared host via SFTP and edit data/links.json to update.
Features
- File-driven content via data/links.json (links, projects, YouTube,
client tiles, portfolio pieces)
- Two interchangeable templates: editorial (Fraunces + paper + vermilion)
and swiss (Archivo grotesque, all-caps poster)
- Auto/light/dark theme toggle with no-flash boot script
- Auto-fetched favicons via Google S2 (with image-URL override)
- Lazy YouTube facades (no third-party JS until clicked)
- Adaptive client-logo grid
- Scroll-triggered reveal animations
- ~40 KB total payload, ~12 KB gzipped
The repo ships links.example.json as a demo; data/links.json is
gitignored so personal content stays out of the public repo.
Joel Brock