Sumanth D - Portfolio Website

A modern, animated portfolio website showcasing data science and business analysis projects.

🚀 Features

• Modern Design: Clean, professional layout with dark theme
• Smooth Animations: Advanced scroll-triggered animations using AOS library
• Interactive Elements: Particle.js background, typing animations, and hover effects
• Responsive Design: Fully responsive across all devices
• Project Showcase: Dynamic project filtering and detailed project cards
• Skill Visualization: Animated skill bars and progress indicators
• Contact Form: Professional contact section with social links

🎨 Design Features

• Particle.js animated background
• Typing animation for role titles
• Smooth scrolling navigation
• Animated skill progress bars
• Interactive project filtering
• Hover effects and micro-interactions
• Loading screen animation
• Mobile-responsive hamburger menu

📱 Sections

1. Hero Section: Introduction with particle background and typing animation
2. About: Personal introduction with animated statistics
3. Skills: Interactive skill visualization with progress bars
4. Projects: Filterable project showcase with detailed cards
5. Contact: Professional contact form and information

🛠️ Technologies Used

• HTML5
• CSS3 (Modern features: Grid, Flexbox, Animations)
• JavaScript (ES6+)
• AOS (Animate On Scroll) Library
• Particles.js
• Font Awesome Icons
• Responsive Design

🚀 GitHub Pages Deployment

Automatic Deployment

1. Fork this repository
2. Go to repository Settings
3. Scroll down to "Pages" section
4. Select "Deploy from a branch"
5. Choose "main" branch and "/ (root)" folder
6. Click Save
7. Your site will be available at https://yourusername.github.io/repository-name

Manual Setup

1. Clone the repository:

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

2. Customize the content:

   • Update personal information in index.html
   • Modify project details and links
   • Replace placeholder images with your project screenshots
   • Update contact information

3. Push to GitHub:

   git add .
   git commit -m "Customize portfolio content"
   git push origin main

4. Enable GitHub Pages in repository settings

📂 Project Structure

portfolio/
├── index.html              # Main HTML file
├── assets/
│   ├── css/
│   │   ├── main.css        # Main stylesheet
│   │   ├── fontawesome-all.min.css
│   │   └── noscript.css
│   ├── js/                 # JavaScript files
│   └── webfonts/           # Font files
├── images/                 # Project images
│   ├── ml-project.svg      # ML project placeholder
│   ├── web-project.svg     # Web app placeholder
│   └── data-project.svg    # Data analysis placeholder
├── _config.yml             # GitHub Pages configuration
└── README.md               # This file

🎯 Customization

Personal Information

Update the following in index.html:

• Name and titles in hero section
• About section content
• Skills and percentages
• Project details and links
• Contact information

Styling

Modify assets/css/main.css to customize:

• Color scheme (CSS variables at top)
• Typography and fonts
• Animation timings
• Layout spacing

Projects

For each project in the projects section:

• Update project title and description
• Change project image (replace placeholder SVGs)
• Modify technology tags
• Update GitHub/demo links

Images

Replace placeholder SVG files with actual project screenshots:

• Recommended size: 400x250px
• Formats: JPG, PNG, or SVG
• Optimize images for web performance

📊 Performance

• Lightweight and fast loading
• Optimized images and assets
• Smooth 60fps animations
• Mobile-first responsive design
• SEO-friendly structure

🔧 Local Development

To run locally:

1. Open index.html in a web browser
2. Or use a local server:

   python -m http.server 8000

3. Navigate to http://localhost:8000

📱 Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge
• Mobile browsers

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

Feel free to fork this project and customize it for your own portfolio!

📞 Contact

• Email: [email protected]
• Phone: (+91) 9900-348-848
• LinkedIn: Sumanth Dhanya
• GitHub: slackroo

---

⭐ If you found this portfolio template helpful, please give it a star!