Wiktor ba9998da8a yes
uhh yes
2025-09-15 21:22:07 +02:00
2025-07-07 13:09:08 +02:00
yes
2025-09-15 21:22:07 +02:00

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:
  • 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"

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

  1. Open index.html in any modern browser
  2. Experience the full glassmorphism theme
  3. Click the ☰ button for the enhanced glass sidebar
  4. Try the animated contact buttons
  5. 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
No description provided
Readme 70 KiB
Languages
JavaScript 42.7%
CSS 38.7%
HTML 14.7%
Shell 3.9%