Modern, responsive portfolio with glassmorphism design and red accent theme.
- Dark/light mode with system preference detection
- Glassmorphism UI with backdrop blur effects
- Fully responsive design (mobile + desktop)
- Mobile hamburger menu navigation
- Desktop scroll-spy dot navigation
- Typing animation for tagline
- Animated gradient background
- Scroll progress indicator
- Resume download with feedback states
- Dynamic copyright year
- Accessibility-first with ARIA labels, skip links, and focus indicators
- Vanilla HTML5, CSS3, JavaScript (no dependencies except fonts/icons)
- CSS custom properties (variables) for theming
- IntersectionObserver for scroll animations
- Font Awesome icons
- Google Fonts (Poppins)
- Header: Profile, social links, contact info
- Work Experience: Timeline with job history
- Skills: Categorized skill badges
- Projects: Featured open-source work
- Education: Academic background
- My Gears: Tech equipment showcase
All repeated values are centralized in :root:
--shadow-combined: Merged shadow + inset shadow pattern--touch-target: Consistent 44px touch target for accessibility--primary-bg,--primary-bg-light,--primary-border: Theme-aware primary colors--subtle-border,--subtle-bg: Theme-aware neutral colors- All variables auto-switch between light/dark modes
.glass-panel: Reusable glassmorphism effect (gradient, blur, shadow, border).stagger-animation: Cascading animation delays for child elements
Single-responsibility classes in script.js:
ThemeManager: Dark/light mode with localStorage persistenceScrollManager: Back-to-top button and progress barAnimationObserver: Intersection-based reveal animationsTypeWriter: Tagline typing effect with reduced-motion supportMobileMenu: Hamburger navigationDotNavigation: Desktop scroll-spy dotsResumeDownloader: PDF download with feedback statesPerformanceManager: Pauses animations when tab is hidden
- Theme flash prevention: Inline script in
<head>sets theme before CSS loads - Animation optimization: Background animations pause when tab is hidden
- Eager loading: Above-fold images use
loading="eager" - Reduced motion: Respects
prefers-reduced-motionpreference - SRI integrity: Font Awesome CDN includes subresource integrity hash
- Noscript fallback: Tagline displays without JavaScript
Edit content in index.html. Styling in style.css uses CSS variables defined in :root for easy theming. JavaScript in script.js handles all interactivity through modular classes.