🚀 Futuristic Portfolio Website

A stunning, dark-theme personal portfolio website built with React.js, Tailwind CSS, and Framer Motion. Features smooth animations, glassmorphism effects, and a modern cyberpunk aesthetic.

✨ Features

• 🎨 Dark Futuristic Theme - Cyberpunk-inspired design with neon accents
• 🌊 Animated Particle Background - Dynamic particle network animation
• 💎 Glassmorphism Effects - Modern frosted glass UI elements
• 🎭 Smooth Animations - Framer Motion powered transitions
• 📱 Fully Responsive - Perfect on mobile, tablet, and desktop
• ⚡ Lightning Fast - Built with Vite for optimal performance
• 🎯 Interactive Elements - Hover effects, smooth scrolling, and more

🎬 Sections

1. Hero Section - Animated typing text with particle background
2. About Section - Glassmorphic cards with scroll animations
3. Skills Section - Circular progress indicators with hover effects
4. Projects Section - Interactive cards with modal details
5. Contact Section - Animated form with social media links

🛠️ Technologies

• React 18 - Modern React with hooks
• Vite - Next-generation frontend tooling
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Production-ready animation library
• React Icons - Popular icon library

🚀 Quick Start

1. Install Dependencies

```bash npm install ```

2. Run Development Server

```bash npm run dev ```

The site will be available at http://localhost:5173

3. Build for Production

```bash npm run build ```

4. Preview Production Build

```bash npm run preview ```

🎨 Customization Guide

1. Personal Information

Update Your Name:

• Open src/components/Hero.jsx
• Change line 8: const fullText = 'YOUR NAME'; to your actual name
• Update src/components/About.jsx line 64: <h3 className="text-2xl font-bold text-center mb-2">Your Name</h3>
• Update src/components/Contact.jsx line 175: Change footer text

Update Tagline:

• In src/components/Hero.jsx, edit the tagline text around line 49

2. Colors & Theme

The color scheme uses custom neon colors defined in tailwind.config.js:

```javascript colors: { neon: { blue: '#00f3ff', // Cyan purple: '#bf00ff', // Magenta pink: '#ff006e', // Hot pink green: '#00ff9f', // Mint green } } ```

To change colors:

1. Edit these values in tailwind.config.js
2. Colors are used throughout with classes like text-neon-blue, border-neon-purple, etc.

3. About Section

Edit src/components/About.jsx:

```javascript // Line 64 - Your name

Your Name

// Lines 71-78 - Your description

I'm a passionate developer...

// Lines 95, 111, 127 - Feature cards (Clean Code, Fast Performance, Creative Solutions) ```

4. Skills

Edit src/components/Skills.jsx starting at line 49:

```javascript const skills = [ { name: 'React', icon: FaReact, percentage: 95, color: '#00f3ff' }, // Add/remove/edit skills ]; ```

To add a new skill:

1. Import the icon from react-icons at the top
2. Add a new object to the skills array
3. Set name, icon, percentage (0-100), and color

5. Projects

Edit src/components/Projects.jsx starting at line 107:

```javascript const projects = [ { title: 'Project Name', emoji: '🚀', description: 'Short description', fullDescription: 'Detailed description for modal', tags: ['React', 'Node.js'], features: [ 'Feature 1', 'Feature 2', ], github: 'https://github.com/yourusername/project', live: 'https://project-demo.com' }, // Add more projects ]; ```

6. Contact & Social Links

Edit src/components/Contact.jsx starting at line 27:

```javascript const socialLinks = [ { name: 'GitHub', icon: FaGithub, url: 'https://github.com/yourusername', color: '#ffffff' }, // Update URLs to your profiles ]; ```

To connect a real contact form:

• Replace the handleSubmit function (line 17)
• Integrate with services like Formspree, EmailJS, or your own backend

7. Fonts

Current font: Space Grotesk

To change:

1. Edit index.html Google Fonts link
2. Update tailwind.config.js: ```javascript fontFamily: { sans: ['Your Font', 'system-ui', 'sans-serif'], } ```

🎯 Animation Customization

Particle Effect

Edit src/components/Particles.jsx:

• Line 11: const particleCount = 100; - Change number of particles
• Lines 29-32: Adjust opacity and colors
• Line 54: Change connection distance (default 100px)

Scroll Animations

Most components use Framer Motion's useInView hook: ```javascript const isInView = useInView(ref, { once: true, amount: 0.3 }); ```

• once: true - Animation triggers once
• amount: 0.3 - Trigger when 30% visible

📱 Responsive Breakpoints

Tailwind's default breakpoints are used:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px

Example: md:text-6xl means "text-6xl on medium screens and up"

🎨 Custom CSS Classes

Utility classes in src/index.css:

• .glow-text - Blue neon glow effect
• .glow-text-purple - Purple neon glow effect
• .glass - Glassmorphism effect
• .neon-border - Animated neon border (blue to purple)
• .neon-border-green - Animated neon border (green to cyan)

🚢 Deployment

Vercel (Recommended)

1. Push to GitHub
2. Import project in Vercel
3. Deploy automatically

Netlify

1. Run npm run build
2. Deploy the dist folder

GitHub Pages

```bash npm run build

Deploy the dist folder to gh-pages branch

```

📝 Environment Variables

Currently, no environment variables are required. If you add backend integration:

Create .env: ``` VITE_API_URL=your-api-url VITE_EMAILJS_KEY=your-key ```

Access in code: ```javascript const apiUrl = import.meta.env.VITE_API_URL; ```

🐛 Troubleshooting

Animations not working:

• Ensure Framer Motion is installed: npm install framer-motion

Styles not applied:

• Run npm run dev to restart the dev server
• Check that Tailwind is properly configured

Icons missing:

• Install react-icons: npm install react-icons

📄 License

MIT License - feel free to use this for your own portfolio!

🤝 Contributing

Feel free to fork and enhance this portfolio template!

💡 Tips

1. Keep it updated - Regularly add new projects and skills
2. Optimize images - Use WebP format for better performance
3. SEO - Add meta tags in index.html
4. Analytics - Add Google Analytics or similar
5. Custom domain - Makes your portfolio more professional

🎉 Credits

Built with ❤️ using React, Tailwind CSS, and Framer Motion

---

Need help? Open an issue or reach out!

Happy coding! 🚀