Chimes-inspired redesign with interactive strand hero

[nitinitleen1]

Rebuilds the visual language of the site around a tactile, interactive hero, keeping the existing Jekyll content model, warm-paper palette, and archive pages intact. Presentation-layer only — no content migration, no plugin changes, no build-step or framework added.

Design spec: docs/superpowers/specs/2026-08-12-chimes-redesign-design.md (excluded from the published site).

What changed

Structure. The fixed sidebar becomes a sticky top nav. Home is now three anchored sections — a full-bleed hero, recent writing, and a combined books/papers shelf. /blogs/, /bookshelf/, /papershelf/, /courses/, and /talks/ keep their markup and are restyled purely through CSS.

Hero canvas (static/js/chimes.js). Verlet-simulated beaded strands hang from the top edge. Moving the pointer parts them; they swing and settle under gravity. Strand lengths vary across the row so the hem reads hand-strung rather than machined. The RAF loop pauses when the hero leaves the viewport or the tab is hidden, and is replaced by a single static render under prefers-reduced-motion.

Sound. Sweeping across a strand rings it. WebAudio synthesis rather than audio files — a triangle oscillator plus a detuned sine through an exponential decay, pitched from a two-octave pentatonic so a left-to-right sweep plays a run. Muted by default, toggle persisted in localStorage. The AudioContext is only constructed once the visitor opts in, which sidesteps autoplay policy entirely.

About moves into a focus-trapped overlay reachable from every page — Esc and backdrop both close, body scroll locks while open.

Palette keeps the existing warm-paper tokens and adds amber/lacquer accents plus a shadow scale, so rows and cards read as lifted paper.

Files

File
static/js/chimes.js	new — strand simulation + WebAudio chime
static/js/site.js	new — scroll reveals, About modal, scrollspy
static/css/site.css	rewritten; tokens extended, not replaced
_layouts/default.html	top nav, About modal, footer
_layouts/home.html	anchored sections
_config.yml	excludes docs/ from the build

_layouts/post.html is unchanged — the restyle is entirely CSS.

Verification

• bundle exec jekyll build succeeds with no new warnings.
• Screenshotted home, /blogs/, a post page, the About overlay open, and a 500px-wide viewport — all render correctly.
• Measured document.scrollWidth against clientWidth at narrow width: no overflow offenders. (Headless Chrome floors the viewport at 500px, so sub-500 was verified by measurement rather than screenshot.)
• Re-rendered under --force-prefers-reduced-motion: all content visible, no animation, strands drawn once at rest.

🤖 Generated with Claude Code