From 1dd72f0463a3dea5c6e3ed3b2eafa678b0eaf8e3 Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Sun, 2 Nov 2025 00:59:44 +0000
Subject: [PATCH] optimize website performance without visual changes

Reduce animation frequency, canvas nodes, and blur effects

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
---
 app/page.tsx                         | 13 +++++++------
 components/hero.tsx                  |  8 ++------
 components/network-visualization.tsx | 12 ++++++------
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index b319f23..a71ce96 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,7 +11,7 @@ export default function Home() {
     const originalText = "ENTER THE NETWORK"
 
     const glitchInterval = setInterval(() => {
-      if (Math.random() > 0.95) {
+      if (Math.random() > 0.7) {
         const glitched = originalText
           .split("")
           .map((char) => (Math.random() > 0.9 ? glitchChars[Math.floor(Math.random() * glitchChars.length)] : char))
@@ -20,7 +20,7 @@ export default function Home() {
 
         setTimeout(() => setGlitchText(originalText), 100)
       }
-    }, 100)
+    }, 2000)
 
     return () => clearInterval(glitchInterval)
   }, [])
@@ -42,10 +42,9 @@ export default function Home() {
         />
       </div>
 
-      {/* Fractal orbs */}
-      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse" />
+      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-2xl animate-pulse" />
       <div
-        className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-magenta-500/20 rounded-full blur-3xl animate-pulse"
+        className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-magenta-500/20 rounded-full blur-2xl animate-pulse"
         style={{ animationDelay: "1s" }}
       />
 
@@ -102,7 +101,9 @@ export default function Home() {
 
           <Link
             href="/ics"
-            className="inline-block mt-8 px-8 py-4 border-2 border-cyan-400 text-cyan-400 font-mono text-lg hover:bg-cyan-400/10 hover:shadow-[0_0_20px_rgba(0,255,255,0.5)] transition-all duration-300 relative group overflow-hidden"
+            className="inline-block mt-8 px-8 py-4 border-2 border-cyan-400 text-cyan-400 font-mono text-lg
+                     hover:bg-cyan-400/10 hover:shadow-[0_0_20px_rgba(0,255,255,0.5)]
+                     transition-all duration-300 relative group overflow-hidden"
           >
             <span className="relative z-10">INITIALIZE CONNECTION</span>
             <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/0 via-cyan-500/20 to-cyan-500/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700" />
diff --git a/components/hero.tsx b/components/hero.tsx
index 53b9a51..325401f 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -7,15 +7,11 @@ export function Hero() {
       <div className="absolute inset-0 cyber-grid opacity-20" />
 
       <div className="absolute inset-0 overflow-hidden">
-        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl animate-pulse" />
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-2xl animate-pulse" />
         <div
-          className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-secondary/20 rounded-full blur-3xl animate-pulse"
+          className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-secondary/20 rounded-full blur-2xl animate-pulse"
           style={{ animationDelay: "1s" }}
         />
-        <div
-          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent/10 rounded-full blur-3xl animate-pulse"
-          style={{ animationDelay: "2s" }}
-        />
       </div>
 
       <svg className="absolute inset-0 w-full h-full opacity-30" xmlns="http://www.w3.org/2000/svg">
diff --git a/components/network-visualization.tsx b/components/network-visualization.tsx
index 4f6352a..12a76b1 100644
--- a/components/network-visualization.tsx
+++ b/components/network-visualization.tsx
@@ -30,7 +30,7 @@ export function NetworkVisualization() {
       hue: number
       pulsePhase: number
     }> = []
-    const nodeCount = 40
+    const nodeCount = 25
 
     for (let i = 0; i < nodeCount; i++) {
       nodes.push({
@@ -39,7 +39,7 @@ export function NetworkVisualization() {
         vx: (Math.random() - 0.5) * 0.8,
         vy: (Math.random() - 0.5) * 0.8,
         radius: Math.random() * 4 + 2,
-        hue: Math.random() * 60 + 170, // Cyan to magenta range
+        hue: Math.random() * 60 + 170,
         pulsePhase: Math.random() * Math.PI * 2,
       })
     }
@@ -70,15 +70,15 @@ export function NetworkVisualization() {
           const dy = otherNode.y - node.y
           const distance = Math.sqrt(dx * dx + dy * dy)
 
-          if (distance < 180) {
-            const opacity = (1 - distance / 180) * 0.6
+          if (distance < 150) {
+            const opacity = (1 - distance / 150) * 0.6
             const gradient = ctx.createLinearGradient(node.x, node.y, otherNode.x, otherNode.y)
             gradient.addColorStop(0, `hsla(${node.hue}, 100%, 60%, ${opacity})`)
             gradient.addColorStop(1, `hsla(${otherNode.hue}, 100%, 60%, ${opacity})`)
 
             ctx.strokeStyle = gradient
             ctx.lineWidth = 2
-            ctx.shadowBlur = 10
+            ctx.shadowBlur = 5
             ctx.shadowColor = `hsl(${node.hue}, 100%, 60%)`
             ctx.beginPath()
             ctx.moveTo(node.x, node.y)
@@ -104,7 +104,7 @@ export function NetworkVisualization() {
 
         // Core node
         ctx.fillStyle = `hsl(${node.hue}, 100%, 70%)`
-        ctx.shadowBlur = 15
+        ctx.shadowBlur = 8
         ctx.shadowColor = `hsl(${node.hue}, 100%, 60%)`
         ctx.beginPath()
         ctx.arc(node.x, node.y, node.radius * pulse, 0, Math.PI * 2)