Add interactive 3D animated portfolio background

[Dev-Sahad]

What changed

• Replaced the flat CSS background with a full-page WebGL 3D environment.
• Added layered cyan and violet depth particles, an orbital wireframe sculpture, and a floating torus-knot form.
• Added smooth cursor parallax, scroll drift, ambient gradients, a perspective grid, and edge vignetting.
• Dynamically loads the heavy Three.js scene and caps device pixel ratio for performance.
• Preserves the existing reduced-motion/performance control through data-heavy-visual.

Why

The portfolio needed a distinctive animated background that adds depth across every section without obscuring content or overloading the initial JavaScript bundle.

Validation

• npm run lint
• npm run build
• Local browser verification confirmed meaningful page content, two rendered canvases, the background behind the interface, the portfolio section present, and no Next.js error overlay.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
portfolio	Ready	Preview	Jul 31, 2026 5:53am