AI-Powered Portfolio
Meta-project: Building a portfolio that showcases itself
A portfolio is more than a resume—it's a product. I built this site with Next.js 15, integrated a Gemini-powered chatbot for Q&A, and designed interactive demos to let visitors experience my work firsthand.
The Challenge
Most developer portfolios fall into two camps: over-engineered with flashy animations but poor content, or under-designed with walls of text. I wanted to build something that balanced visually engaging elements with strong information hierarchy and accessibility. The goal was to create an experience that felt more like a product demo than a static resume.
Performance Efficiency
Achieving 98 Lighthouse score with heavy assets.
Interactivity
Integrated AI Chatbot for natural language Q&A.
Design System
Glassmorphism aesthetic without sacrificing readability.
Technical Architecture
Pipeline Flow
- Framework: Next.js 15 with App Router for server components.
- AI Integration: Gemini Flash API for cost-effective, low-latency chatbot responses.
- Animation: Framer Motion for performant animations with zero layout shift.
- Styling: Tailwind CSS for consistent design tokens and glassmorphism effects.
- Optimization: Dynamic imports, variable fonts, and API caching.
Performance Optimization
"Achieving a 98 Lighthouse score required careful optimization: Next.js Image component with blur placeholders, code splitting for heavy components like the Monaco Editor (planned), and Redis caching for chatbot responses which hit a 40% cache hit rate."