How I Built My Portfolio with Next.js 16
A portfolio should be more than a static page
A portfolio is not just a place to show projects. For me, it became a small product where I could test my taste, my engineering decisions, and my ability to build something maintainable.
I wanted this version to feel personal, fast, modern, and useful. Not another static page with a hero section and three cards. I wanted a portfolio that could grow with me.
Why I rebuilt it
My older portfolio worked, but it did not fully represent where I am now as a developer. I wanted something that could show my projects, experience, writing, resume, and personality in one place.
The goal was simple:
Make the site fast and responsive.
Keep the design clean but not generic.
Add a real blog system.
Build an admin dashboard.
Keep content dynamic where it matters.
Make the site easy to improve later.
The stack I used
The main stack is Next.js 16, React 19, TypeScript, Tailwind CSS 4, MongoDB, Mongoose, NextAuth, Cloudinary, EmailJS, Framer Motion, and Vercel Analytics.
I used the Next.js App Router because it gives a clean structure for pages, layouts, API routes, metadata, server components, and SEO-friendly pages.
Building the blog system
The blog was one of the most important parts. I did not want to hardcode articles forever. So I added a MongoDB post model with fields like title, slug, excerpt, content, cover image, tags, status, published date, and reading time.
The dashboard lets me create drafts, publish posts, edit existing content, upload images, and manage everything without touching the codebase every time.
Adding a dynamic resume system
Instead of keeping one static Google Drive link forever, I added a resume upload flow from the dashboard. The resume is uploaded to Cloudinary and stored in MongoDB.
The public resume page reads the latest active resume and shows a modern preview and download experience. This makes the portfolio feel more like a real content-managed website.
Design decisions
I wanted the design to feel modern, but not like every AI SaaS template. The final direction became dark, clean, and warm with a burnt-orange accent color.
The color #F0997B gives the site a creative but professional feeling. It is not too loud, but it still feels unique.
For the UI, I used glassy cards, soft borders, subtle gradients, and careful spacing. The goal was not to add animations everywhere. The goal was to make the experience feel smooth.
What I learned
The biggest lesson was that a portfolio is never just a frontend project. Once you add blogs, authentication, dynamic resume upload, SEO, and admin tools, it becomes a real full-stack product.
I also learned that small polish matters a lot. Proper spacing, good typography, consistent colors, better CTAs, and clean content structure can make a simple site feel much more professional.
Final thoughts
This portfolio is still evolving. I will keep improving it as I grow as a developer. The main thing I wanted to prove with this project is simple: I can design, build, ship, and maintain a real full-stack web experience from end to end.