A modern, responsive, single-page developer portfolio built with HTML5, CSS3, and JavaScript. It serves as a clean, professional introduction with all essential links and information.
- Modern Glassmorphism Design - Clean, professional aesthetic with backdrop blur effects
- Dark/Light Theme Toggle - Automatic theme detection with manual override
- Responsive Design - Optimized for all devices (mobile, tablet, desktop)
- Smooth Animations - Subtle hover effects and micro-interactions
- Interactive Particles Background - Dynamic particle system that responds to user interaction
- CSS Custom Properties - Comprehensive design system with CSS variables
- Modular CSS Architecture - Organized into theme, base, components, animations, and responsive modules
- Progressive Enhancement - Works without JavaScript for basic functionality
- Accessibility - ARIA labels, keyboard navigation, and focus management
- SEO Optimized - Meta tags for social sharing and search engines
- Touch-friendly interface with 44px minimum touch targets
- Responsive typography and spacing
- Optimized particle effects for mobile performance
- Mobile-first responsive design approach
kappil-garg.github.io/
├── assets/
│ ├── icons/
│ │ └── favicon.ico
│ └── images/
│ ├── personal-icon.png
│ └── profile-pic.png
├── css/
│ ├── animations.css # Keyframe animations and transitions
│ ├── base.css # Base styles and resets
│ ├── components.css # Component-specific styles
│ ├── print.css # Print styles
│ ├── responsive.css # Media queries and responsive design
│ ├── styles.css # Main CSS entry point
│ └── theme.css # CSS variables and theme configuration
├── js/
│ ├── main.js # Theme toggle and core functionality
│ └── particles-config.js # Particles.js configuration
├── index.html # Main HTML file
├── LICENSE # MIT License
└── README.md # This file
- Fixed position with glassmorphism effect
- Personal logo with hover animation
- Theme toggle switch with sun/moon icons
- Profile picture with pulse animation and hover effects
- Gradient animated name
- Professional description with experience highlights
- Social media links with platform-specific hover colors
- Profile Picture - Shimmer effect on hover with rotation
- Social Icons - Platform-specific colors and smooth transitions
- Theme Toggle - Smooth sliding animation between themes
- Particles Background - Interactive particle system with hover effects
- Primary: Teal gradient (#14b8a6 to #06b6d4)
- Light Theme: Clean whites and slate grays
- Dark Theme: Deep blues and grays
- Accents: Teal variations for interactive elements
- Font Family: Inter (Google Fonts)
- Weights: 300, 400, 500, 600, 700
- Responsive: Scales appropriately across devices
- CSS Grid & Flexbox for modern layouts
- Consistent spacing scale (6px to 32px)
- Mobile-first responsive breakpoints
- Optimized Assets - Compressed images and minified CSS
- Efficient Animations - Hardware-accelerated CSS transforms
- Lazy Loading - Deferred non-critical resources
- Preconnect Links - Faster font and icon loading
- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
- HTML5 - Semantic markup and accessibility
- CSS3 - Modern features (Grid, Flexbox, Custom Properties)
- Vanilla JavaScript - No frameworks, lightweight and fast
- Particles.js - Interactive background effects
- FontAwesome - Social media icons
- Google Fonts - Inter typography
This project is licensed under the MIT License - see the LICENSE file for details.
Note: Logo, profile images, and personal branding assets are the property of Kapil Garg and are not covered under this MIT license. These assets may not be used, reproduced, or distributed without explicit permission.
This is a personal digital card project, but suggestions and feedback are welcome!
- Portfolio: kappilgarg.dev
- GitHub: @kappil-garg
- LinkedIn: kappil-garg