Back to projects

Personal Portfolio (Next.js 14 + Vercel)

Built and deployed a portfolio site to present DevOps case studies clearly, using Next.js 14 + TailwindCSS, with GitHub-driven deployments on Vercel.

Impact

Created a consistent case-study format that shows DevOps work with clear context and outcomes.
Made updates easy to ship through GitHub → Vercel deployments.

I wanted a fast, clean portfolio that shows real DevOps work properly - not just a list of tools - and makes it easy to add new case studies over time.

  • A lot of portfolios list tech but don't show what was actually built or improved.
  • Project write-ups are often unstructured and hard to skim.
  • I wanted a simple deployment workflow so changes go live quickly and reliably.
  • Build a modern, responsive site with a clear layout and solid UX.
  • Use a consistent case-study structure (context → decisions → results).
  • Keep deployments simple (Git push → build → deploy).
  • Make it easy to add and maintain new projects.
  • Next.js 14 (App Router) with JavaScript and TailwindCSS styling.
  • Project content stored in a single data file and rendered into dynamic routes.
  • Project detail pages follow a consistent case-study layout.
  • Hosted on Vercel (free tier) with GitHub integration for deployments.
  • Pushes to GitHub trigger Vercel builds automatically.
  • Production deploy happens on merge/push (simple CI-style workflow).
  • Quick deployments made it easy to ship improvements regularly.
Next.js 14 (App Router)
A bit of learning vs older Next patterns, but cleaner routing and a modern setup.
Data-driven case studies instead of hardcoded pages
More structure up front, but much easier to keep projects consistent and scalable.
Vercel free tier for deployments
Less control than self-hosting, but very reliable deployments and low maintenance.
  • No secrets in the repository; public site contains no sensitive configuration.
  • External links opened safely using standard target/rel patterns.
  • Consistent deployment workflow keeps the live site in sync with source control.
  • Mostly static content reduces runtime issues for the public site.
  • A production-deployed portfolio that presents engineering work clearly.
  • Reusable project template that makes adding new case studies straightforward.
  • Improved skim-ability for recruiters and hiring managers.
  • Add lightweight analytics to see which projects get the most attention.
  • Add automated checks (lint/type checks) before deploy.
  • Add a small test suite for key UI components and routing.