A completely unique, ultra-futuristic portfolio website blending cyberpunk neon aesthetics with modern UI design trends. This is a signature "c0mrade style" interface built with pure HTML, CSS, and JavaScript.
- Cyberpunk Neon Aesthetic: Glowing cyan and magenta gradients with high-contrast cyber text
- Glassmorphism: Translucent blur panels with modern glass-like appearance
- Neumorphism: Soft shadowed surfaces with subtle depth
- 3D Depth & Floating Elements: Parallax layers and rotating floating components
- Animated Gradients: Dynamic gradient lighting with smooth transitions
- Particle System: Continuous animated particles with smooth floating effects
- Terminal-Inspired Animations: Typewriter text effects and glitch animations
- SVG Neon Grid: Animated background grid with moving patterns
- Fully responsive design (mobile, tablet, desktop)
- Smooth scrolling with parallax effects
- Dark/Light mode toggle with local storage persistence
- Keyboard shortcuts (Alt+L for theme, Alt+H for home)
- Hover effects with 3D perspective transforms
- Intersection observer for lazy loading
- Performance optimized animations
portfolio2/
├── index.html # Semantic HTML structure with all sections
├── style.css # Advanced CSS with animations and effects
├── script.js # Interactive features and animations
└── README.md # This file
- Open
index.htmldirectly in your browser (no server required) - All features work offline
# If you have Python 3 installed
python -m http.server 8000
# Or with Node.js
npx http-serverThen navigate to http://localhost:8000
- Animated Typewriter: Cycles through different identity tags
- Neon Grid Background: Moving animated grid pattern
- Floating Orbs: Gradient-filled floating elements
- Particle Effects: Continuous particle generation
- CTA Buttons: Primary and secondary action buttons
- Professional biography with cybersecurity focus
- Glassmorphic card design
- Neumorphic stat cards showing achievements
- Smooth hover transitions
- 8 Skill Categories: Frontend, Backend, Pentesting, Security, Systems, Learning Platforms, and Specialties
- Neon Badges: Glowing skill tags with micro-animations
- Hover Effects: Scale and glow on interaction
- Organized Layout: Grid-based responsive layout
- 6 Project Cards: Real project descriptions with icons
- Technologies Showcase: Tech tags for each project
- Glass Card Design: Semi-transparent with hover effects
- Interactive Links: Smooth state transitions
- Email, Telegram, and GitHub links
- Glassmorphic contact buttons
- Icon animations on hover
- Alt + L: Toggle dark/light mode
- Alt + H: Scroll to home/hero section
- Type "c0mrade": Unlock easter egg in console
No Frameworks - Pure Web Standards:
- HTML5 for semantic structure
- CSS3 with advanced features:
- CSS Grid and Flexbox
- Custom Properties (CSS Variables)
- Keyframe animations
- Backdrop filters (glassmorphism)
- Gradients and shadows
- Vanilla JavaScript with classes for organization:
- TypeWriter animation
- ParticleSystem
- ThemeToggle
- ScrollManager
- HoverEffects
- And more...
Edit CSS variables in style.css:
:root {
--neon-cyan: #00ffff;
--neon-magenta: #ff00ff;
--neon-purple: #a855f7;
--neon-pink: #ec4899;
/* ... more variables ... */
}Modify font families and sizes:
--font-primary: 'Courier New', monospace;
--font-display: 'Monaco', monospace;Update content in index.html:
- Change name and bio in about section
- Add/remove projects
- Update skill categories
- Modify contact links
- ✅ Chrome/Edge 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
- Optimized animations using
requestAnimationFrame - Lazy loading with Intersection Observer
- Reduced motion support for accessibility
- Minimal bundle size: All CSS/JS inline (no external dependencies)
- Page load time: Typically under 1 second
In index.html, update the email link:
<a href="mailto:[email protected]" class="contact-button glass-card">Update Telegram and GitHub URLs:
<a href="https://t.me/your-username" class="contact-button glass-card">
<a href="https://github.com/your-username" class="contact-button glass-card">In script.js, edit the TypeWriter initialization:
new TypeWriter('typewriter', [
'> Your Title',
'> Another Title',
// ... more titles
], 80, 1500);Adjust animation speeds in script.js:
- TypeWriter speed: Change
80parameter - Particle count: Change
60parameter - Scroll parallax effect: Adjust
0.5multiplier
| Section | Content | Design Pattern |
|---|---|---|
| Navigation | Logo, Menu, Theme Toggle | Glassmorphic |
| Hero | Title, Subtitle, CTA Buttons | Cyberpunk + Particles |
| About | Bio, Stats | Glass Cards + Neumorphic |
| Skills | 8 Categories, Neon Badges | Grid Layout |
| Projects | 6 Project Cards | Glass Cards |
| Contact | Email, Telegram, GitHub | Glass Cards |
| Footer | Copyright, Subtitle | Minimal |
- No external dependencies (no supply chain risks)
- No tracking or analytics
- No backend required
- Safe to host anywhere
- Pure client-side rendering
This portfolio is created as a personal brand showcase for c0mrade. Feel free to use as inspiration but please credit and customize for your own identity.
Developer: c0mrade Design Inspiration: Modern 2025 UI trends combining:
- Cyberpunk aesthetics
- Apple minimalism
- Glassmorphism
- Neumorphism
- 3D web design
Potential additions (keep it pure):
- Project filtering system
- Scroll-triggered animations
- ASCII art elements
- More keyboard shortcuts
- Command palette
- Matrix-style digital rain effect
- Customize the colors to match your personal brand
- Add real projects with GitHub links
- Update the bio with your actual achievements
- Optimize for SEO by updating meta tags
- Deploy to GitHub Pages for free hosting
- Share across socials with the live link
c0mrade Portfolio | Red Team Trainee • Cybersecurity Enthusiast • Full-Stack Developer Crafted with precision. Security through curiosity. Power through knowledge. 🔐