perf: remove R3F from hero, rebuild with CSS/SVG-only orbital composition

Performance reset — no more WebGL in the hero.

- Deleted CoreHaloCanvas.tsx and CoreHalo.tsx (all Three.js/R3F removed from hero)
- Deleted src/components/three/ and src/components/sections/Hero3DSection.tsx (dead code)
- Removed 3 large npm packages: @react-three/fiber, @react-three/drei, three (partial)
- Bundle dropped from 1274 KB to 390 KB (gzip: 357 KB to 121 KB)

BackgroundCanvas — heavy reduction:
- Removed all 20 animated star elements (framer-motion infinite loops)
- Removed 3 large blur orbs (500px, 400px, 350px with blur(80/70/60px))
- Kept only static technical grid with slow parallax + 1 static ambient radial glow
- Removed dead orb-float-1/2/3 CSS keyframes from index.css

CoreHeroSection — rebuilt without R3F:
- Removed CoreHaloCanvas entirely; hero is now pure DOM + CSS + SVG
- HaloDecoration component: CSS/SVG orbital rings (3 ellipses + 2 orbiting dots)
  via CSS keyframes — no useFrame, no Canvas, no WebGL
- Le Huy is now the unambiguous visual core

SatelliteSystem — compact orbital layout:
- Simplified to absolute inset-0 inside core stage
- SVG connector lines from center to each satellite
- Each satellite: module shell (glassmorphism box with boxShadow + backdropFilter),
  mini orb dot, label, sublabel — all CSS, no SVG filter
- prefers-reduced-motion: satellites appear instantly in final positions

MiniSystemVisual (ProjectsSection) — redesigned without SVG filter:
- Dropped archNodes + auto-tier layout
- New data model: nodes: { id, label, x, y, kind? }[] + connections: [id, id][]
- Each project has hand-crafted layout and explicit connections
- Removed SVG feGaussianBlur filter — replaced with CSS boxShadow glow per node
- Connection lines: simple SVG stroke, no heavy filter chain

Code hygiene:
- No 'use client' directives remaining in any Vite file
- TypeScript compiles clean (tsc --noEmit)
- Playwright verified: 0 R3F canvases, 0 SVG filters, 0 blur orbs, 0 star
  elements, 0 JS errors across all 4 viewports (1280x720, 768x1024,
  375x667, 1440x900)

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: lhcaps

src/components/BackgroundCanvas.tsx

@@ -1,106 +1,42 @@
-import { useMemo } from "react"
-import { motion, useScroll, useTransform } from "framer-motion"
+import { useRef } from 'react'
+import { motion, useScroll, useTransform } from 'framer-motion'
 
 export function BackgroundCanvas() {
   const { scrollYProgress } = useScroll()
 
-  const dotsY = useTransform(scrollYProgress, [0, 1], ["0%", "-8%"])
-
-  const stars = useMemo(() => {
-    return Array.from({ length: 20 }, (_, i) => ({
-      id: i,
-      x: `${5 + (i * 97) % 90}%`,
-      y: `${5 + (i * 71) % 80}%`,
-      size: 1 + (i % 3) * 0.8,
-      delay: (i * 0.7) % 5,
-      duration: 3 + (i % 4),
-    }))
-  }, [])
+  const gridY = useTransform(scrollYProgress, [0, 1], ['0%', '-6%'])
 
   return (
     <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none" aria-hidden="true">
-      {/* Base */}
-      <div className="absolute inset-0" style={{ background: "hsl(var(--bg))" }} />
+      {/* Base background */}
+      <div className="absolute inset-0" style={{ background: 'hsl(var(--bg))' }} />
 
-      {/* Technical grid */}
+      {/* Technical grid — subtle, slow parallax */}
       <motion.div
-        className="absolute inset-0 opacity-[0.06]"
+        className="absolute inset-0 opacity-[0.04]"
         style={{
           backgroundImage: `
-            linear-gradient(rgba(103, 232, 249, 0.5) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(103, 232, 249, 0.5) 1px, transparent 1px)
+            linear-gradient(rgba(103, 232, 249, 0.6) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(103, 232, 249, 0.6) 1px, transparent 1px)
           `,
-          backgroundSize: "60px 60px",
-          y: dotsY,
-        }}
-      />
-
-      {/* Orb 1 - top left, cyan */}
-      <div
-        className="absolute w-[500px] h-[500px] rounded-full"
-        style={{
-          background: "radial-gradient(circle, rgba(103, 232, 249, 0.08) 0%, transparent 65%)",
-          filter: "blur(80px)",
-          left: "-10%",
-          top: "-5%",
-          animation: "orb-float-1 30s ease-in-out infinite",
-          willChange: "transform",
+          backgroundSize: '60px 60px',
+          y: gridY,
         }}
       />
 
-      {/* Orb 2 - bottom right, violet */}
+      {/* Single soft ambient glow — static, no animation, no blur */}
       <div
-        className="absolute w-[400px] h-[400px] rounded-full"
+        className="absolute"
         style={{
-          background: "radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 65%)",
-          filter: "blur(70px)",
-          right: "-8%",
-          bottom: "10%",
-          animation: "orb-float-2 25s ease-in-out infinite",
-          willChange: "transform",
+          width: '600px',
+          height: '600px',
+          left: '50%',
+          top: '40%',
+          transform: 'translate(-50%, -50%)',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(103,232,249,0.05) 0%, transparent 65%)',
         }}
       />
-
-      {/* Orb 3 - center-top, deep */}
-      <div
-        className="absolute w-[350px] h-[350px] rounded-full"
-        style={{
-          background: "radial-gradient(circle, rgba(14, 165, 233, 0.05) 0%, transparent 65%)",
-          filter: "blur(60px)",
-          left: "35%",
-          top: "20%",
-          animation: "orb-float-3 20s ease-in-out infinite",
-          willChange: "transform",
-        }}
-      />
-
-      {/* Star field - reduced from 40 to 20 */}
-      {stars.map((star) => (
-        <motion.div
-          key={star.id}
-          className="absolute rounded-full"
-          style={{
-            left: star.x,
-            top: star.y,
-            width: star.size,
-            height: star.size,
-            background:
-              star.id % 3 === 0
-                ? "rgba(103, 232, 249, 0.6)"
-                : "rgba(103, 232, 249, 0.4)",
-          }}
-          animate={{
-            opacity: [0.1, 0.6, 0.1],
-            scale: [0.8, 1.2, 0.8],
-          }}
-          transition={{
-            duration: star.duration,
-            repeat: Infinity,
-            delay: star.delay,
-            ease: "easeInOut",
-          }}
-        />
-      ))}
     </div>
   )
 }