How I used Next.js App Router, Tailwind v4, and shadcn/ui to build a production-ready developer portfolio
"Abstract isometric 3D illustration of stacked application interface layers with modern UI design elements and data visualization on dark background"
Photo by Perplexity Labs
4 posts in this series
Feel free to send us a message with your thoughts, or learn more about us!
Series Background: This is the first post in the Portfolio series. . What started as a minimal portfolio has evolved into a production-ready platform with comprehensive security, featuring CSP headers, rate limiting, Redis analytics, background job processing, and extensive monitoring. This series documents the complete journey from initial build to production deployment.
I wanted to build a focused portfolio that is fast to load, easy to iterate on, and simple to host. After trying a few prototypes, I settled on a modern stack that prioritizes , typed data, and tiny bundles.
The Next.js represents a fundamental shift toward server-first rendering. Unlike the Pages Router, App Router makes server components the default, which means:
In this portfolio, I only use client components where it actually matters, theme toggling, the contact form, and a few sprinkle interactions.
src/
├── app/ # App Router pages and API routes
├── components/ # Reusable UI components
├── content/ # MDX blog posts with frontmatter
├── data/ # Typed static data (projects, resume)
└── lib/ # Utilities and helpersNext.js 15 + React 19
TypeScript (strict)
Tailwind CSS v4
shadcn/ui
Everything lands on Vercel with zero manual knobs. Analytics and Speed Insights are on by default, headers are set via vercel.json, and the whole thing stays fast.
Blog posts live as individual MDX files in src/content/blog/, parsed at build time with for frontmatter. This approach offers:
MDX content is rendered with and enhanced with rehype plugins for auto-linking headings and GitHub-flavored markdown.
Search and tag filtering are now live without compromising the stack’s simplicity, and view counts remain on the roadmap.
This was just the beginning. After shipping, I spent time hardening the site for production with security improvements, performance optimizations, and developer experience enhancements.