A full-stack, customizable portfolio built with Next.js. Features a secure admin dashboard to manage skills, blogs, services, and projects with dynamic image optimization, TinyMCE editor, and intercepting routes.
Type:
Portfolio Site
Client:
My Portfolio
Service:
Web Development
Budget:
$0000
Start Date:
2024-07-08
End Date:
2024-08-15
Customizable Portfolio is a full-stack personal portfolio platform built with Next.js (App Router), designed for developers who need complete control over their professional presence. It features a clean, modern UI and a secure, fully functional admin dashboard for managing all portfolio content without touching code.
This project serves as both a portfolio and a lightweight CMS, allowing seamless creation, editing, and deletion of content such as skills, services, projects, and blog posts. It is optimized for performance, security, and long-term scalability.
🔐 Secure Authentication with NextAuth.js
Full authentication system using NextAuth.js, ensuring that admin routes and content management features are fully protected.
🧠 Skills Management
Add, edit, or remove technical skills through the dashboard. Updates reflect immediately across the site without rebuilds.
📝 Rich Blog Editor with TinyMCE
Integrated TinyMCE editor enables publishing fully formatted blog posts, supporting images, links, code snippets, and more.
💼 Service & Project CRUD
Easily manage your services and projects—each with titles, descriptions, technologies, links, and images—with full create, update, and delete functionality.
🖼️ Image Optimization
Uploaded images are automatically resized and compressed to improve performance and reduce load time.
🚀 Intercepting Routes with Next.js
Utilizes intercepting routes for clean and modular navigation across public pages and admin views.
📊 Analytics Dashboard
The admin panel includes a visual overview of content metrics and portfolio activity to track user engagement.
Framework: Next.js (App Router)
Authentication: NextAuth.js
Text Editor: TinyMCE
Image Handling: Dynamic compression & resizing
Styling: Tailwind CSS
Routing: Next.js Intercepting Routes
"Screnshots"

"Light Mode"
