A stunning, responsive portfolio website built with React, Vite, Tailwind CSS, and Framer Motion. This portfolio features modern animations, dark/light theme toggle, and a professional design that will impress employers.
- Modern Design: Clean, professional layout with gradient accents
- Fully Responsive: Works perfectly on all devices and screen sizes
- Dark/Light Theme: Toggle between themes with smooth transitions
- Smooth Animations: Beautiful scroll-triggered animations and hover effects
- Interactive Elements: Animated background, floating elements, and 3D effects
- SEO Optimized: Structured for search engine optimization
- Fast Performance: Built with Vite for lightning-fast loading
- Accessible: Follows web accessibility best practices
- React 19 - Latest React with modern features
- Vite - Ultra-fast build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Production-ready motion library
- Heroicons - Beautiful hand-crafted SVG icons
- React Intersection Observer - Smooth scroll animations
-
Clone the repository ```bash git clone cd portfolio ```
-
Install dependencies ```bash npm install ```
-
Start development server ```bash npm run dev ```
-
Open your browser Visit
http://localhost:5173to see your portfolio
Edit src/data/portfolio.js to update:
- Personal Info: Name, title, contact details, social links
- About Me: Description and highlights
- Skills: Technical skills with proficiency levels
- Projects: Portfolio projects with descriptions and links
- Experience: Work history and achievements
Add your images to the public folder:
- Profile photo: Add as
public/profile.jpg - Project screenshots: Add as
public/project1.jpg,public/project2.jpg, etc. - Resume: Add as
public/resume.pdf
Customize the theme in tailwind.config.js:
```javascript colors: { primary: { 50: '#eff6ff', 500: '#3b82f6', // Change primary color 600: '#2563eb', 700: '#1d4ed8', 900: '#1e3a8a', } } ```
Modify animations in src/App.css or individual components:
- Blob animations: Adjust timing and movement
- Gradient shifts: Change colors and speed
- Hover effects: Customize interaction animations
Each section is in src/sections/:
Hero.jsx- Landing section with introAbout.jsx- About me sectionSkills.jsx- Technical skillsProjects.jsx- Portfolio projectsExperience.jsx- Work experienceContact.jsx- Contact form and info
-
Interactive Elements
- Animated backgrounds
- Hover effects on cards
- Smooth scrolling navigation
- Loading animations
-
Professional Content
- Clear value propositions
- Quantified achievements
- Live project demos
- Technical skill visualization
-
User Experience
- Fast loading times
- Mobile-first design
- Accessible navigation
- Dark/light theme options
-
Portfolio Projects
- Include live demos
- Show code repositories
- Explain your role and impact
- Use modern tech stacks
The portfolio is fully responsive across all devices:
- Desktop: Full layout with sidebar navigation
- Tablet: Optimized layout with collapsible sections
- Mobile: Stack layout with hamburger menu
```bash npm run build ```
- Vercel: `vercel --prod`
- Netlify: Drag and drop the
distfolder - GitHub Pages: Use GitHub Actions
- Firebase: `firebase deploy`
- Component Structure: Modular, reusable components
- State Management: Clean state handling with hooks
- Performance: Lazy loading and optimized animations
- Accessibility: ARIA labels and semantic HTML
- SEO: Meta tags and structured data
- Code Quality: ESLint rules and best practices
The contact form is ready for integration with:
- Formspree: Easy form handling service
- Netlify Forms: Built-in form processing
- EmailJS: Client-side email sending
- Custom Backend: Node.js/Express integration
- Add meta tags in
index.html - Include structured data
- Optimize image alt texts
- Use semantic HTML elements
- Add sitemap.xml
- Use lazy loading for images
- Optimize animation performance
- Minimize bundle size
- Enable gzip compression
- Use CDN for assets
This project is open source and available under the MIT License.
Made with ❤️ by [Your Name]
Ready to impress employers with your new portfolio!+ Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.