My Portfolio Website

TL;DR

I migrated my portfolio from a manual, file-based system (markdown files in /public) to a headless architecture using Payload CMS. The result: A zero-friction writing experience with 100/100 Lighthouse scores and automated deployment.

The "Maintenance Tax"

What did my old portfolio site look like? Initially, I managed my project case studies as raw .md files in my public folder. It was designed as a quick, small library for my hackathon projects, but I quickly outgrew it. After a few months, the friction of manual formatting, lack of image management, and "git-push-to-edit" workflow quickly became a headache. I needed a way to manage content that didn't need my GitHub account.

This is what my old portfolio looked like. projects.ts served the markdown project description files to the frontend in JSON format.

Why Payload CMS?

I needed a Headless CMS - an API-first backend that separates content from presentation. I chose Payload CMS because it bridges the gap between a database and a code-first dev experience (DX).

• Integrated DX: Unlike SaaS CMS options, Payload lives directly in my Next.js repository. My content schema is version-controlled via TypeScript.
• Smart Caching: I leveraged Payload’s internal hooks to cache parsed blocks. Instead of expensive re-calls or processing heavy JSON on every request, the site serves pre-optimized payloads.
• Minimal Cognitive Load: This might not matter for some but it really sold Payload for me. The admin panel is clean and localised, allowing me to focus on writing rather than fighting a clunky UI.

After signing in, this landing page showcases the collections that holds your data.

Deployment: Shipping to Vercel

To handle the infrastructure, I chose Vercel for its deployment pipeline.

• Automated CI/CD: Every push triggers a strict linting and build process, ensuring the production site never breaks due to a content typo.
• Actionable Insights: I integrated @vercel/analytics to track project engagement. This gives me production-grade metrics on which projects are catching the most eyes - all within the free tier.
• Edge Optimization: Leveraging Vercel's global edge network ensures that these project descriptions load instantly, regardless of the visitor's location.
• Free tier: Perfect for small projects like a portfolio site.

The Result: A Zero-Friction Workflow

The transition transformed my portfolio from a "static site that’s hard to change" into a scalable, pro-tier blog platform.

• The Stats: Sub-second page transitions and a 100/100 Lighthouse performance score.
• The Tech Stack: Next.js (App Router), Payload CMS, TypeScript, Tailwind CSS, and Vercel.