Skip to content

README.md

Latest commit

 

History

History
86 lines (70 loc) · 2.36 KB

README.md

File metadata and controls

86 lines (70 loc) · 2.36 KB
Raw

Modern 3D Portfolio

Live Demo

Live Demo

🌟 Features

  • Immersive 3D Particle Background with interactive connections
  • Dark/Light Mode Toggle with smooth transitions
  • Scroll-Triggered Animations for all sections
  • Interactive Project Cards with modal details
  • Mobile-Optimized Design that works on all devices
  • Form Validation with live feedback
  • No Frameworks - Pure HTML, CSS, and Vanilla JS

🚀 Quick Start

  1. Download the repository
  2. Open index.html in any modern browser
  3. That's it! No build step required

🛠️ Customization

Change Colors

Edit the CSS variables at the top of the <style> section:

:root {
  --primary-color: #6366f1;  /* Main brand color */
  --secondary-color: #ec4899; /* Accent color */
  --bg-color: #f8fafc;       /* Light background */
}

Modify 3D Effects

Adjust the particle settings in the JavaScript:

// In the initParticles() function:
const particleCount = window.innerWidth / 10; /* Adjust density */
const maxDistance = 100; /* Connection distance */

Update Content

Edit the HTML directly:

<!-- Example: Change hero text -->
<section id="home" class="hero">
  <h1>Your Custom Headline Here</h1>
</section>

📱 Mobile Optimization

The portfolio automatically:

  • Reduces particle count on mobile
  • Simplifies animations for better performance
  • Adjusts layout for smaller screens

🏗️ Project Structure

/
├── index.html          # Main HTML file
├── assets/             # (Optional) For images/fonts
└── (No build files needed!)

🌐 Deployment Options

  1. GitHub Pages: Just upload and enable
  2. Netlify/Vercel: Drag-and-drop index.html
  3. Any Static Hosting: Works everywhere

💡 Troubleshooting

Issue Solution
3D effects not loading Check browser console for errors
Animations feel sluggish Reduce particle count
Theme not saving Ensure localStorage is enabled

📜 License

MIT License - Free for personal and commercial use

✨ Pro Tips

  • Add your own 3D models by extending the Three.js code
  • Integrate with EmailJS for form submissions
  • Add Google Analytics for visitor tracking

Star ⭐ the repo if you find this useful!