You found the back room
The system behind this site
Every portfolio is a product. Here’s how this one is put together: the few big decisions everything follows, the tokens and components that carry them, and the voice that ties the words together.
01
Principles: the big decisions
A handful of macro decisions shaped everything else. When a detail was up for debate, these settled it.
01
One loud color, used on purpose
Yellow carries attention: the nav, results, calls to action. Charcoal bands add depth. Everything else stays quiet so the work does the talking.
02
Story before screens
Every case study follows Goal, What I did, Result, then numbered steps with the real work. Skim the cards in seconds or read the whole story.
03
Proof up front
Numbers lead: results strips, stats, badges. If a claim can be a number, it is one.
04
Calm type, clear hierarchy
Two typefaces and a short scale. The ratios come from my original site, so the redesign still feels like me.
05
Designed for thumbs, too
Every page is designed at 390 px with its own type scale, stacked layouts and swipeable strips.
02
Color
One accent, one dark, and quiet neutrals. Every text pairing on the site passes WCAG AA; the one rule that never bends is no yellow text on white (1.6:1).
03
Typography
Two typefaces, eight roles, and a separate scale for phones. Headings use sentence case; only small labels go uppercase, with wide tracking.
Display · Spinnaker
Aa
Friendly and geometric, with one weight. Used for headings, numbers, nav and labels. Never fake-bolded.
Text · Lato Light & Bold
Aa
Light for reading, Bold for emphasis and results. Italic only for quotes.
| Role | Desktop | Mobile | Face | Sample |
|---|---|---|---|---|
| Home hero | 52 px | 38 px | Spinnaker | Sportswriter. Teacher. |
| Page title | 40 px | 28 px | Spinnaker | Hey, I’m Pat. |
| Big number | 38 px | 26 px | Spinnaker | +40% |
| Section heading | 24 px | 19 px | Spinnaker | Story before screens |
| Card heading | 19 px | 19 px | Spinnaker | Map the whole journey |
| Lead | 16 px | 17 px | Lato Light | Twenty years, three career paths. |
| Body | 15 px | 15 px | Lato Light | Collaboration is my superpower. |
| Label | 13 px | 13 px | Spinnaker caps | HIGHLIGHT 01 |
04
Layout & spacing
Few tokens, applied everywhere. Consistency here is what lets four very different projects read as one portfolio.
Content width
1120 px for pages, 1200 px for the home page
Side gutters
20 px on phones, growing to 40 px
Section rhythm
About 120 px between sections on desktop, about 48 px on phones
Breakpoint
One: 640 px. Below it, layouts stack and the mobile type scale takes over
Corner radius
12 px images and small cards · 16 px large cards · 20 px feature cards · full pill for buttons and tags
Bands
Pages alternate white, charcoal and yellow bands to pace long stories
Corner radius
Page rhythm
A case study, top to bottom: nav, story, charcoal highlight, story, contact, footer.
05
The hexagon
One shape, borrowed from the PM mark, ties the system together. It shows up only where it means something: identity, results and milestones.
The mark06
Components
Eight building blocks make every page. Each one has a single job, so a new case study is assembly, not reinvention.
07
Content: voice & tone
The words had a job too: sound like a person, not a résumé. The voice stays the same everywhere; the tone shifts with the page.
Voice
Human, not corporate
Write like I talk. Contractions, first person, a little warmth.
“Big fan of coffee & beer.”
Confident, with receipts
Claims come with numbers or names attached. Proof over adjectives.
“100% of zero-result searches eliminated.”
Plain-spoken
No jargon a recruiter would trip on. Make the complex comprehensible.
“I find the story in the data, then design the product around it.”
Playful, in small doses
One wink per page, never at the expense of clarity.
“Or Patrick. Or McClary. Or P-Mac.”
Tone by context
Home
Warm, punchy
Sportswriter. Teacher. Co‑Founder. Designer.
Case studies
Clear, evidence-led
Goal, what I did, result. Then the work.
Experience
Confident, scannable
Numbers and roles first, details on demand.
About
Personal, playful
Hey, I’m Pat.
Calls to action
Friendly, low pressure
Let’s find our one place to connect.
Writing rules
Lead with the outcome
✓100% of zero-result searches eliminated.
✕Worked on improving search functionality.
“I” for my work, “we” for the team, and name collaborators
✓Mei Hsieh designed the visit itself.
✕The design team handled the visit experience.
Numbers as numerals, tight units
✓Launched in under 5 months.
✕Launched in less than five months’ time.
Calls to action are short verbs
✓Email · LinkedIn · Résumé
✕Click here to get in touch with me
Sentence case for headings
✓Map the whole journey
✕Map The Whole Journey
08
Accessibility: WCAG 2.2 report
Accessible by design, then verified. I audited every page against WCAG 2.2 Level AA and addressed every finding: each criterion below now passes.
Audited November 2026 · Scope: Home, four case studies, Experience, About and this page · Method: code review against each success criterion, calculated contrast for every color pairing, and a second-by-second check of video captions
21/21
criteria met (20 at A/AA, 1 at AAA)
14
passed as built
7
fixed during the audit
0
open issues
| Criterion | Name | Level | Status | Notes |
|---|---|---|---|---|
| 1.1.1 | Non-text content | A | Pass | Every meaningful image has alt text describing what it shows. Decorative images and icons are hidden from screen readers. |
| 1.2.1 | Audio-only and video-only | A | Fixed | The silent Revive prototype walkthrough now has a full text description beneath it, chapter by chapter. |
| 1.2.2 | Captions (prerecorded) | A | Pass | The Texas A&M RFP video has open captions burned into the picture. Checked second by second, they cover all of the narration. |
| 1.3.1 | Info and relationships | A | Pass | One H1 per page, no skipped heading levels, real lists, description lists and table headers. |
| 1.4.1 | Use of color | A | Pass | Color never carries meaning alone: tech adoption, tenure and the career timeline all pair color with text. |
| 1.4.3 | Contrast (minimum) | AA | Pass | Every text pairing is at least 4.5:1. The lowest is gold on cream at 4.9:1; body text is 15:1 or better. |
| 1.4.4 | Resize text | AA | Pass | Text scales to 200% without loss of content. |
| 1.4.10 | Reflow | AA | Pass | Every page is designed at 390 px. Wide diagrams scroll inside their own region instead of the page. |
| 1.4.11 | Non-text contrast | AA | Pass | Every button and control boundary meets 3:1. Outline buttons on charcoal are 3.9:1. |
| 1.4.12 | Text spacing | AA | Pass | No fixed heights on text containers, so user spacing overrides don’t clip content. |
| 2.1.1 | Keyboard | A | Fixed | Sideways-scrolling strips (career cards, photos, journey steps, wide diagrams) can now take focus and scroll with arrow keys. |
| 2.2.2 | Pause, stop, hide | A | Pass | Nothing moves, autoplays or auto-advances. Carousels and the slide deck move only when asked. |
| 2.3.3 | Animation from interactions | AAA | Fixed | Smooth scrolling and transitions turn off for people who set “reduce motion.” |
| 2.4.1 | Bypass blocks | A | Fixed | Every page has a main landmark and clear headings to jump between. Inner pages also have a “Skip to content” link; the home page’s nav is three links, so it relies on the landmark. |
| 2.4.2 | Page titled | A | Pass | Each page has a unique, descriptive title. |
| 2.4.4 | Link purpose (in context) | A | Fixed | Repeated “Read the case study” links on Experience now name their project for screen readers. |
| 2.4.7 | Focus visible | AA | Fixed | A two-tone focus ring (charcoal with a yellow halo) stays visible on yellow, white and charcoal backgrounds. |
| 2.5.8 | Target size (minimum) | AA | Pass | The smallest targets are the carousel dots at 32 × 44 px; the minimum is 24 × 24. |
| 3.1.1 | Language of page | A | Pass | Every page declares English. |
| 3.2.3 | Consistent navigation | AA | Pass | The same nav, in the same order, on every page. |
| 4.1.2 | Name, role, value | A | Fixed | Icon-only buttons are labeled, and the Bose slide deck now announces each new slide. |
Keeping it that way
New content goes through the same checklist before it ships: alt text for every image, captions or a text description for every video, and contrast checked for any new color pairing. Next on my list is a hands-on pass with VoiceOver and NVDA to confirm the experience, not just the code.
That’s the system. Now see it at work.
Back to the work →