Rebuilding my portfolio with Next.js and Keystatic

This site had been running for over a year with little change. The hero showed a 5 MB 3D laptop, pages rendered no server-side HTML at all, and publishing the smallest project meant editing two JSON files and pushing a commit. Here is what changed, and why.

The diagnosis

The starting point was an honest audit: architecture, design, SEO. The biggest problem was not visual.

The invisible SSR bug

Every page was a client component, and the theme provider rendered a spinner until the dark/light preference was read from localStorage. As a result, the HTML served to search engines contained nothing at all. The fix took a few lines (render dark mode by default on the server, reconcile after hydration), but it had to be found first.

The new visual system

The redesign replaced accumulation with a system: an off-black/off-white palette with a single cyan accent inherited from the old identity, the Geist typeface for text and its mono variant for dates and tags, one border radius for cards and pill-shaped buttons.

The 3D laptop and the background video were removed in favor of a purely typographic hero over the starfield. Nine megabytes of assets left with them. Light mode received its own variant, with stars recalibrated to stay visible on a pale background.

Content out of the code

The most structural part is invisible: featured projects and the posts on this blog are files in a content/ folder, edited through a Keystatic admin at /keystatic. In production, every publication becomes an automatic GitHub commit, and Vercel redeploys. Writing this article required neither a code editor nor a command line.

Cross-listing without duplication

A project can appear on the blog with a checkbox, and a post can show up in the featured grid the same way. Everything is written once, and its card always points to its canonical page.