When I started building this portfolio, it was a standard Next.js starter kit—functional, but rigid. My goal was to transform it into a professional Strategic Design System where content lives independently from code. Here is how I moved from local MDX files to a fully integrated Sanity CMS.
1. Centralizing the Brand "Atoms"
The first step was cleaning up the identity. In a design system, you don't want to hunt through five different files to change a typo in your name. I centralized my metadata and social links into a single app/config.ts file.
Now, my SEO titles, footer links, and navigation items all pull from one "Source of Truth." If I change my handle on X or update my bio, it ripples across the entire site instantly.
2. Bridging the Gap to Sanity
To move my blog from local folders to the cloud, I built a custom "Bridge" in lib/sanity.ts. This allowed the application to fetch live data from the Sanity Content Lake. We swapped out the local file-reading logic for GROQ queries, which are much faster and allow for more complex data filtering at the database level.
3. Solving the Next.js 15 Routing Quirk
One of the biggest challenges was adapting to Next.js 15, where page parameters are now asynchronous. By transitioning params to a Promise and using await in my dynamic blog routes, I resolved the persistent 404 errors that happen when the server tries to render a post before the slug has been fully "captured."
4. Designing the Grid
Finally, I applied a strategic design lens to the UI. I replaced the flexible, squishy date columns with a fixed-width typographic "lane" (140px).
By using Tailwind's shrink-0 and items-baseline properties, I ensured that the date and title are perfectly aligned, creating a strong vertical rhythm that guides the reader’s eye.
Why this matters
By removing hardcoded strings and local file dependencies, I’ve created a portfolio that I can manage from my phone via Sanity Studio, while keeping the high-performance benefits of a static Next.js site.
ps. Building this in two days with AI.