🚀 Awesome Demo Portfolio

---

✨ Features

🎨 Design

• Dark theme with neon cyan/purple/pink accents
• Animated hero section with typing effect
• Canvas-based particle animation background with mouse interaction
• Responsive design — mobile, tablet, and desktop
• Smooth scroll animations with IntersectionObserver
• CSS Grid & Flexbox layouts

📊 Interactive Dashboard Widgets

Widget	Description
🕐 Live Clock	Real-time clock with date, time, and timezone
📈 Activity Chart	Animated canvas bar chart with weekly data
🎯 Donut Chart	Animated skills distribution visualization
🌤️ Weather Widget	Simulated weather with auto-updating
💻 System Info	Browser and device information
📊 Quick Stats	Animated counters for key metrics

⚡ Functionality

• Task Tracker — Full CRUD with localStorage persistence, priority levels, and filtering
• Project Gallery — Filterable project cards with hover effects
• Skills Showcase — Animated progress bars triggered on scroll
• Contact Form — Client-side validation with simulated submission
• Mobile Navigation — Hamburger menu with smooth transitions
• Back to Top button with scroll-based visibility

♿ Accessibility

• Semantic HTML5 elements with ARIA attributes
• prefers-reduced-motion support
• prefers-contrast: high support
• Keyboard navigation and focus-visible styles
• Screen reader-friendly structure

📁 Project Structure

demo-app/
├── index.html              # Main single-page application
├── css/
│   └── style.css           # Complete styling with CSS custom properties
├── js/
│   ├── app.js              # Main application logic (nav, tasks, projects, etc.)
│   ├── particles.js        # Canvas-based particle animation system
│   └── widgets.js          # Dashboard widgets (clock, charts, weather, etc.)
├── README.md               # This file
└── .github/
    └── workflows/
        └── deploy.yml      # GitHub Pages auto-deployment

🛠️ Technologies Used

• HTML5 — Semantic markup, ARIA attributes
• CSS3 — Custom properties, Grid, Flexbox, animations, transitions
• Vanilla JavaScript — ES6+ modules, Canvas API, localStorage, IntersectionObserver
• Google Fonts — Orbitron, Inter, Fira Code

🚀 Getting Started

Local Development

# Clone the repository
git clone https://github.com/Srikanta2000/awesome-demo-portfolio.git
cd awesome-demo-portfolio

# Open in browser (no build step needed!)
open index.html

Or use any local server:

# Python 3
python3 -m http.server 8000

# Node.js
npx serve .

📸 Screenshots

Screenshots coming soon — visit the live demo to see it in action!

Hero Section	Dashboard	Tasks
Animated hero with particles	Interactive widgets	Task tracker with localStorage

🎯 What Makes This Special

1. Zero dependencies — Pure vanilla HTML/CSS/JS, no frameworks or libraries
2. Canvas particle system — Custom particle animation with mouse interaction
3. Fully functional — Task tracker actually works with localStorage persistence
4. Performance optimized — Uses requestAnimationFrame, IntersectionObserver, passive event listeners
5. Accessibility first — ARIA labels, keyboard navigation, reduced motion support
6. Beautiful design — Dark theme with neon accents, glassmorphism effects, smooth animations

📄 License

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

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📬 Contact

• GitHub: @Srikanta2000
• Email: srikanta@example.com

---