Introduction
A personal portfolio is more than just a digital resume — it’s a place to showcase skills, projects, and personality. I wanted my portfolio to be fast, scalable, and easy to update without touching code every time I add a project or blog post.
That’s when I decided to build it with:
- Next.js for a high-performance, SEO-friendly frontend
- TailwindCSS for rapid and consistent styling
- Payload CMS for flexible content management
This post covers my entire process — from setting up the tech stack to deploying the final site.
Why I Chose This Stack
1. Next.js — The Foundation
Next.js provides a perfect balance between static site generation (SSG) and server-side rendering (SSR). This was important for me because:
- My portfolio needs fast loading times for better UX and SEO.
- I wanted to integrate dynamic data from a CMS without sacrificing performance.
- Built-in API routes let me create custom backend endpoints when needed.
2. TailwindCSS — Style Without the Mess
Instead of writing custom CSS from scratch, TailwindCSS allowed me to:
- Maintain a consistent design system.
- Build responsive layouts quickly with utility classes.
- Keep my CSS bundle size small by removing unused styles in production.
3. Payload CMS — Headless and Developer-Friendly
I wanted a CMS that didn’t lock me into predefined templates. Payload stood out because:
- It’s self-hosted and runs on Node.js, meaning I control my data.
- The admin dashboard is highly customizable.
- It uses NeonDB as a backend, which I’m comfortable with.
- Content is exposed via an API, making it easy to pull into Next.js.
Key Features I Implemented
1. Dynamic Project Pages
Instead of hardcoding my portfolio projects, I created a Projects collection in Payload CMS with fields for:
- Project title
- Short description
- Tech stack used
- GitHub/demo links
- Images
Next.js fetches this data at build time for SSG and generates project detail pages automatically.
2. Blog Section
I also created a Blog collection in Payload CMS to post technical articles. This not only keeps my site fresh for SEO but also helps me share my learnings.
3. Responsive Design
Using Tailwind’s responsive utility classes, I ensured the portfolio looks great on mobile, tablet, and desktop.
4. Light/Dark Mode Toggle
A simple state toggle combined with Tailwind’s dark mode support made the portfolio feel more modern and customizable for visitors.
Content Workflow
One of the main benefits of using Payload CMS is that I don’t need to touch code to update content.
Workflow:
- Log in to Payload’s admin dashboard.
- Create or edit projects/blog posts.
- Changes are automatically reflected on the site after the next build.
This is especially useful for quickly adding new projects or writing blog posts without redeploying manually.
Deployment
For deployment, I used:
- Vercel for the Next.js frontend — instant builds and global CDN.
- Payload CMS backend + NeonDB for the database.
This setup ensures:
- Frontend is fast and cached globally.
- Backend is always online with a managed database.
Lessons Learned
- CMS integration can be tricky — you need to handle API changes and ensure consistent data structures.
- Tailwind is a productivity booster — but using it effectively requires a well-thought-out design system.
- Static generation with revalidation gives the best of both worlds — speed and up-to-date content.
Conclusion
By combining Next.js, TailwindCSS, and Payload CMS, I built a portfolio that’s:
- Fast for visitors
- Easy to update for me
- Scalable for future projects
If you’re a developer looking to create a modern portfolio, I highly recommend exploring this stack.
💡 Tip: Your portfolio is never truly “done.” Keep iterating and improving as your skills grow.