The portfolio as a product — information architecture, a reusable design system, and production UI in one loop. Proof of hybrid UX and engineering, not just a project gallery.
Designing AC Design is the meta case study for this site: how I framed the brand, structured content, defined tokens and components, and shipped them in Astro. The living catalog lives on AC Design System; this page tells the why and how.
RoleUX · IA · Front-end
TimelineOngoing · personal brand
PlatformAstro · Tailwind
FocusPortfolio · design system · product thinking
Problem & Opportunity
A portfolio that only shows screenshots under-sells a hybrid designer-engineer. The opportunity was to treat AC Design as a small product: clear IA, a reusable system, and UI that is both the evidence and the delivery.
Starting pointNeed a portfolio that proves hybrid UX + engineering — not just a gallery
ConstraintOne person · limited time · must ship and stay maintainable
OpportunityTreat the site as a product: IA, system, and build in one loop
GoalA living portfolio + reusable AC Design System
Goals & Constraints
Scope stayed tight: ship a credible site and a system others (and future me) can reuse — without boiling the ocean on day one.
Prove the hybridShow research → IA → UI → production code in one place.
Ship a systemTokens and components that power this site and client work (e.g. CCES).
Stay scannableRecruiter-friendly case studies without burying the brand or process.
Solo designer-developer — no separate design ops team
Must reuse patterns across portfolio and product work
Accessible hierarchy and focus states by default
Decisions that translate cleanly Figma → Astro / Tailwind
Process
Structure first, then tokens, then components in code. Each step left an artifact the next step could trust.
IA & content modelNav, page types, and what belongs on Work vs Design System vs About.
WireframesLow-fi structure for home, work index, case studies, and system docs.
Tokens & brandColour, type, space — locked before polishing every screen.
Figma → buildComponents implemented as living UI on the site, not a static style PDF.
Placeholder — IA diagram / sitemap
Placeholder — Wireframe strip (home · work · case · system)
Key decisions
A few choices that shaped both the site and the system — worth calling out for a recruiter scan, not a full design-ops dump.
Green primary + ink navBrand signal that carries across hero, CTAs, and system docs without leaning on trendy purple defaults.
Type scale with purposeDisplay through caption — hierarchy that works for marketing pages and dense case studies.
System page ≠ case studyNav hosts the living catalog; Work hosts the narrative of how it was designed.
Case study patternShared section rhythm (overview → problem → process → outcome) so projects compare cleanly.
Reuse over one-offsButtons, alerts, cards, and nav icons stay token-driven so CCES and portfolio stay aligned.
Iterations
Early frames focused on layout and content types; later passes locked brand, type, and component behaviour in the build.
Before — structure / early framesPlaceholder — low-fi or early hi-fi
After — shipped UIPlaceholder — production screenshots
Placeholder — iteration strip (optional carousel)
Outcome
AC Design is both the portfolio and the system that powers it — a clearer story for hiring managers and a reusable foundation for product work.
Living systemTokens and components documented at /design-system and used on real pages.
Faster iterationNew case studies and client UI inherit the same foundations.
Clearer storyThe portfolio itself demonstrates product thinking — not just screenshots.
Biggest lesson: separate the catalog from the narrative — the system page shows what exists; the case study shows why it exists.
