A cutting-edge, AI-powered portfolio website built from the ground up to showcase full-stack development and AI engineering expertise with modern technologies and exceptional performance
This portfolio represents a complete reimagination of what a developer's online presence can be. Built entirely from scratch, it combines intelligent AI search, real-time data integration, and performance-first architecture to create an experience that's both beautiful and functional.
- Google Gemini 2.5 Flash integration for intelligent, natural language queries
- Context-aware search with intelligent fallback responses
- Real-time exploration of projects, skills, and experience
- Lightning-fast keyboard shortcuts (Ctrl+K) for efficient navigation
- Custom RequestAnimationFrame animations optimized for 60fps
- Intersection Observer based scroll effects with zero jank
- Smart mobile-adaptive system with automatic reduced motion support
- Guaranteed zero layout shift during page interactions
- Real-time integration with LeetCode, GitHub, GeeksforGeeks, CodeChef, and Codeforces
- Interactive contribution heatmap with intelligent hover tooltips
- Custom serverless API proxies to handle CORS and rate limiting
- Smart caching layer with localStorage and intelligent TTL management
- Modern glass morphism design with seamless dark/light theme switching
- Progressive enhancement philosophy ensuring functionality on any device
- Mobile-first responsive design with touch gesture optimizations
- Full accessibility compliance with comprehensive keyboard navigation
- Vite build system for instant dev server and optimized production bundles
- Strategic dynamic imports and intelligent code splitting
- Consistent 99+ Lighthouse scores across all performance metrics
- Global CDN deployment for sub-second load times worldwide
- AI-powered natural language query processing
- Fuzzy search across all content
- Command palette with autocomplete
- Smart suggestions and context-aware responses
- Mobile-first responsive layout
- Dark/Light theme with system preference detection
- Full keyboard navigation support
- Screen reader optimized with ARIA labels
- Real-time coding statistics from multiple platforms
- GitHub contribution visualization
- Live project metrics and performance data
- Automated data caching and refresh
- Interactive project galleries with image carousels
- Detailed technical documentation
- Live demo links and GitHub integration
- Technology stack visualization
- Custom floating animations with configurable parameters
- Scroll-triggered reveal animations
- Smooth page transitions
- Optimized for 60fps performance
- TypeScript for type safety
- ESLint + Prettier for code quality
- Component-based architecture
- Comprehensive error handling
- React 18 - Modern React with concurrent features
- TypeScript - Type safety and enhanced developer experience
- Vite - Lightning-fast build tool and dev server
- TailwindCSS - Utility-first CSS framework
- ShadcN UI - High-quality React components
- Radix UI - Unstyled, accessible UI primitives
- Lucide React - Beautiful, customizable icons
- next-themes - Advanced theme management
- TanStack Query - Powerful data synchronization
- React Hook Form - Performant forms with validation
- Zod - TypeScript-first schema validation
- Google Gemini AI - Advanced language model integration
- GitHub API - Repository and contribution data
- LeetCode API - Competitive programming statistics
- Recharts - Data visualization and charts
- Vercel Analytics - Real user monitoring
- Vercel Speed Insights - Core Web Vitals tracking
- React Query - Intelligent caching and background updates
- ESLint - Code linting and quality checks
- PostCSS - CSS processing and optimization
- TypeScript ESLint - TypeScript-specific linting rules
- Node.js (v18 or higher)
- npm, yarn, or bun package manager
- Git for version control
-
Clone the repository
git clone https://github.com/prathamhanda/Portfolio-website.git cd Portfolio-website -
Install dependencies
npm install # or yarn install # or bun install
-
Environment Setup
Create a
.envfile in the root directory:# AI Integration VITE_GEMINI_API_KEY=your_gemini_api_key_here
-
Start the development server
npm run dev # or yarn dev # or bun dev
-
Open your browser Navigate to
http://localhost:8080to see the application running.
# Create production build
npm run build
# Preview production build locally
npm run previewThe project is optimized for Vercel deployment with zero configuration:
-
Deploy to Vercel
npm install -g vercel vercel
-
Alternative Deployment Options
- Netlify: Direct GitHub integration
- GitHub Pages: Using GitHub Actions
- Firebase Hosting: Google Cloud integration
Update your details in src/lib/aiSearch.ts:
const RESUME_CONTEXT = `
PERSONAL INFORMATION & CONTACT:
Name: Your Name
Role: Your Role
Email: your.email@example.com
// ... update with your information
`;Modify src/data/projects.ts to showcase your projects:
export const projectsData: Project[] = [
{
id: "your-project",
title: "Your Project Title",
description: "Project description",
// ... add your project details
}
];Customize colors and design tokens in src/index.css:
:root {
--primary: your-color-here;
--background: your-background-color;
/* ... customize design system */
}Update platform usernames in environment variables or component defaults.
- Lighthouse Score: 99+ across all categories
- First Contentful Paint: < 1.2s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
- Bundle Size: < 100KB gzipped
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Commit your changes
git commit -m 'Add amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
This project was built from scratch with passion and attention to detail. Special thanks to:
- The open-source community for incredible tools and libraries
- ShadcN for the elegant UI component patterns
- Vercel for world-class deployment and performance infrastructure
- Radix UI for accessible, unstyled component primitives
- Google for the powerful Gemini AI API
Pratham Handa
- 🌐 Portfolio: pratham.codes
- 💼 LinkedIn: linkedin.com/in/prathamh/
- 🐙 GitHub: github.com/prathamhanda
- 📧 Email: prathamhanda10@gmail.com
⭐ If you found this project inspiring, consider giving it a star!
Crafted with ❤️, ☕, and countless hours of refinement by Pratham Handa
Local push test: 2025-12-27T20:18:53+05:30