The Archive
This site: shanebogue.com rebuilt as an archive of my work
Problem
The first version was a generated template with filler stats and copy. I wanted a site that reads like an exhibition, not a resume, and one place to enter my work that updates the site, the resume and the book together.
Approach
A written build brief sets the rules: typography as structure, whitespace as content, a strict grid and nearly invisible motion. Every departure from the brief goes into a decision log with the reason. Built with Astro, Tailwind and self-hosted fonts. The dock is a real nav that works with JavaScript off; motion is layered on only when it is allowed. The data files use the same field names as the Payload CMS collections they will move into.
Process
5 dated steps, from the project’s history
-
The template version
Uploaded a site generated with v0.app. Its stats and hero copy were filler and were thrown out.
-
Milestone 1: foundation
Astro 7, ink and paper color tokens with no accent hue, the type system and the grid. Archivo's width axis was dropped to keep 54 KB off the first paint.
-
Theme fade, tried twice
A crossfade between themes broke the toggle both times, because any transition on a theme token stayed pinned to the outgoing theme. The swap is instant now.
-
Milestone 2: the dock
A static nav with a small motion module layered on top. Measuring the dock itself at phone width caught an overflow that page-level checks missed.
-
The book and the data
Took the "Selected Works" print layout from Figma Make as a starting reference, redesigned the book, and moved my projects, timeline and resume into data files that drive the site and the book.
Results
Built in milestones, each with its measurements and a written handoff. Every page, the resume and the printable book read the same data files.
Lesson
Page-level scroll width doesn't prove a fixed-position element fits the screen; measure the element itself. The decision log records the attempts that failed, like the theme fade, not just the ones that worked.