Colophon
A short tour of the choices behind sergeyfaraday.com. Most of it is plain: Next.js, Tailwind, GSAP. A few details are not.
Next.js 16 on Vercel, App Router, Turbopack. React 19 with strict TypeScript. Tailwind v4 with @theme inline; no CSS-in-JS, no MDX, no state manager. GSAP 3.15 for all non-trivial animation. About 250 pages prerendered statically, including every file-converter combo.
The hero figure above the headline isn't a stock loop — it's me, refreshed every 30 minutes from my Whoop. Sleep, workout, recovery, calm. Click the badge bottom-left for the full self-portrait.
Transparency is real, but not free. Chrome/Firefox/Edge play a VP9-alpha WebM. Safari and iOS can't decode that, so they get an animated WebP fallback — built with webpmux -bgcolor 0,0,0,0 and dispose=1 per frame. Default ffmpeg disposal leaves a ghost trail.
The display headlines look pressed into the page. CSS text-shadow can't do inset; instead the site defines an SVG filter chain (feFlood → feComposite operator="out" → feGaussianBlur → feOffset → feComposite operator="in") once in the root layout and applies it via filter: url(#inset-shadow).
File converter runs ffmpeg-wasm in a worker — every conversion is local, no upload. The route serves Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy so SharedArrayBuffer (required by ffmpeg-wasm) is allowed.
Animations honor prefers-reduced-motion: the engraved-title cycle, scroll-driven entrances, and the snap scroller all collapse to their final state when the OS motion preference is set. A skip-to-content link is in the tab order before the navbar.
The site, both apps, and the companion converter MCP server live in a single repo. The codebase ships its own AGENTS.md and CLAUDE.md describing module boundaries and editing guardrails for AI agents working on it.