🎓 B.Tech CSE (Cyber Security) | NIET Greater Noida | 2nd Year
Welcome to my interactive cybersecurity portfolio! This modern, responsive website showcases my journey as a cybersecurity student, featuring advanced animations, glassmorphism design, and comprehensive project demonstrations.
- 🎨 Modern Glassmorphism Design - Stunning visual effects with backdrop blur
- 🌊 Particle.js Integration - Dynamic cybersecurity-themed background
- 📱 Fully Responsive - Perfect experience across all devices
- 🔄 Smooth Animations - Intersection Observer API for performance
- 📧 Contact Form - EmailJS integration for direct communication
- 🎯 Interactive Elements - Hover effects and micro-interactions
- 🌙 Dark/Light Mode - Automatic theme switching
- ⚡ Performance Optimized - Lazy loading and efficient animations
- CSS Variables for consistent theming
- Intersection Observer API for scroll animations
- CSS Grid & Flexbox for responsive layouts
- Custom CSS Animations for enhanced UX
- Glassmorphism Effects for modern aesthetics
cybersecurity-portfolio/
├── 📄 index.html # Main HTML structure
├── 🎨 style.css # Comprehensive styling with glassmorphism
├── ⚡ app.js # Interactive functionality
├── 📖 README.md # Project documentation
├── 📜 LICENSE # MIT License
├── 🔧 .gitignore # Git ignore rules
└── 📁 assets/ # (Optional) Images and media
- Dynamic typing animation with cybersecurity roles
- Social media links with hover effects
- Call-to-action buttons with smooth animations
- Particle.js background for visual appeal
- Professional overview and background
- Interactive statistics with counter animations
- Skills highlight cards
- Educational journey
- Timeline layout with glassmorphism cards
- Internship details and achievements
- Technology tags and descriptions
- Hover animations for enhanced UX
- Categorized skill sets (Cybersecurity & Programming)
- Animated progress bars with glow effects
- Skill descriptions and proficiency levels
- Interactive hover states
- Featured project showcase
- GitHub integration links
- Technology stack display
- Project categories and descriptions
- Current academic status
- Upcoming certifications
- Coursework highlights
- Professional development goals
- Multi-channel contact form
- Real-time form validation
- EmailJS integration
- Quick action cards
- Social media integration
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Git (for cloning)
- Basic knowledge of HTML/CSS/JS (for customization)
-
Clone the repository
git clone https://github.com/bitcodeAShishcloud/cybersecurity-portfolio.git cd cybersecurity-portfolio -
Open in browser
# Simply open index.html in your browser # Or use a local server python -m http.server 8000 # Python 3 # Or npx serve . # Node.js
-
Customize (Optional)
- Update personal information in
index.html - Modify colors and themes in
style.css - Adjust animations and functionality in
app.js
- Update personal information in
- Create an account at EmailJS
- Set up your email service
- Update the configuration in
app.js:emailjs.init('YOUR_PUBLIC_KEY'); // Update service and template IDs
- Colors: Modify CSS variables in
:rootselector - Animations: Adjust timing and effects in CSS and JS
- Content: Update HTML content with your information
- Particles: Configure particle.js settings in
app.js
The portfolio is fully responsive and tested across:
| Device Type | Screen Size | Status |
|---|---|---|
| 📱 Mobile | 320px - 768px | ✅ Optimized |
| 📊 Tablet | 768px - 1024px | ✅ Optimized |
| 💻 Desktop | 1024px+ | ✅ Optimized |
| 🖥️ Large Screens | 1400px+ | ✅ Optimized |
- Semi-transparent backgrounds with backdrop blur
- Subtle border gradients
- Layered shadow effects
- Modern card designs
- Scroll-triggered animations using Intersection Observer
- Smooth transitions with cubic-bezier timing
- Particle system for visual engagement
- Typing animation for dynamic content
- Primary: Teal/Cyan (#00D4FF) for cybersecurity theme
- Secondary: Warm grays and subtle browns
- Accent: Strategic use of orange and red for CTAs
- Dark Mode: Automatic switching with user preference
- Lazy Loading: Images and heavy content load on demand
- Optimized Animations: GPU-accelerated transforms
- Efficient Event Handling: Throttled scroll listeners
- Minimal Dependencies: Core functionality with lightweight libraries
- Fast Loading: Optimized CSS and JS delivery
- Email: [email protected]
- LinkedIn: Ashish Gupta
- GitHub: @bitcodeAShishcloud
- 🎯 Cybersecurity Internships
- 💼 Entry-level Security Positions
- 🤝 Project Collaborations
- 👨🏫 Mentorship Opportunities
- 🌐 Networking & Knowledge Sharing
While this is a personal portfolio, I welcome suggestions and improvements!
- Fork the repository
- Create a feature branch (
git checkout -b feature/improvement) - Commit your changes (
git commit -am 'Add some improvement') - Push to the branch (
git push origin feature/improvement) - Create a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- 🎓 2nd Year - B.Tech CSE (Cyber Security)
- 💼 2 Internships - Completed at Prodigy InfoTech & CodSoft
- 🛠️ 10+ Skills - Mastered across cybersecurity and development
- 🚀 Available - Seeking new opportunities
- 🎯 CompTIA Security+ Certification
- 🔒 Certified Ethical Hacker (CEH)
- 🏢 Cybersecurity Internship at leading firm
- 🌐 Open Source Contributions to security projects
- Intersection Observer API for performance-optimized animations
- CSS Custom Properties for maintainable theming system
- EmailJS Integration for serverless contact functionality
- Responsive Grid Layouts with CSS Grid and Flexbox
- Progressive Enhancement for accessibility
- Modern ES6+ JavaScript with error handling
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- NIET Greater Noida - For excellent cybersecurity education
- Prodigy InfoTech - For cybersecurity internship opportunity
- CodSoft - For Python development internship
- Open Source Community - For amazing libraries and tools
