Portfolio

🔍 What is Portfolio?

This portfolio is my second-generation personal site: a modern, animation-heavy developer portfolio built with Next.js and Tailwind CSS. It showcases curated case studies, skills, work experience, testimonials, and resource pages like my bucket list and setup, all wrapped in a responsive, theme-aware layout. The site doubles as both my professional presence and a playground for motion and content-driven UI.

🧩 Key Features

📌 Why I Built This

I wanted a portfolio that felt as intentional as the products I build. Something that goes beyond a static list of projects. My portfolio is both a professional showcase and an experimental playground where I can refine my design system, push animations, test SEO patterns, and keep my story up to date for recruiters and clients.

🧪 Tech Stack Overview

• Next.js - App Router-based framework powering routing, nested layouts, metadata, and image optimization for a fast, SEO-friendly portfolio.
• React - Component-driven UI for the hero, bento-style sections, carousels, and reusable cards that structure projects, skills, and resources.
• TypeScript - Strongly typed components and config for projects, skills, testimonials, and pages, keeping content-driven sections safe and predictable.
• Tailwind CSS - Utility-first styling for the bento grid, responsive layouts, typography, and the overall light/dark visual system of the site.
• Framer Motion - Motion librarie for smooth section transitions, hover interactions, and subtle micro-animations that make the UI feel alive without hurting performance.
• Fumadocs - Documentation and syntax-highlighting tooling for the “More” and resource pages, letting me treat my portfolio like a tiny personal docs hub.
• shadcn/ui - Prebuilt accessible UI primitives (dialogs, buttons, dropdowns, tables) to keep the interface polished without heavy custom components.
• Resend - Email and analytics integrations for reliable contact form delivery and insight into how visitors browse projects and sections.

🧠 Challenges & Learnings

• Structuring a Next.js App Router project with shared layouts, metadata, and segmented routes keeps a multi-page portfolio maintainable as it grows.
• Combining Framer Motion and GSAP requires a clear animation architecture so that global transitions, hover states, and scroll effects don't compete with each other.
• Building carousels and timelines with Embla and custom components taught me how to handle accessibility, keyboard navigation, and smooth drag interactions.
• Setting up next-themes, and SEO tooling (including Open Graph tags and app icons) made me think deeply about localization, theming, and discoverability.
• Treating the portfolio as a content system with typed data for projects, skills, testimonials, and resource pages makes it much easier to iterate without rewriting UI logic.

Want to chat about this project? Let’s chat.