🚧 How I Built My Portfolio

This portfolio was a hands-on learning project where I combined multiple modern frontend technologies to showcase my work and personal brand. I built it using Next.js 13, TypeScript, Tailwind CSS, and MDX, ensuring it’s both beautiful and performance-optimized.

🎯 Goal

My goal was to create a clean, responsive site that:

• Reflects my skills as a frontend and full-stack developer
• Is optimized for performance and SEO
• Supports dynamic content via MDX
• Is enjoyable to build and maintain

🚀 Features Implemented

• ✅ Modern Tech Stack: Built using App Router from Next.js 13 with TypeScript
• 📱 Responsive Design: Ensured usability on mobile, tablet, and desktop
• 📚 MDX + Contentlayer: For writing blog posts and project pages in Markdown with React components
• 💡 Framer Motion Animations: Added smooth transitions and scroll effects
• 💻 Syntax Highlighting: Configured with rehype-pretty-code for clean code blocks
• ⚡ Performance Optimized: Lighthouse score close to 100
• 🌗 Dark Mode: Light and dark theme support using Tailwind’s dark class
• 🔍 SEO-Ready: Metadata, open graph, and structured content

🛠️ Stack I Used

• Framework: Next.js 13 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Content: Contentlayer + MDX
• Animation: Framer Motion
• Icons: Lucide-react
• Formatter: Rome (for fast linting/formatting)
• Analytics: Upstash Redis (basic logging)

🏗️ Folder Structure

├── app/              # App directory for routing and layout
├── components/       # Reusable UI components
├── content/          # MDX files (projects, posts)
├── public/           # Static images and assets
├── styles/           # Global Tailwind styles
├── types/            # Custom TypeScript interfaces
└── util/             # Helpers and utilities