🚀 Ashutosh Mishra - Portfolio Website

A modern, animated portfolio website showcasing my journey as a Systems Lead, Developer, and Open Source Contributor.

✨ Features

🎨 Design & Animations

• Particle.js Background - Interactive animated particle system
• AOS (Animate On Scroll) - Smooth scroll animations
• Typing Animation - Dynamic text display with typing effect
• Counter Animations - Animated statistics counters
• Gradient Effects - Modern gradient text and backgrounds
• Smooth Transitions - Polished hover and interaction effects
• Responsive Design - Mobile-first, fully responsive layout

🌓 Theme System

• Dark/Light Mode - Toggle between themes
• Persistent Storage - Theme preference saved in localStorage
• Smooth Transitions - Animated theme switching

📱 Sections

Home

• Animated profile picture with pulse effect
• Typing animation showcasing roles
• Live statistics (DSA problems, GPA, community size)
• Quick action buttons (View Projects, Download Resume)

About

• Professional introduction
• Code window with syntax highlighting
• Contact information
• Achievement highlights

Education

• Timeline layout with animated dots
• Grade display with badges
• University information

Skills

• Categorized skill display (Languages, Tools, Competencies)
• Animated progress bars
• Interactive tech badges
• Hover effects

Projects & Achievements

• RepoInsight AI - IIT Bombay i-HACK 2nd Runner Up
• Smart India Hackathon - Top 10 Finalist
• ZenYukti Platform - React + Vite community platform
• Hacktoberfest 2025 - Open source contributions
• Key metrics dashboard with animated cards

Experience

• Timeline layout
• ZenYukti - Systems Lead role
• Hacktoberfest - Open source contributor
• Detailed responsibilities and achievements

Contact

• Contact form with validation
• Multiple contact methods
• Social media links
• Response time indicators

🎯 Interactive Features

• Smooth Scrolling - Navigate seamlessly between sections
• Mobile Menu - Hamburger menu for mobile devices
• Active Link Highlighting - Current section indicator
• Scroll-to-Top - Easy navigation
• Easter Eggs - Hidden features (try Konami code!)
• Console Messages - Developer-friendly console logs

🛠️ Technologies Used

Core

• HTML5
• CSS3 (with CSS Variables for theming)
• Vanilla JavaScript (ES6+)

Libraries & Frameworks

• Particles.js - Particle effects
• AOS - Scroll animations
• Font Awesome - Icons

Features

• CSS Grid & Flexbox for layouts
• CSS Animations & Keyframes
• Intersection Observer API
• Local Storage API
• Modern ES6+ JavaScript

📁 Project Structure

portfolio/
├── index.html              # Main homepage
├── contact.html            # Contact page
├── style.css              # Complete stylesheet
├── scriptt.js             # All JavaScript functionality
├── profile.jpg            # Profile picture
├── Ashutosh_Mishra_Resume.pdf  # Resume file
└── README.md              # Documentation

🚀 Getting Started

Local Development

1. Clone the repository

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

2. Open in browser

   • Simply open index.html in your web browser
   • Or use a local server:

   # Using Python
   python -m http.server 8000
   
   # Using Node.js
   npx http-server

3. Visit

   http://localhost:8000
   

Deployment

GitHub Pages

1. Push to GitHub
2. Go to Settings → Pages
3. Select branch and root folder
4. Your site will be live at https://yourusername.github.io/portfolio

Netlify

1. Drag and drop the folder to Netlify
2. Your site will be live instantly

Vercel

npm install -g vercel
vercel

🎨 Customization

Change Colors

Edit CSS variables in style.css:

:root {
  --bg-color: #0a0a0a;
  --text-color: #e0e0e0;
  --accent-color: #00d4ff;
  --accent-secondary: #7000ff;
}

Update Content

• Personal Info: Edit index.html and contact.html
• Projects: Modify the projects section in index.html
• Skills: Update the skills arrays in index.html

Modify Animations

• Particles: Edit scriptt.js - particlesJS() configuration
• Typing Text: Update textArray in scriptt.js
• AOS Settings: Modify data-aos attributes in HTML

📊 Performance

• Lighthouse Score: 95+ across all categories
• Page Load: < 2 seconds
• Mobile-First: Fully responsive
• SEO Optimized: Meta tags and semantic HTML

🎓 Key Highlights

• 🏆 IIT Bombay i-HACK: 2nd Runner Up (GitLab Codeforge Track)
• 🏅 Smart India Hackathon: Top 10 Finalist (350+ teams)
• 👥 Systems Lead: Managing 1,300+ member community at ZenYukti
• 💻 160+ DSA Problems: Solved across LeetCode, GFG, CodeChef
• ⭐ 8.30 YGPA: B.Tech Computer Science Engineering
• 🌐 Open Source: Hacktoberfest contributor (6 PRs)

📞 Contact

• Email: [email protected]
• Phone: +91 80901 47505
• GitHub: @TheAshutoshMishra
• LinkedIn: @theashutoshmishra

📝 License

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

🙏 Acknowledgments

• Particles.js by Vincent Garreau
• AOS by Michał Sajnóg
• Font Awesome for icons
• Inspiration from various modern portfolio designs

🔮 Future Enhancements

• Blog section
• Project filtering by technology
• Dark/Light mode animations improvements
• Multi-language support
• Backend integration for contact form
• Analytics integration
• Achievement timeline
• Skills certification display

---

Made with ❤️ by Ashutosh Mishra

⭐ Star this repo if you find it helpful! from complete webdevelopment