Add interactive bg

Author: shield44

src/components/InteractiveBackground.tsx

@@ -2,6 +2,14 @@
 
 import { useEffect, useRef } from 'react'
 
+interface Particle {
+  x: number
+  y: number
+  vx: number
+  vy: number
+  radius: number
+}
+
 const InteractiveBackground = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
@@ -24,107 +32,99 @@ const InteractiveBackground = () => {
     }
     window.addEventListener('resize', resize)
 
-    // Configuration for the 3D mesh
-    const cols = 40
-    const rows = 40
-    const scale = 40 // space between points
-    const meshWidth = cols * scale
-    const meshHeight = rows * scale
+    // Configuration
+    const particleCount = Math.floor((width * height) / 15000)
+    const connectionDistance = 150
+    const particles: Particle[] = []
 
     // Mouse interaction
-    let mouseX = width / 2
-    let mouseY = height / 2
-    let targetMouseX = width / 2
-    let targetMouseY = height / 2
-
+    let mouse = { x: -1000, y: -1000 }
     const handleMouseMove = (e: MouseEvent) => {
-      targetMouseX = e.clientX
-      targetMouseY = e.clientY
+      mouse.x = e.clientX
+      mouse.y = e.clientY
+    }
+    const handleMouseLeave = () => {
+      mouse.x = -1000
+      mouse.y = -1000
     }
     window.addEventListener('mousemove', handleMouseMove)
