Skip to content
All work

This site

2026

A deliberately small portfolio: no framework theatre, no megabytes of decoration.

The homepage of this portfolio site.

Problem

The previous version of this site shipped 8.7 MB of decorative background images and six overlapping animation libraries to render three pages of text. It looked busy and loaded slowly, which is the opposite of what a portfolio should demonstrate.

Approach

Rebuilt on the Next.js App Router with Tailwind v4 and no animation library at all — the motion here is CSS transitions with custom easing curves, which run off the main thread and stay smooth. The atmosphere the old site bought with megabytes of JPEGs is now a four-kilobyte inline SVG. Dark mode resolves before first paint, so there is no flash.

Result

Static HTML on every route, a fraction of the previous JavaScript, and motion that respects prefers-reduced-motion throughout. Every change was checked against the rendered page before it shipped — horizontal overflow measured at six widths, scroll reveals checked for content left stranded part-faded, the page transition timed end to end — which is how three defects that read fine in the diff got caught. The README documents the decisions that are load-bearing and silently breakable, because the cost of a change is set by whether the next person can see the trap.

Walkthrough

The masthead, once the entrance animation has settled.
The masthead, once the entrance animation has settled.
Selected work: one lead project, then the rest paired.
Selected work: one lead project, then the rest paired.
A project card under the cursor, mid-zoom.
A project card under the cursor, mid-zoom.
The project page the card expands into.
The project page the card expands into.
The write-up, with the facts in a rail beside it.
The write-up, with the facts in a rail beside it.
How I work, as numbered rows rather than a list of adjectives.
How I work, as numbered rows rather than a list of adjectives.
The stack, grouped by what each part is for.
The stack, grouped by what each part is for.
The same page in light mode.
The same page in light mode.

Before / after

The previous portfolio homepage: a full-bleed abstract image behind large introductory text.
Before8.7 MB of decorative imagery, six animation libraries, scrolling disabled site-wide
The current portfolio homepage: name, role and summary in plain type above the project list.
AfterA 4 KB inline SVG in place of the imagery, no animation library, every route prerendered as static HTML

Both screenshots are the homepage at 1271×907, captured the same way, so the difference is the design rather than the framing.