Pratham Handa | Portfolio

AI-powered navigation. Performance-first UI. A portfolio that feels like a product.

🚀 Quick Start • ✨ Highlights • 🖼️ Screenshots • 🛠️ Tech Stack • 📖 Customization

🎯 What is this?

This is a modern, product-grade developer portfolio built with React + Vite + TypeScript, designed to showcase projects, experience, and live coding stats with a premium UX.

It’s optimized for keyboard-first navigation, smooth scroll interactions, and fast perceived performance (preloading, lightweight animations, and a clean component architecture).

---

✨ Feature Highlights

🤖 AI Command Palette Natural language search (Google Gemini integration) Keyboard-first UX (Ctrl+K) Quick navigation across sections and content Mobile-friendly quick access (floating action button)	📊 Live Coding Dashboard Multi-platform stats (e.g. competitive programming + contributions) Cached & resilient fetching patterns Clean visualizations and quick glance widgets
🎨 Premium UI/UX Glassmorphism-inspired cards and layered backgrounds Dark/Light theme support Responsive layout with mobile-friendly interactions Animated SVG preloader experience	⚡ Performance-first Architecture Scroll-triggered reveals via IntersectionObserver Image preloading for key project thumbnails UI built from accessible primitives (Radix + shadcn)

⌨️ Keyboard-first Ctrl+K command palette • fast navigation	🧠 AI Search Gemini-powered answers • smart fallbacks	🌓 Theme System Light/Dark toggle • system-aware
🧩 Project Deep Dives Detail modal • gallery • tech stack	📈 Live Stats Coding dashboard • charts • snapshots	⚡ Perceived Speed Image preloading • scroll reveals

---

🖼️ Screenshots

Add screenshots here to match the “product README” vibe. Recommended set:

• Hero / Landing (top of the page)
• Projects grid (with cards visible)
• Project detail modal (open on a project)
• AI Command Palette (opened with Ctrl+K)
• Coding Dashboard (stats + charts)
• Mobile view (any section + nav/fab)

Hero — first impression + headline	Projects — curated work with rich cards
Project Modal — full project story + gallery	Command Palette — AI navigation with Ctrl+K
Coding Dashboard — live stats and visuals	Mobile — responsive layout + touch-friendly UX

Tip: your screenshots live in public/ss/ — keep adding images there and update the filenames in this section.

---

🚀 Quick Start

# 1) Install deps
npm install

# 2) Configure env (optional but recommended for AI features)
# Create a .env file in the project root

# 3) Start dev server
npm run dev

Open http://localhost:8080

🔐 Environment Variables

Create .env in the project root:

# Enables AI-powered command palette features
VITE_GEMINI_API_KEY=your_key_here

Production

npm run build
npm run preview

---

🛠️ Tech Stack

Frontend

• React 18, TypeScript, Vite
• Tailwind CSS

UI / UX

• shadcn/ui + Radix UI primitives
• lucide-react icons
• next-themes for theme switching

Data / Integrations

• TanStack Query
• Google Gemini integration for AI search

Deployment / Analytics

• Vercel
• Vercel Analytics + Speed Insights

---

📖 Customization

Common update points:

• Projects: edit src/data/projects.ts
• AI Context: edit src/lib/aiSearch.ts (resume/context + fallback answers)
• Branding / Theme tokens: edit src/index.css (CSS variables + theme primitives)
• Public assets: swap images under public/ (icons, project images, preloader SVG)

---

📬 Contact

Pratham Handa

• Portfolio: https://pratham.codes
• LinkedIn: https://www.linkedin.com/in/prathamh/
• GitHub: https://github.com/prathamhanda
• Email: prathamhanda10@gmail.com
• LeetCode: https://leetcode.com/u/prathamhanda/

⭐ If you found this portfolio inspiring, consider giving it a star!