Building a Dynamic Portfolio with Next.js 16

When I started building this portfolio, I wanted more than a simple static website. I wanted a platform that I could continuously update without touching the source code every time I needed to publish a new project or article.

The result is a fully dynamic portfolio built with modern web technologies, featuring its own content management system, custom admin panel, and cloud-based asset storage.

Goals

Before writing any code, I established several objectives:

Build a modern developer portfolio
Make every section editable from an admin dashboard
Support blogging without rebuilding the application
Deliver excellent performance and SEO
Create a unique terminal-inspired design

Tech Stack

The project is built using:

Next.js 16 (App Router)
React 19
TypeScript
Tailwind CSS v4
GSAP
Motion (Framer Motion)
Supabase PostgreSQL
Drizzle ORM
Cloudflare R2
MDX
shadcn/ui
Radix UI

Each technology was selected to provide a balance between developer experience, scalability, and performance.

Dynamic Content

Unlike traditional portfolio websites, almost every section is stored inside the database.

This includes:

Hero section
About section
Projects
Blog posts
Social links
Opening animation text
Global site settings

This approach allows content updates without modifying the source code.

Hidden Admin Panel

One of my favorite parts of this project is the built-in admin panel.

The dashboard is protected using custom session-based authentication with HTTP cookies and middleware.

From the dashboard I can manage:

Hero content
About section
Projects
Blog articles
Global settings
Theme customization

Everything can be updated directly through the browser.

Project Management

Projects are stored inside a dedicated database table.

Each project includes:

Slug
Title
Description
Thumbnail
Repository
Live Demo
Publish Date
Markdown Content

Every project automatically generates its own detail page.

Blog System

The blog works similarly.

Articles are stored in the database and rendered dynamically.

Each article contains:

Title
Description
Thumbnail
Slug
Date
Markdown content

This allows me to publish new technical articles without rebuilding the application.

Cloudflare R2 Integration

Instead of storing uploaded images locally, the application uploads them to Cloudflare R2.

This provides:

Better scalability
Lower storage costs
Faster asset delivery
Easier backup management

The upload process is handled through a dedicated Cloudflare Worker.

SEO

Search engine optimization was an important part of the project.

The portfolio includes:

Dynamic metadata
Open Graph images
Twitter Cards
Sitemap generation
robots.txt
Optimized page titles
Semantic HTML

These improvements help search engines understand the website more effectively.

User Experience

The design follows a hacker-inspired aesthetic with a modern touch.

Some highlights include:

Opening animation
Terminal-inspired navigation
Draggable terminal window
Noise overlay
Smooth page transitions
Scroll-triggered animations
Light and dark themes
Responsive layouts

The goal was to create an experience that reflects both personality and technical skills.

Lessons Learned

Building this portfolio taught me many valuable lessons.

I learned how to organize large Next.js projects, design reusable components, structure a scalable database, build secure authentication, and optimize both performance and user experience.

More importantly, I realized that a portfolio should evolve continuously as new projects and experiences are added.

Conclusion

This portfolio is more than a collection of projects it's a fully dynamic web application designed to showcase my work, share technical knowledge through blog posts, and provide complete control over content through a custom-built admin panel.

As I continue learning and building new applications, this website will continue to grow alongside my development journey.

Building My Portfolio with Next.js 16