01
Overview
A security portfolio is judged twice: by what it claims and by how it behaves. So this site is treated like a small security product — every claim is backed by a repo or an authorized-lab write-up, and the design exists to make honest engineering readable, not to distract from it.
The build follows the site's own methodology — build → test → break → learn → secure — including two full design passes after launch: a green-accent rebuild of the five-project catalogue, and an accessibility pass that removed low-contrast gradient words and rebuilt the home page around large clickable project windows.
Source on GitHub (opens in a new tab)02
Design principles
Visible by default
Content never starts hidden. Scroll animations are progressive enhancement — text and cards are fully readable even if JavaScript never runs. An early deployed bug that blanked the home page drove this rule.
Readable on green
Green-on-green fails when anchors are dark. Every gradient stop is luminous (mint → green → teal, ≥8:1), small labels use bright mint, and meta text sits above WCAG minimums.
Animated but calm
The falling-code canvas is sparse, low-opacity, fixed behind content and off for reduced-motion. Decoration never competes with the words.
Honest statuses
Every project carries a truthful status — Live demo, Simulation / lab, or Experimental / WIP — and the copy states exactly what was and wasn't achieved.
03
Design system
A small, consistent system across the whole site:
Colors
#070C09 base, #0D1410 surface, #34D96B accent, mint #74EC9D for small text, teal depth
Typography
Fraunces variable serif (display, 400–700), Inter (body), JetBrains Mono (technical)
Type roles
Serif only at display sizes; sans for reading; mono for labels, chips, eyebrows
Effects
Grain + faint grid + soft glows; film noise overlay kept at 3%
Motion
Reveal 700ms ease, hover lifts, ping/ring on status dots; reduced-motion respected
Security
Strict CSP, no external assets, self-hosted fonts, canvas-only animation
04
Readability pass — the details
- • Gradient display text ships a solid-color fallback — it can never render invisible.
- • Headings use a variable serif with true weights (no synthetic bold).
- • The code-rain canvas sits behind a readability scrim at
-z-10. - • Every route verified 200 locally and in production; audit + CI green.
05
Stack & delivery
Next.js 16 App Router, TypeScript, Tailwind CSS, self-hosted Fraunces + Inter + JetBrains Mono, Vercel deploy with CI, strict CSP via proxy, 16 routes, 0 CVEs.