How this site was made

The stack, the techniques, and the deployment behind Volume IV.

One HTML file, no build step. The journal metaphor is carried by the code: every chapter is a hand-set spread with its own grid, and nothing is templated — which is the site's whole argument about photography, made structural.

Plates that ripple

Every photograph sits in a [data-disp] wrapper. On fine pointers a small WebGL canvas is booted over the image: the picture is uploaded as a texture and a fragment shader bends its UVs — a ring ripple radiating from the cursor (sin(d·26 − t·3.4)) inside a smoothstep falloff, plus a faint ambient sway. The intensity eases toward hover with amt += (target−amt)·0.07, so plates feel like photographic paper settling in a developing tray. On touch or with prefers-reduced-motion, the plain <img> is all you get — and all you need.

The contact-sheet rail

The fixed rail on the right is a contact sheet of the volume: five numbered frames, one per chapter, the active frame ringed in slate. It is a position:fixed nav driven by an IntersectionObserver with a -40%/-50% root margin so the highlight flips as a chapter crosses the reading line, not the viewport edge.

Film-edge dividers

Chapters are separated by sprocket strips built from a repeating radial-gradient — no images. The edge markings (TSR·400, frame numbers) are set in letterspaced caps like the rebate of a contact print.

Typography & palette

• Cormorant Garamond for display and italic ledes — a bookish, sharp-serifed voice for a journal that prints arguments.
• Jost (300–500) for text and captions — geometric, quiet, gallery-mannered.
• Palette: paper #FAF8F4, ink #1C1A17, stone #A39D93, linen #F1EDE4, and slate teal #31555E as the single accent.

Image slots

All eight plates are real <img> elements with stable descriptive filenames (assets/chapter-archivist-01.jpg …). They currently hold rendered gradient stand-ins — window-light glows and multiplied shadows with grain — so the layouts read truthfully until the photography is dropped in, file for file, with no code changes.

Deployment

npx wrangler pages deploy set1-b --project-name=set1-b

Static folder onto Cloudflare Pages; Wrangler creates the project on the first deploy. Three self-critique passes (1440px and 390px, five scroll depths each) ran before shipping; findings are logged in NOTES.md.

Designed and built end-to-end by Claude Fable 5.