Psychology-backed design
Design Research
Every design decision in this portfolio is backed by psychological research. This documents the reasoning — from colour choices to layout structure — and why each decision targets a management audience.
Style Guide
Colour Palette
Typography
Spacing Scale
Components
Every page follows: accent label (uppercase, tracking-widest) → large title (4xl-6xl, Inter) → subtitle (lg, secondary colour). Consistent rhythm across homepage, investigations, research, and all-projects pages.
CSS gradient underline at 65%-87% with 12% opacity. Applied via .highlight-title class.
Asymmetric "hand-drawn" radius: 14px 10px 12px 16px. Intentional imperfection signals craft, not carelessness.
Animation Tokens
Colour Psychology
Before
Cold navy accent. Clinical grays.
After
Copper = warmth + craft. Warm stone neutrals.
Why Copper
The accent colour is copper (#b45309) — shifted from cold navy (#000080). Navy reads as "corporate authority," signalling hierarchy and formality. Copper sits in the warm spectrum: it carries the warmth and reliability of a natural material, reads as "crafted" rather than "template," and pairs with warm stone neutrals for a technical-but-human feel. For a management audience evaluating engineering capability, copper unconsciously communicates: "this person is grounded, deliberate, and care about the finish."
Warm metallic accents (copper, brass, bronze) are associated with trust, durability and artisanal quality in product design — distinct from the "clinical" read of cold blues and greys.
Warm Neutrals vs Clinical Grays
Backgrounds shifted from pure white (#fafafa) to warm off-white (#fafaf9), and grays gained warm undertones. Cold grays trigger a subtle "institutional" response — hospitals, government forms, corporate intranets. Warm neutrals feel curated and intentional, like a well-designed physical portfolio.
Warm palettes reduce cognitive friction. When colours feel "comfortable," visitors spend more time on content — the same principle behind why cafes use warm lighting to extend dwell time.
Warm Stone Neutrals
The background is warm off-white (#fafaf9) with warm stone text (#292524) and muted stone (#78716c). Pure-white backgrounds and pure-black text create a harsh, "default template" contrast. Warm stone neutrals keep the reading comfortable and make the copper accent carry the personality — the background recedes, the content leads.
Off-white backgrounds with warm grey text reduce glare and eye strain for extended reading, while warm undertones keep the page feeling considered rather than sterile.
Typography Decisions
Single typeface
Inter
One typeface throughout — headings and body
Body
Inter
Optimised for screens, tall x-height
Size Scale
Inter for Headings
A geometric sans-serif that reads as technical without being cold. Its distinctive character shapes (the angular 'a', the square-ish 'g') signal "this person cares about design decisions" — important for demonstrating attention to detail.
Serif fonts signal tradition (The Times, The Economist). Geometric sans-serifs signal modernity (tech). Inter is geometric enough for modern, characterful enough for human — avoiding the "generic template" feel of Roboto.
Line Height & Readability
Inter was designed for screen readability at small sizes. The 1.7 line-height gives paragraphs breathing room — neither cramped nor wasteful.
Beymer et al. (2008), IBM Research — line spacing of 1.5-1.8x font size produces optimal reading speed and comprehension. The 1.7 multiplier sits in the sweet spot.
Generous Sizing = Confidence
All font sizes deliberately bumped one step above defaults. Generous typography says "I have substance to share." Small, cramped text unconsciously signals "I'm trying to fit everything in" — the hallmark of a junior developer's CV.
Delboeuf illusion — the same object appears larger in a smaller frame. Generous whitespace and larger text make each project feel more substantial. The content doesn't change, but perceived value increases.
Layout & Visual Hierarchy
F-Pattern Eye Tracking
F-Pattern Scanning
The home page grid follows the natural F-pattern: visitors scan horizontally across the top, then move down the left side. The hero title sits at the first fixation point. The 3-column card grid ensures the first row gets the most attention.
Nielsen Norman Group eye-tracking studies — the first two items in a grid receive 80% of initial attention. Project ordering matters more than alphabetical or chronological.
Card Design: Endowment Effect
Each project as a self-contained card leverages the "endowment effect" — when items feel like discrete, tangible objects, viewers assign them more value than a flat list. The hand-drawn border radius (14px 10px 12px 16px) adds organic imperfection.
Aesthetic-Usability Effect research — slightly imperfect designs are rated as both more trustworthy and more creative than pixel-perfect ones.
Inverted Pyramid Detail Pages
The detail page uses journalistic "inverted pyramid" structure: title, images, and lead description first. The short description has an accent left border as a "pull quote." The first paragraph is emphasised to hook readers before supporting text.
Management typically spends 30-60 seconds on a project page. The inverted pyramid ensures the value proposition lands immediately. The sticky sidebar keeps the call-to-action visible at all scroll depths.
Highlighter Effect
The CSS highlighter underline uses a gradient band (65%-87%) at low opacity (12%). This mimics a physical highlighter pen — a universal signal for "this is important." The slight imperfection triggers the "hand-made" heuristic.
Processing Fluency theory — moderate complexity (not too simple, not too complex) produces the most positive aesthetic response. The highlighter sits in the optimal zone of "intentional but natural."
Interaction Psychology
Micro-interaction Timeline
Hover Micro-interactions
Cards lift 1px on hover with enhanced shadow. This leverages "perceived depth" — objects that float above the surface feel interactive and valuable. The image zooms slightly (105%), providing a "living" preview.
Tuch et al. (2012) — subtle animations improve perceived quality by 15-20%. Transitions under 300ms and movements under 4px feel responsive. Larger movements feel sluggish.
Airbnb Gallery Pattern
The image grid (hero left, smaller images right) is one of the most recognised gallery patterns on the web. Using it reduces cognitive load — visitors immediately understand they can click to see more. Fade-in on load prevents jarring "pops."
Jakob's Law — users spend most time on other sites and prefer yours to work the same way. The Airbnb pattern is internalised by billions of users. Zero learning curve.
Playable Games: The IKEA Effect
Embedding playable games transforms the viewer from passive observer to active participant. The "Play Game" button uses a gradient that draws the eye, and the pulsing icon creates urgency without being obnoxious.
Norton et al. (2012), IKEA Effect — people value things more when they've invested effort. Playing a game transforms a portfolio entry from a claim into evidence.
Management-Specific Signals
What Management Looks For
Breadth vs Depth Signalling
Projects across TypeScript, Python, Go, C, and Kotlin signal adaptability and T-shaped expertise. Language badges on each card make this breadth immediately visible. For management, this means: "can pick up any domain quickly."
Tetlock (2005), "Expert Political Judgment" — "foxes" (broad knowledge) consistently outperform "hedgehogs" (deep specialists) at prediction and adaptation. A single-language portfolio suggests rigidity.
End-to-End Delivery
"From architecture through to working software" — every project has running code, not just design documents. This directly addresses the management concern: "can this person actually ship?"
"Completion bias" — we evaluate past projects as predictors of future performance. 87 completed projects signals a shipping culture. One unfinished ambitious project is psychologically worse than ten shipped small ones.
The Halo Effect
The site itself is a meta-demonstration. Attention to colour, typography, animation, and responsive design shows this engineer understands the full user experience. For management evaluating senior candidates, this signals leadership capability and product thinking.
Thorndike (1920), Halo Effect — a well-designed portfolio biases viewers to rate contained projects more favourably. A beautifully presented mediocre project is rated higher than a poorly presented excellent one.