Kick-off: rebuilding my portfolio as a matchday
Why the new site has a player card, a Lagos clock and a Barça mode — and the boring, sensible stack underneath it.
The old site did its job, but it read like everyone else's: big headline, list of services, grid of projects. None of it sounded like me. So this version starts from the things I actually care about — clean code, my kids, and Barça — and builds the site around them.
The idea
Every page borrows from matchday. Projects are the squad, testimonials are post-match interviews, and this journal is a set of match reports. The hero is a player card you can tilt and flip, and the site is dark by default. Switch to Lagos time and it follows my clock instead: warm and light in the day, dark once the kids are asleep.
And when you pick the Barça theme, everything turns blaugrana. Més que un dev.
The stack
Nothing exotic, on purpose:
- Next.js 16 and React 19, with most pages rendered on the server
- Tailwind v4, with each theme as a small set of CSS variables
- Motion for the card, the carousel and the stripe transition
- MDX for these posts, read from the repo at build time
The theme is picked before the first paint, so there's no flash of the wrong colours:
const hour = lagosHour();
const theme = pref === "auto" ? (hour < 7 || hour >= 19 ? "night" : "day") : pref;
document.documentElement.dataset.theme = theme;What's next
Phase two brings the live data: what I'm playing on YouTube Music, minutes played this week, my GitHub form guide, and Barça's next fixture. After that, a guestbook where you can sign the matchball.
Full time for now.