Personal site built with Next.js App Router and exported as static pages for GitHub Pages.
npm install
npm run devnpm run build exports the site to out/. npm run lint checks the source.
The source of truth is the design handoff.
Final copy lives in design/handoff-redesign/content/llms-full.txt. The original
PNG assets and the homepage walk frames are served from public/images/redesign/;
a relative symlink keeps the reference pages' asset paths working. Do not crop or
independently resize a frame set or the five clay object canvases.
The React implementation uses the handoff's fixed palette and Google Fonts through
next/font. next-view-transitions wraps App Router navigation and browser history
in same-document view transitions. Navigation keeps the handoff's easing curves,
with a calmer 240ms exit and 480ms entrance shared by page changes and the mobile
menu. Page changes cross-fade without shifting the whole viewport vertically.
Unsupported browsers navigate normally. Reduced-motion preferences disable the
transitions and animation, and show the seated family immediately.
The family plays once per browser document, including client-side route revisits. One six-frame walk cycle carries the family a few steps into place and stops with their legs together, then steps into seven unified frames that settle the final stride, stagger the crouch, turn the family toward the viewer, and settle into a seated portrait without a standing hold. Every pose changes as a clean stop-motion cut so separately rendered frames never overlap or produce double silhouettes. The sequence waits for every image to decode, and compositor hints are enabled only while it plays. Positioning is recomputed from the live hero rectangle on layout and resize.
At 820px and below, the homepage pairs the name with a larger family illustration and a mountain backdrop with a small sun and two clouds. The sky keeps its slow ambient timing, with cloud drift scaled down to the mobile artwork. A shared full-canvas frame preserves the family's registration and shared ground line. The softer mobile ground shadow sits outside the frame so its blur can fade naturally. The title and full-width introduction follow, then three stacked link rows. This is an approved responsive refinement of the handoff's layout. The mobile header uses a single wordmark/Menu row. Its inline navigation disclosure expands and fades smoothly in both directions, including interrupted toggles. Closing links immediately become inert, before the visual collapse finishes. It supports keyboard access, Escape, and automatic closure when the route changes. When navigating, the old menu stays steady for the page-transition snapshot instead of collapsing underneath it.
The header's title-case Domine wordmark is distinct from the monospaced location caption. The copyright footer shows only the year. At 820px and below, About, Always Learning, and My Tinkering end with two full-width previous/next rows, following Home / About / Always Learning / My Tinkering / Home. Project details end with one back-to-My-Tinkering row. These links share the homepage's component, copy, and styling; the homepage keeps its existing three choices. Bottom navigation stays in the content flow and is hidden on desktop.
The known open items remain intentional, including the desk art without ground shadows and the generic monitor. The redesigned navigation covers the seven handoff pages; existing off-the-clock, contact, and Daily Debriefer URLs remain available.
npx playwright install chromium webkit
npm run test:redesignThe regression suite runs in Chromium and WebKit. It starts a local dev server and
covers all seven pages, phone and desktop layouts, contrast and image semantics,
the family sequence, live positioning, reduced motion, and client-side route transitions.
To check a separately served production export, set PLAYWRIGHT_BASE_URL to that
preview's URL. The export server must resolve extensionless routes to their .html
files, as GitHub Pages does.
WebKit viewport checks are not a substitute for a physical iPhone check. Before release, also verify scrolling, touch navigation, orientation changes, and the homepage illustration in Safari on a phone.