From-Scratch Build · Web / Portfolio

Portfolio Studies

A developer's portfolio is the one site that has to sell you — and there's no single right way to build it. Portfolio Studies is a set of personal-site takes, each exploring a different answer: minimal vs expressive, content-first vs visually-led, fast vs flourish. I built them from scratch because the portfolio is where front-end craft and self-presentation meet, and both are worth practising deliberately.

HTML / CSSResponsiveTypography AccessibilityPerformanceDesign systems

What it is

The same brief, told several ways

Every portfolio answers the same questions — who are you, what have you made, how do I reach you — but the how is wide open. These studies treat that openness as the exercise: take one person's work and present it through distinct lenses. One leans editorial and typographic; another is grid-led and visual; another strips everything back to fast, accessible, content-first essentials.

Holding the content fixed and varying only the presentation is what makes it a study rather than just "a site." It isolates the real variables — layout, hierarchy, type, motion, restraint — and shows how much the same material can change in feel depending on the choices around it.

1 → many
one set of work, several presentations — isolating design choices to see what actually changes the impression.

The craft

The variables a portfolio is made of

Front-end fundamentals, in service of a first impression.

structure

Layout & hierarchy

What the eye lands on first — the spatial decisions that guide a visitor through your work.

type

Typography

Type pairing, scale and rhythm — most of a site's character is in its words' shapes.

responsive

Fluid layouts

One design that holds up from phone to widescreen, not three that fight each other.

a11y

Accessibility

Semantic markup, contrast and keyboard support — a portfolio everyone can actually read.

speed

Performance

Fast to load and light on the network — the first impression is partly how quickly it arrives.

consistency

Design tokens

A small system of colour, spacing and type so each study is coherent, not ad-hoc.

Approach

How each study is built

Each variation follows the same disciplined path from brief to polished page:

  1. Fix the content

    Hold the bio, projects and contact info constant across every study.

  2. Pick a thesis

    Choose one idea — minimal, editorial, visual — to organise the whole design.

  3. Build the system

    Define the type, colour and spacing tokens that express that thesis.

  4. Compose

    Lay out the page responsively and accessibly around the content.

  5. Refine

    Tune performance and detail until the impression is exactly right.

Reflection

What building these taught me