Add WebGL shader background with dithering effects and futuristic dark theme

[Copilot]

Transform portfolio into a futuristic dark aesthetic with procedural dithering effects, particle systems, and glassmorphism. Clean, minimal design without cyberpunk elements.

Implementation

WebGL Shader System

• Custom GLSL fragment shader with Bayer dithering matrix
• Fractal Brownian Motion for procedural noise patterns
• Quantized color output for pixelated futuristic aesthetic
• Pure WebGL implementation (React 18 compatible, no Three.js)

// Shader constants for tunable parameters
const float TIME_SCALE = 0.15;
const float PATTERN_SCALE = 3.0;
const float COLOR_QUANTIZATION = 6.0;

Particle Field

• Canvas-based particle system with dynamic connections
• Distance-based line rendering between particles
• Configurable density and connection thresholds
• Performance-optimized with named constants

Visual System

• Background: Multi-layer shader with animated dithering
• Glassmorphism: Frosted glass cards with backdrop-filter: blur(20px)
• Color palette: Deep blue gradients (#0a0a0f → #2025/35)
• Effects: Scanline animation, glowing text, gradient borders on hover
• Typography: Inter font with text-shadow glow

Theme Architecture

• Dark theme as default (data-theme="dark")
• Enhanced SCSS with glassmorphism tokens
• Optimized transition selectors (removed universal * selector)
• Responsive design maintained across viewports

Visual Changes

Desktop:

Mobile:

Security

CodeQL: 0 vulnerabilities

Original prompt

Create a slick personal website for a product design portfolio, I want it to reature a dark meme/aesteuc, dinering enects tnat teel scin and Allike. incredible 3D shaders, just go over the top with this one and be as out there as possible, and specifically I want the dithering effects to feel incredibly futursitic. No cyberpunk shit. Clean, minimal.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.