How the site was built.

The current portfolio is a coded editorial system: two flagship stories, fast evidence discovery, a web-native resume, contextual previews, and release gates.

Client
Personal portfolio
Role
Product designer and builder
Tools
React, TypeScript, Vite
Current release
September 2026
Earlier selected-work gallery showing multiple project cards at the same visual level.
Earlier selected-work galleryStrong projects competed at the same level, leaving the reviewer to assemble the hierarchy.

60-second brief · Portfolio product case

A hiring-first portfolio with depth on demand

The problem was not a lack of evidence. It was making the strongest evidence easy to find without flattening the range and craft behind it.

The task looked like visual polish. Without hierarchy and release gates, polish would only make the clutter more persuasive.

EvidenceThe shipped system leads with two flagship stories, preserves supporting work as secondary routes, and validates release quality through a source-backed build report.

Problem

A dense gallery made every project compete equally and forced reviewers to assemble the career story themselves.

Move

Home became the fast hiring read, while case studies, a web resume, and contextual previews carry increasing depth.

Proof

The build checks decision records, accessibility tokens, asset weight, social cards, image descriptions, and rendered copy.

Scope

I own the information architecture, visual system, interaction model, React implementation, content, and release pipeline.

Evidence boundary
This case documents shipped product and engineering decisions. It does not claim hiring conversion or recruiter behavior without observed evidence.

The information problem

A long portfolio can contain strong evidence while still making a reviewer hunt for it. The current redesign makes flagship work, career range, ownership, and proof available at different depths instead of giving every artifact equal weight.

Before and after information architectureThe change is in what a reviewer can verify without assembling it themselves.

Before

A dense project gallery made every item compete at the same level.

  1. Equivalent project cards
  2. Career evidence spread across sections
  3. Static images without contextual preview

Current

The homepage now behaves as a compact hiring decision surface.

  1. Two flagship case studies
  2. Career timeline with contextual photographs
  3. Evidence, ownership, and limits kept together

IA decision: depth on demand

Home carries the fast hiring read. Large flagship projects lead into detailed case studies, supporting work stays compact, and hover previews reveal visual context without expanding the page. A separate web resume holds the complete chronology.

Current portfolio homepage with the headline Design, build, prove and two flagship product case studies.
Current homepageThe live entry point gives flagship work priority, then opens deliberate paths into deeper proof.

Implementation system

The site is implemented in React, TypeScript, Vite, Framer Motion, and Playwright. Shared navigation, pointer-following previews, theme-aware media, route metadata, and release checks keep project-specific pages inside one coherent system.

Implementation systemContent, reusable foundations, and release checks have separate jobs.

Routes

The pages a reviewer can enter and move between.

Case content

Project-specific evidence, decisions, and stated limits.

Shared foundations

Reusable navigation, themes, media handling, and SEO.

Release checks

Build steps that verify the shipped output.

Automated release gates

The build report below is generated from the current build chain. Its gates check the production output instead of relying on a static description of process.

  • Decision record integrity
  • Glass surfaces
  • Color and target size
  • Asset weight
  • Social cards
  • Alt text
  • Rendered copy

Failures caught

These checks exist because the current build report records failures that earlier releases allowed through.

Color and target size

Recomputes contrast for every color token pair in both themes against WCAG AA, and requires interactive text controls to be at least 24px tall. It caught four real contrast defects when it was introduced.

33 checks

Asset weight

Fails on any image over 600KB, any unconverted raster, and any source model left where it would be deployed. Added after the homepage was found shipping 8MB.

20.6MB of 21MB budget

Social cards

Requires every route to ship its own social card, drawn from the site's own type and color tokens and held under 400KB. Added after every route was found sharing a single image, so a shared link never showed the page it pointed at.

41 routes covered

Alt text

Fails on alt text that names a section and a counter, a filename, or a bare noun. Added after thirty two images shipped with descriptions like "Research overview 4", which passed the accessibility gate and still told a screen reader nothing.

28 images described

Scope

I own the portfolio's information architecture, visual design, interaction model, content system, React implementation, and release pipeline. This case documents the product and engineering decisions; it is not evidence of hiring conversion or recruiter behavior.

Limits

Automated checks can verify encoded rules, not whether a reviewer understood the work or whether every accessibility concern has been found. The next meaningful evidence would come from observed hiring-review sessions, not another implementation metric.

Inspect the source-backed build reportBuild chain, gate details, and generated asset totals

Source-backed build report

Generated on 2026-09-04 from the same build data used to describe the current release gates.

Build chain

  1. generate-journal-metadata
  2. tsc -b
  3. check-decisions
  4. build-report
  5. vite build
  6. postbuild
  7. prerender
  8. check-glass
  9. check-a11y
  10. check-weight
  11. check-og
  12. check-alt
  13. check-escapes

Gate details

Decision record integrity

9 records verified

Requires every published design decision to include considered options, positive and negative consequences, and a kill criterion. A decision cannot ship as a preference with the cost removed.

scripts/check-decisions.mjs

Glass surfaces

5 rules verified

Confirms every layered-glass rule survived the CSS build, so the depth treatment cannot be silently dropped by a refactor or an over-eager purge.

scripts/check-glass.mjs

Color and target size

33 checks

Recomputes contrast for every color token pair in both themes against WCAG AA, and requires interactive text controls to be at least 24px tall. It caught four real contrast defects when it was introduced.

scripts/check-a11y.mjs

Asset weight

20.6MB of 21MB budget

Fails on any image over 600KB, any unconverted raster, and any source model left where it would be deployed. Added after the homepage was found shipping 8MB.

scripts/check-weight.mjs

Social cards

41 routes covered

Requires every route to ship its own social card, drawn from the site's own type and color tokens and held under 400KB. Added after every route was found sharing a single image, so a shared link never showed the page it pointed at.

scripts/check-og.mjs

Alt text

28 images described

Fails on alt text that names a section and a counter, a filename, or a bare noun. Added after thirty two images shipped with descriptions like "Research overview 4", which passed the accessibility gate and still told a screen reader nothing.

scripts/check-alt.mjs

Rendered copy

0 literal escapes or em dashes

Fails on visible escape sequences and em dashes in source copy. Comments are ignored, so the gate checks what readers can actually encounter.

scripts/check-escapes.mjs

Generated on 2026-09-04 from 299 images totalling 20.6MB.