src/pages — routes and design provenance

Routes

RouteFileNotes
/index.astrofive scenes: hero, moon (.s2), About ([data-about]), work deck (.sec5), footer. Motion in src/scripts/home.js. Full ≤720px mobile pass (burger nav, dome moon, reordered About, scaled deck).
/work/work.astroWorkGallery React island (structure preserved by decree, CSS re-skin only)
/writing/writing/index.astro26 cards (24 pieces + 2 ebooks) in the design’s EXPLICIT column order; every card photo-backed via the ART map
/writing/<slug>/writing/[...slug].astroArticle.dc.html template (2026-07-13): fixed right art rail + parallax (src/scripts/article-motion.js), flush-left #0d0d0f card, copy-link, Up-next witem cards. Pull quotes get .pull from src/lib/rehype-pull.mjs (NOT :has, which ignores text nodes).
/about/, /contact/, /404own files
/lab/hero/archived Fieldwork study, noindex, sitemap-excluded

The ART map flow (single source of card visuals)

src/lib/gradients.js ART[slug] -> gradientFor(slug) returns {img, pos, size, repeat, filter, flipx, back, tint, cardTitle, cat}. Consumers: writings index cards (all fields), article aside (img/pos), keep-reading tiles (tint), homepage deck faces (hardcoded copies of 5 entries in index.astro DECK). cardTitle/cat are DISPLAY copy from the design master; article frontmatter titles are verbatim-sacred and never change.

Design provenance (how changes arrive)

The live source of truth is the claude.ai/design project e42dac88-2790-47d6-b6e1-810604c56e2c (auth via /design-login, read via the DesignSync tool). Master file: Main Portfolio Site.dc.html; motion references: about-motion.js, pin-motion-d.js (version query strings mark iterations). Port design code onto the repo’s GSAP conventions — never copy its rAF loops or WAAPI calls.

256 KiB gotcha: DesignSync get_file caps at 256 KiB, so the project’s PNGs are unreadable through the API. The workaround: Wryko exports the whole project as a zip into ~/Downloads/Portfolio website wireframe-N.zip; convert what’s needed with sharp (max 1200px webp) into public/. Currently pending: images/hero-mobile.png (mobile hero stand-in uses the desktop art at 74% center).