A sleek, performant portfolio website showcasing modern web development skills with smooth animations and responsive design.
- ⚡ Ultra-fast Performance - Built with Next.js 15 and optimized for speed
- 📱 Responsive Design - Seamless experience across all devices
- 🎬 Smooth Animations - Beautiful Framer Motion animations throughout
- 🎨 Modern UI/UX - Clean, minimalist design with attention to detail
- 🔧 Type Safety - Full TypeScript implementation
- 📊 Skills Showcase - Optimized, icon-free tech stack display
- 💼 Project Portfolio - Dynamic project showcase with live demos
- 📫 Contact Integration - Interactive contact form with validation
- 🎯 SEO Optimized - Meta tags, structured data, and performance optimized
- Next.js 15 - React framework with App Router
- TypeScript - Static typing and enhanced developer experience
- React 19 - Latest React features and optimizations
- Tailwind CSS 4 - Utility-first CSS framework
- Framer Motion - Production-ready motion library
- Responsive Design - Mobile-first approach
- ESLint - Code linting and quality checks
- Turbopack - Fast bundler for development
- React DevTools - Development debugging
- Vercel - Edge network deployment with automatic CI/CD
portfolio-website/
├── 📂 src/
│ ├── 📂 app/ # Next.js App Router
│ │ ├── globals.css # Global styles and Tailwind imports
│ │ ├── layout.tsx # Root layout with metadata
│ │ └── page.tsx # Homepage component
│ ├── 📂 components/ # Reusable UI components
│ │ ├── ClientOnly.tsx # Client-side rendering wrapper
│ │ ├── Header.tsx # Navigation header with smooth scrolling
│ │ ├── Hero.tsx # Landing section with typewriter effect
│ │ ├── Skills.tsx # Optimized tech stack showcase
│ │ ├── Experience.tsx # Professional background timeline
│ │ ├── Services.tsx # Services and capabilities
│ │ ├── Projects.tsx # Portfolio project showcase
│ │ └── Footer.tsx # Contact form and social links
│ └── 📂 utils/ # Utility functions
│ └── imagePreloader.ts # Image optimization utilities
├── 📂 public/ # Static assets
├── 📄 next.config.js # Next.js configuration
├── 📄 tailwind.config.js # Tailwind CSS customization
├── 📄 tsconfig.json # TypeScript configuration
└── 📄 package.json # Project dependencies
- Node.js 18+ and npm 9+
- Git for version control
-
Clone the repository
git clone https://github.com/yourusername/portfolio-website.git cd portfolio-website -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser
http://localhost:3000
| Command | Description |
|---|---|
npm run dev |
Start development server with Turbopack |
npm run build |
Build production-ready application |
npm run start |
Start production server |
npm run lint |
Run ESLint for code quality checks |
- Update personal information in
src/components/Hero.tsx - Modify skills in
src/components/Skills.tsx - Add your projects in
src/components/Projects.tsx - Update experience in
src/components/Experience.tsx - Configure contact info in
src/components/Footer.tsx
- Colors: Edit
tailwind.config.jsfor custom color palette - Fonts: Update
src/app/layout.tsxfor typography changes - Animations: Modify Framer Motion variants in components
- Layout: Adjust responsive breakpoints and spacing
Create a .env.local file for any environment-specific variables:
# Add your environment variables here
NEXT_PUBLIC_SITE_URL=https://yoursite.com- ⚡ Fast Initial Load - Optimized bundle size (157kb First Load JS)
- 🖼️ Image Optimization - Next.js automatic image optimization
- 🎯 Code Splitting - Automatic route-based code splitting
- 📱 Mobile Performance - Optimized for mobile Core Web Vitals
- 🚀 Edge Deployment - Vercel Edge Network for global performance
- Push to GitHub repository
- Connect to Vercel and import project
- Auto-deploy on every push to main branch
# Build the project
npm run build
# Start production server
npm run start- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is MIT Licensed - see the LICENSE file for details.
⭐ Star this repo if you found it helpful!