9ed39f96538348ed2976e1a51686713aacdd2472
Wiktor - Tech Enthusiast Portfolio
🌟 NEW: Full Glassmorphism Theme + Enhanced Contact System
✨ Complete Glassmorphism Redesign
- Transparent Glass Theme throughout the entire site
- Backdrop Blur Effects on all components
- Floating Glass Cards for content sections
- Enhanced Particle System with dynamic backgrounds
- Revamped Contact Section with animated clickable buttons
🎯 Authentic Hobbyist Experience
This portfolio honestly represents my journey as a weekend tech tinkerer - no inflated claims, just genuine curiosity about technology!
Key Features
🔮 Full Glassmorphism Design
- Glass Cards: Every section uses transparent, blurred backgrounds
- Layered Transparency: Multiple depth levels with backdrop filters
- Dynamic Lighting: Animated gradients and glow effects
- Floating Elements: 3D-style cards that hover and respond
- Particle Background: Animated elements that enhance the glass effect
🌟 Enhanced Glass Sidebar
- Ultra-Transparent Design with multiple blur layers
- Smart Navigation with section tracking
- Social Integration with actual contact links
- Mobile-Optimized full-screen glass overlay
🎨 Revamped Sections
Hero Section
- Glass Content Card with floating particles
- Enhanced Typewriter: "Hobby Programmer" → "Home Lab Enthusiast" → "Weekend Tinkerer" → "Tech Explorer" → "ROM Experimenter"
- Glowing Text Effects with drop shadows
- Animated Glass Buttons with sweep effects
About Section
- Transparent Content Cards with honest bio
- Interactive Competency List with hover animations
- Learning Note Callouts with special glass styling
- Authentic Messaging about hobbyist experience
Experimentation Toolkit
- Revamped Tech Section with casual language:
- "Technologies I've Been Playing Around With"
- "Search my toolkit..."
- Filter buttons: "Everything", "Coding", "Web Stuff", etc.
- Enhanced Tech Cards with 3D hover effects
- Casual Proficiency Labels: "Dabbling", "Weekend Fun", "Home Lab", etc.
- Glass Filter Controls with animated interactions
Interactive Contact Section
- Animated Contact Buttons with your actual links:
- 📧 Email: wiktator.olszewski@gmail.com
- ⚡ GitHub: github.com/overspend1
- 💬 Telegram: t.me/overspend1
- Advanced Button Animations:
- Particle burst effects on hover
- Color-coded themes for each platform
- Ripple click effects
- Success feedback animations
- Staggered entrance animations
🎯 Honest Tech Stack
Updated with authentic hobbyist language:
- "Coding & Scripting" instead of "Programming & Scripting"
- "Web & Server Stuff" instead of formal technical terms
- Casual proficiency levels: "Dabbling", "Tinkering", "Weekend Project"
- Real use cases: "Daily Gamer", "Password Manager", "Media Server"
Technical Implementation
Glassmorphism CSS Features
/* Glass Card Base */
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* Enhanced Contact Buttons */
.contact-btn {
backdrop-filter: blur(20px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
Advanced Contact Animations
- ContactAnimations Class: Handles button interactions
- Particle System: Creates burst effects on hover
- Ripple Effects: Click feedback with expanding circles
- Color Themes: Unique colors for each contact method
- Success Feedback: Animated tooltips on click
Enhanced Particle System
- Multi-layer Particles: Different sizes and speeds
- Glassmorphism Integration: Particles complement transparent theme
- Performance Optimized: GPU-accelerated animations
Project Structure
portfolio/
├── index.html # Full glassmorphism HTML
├── css/
│ ├── main.css # Complete glass theme
│ ├── animations.css # Enhanced particle effects
│ ├── tech-stack.css # Glass tech cards
│ ├── sidebar.css # Ultra-transparent sidebar
│ └── responsive.css # Mobile glass optimization
├── js/
│ ├── main.js # Core functionality
│ ├── typewriter.js # Hobbyist typewriter sequence
│ ├── tech-stack.js # Casual tech filtering
│ ├── sidebar.js # Glass sidebar interactions
│ ├── animations.js # Enhanced effects
│ └── contact-animations.js # Advanced contact system
├── assets/
│ └── data/
│ └── tech-stack.json # Honest hobbyist data
└── README.md
Honest Messaging Examples
- "Experimentation Toolkit" instead of "Tech Stack"
- "Technologies I've Been Playing Around With"
- "Search my toolkit..." instead of professional terms
- Casual filters: "Everything", "Coding", "Web Stuff"
- Real proficiency: "Dabbling", "Weekend Fun", "Daily Use"
Contact Information (Real Links!)
- 📧 Email: wiktator.olszewski@gmail.com
- ⚡ GitHub: github.com/overspend1
- 💬 Telegram: t.me/overspend1
Browser Support
- Chrome 60+: Full glassmorphism with backdrop-filter
- Firefox 55+: Graceful fallback without backdrop-filter
- Safari 12+: Full glassmorphism support
- Edge 79+: Complete feature support
Getting Started
- Open
index.htmlin any modern browser - Experience the full glassmorphism theme
- Click the ☰ button for the enhanced glass sidebar
- Try the animated contact buttons
- Explore the revamped toolkit section
Performance Features
- Hardware Acceleration: GPU-powered glass effects
- Optimized Animations: 60fps smooth interactions
- Lazy Loading: Efficient particle systems
- Mobile Optimized: Touch-friendly glass interfaces
© 2024 Wiktor. Tech Enthusiast. Always Learning.
🎬 Experience the Glass
A complete glassmorphism portfolio that honestly showcases my journey as a hobbyist tech explorer. Every element is transparent, every animation is smooth, and every claim is authentic to my actual experience level.
Description
Languages
JavaScript
42.7%
CSS
38.7%
HTML
14.7%
Shell
3.9%