One sheet, every route
- design
- astro
- accessibility
The first version of this site looked like a lot of developer portfolios: gradients, cards, drop shadows, pill buttons, and a different visual idea on every page. None of it was wrong, but none of it helped the work. A personal site has one job — get out of the way of the thing you came to show.
So I rebuilt the whole site as a single sheet.
The constraint
Paper is #f3f3f0. Ink is #111111. One brand-purple stamp, #46174d, marks the ZYNDLY. wordmark and the primary action.
That is the entire palette. There are no cards, no pills, no shadows, and no rounded corners. Sections are separated by rules. Work is a numbered list, not a grid of tiles. Case studies read like documents. Navigation is a set of ruled cells, and Contact is the only cell that gets the stamp.
The constraint is the design. When every new element has to fit a printed sheet, it is much harder to add something that only exists to fill space.
Type and motion
Headlines use Big Shoulders Display at large sizes with tight leading. Body copy stays in Poppins, and code uses Source Code Pro. The scale does most of the hierarchy work, so the page needs fewer colors and fewer boxes.
The homepage is still the one loud moment: a halftone portrait and a horizontal reel that moves as you scroll. That motion is optional. With prefers-reduced-motion: reduce, the reel becomes an ordinary vertical document. Keyboard focus now scrolls the reel to the panel that contains the focused link, so tabbing through the page does not leave focus off-screen.
Build notes
The tokens and shared classes live in src/styles/global.css. Work, Solutions, Contact, Blog, case studies, and the 404 page use the same tokens, so a change to the sheet is a change everywhere. Search runs on Pagefind and is generated at build time — no service, no client-side index to download up front.
Astro keeps the output static. The contact form posts directly to Web3Forms, with a honeypot and client-side validation. There is no database and no server to keep awake.
What is left
Verification is a production build plus headless checks at desktop and mobile widths. One sheet, every route — the simplest rule I have found for keeping a portfolio honest.