How I built this site

Hiring managers and design leaders, who usually scan a portfolio in a few minutes, often on a phone. Published surveys of several hundred hiring managers agree on what they look for: relevant work first, the thinking behind the decisions, and evidence of craft.

A handful of case studies chosen for this audience, not everything I've done. Each one opens with the process I followed and the decisions I made, because that's what a reviewer can't see in a finished screen. Every page works on a phone.

I designed the pages in Figma ↗ (opens in a new tab) and defined a small set of design tokens for color, type and spacing, the same approach I used for Broadcom's design system. I used Claude Code to build the site from my content and direction, and reviewed every change before it went live. It's built to meet WCAG 2.2 AA accessibility standards.

The design system has two layers in Figma and in code, with the same names in both. Mode holds the light and dark colors; Background tells each component which of those colors to use on the surface it sits on. Components never use a raw color, so any component works on any background, in either mode, without a separate design. I wrote a design system guide for the code, so new pages and AI-assisted changes follow the same rules for tokens, states, target sizes and contrast.

View the Figma file ↗ (opens in a new tab)

Whether reviewers find the case study they need in the first minute, and which ones they open.

I checked the site against WCAG 2.2 AA in both light and dark mode, on every background a component can sit on. Text, labels and links have at least 4.5:1 contrast with their background, and large display text at least 3:1. Button text keeps 4.5:1 on the button in every state, and buttons keep 3:1 against the background on hover, press and focus. Focus rings have at least 3:1 contrast and follow each component's shape. Buttons, tabs and standalone links are at least 24 by 24 pixels. Every image has alt text, and the site works with a keyboard alone. Turn on "Show accessibility" in the design system above to see the measurements on any background.

Claude Code ran automated checks on every page in both modes, at desktop and phone sizes: alt text on every image, valid roles and ARIA attributes on buttons, tabs and links, keyboard focus on every control, and contrast for every color pair. I reviewed the results and fixed what they found.

310 color pairs measured: 31 checks × 5 backgrounds × 2 modes. Disabled controls are exempt from contrast under WCAG and are marked as such.