-
-    let time = 0
-
-    // Simple pseudo-random noise function using trig
-    const noise = (x: number, y: number, t: number) => {
-      return Math.sin(x * 0.05 + t) * Math.cos(y * 0.05 + t * 0.8) * 40 +
-             Math.sin(x * 0.02 - t * 0.5) * Math.cos(y * 0.03 + t) * 60
+    document.addEventListener('mouseleave', handleMouseLeave)
+
+    // Init particles
+    for (let i = 0; i < particleCount; i++) {
+      particles.push({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        vx: (Math.random() - 0.5) * 0.5,
+        vy: (Math.random() - 0.5) * 0.5,
+        radius: Math.random() * 1.5 + 0.5
+      })
     }
 
     const animate = () => {
-      ctx.fillStyle = '#000000'
+      ctx.clearRect(0, 0, width, height)
+      
+      // Draw a subtle gradient background
+      const bgGradient = ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, width)
+      bgGradient.addColorStop(0, '#0a0a0f')
+      bgGradient.addColorStop(1, '#000000')
+      ctx.fillStyle = bgGradient
       ctx.fillRect(0, 0, width, height)
 
-      // Smooth mouse interpolation
-      mouseX += (targetMouseX - mouseX) * 0.05
-      mouseY += (targetMouseY - mouseY) * 0.05
-
-      time += 0.015
-
-      // Center the mesh horizontally and position it at the bottom
-      const startX = (width - meshWidth) / 2
-      const startY = height * 0.3 // Perspective shift
-
-      ctx.strokeStyle = 'rgba(0, 229, 255, 0.15)' // Electric Cyan with low opacity
-      ctx.lineWidth = 1
-
-      // Calculate 3D points
-      const points: { x: number, y: number, z: number }[][] = []
-
-      for (let y = 0; y < rows; y++) {
-        points[y] = []
-        for (let x = 0; x < cols; x++) {
-          // Calculate base elevation from pseudo-noise
-          let elevation = noise(x * scale, y * scale, time)
-
-          // Mouse interaction (repel/create a crater)
-          // Map mouse coordinates to grid space approximately
-          const gridMouseX = (mouseX - startX) / scale
-          const gridMouseY = ((mouseY - startY) / scale) * 2 // Perspective factor
-          
-          const dx = x - gridMouseX
-          const dy = y - gridMouseY
-          const dist = Math.sqrt(dx * dx + dy * dy)
-          
-          if (dist < 10) {
-            elevation -= (10 - dist) * 15 // Sink down when mouse is near
-          }
-
-          // Apply pseudo-isometric 3D projection
-          const px = startX + x * scale
-          // Compress the Y axis to simulate viewing angle, subtract elevation
-          const py = startY + (y * scale) * 0.4 - elevation + y * 10 
-
-          points[y][x] = { x: px, y: py, z: elevation }
+      // Update and draw particles
+      for (let i = 0; i < particles.length; i++) {
+        const p = particles[i]
+
+        // Move
+        p.x += p.vx
+        p.y += p.vy
+
+        // Bounce off edges
+        if (p.x < 0 || p.x > width) p.vx *= -1
+        if (p.y < 0 || p.y > height) p.vy *= -1
+
+        // Mouse repulsion
+        const dx = mouse.x - p.x
+        const dy = mouse.y - p.y
+        const dist = Math.sqrt(dx * dx + dy * dy)
+        if (dist < 100) {
+          const force = (100 - dist) / 100
+          p.x -= (dx / dist) * force * 2
+          p.y -= (dy / dist) * force * 2
         }
-      }
 
-      // Draw the wireframe grid
-      for (let y = 0; y < rows - 1; y++) {
+        // Draw particle
         ctx.beginPath()
-        for (let x = 0; x < cols; x++) {
-          const p = points[y][x]
-          
-          // Dynamic color based on elevation
-          const colorIntensity = Math.max(0.1, Math.min(1, (p.z + 100) / 150))
-          
-          if (x === 0) {
+        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2)
+        ctx.fillStyle = 'rgba(0, 229, 255, 0.8)'
+        ctx.fill()
+
+        // Connect particles
+        for (let j = i + 1; j < particles.length; j++) {
+          const p2 = particles[j]
+          const dx2 = p.x - p2.x
+          const dy2 = p.y - p2.y
+          const dist2 = Math.sqrt(dx2 * dx2 + dy2 * dy2)
+
+          if (dist2 < connectionDistance) {
+            ctx.beginPath()
             ctx.moveTo(p.x, p.y)
-          } else {
-            ctx.lineTo(p.x, p.y)
+            ctx.lineTo(p2.x, p2.y)
+            const opacity = 1 - (dist2 / connectionDistance)
+            ctx.strokeStyle = `rgba(0, 229, 255, ${opacity * 0.2})`
+            ctx.lineWidth = 1
+            ctx.stroke()
           }
-          
-          // Draw vertical connections
-          const pBottom = points[y + 1][x]
-          ctx.moveTo(p.x, p.y)
-          ctx.lineTo(pBottom.x, pBottom.y)
-          
-          // Only stroke periodically or with a gradient to save performance
-          // We apply stroke outside the loop for massive performance gain, 
-          // but we can't change color per line segment this way.
-          // For simplicity and speed, we use a global stroke.
         }
-        ctx.stroke()
+      }
+
+      // Add a large glowing aura around the mouse
+      if (mouse.x !== -1000) {
+        const mouseGlow = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 200)
+        mouseGlow.addColorStop(0, 'rgba(0, 229, 255, 0.05)')
+        mouseGlow.addColorStop(1, 'transparent')
+        ctx.fillStyle = mouseGlow
+        ctx.fillRect(0, 0, width, height)
       }
 
       requestAnimationFrame(animate)
@@ -135,14 +135,14 @@ const InteractiveBackground = () => {
     return () => {
       window.removeEventListener('resize', resize)
       window.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseleave', handleMouseLeave)
     }
   }, [])
 
   return (
     <canvas
       ref={canvasRef}
-      className="fixed inset-0 -z-10 pointer-events-none opacity-60"
-      style={{ filter: 'blur(0.5px)' }} // Adds a slight glowing softness
+      className="fixed inset-0 -z-10 pointer-events-none"
     />
   )
 }

src/components/ProjectsSection.tsx

@@ -115,7 +115,7 @@ const ProjectsSection = () => {
         </motion.div>
 
         <motion.div 
-          className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 auto-rows-[250px]"
+          className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 auto-rows-[minmax(280px,auto)]"
           variants={containerVariants}
           initial="hidden"
           animate={isInView ? "visible" : "hidden"}