Personal Portfolio - Next.js Full-Stack

Overview

Modern full-stack portfolio website built with Next.js 15 for showcasing projects, work experience, technical skills, and blog content. Includes comprehensive admin dashboard for dynamic content management with real-time cache invalidation.

Key Features

• Project Showcase: Dynamic project gallery with detailed views and filtering
• Work Experience: Timeline display with expandable descriptions
• Skills Section: Tech stack organized by category and proficiency
• Blog Platform: Markdown-based blog with tag filtering and cover images
• Admin Dashboard: Full CRUD operations for projects, experience, skills, and blog posts
• Contact Form: Email notifications for inquiries
• SEO Optimized: Meta tags, structured data, and sitemaps
• Real-time Updates: Instant cache invalidation on admin save
• Performance: Server-side rendering and incremental static regeneration
• Dark/Light Theme: Theme support with Framer Motion animations

Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS with Emotion for CSS-in-JS
• Animations: Framer Motion for smooth transitions
• Backend: Next.js API routes with Node.js
• Database: Firebase Firestore
• Authentication: Firebase Authentication
• Markdown: ReactMarkdown with syntax highlighting
• Deployment: Vercel serverless functions

Admin Features

• Manage portfolio projects (create, read, update, delete)
• Edit work experience with dates and descriptions
• Update skills with proficiency levels
• Write and publish blog posts with cover images
• Configure site settings and display options
• Real-time content updates with cache invalidation

Pages

• Home with hero section and featured projects
• Projects gallery with detailed project views
• Blog with markdown rendering and filtering
• About page with work experience timeline
• Contact form with email integration
• Uses page for tools and technology stack
• Now page for current activities
• Resume page

Performance Features

• Server-side rendering (SSR) for SEO
• Incremental Static Regeneration (ISR)
• Server-side caching with configurable TTL
• On-demand cache invalidation
• Image optimization with Next.js Image
• Code splitting and lazy loading