My first portfolio was a love letter to everything I enjoy: ambient tracks, time-of-day background video, an audio visualizer, a glowing cursor and a typing animation on every page. It also shipped 175 MB of media. On a phone over mobile data, most visitors never saw the content.
What the numbers said
- Nine background tracks (~80 MB) and ten videos (~100 MB) sat in
public/. - Every page waited behind a loading screen.
- The people I most wanted to reach, hiring managers and clients, open links on their phones between meetings.
The rules for v2
- Content first. My name, what I do, what I’ve built and how to reach me, readable in five seconds.
- Budgets, not vibes. Under 500 KB for the home page, under 50 KB of JavaScript, LCP under 1.5 s on a mid-range phone.
- Motion that serves. Small, fast transitions; nothing that blocks reading; all of it off for people who prefer reduced motion.
The stack
Astro renders everything to static HTML. Fonts are self-hosted and subset. Colors come from a script that generates every in-between tone at an exact contrast ratio, so nothing is eyeballed.
const ink = new Color({ name: "ink", colorKeys: [NAVY, CREAM], colorSpace: "OKLAB", ratios: { "fg-muted": 6.5 } });What I’d tell myself a year ago
A portfolio is a document with a little personality, not a demo reel. Ship the document first.