🚀 Modern Portfolio Website

A cutting-edge, ultra-modern portfolio website with advanced animations, particle effects, and stunning visual design. Built with vanilla HTML, CSS, and JavaScript for maximum performance and customization.

✨ Features

Design & Visual

• 🎨 Ultra-Modern UI: Clean, trendy design with bold visual choices
• 🌓 Dark/Light Mode: Smooth theme switching with localStorage persistence
• 💎 Glassmorphism Effects: Modern backdrop-filter effects throughout
• 🎭 Gradient Accents: Dynamic gradients and color schemes
• ✨ Custom Cursor: Interactive cursor with smooth follower effect (desktop)
• 🌌 Particle Background: Animated particle system with connections

Animations

• 🎬 Scroll-Triggered Animations: Elements reveal as you scroll
• 🎪 Parallax Effects: Multi-layer depth and movement
• 💫 Hover Animations: Cards lift, tilt, and transform
• 📊 Skill Bar Animations: Animated progress bars with shimmer effect
• ⏰ Loading Animation: Smooth entry experience
• 🎯 Typing Effect: Dynamic text animation in hero section
• 📈 Counter Animation: Animated statistics with IntersectionObserver
• 🌊 Floating Elements: Subtle floating badges and shapes
• 🎨 Ripple Effects: Button click ripples
• 📜 Scroll Progress: Visual indicator of page position

Technical

• 📱 Fully Responsive: Optimized for all devices (desktop, tablet, mobile)
• ⚡ Performance Optimized: Smooth 60fps animations
• ♿ Accessible: ARIA labels, keyboard navigation, reduced motion support
• 🎯 SEO Ready: Semantic HTML and meta tags
• 📦 No Dependencies: Pure vanilla JavaScript
• 🎨 CSS Variables: Easy theme customization
• 🔧 Modular Code: Separate CSS and JS files for organization

📁 Project Structure

portfolio/
├── index.html              # Main HTML file
├── css/
│   ├── style.css          # Main styles and components
│   └── responsive.css     # Responsive breakpoints
├── js/
│   ├── main.js           # Core functionality
│   └── animations.js     # Advanced animations
├── images/               # Your project screenshots
│   └── (add your images here)
├── assets/              # Icons, fonts, etc.
│   └── (optional assets)
├── netlify.toml         # Netlify configuration
├── .gitignore          # Git ignore rules
└── README.md           # This file

🎯 Sections

1. Hero Section

   • Animated greeting and name
   • Typing effect for tagline
   • Floating gradient shapes
   • Social media links
   • Scroll indicator

2. About Section

   • Profile image placeholder
   • Bio and introduction
   • Animated statistics counters
   • Call-to-action button

3. Projects Section (⚠️ CUSTOMIZE WITH YOUR 4 PROJECTS)

   • 4 project cards with gradients
   • Project images, tags, descriptions
   • Live demo and GitHub links
   • Hover tilt effects

4. Skills Section

   • Organized by category (Frontend, Backend, Tools)
   • Animated progress bars
   • Icon-based categories
   • Skill percentages

5. Contact Section

   • Contact information cards
   • Working contact form
   • Social media links
   • Hover animations

6. Footer

   • Quick navigation
   • Social links
   • Copyright info

🛠️ Setup & Customization

1. Clone or Download

git clone https://github.com/sujitKrS04/portfolio.git
cd portfolio

2. Add Your Information

Update Personal Details (index.html)

• Replace "Your Name" with your actual name (appears multiple times)
• Update social media links (GitHub, LinkedIn, Twitter, Email)
• Add your bio in the About section
• Update contact information (email, phone, location)

Add Your Projects (index.html)

Find the 4 project cards (marked with TODO: comments) and update:

• Project Name: Replace "Your Project Name 1-4"
• Description: Add real project descriptions
• Technologies: Update the tech tags
• Links: Add your live demo and GitHub URLs
• Images: Add screenshots to images/ folder and update img src

Example:

<h3 class="project-title">E-Commerce Platform</h3>
<p class="project-description">
  A full-stack e-commerce platform with real-time inventory, secure payments,
  and admin dashboard.
</p>
<div class="project-tags">
  <span class="tag">React</span>
  <span class="tag">Node.js</span>
  <span class="tag">MongoDB</span>
</div>

Add Your Images

1. Add your profile photo: images/profile.jpg
2. Add project screenshots: images/project-1.jpg, etc.
3. Update image references in HTML

Customize Colors (css/style.css)

Edit CSS variables in :root:

:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  /* Change these to your preferred colors */
}

Update Skills (index.html)

Modify skill categories, names, and percentages to match your expertise.

3. Test Locally

Simply open index.html in your browser, or use a local server:

# Python
python -m http.server 8000

# Node.js
npx serve

# VS Code
# Install "Live Server" extension and click "Go Live"

🚀 Deployment

Deploy to Netlify (Recommended)

1. Push your code to GitHub
2. Go to Netlify
3. Click "New site from Git"
4. Connect your GitHub repository
5. Click "Deploy site"
6. Done! Your site is live 🎉

Or drag and drop the folder directly to Netlify.

Deploy to Vercel

npm i -g vercel
vercel

Deploy to GitHub Pages

1. Go to repository Settings → Pages
2. Select branch: main
3. Select folder: / (root)
4. Save
5. Visit https://sujitKrS04.github.io/portfolio

🎨 Customization Tips

Change Theme Colors

Edit the gradient variables in css/style.css:

--primary-gradient: linear-gradient(135deg, #your-color1, #your-color2);

Adjust Animations Speed

In js/animations.js, modify timing values:

el.style.transition = "opacity 0.6s ease"; // Change 0.6s

Add More Projects

Copy a project card in index.html and modify the content.

Disable Particles/Cursor

Comment out or remove:

• Particles: Remove #particles-canvas code in main.js
• Cursor: Remove cursor code in main.js

Add New Sections

Follow the existing section structure and add new content between existing sections.

📝 TODO List (For You!)

• Replace "Your Name" with your actual name
• Update all social media links
• Add your real bio and introduction
• Replace all 4 projects with YOUR projects
• Add project screenshots to images/ folder
• Update skills and percentages
• Add your contact information
• Add profile photo
• Test on mobile devices
• Deploy to Netlify/Vercel

🐛 Browser Support

• ✅ Chrome/Edge (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Mobile browsers

📄 License

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

🤝 Contributing

Found a bug or want to add a feature? Feel free to:

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

💬 Support

If you have questions or need help customizing:

• Open an issue on GitHub
• Email: your.email@example.com

🌟 Show Your Support

If you like this portfolio template, please ⭐ star the repository!

---

Built with ❤️, ☕, and lots of CSS

Portfolio by Your Name © 2026