Colophon
How this site was built.
A short, honest breakdown of the stack, the workflow, and who did what. The AI-augmented workflow this portfolio talks about is the same one that shipped it.
Colophon
A short, honest breakdown of the stack, the workflow, and who did what. The AI-augmented workflow this portfolio talks about is the same one that shipped it.
Framework
Astro 7
Static-first, zero JS by default, content-focused. Ships lightweight HTML.
Styling
Tailwind CSS 4
Design tokens in CSS, no config file, tree-shaken to a tiny bundle.
Images
Cloudinary
260+ WebP assets, on-the-fly transforms, DPR-aware srcsets for retina.
Hosting
Cloudflare Pages
Free tier, global CDN, HTTPS out of the box, auto-deploys from GitHub.
Source
GitHub
Version control + trigger for Cloudflare Pages builds.
Editor
VS Code + Cowork (Claude)
Local editing plus a Claude session with file + shell access.
A small, opinionated set of tokens shared across every page — the same values live in global.css.
Background
#F3F4F6
Near-white canvas — launchnow.design-inspired, easy on the eyes
Ink
#0A0A0A
Body copy + headlines, high contrast on the light bg
Muted
#4B5563
Secondary text, metadata, captions
Accent
#F25C24
CTAs, links, active states — preserved in both light + dark
Footer / Dark bg
#1C1B1A
Warm charcoal (Claude-interface family), not navy or pure black
Typeface
Manrope 400 / 500 / 700 / 800
Geometric sans with tight tracking on headlines — modern without being sterile.
Radius
8px · 12px · pill
Buttons 8, cards 12, CTAs full-round. Kept small tokens; no random values.
Corners
Squircle (superellipse 3)
iOS-style corner-shape on rounded cards where supported — quiet upgrade, falls back to normal radius elsewhere.
Dark mode
Warm charcoal, orange kept
Same family as the footer — never navy. Accent orange is identical in both modes, so the brand reads the same.
How the work actually got done — the process behind the pixels.
Pair with Claude via Cowork
Claude has direct file + shell access to the repo. I keep the taste line and review every change in-browser; Claude writes the code, debugs, and proposes UX improvements.
Versioned local archives before every edit
Each substantive change gets a numbered snapshot in `/archives/vNNN_.../` with a README and the exact rollback command. 75+ checkpoints so far — one-click revert whenever an experiment does not land.
Session memory file
A `contexte-portfolio.md` living outside the repo carries decisions, patterns, and next steps across chat sessions. Every new session starts by re-reading it; no restart cost.
Content in Google Sheets, code in Astro
Projects, craft items, timeline and metadata live in a five-tab spreadsheet, parsed by a TypeScript layer at build time. Edit the sheet, rebuild, ship — no CMS to host.
Behance-informed layout, own tokens
Grid + case-study format inspired by Behance; visual tokens come from launchnow.design as a starting point, then narrowed down to what this site actually needs.
Ship in phases, review live
Work sequenced as focused phases (nav → layout → interactions → SEO/backend). Each phase is built, pushed, reviewed on the live URL, then the next phase starts.
Pair-designing with an AI isn't magic — it's a division of labor. Here's how the work actually split.
Claude did
I did
~2 weeks
From empty repo to live site
Real elapsed time — capped by daily Claude session + token limits
75+
Iteration checkpoints tracked locally
17
Pages designed + coded
Solo
Designer + AI-assisted dev
Every project shown here was designed by hand — Figma today, Adobe XD before that, Photoshop and Illustrator in the earlier years — plus Cinema 4D, ZBrush, After Effects and Spline for motion and 3D.
What changed in 2025-2026 is how I ship the surface around the work — this portfolio, its filters, its case-study pages — not the design craft itself.
If you want to see the same workflow applied to your product, that's exactly what the Selected work section is about.