Process · Meta case study

Designing a portfolio for the AI era

This site is my third case study. It was researched like a product, designed with a documented system, and built in code — every section below is the receipts.

Discover

First, I researched the people who'd judge it

Before a single pixel, I treated hiring itself as the problem space. The 2026 landscape, from industry hiring research and NN/g's State of UX, in four findings:

01

The first reviewer is often an algorithm

Most recruiters now run AI-assisted screening before a human opens your site. Structure, headings, and written proof of impact clear that filter — hero animations don't.

Humans give you ~30 seconds

A hiring manager should learn what I do, my level, and see a path to my work in half a minute. Everything experimental lives off that path.

Judgment is the differentiator

What AI can't automate: taste, contextual understanding, and careful trade-offs. So every case study here has a dedicated trade-offs section — the hard calls, not the framework.

AI fluency is now a hiring filter

Design managers increasingly screen for it. The answer isn't claiming AI skills — it's documenting a real AI-assisted workflow. This page is that documentation.

Define

The rules the site lives by

The hiring path is sacred — nothing decorative may slow it down. Honesty is a design feature: shipped work and concepts are labeled, and metrics say whether they're measured or attributed. Motion must guide the eye or it gets cut. And accessibility is a core feature, not a checklist — this site's body typeface was literally designed for legibility, and every animation respects reduced-motion preferences.

The design system

A living system, rendered from its own tokens

Nothing below is a screenshot. Every swatch, type sample, and component is the real thing, rendered from the same CSS custom properties the whole site runs on — change a token, and this page changes with it.

Color

--bg-0

#0b0d0f

Page background

--bg-1

#121517

Raised sections

--bg-2

#191d20

Cards & tiles

--ink

#eef2f0

Primary text

--ink-2

#a9b3af

Secondary text

--ink-3

#6f7975

Captions & labels

--lime

#b6f04d

Growth — the signature accent

--cyan

#4ae3ff

Interaction & links

--coral

#ff6f61

Warmth & warnings

Case studies layer their own scoped accents on top — Family Dollar's retail orange and navy, SCOUT's volt green and gold — so each project keeps its brand while the skeleton stays consistent.

Typography

Bricolage Grotesque

Display — headlines with a human irregularity to them. Confident, not corporate.

Atkinson Hyperlegible

Body — a typeface developed with the Braille Institute and designed for maximum legibility. Accessibility, load-bearing.

IBM Plex Mono

Utility — labels, metrics, and data. The site's "measurement" voice.

PRESS START 2P

Game voice — added when the Garden shipped. Reserved strictly for play surfaces: game HUD, shop, toasts, and the glowing Garden nav tab. If it's rendered in this face, it's part of the game layer.

System growth: what the Garden taught the tokens

The system was designed to be grown, and the Garden forced its first real expansion. Three new semantic roles earned their place:

  • Coral = "live signal." The NOW ticker on the homepage and gloomy failure states in the game timeline. Red family means happening or heartbreaking — never decoration, and deliberately scarce so it keeps its pull.
  • Pink = "play & personality." The goo blob, super-tier glow, epic pulses. Warmth the original lime/cyan pairing couldn't reach.
  • Pixel components. Hard-shadow buttons, inset borders, in-world tooltips, and the top-right toast — a parallel component family that signals "this is a toy" without ever leaking into case-study surfaces.

The rule that made it safe: game tokens may reference site tokens, never the reverse. The portfolio stays calm; the Garden gets to be loud.

Core components

ButtonsSee my workHow I think
Honesty badgesShipped productConcept project
EyebrowSection label
Media tileOne consistent frame for every image on the site — same border, surface, and caption treatment across all case studies.

Motion

  • Reveal600ms ease-out rise, staggered 70–120ms across grids
  • Parallaxtransform-only drift, factors capped at ±0.06
  • Count-ups750ms on load for hero stats, 1.2s on scroll for outcomes
  • Reduced motionevery animation dies instantly — non-negotiable

The AI-era part

Where AI accelerated — and where it wasn't allowed to

This portfolio was hand-built in code (Astro, TypeScript, vanilla CSS). I directed every decision — what got built, what got cut, and what shipped — and reviewed and rewrote whatever didn't meet the bar. The judgment calls are the part that's mine.

AI accelerated

  • Synthesizing hiring research across sources in minutes
  • Scaffolding the codebase, components, and build tooling
  • Batch image processing — cropping, upscaling, optimizing
  • First drafts of structure and copy to react against

Judgment stayed human

  • What to cut: distorting nav animations, fully-themed "different product" case studies, anything that taxed the hiring path
  • The honesty rules — no invented metrics, concepts labeled as concepts, attribution hedged when memory is hedged
  • Every trade-off narrative: those are my calls, told my way
  • Final review of every line that ships

That's the thesis of the whole portfolio, applied to itself: AI can generate interfaces. Deciding what deserves to exist — that's still the job.