design improvments 2.0

src/components/MatrixBackground.tsx

@@ -27,17 +27,17 @@ const MatrixBackground: React.FC = () => {
   const mouseRef = useRef({ x: 0, y: 0 });
   const [, setDimensions] = useState({ width: 0, height: 0 });
 
-  // Configuration
+  // Configuration - subtle background for main content
   const config = {
     dotCount: 400,
     maxConnections: 3,
     connectionDistance: 150,
     dotSpeed: 0.3,
     hoverRadius: 120,
-    baseBrightness: 0.3, // Reduced to 30% opacity (0.3 * 0.3)
-    hoverBrightness: 0.6, // Reduced hover brightness
-    baseThickness: 0.5,
-    hoverThickness: 1.5,
+    baseBrightness: 0.4, // Moderate base brightness for main background
+    hoverBrightness: 0.7, // Moderate hover brightness
+    baseThickness: 0.6,
+    hoverThickness: 1.8,
     fadeSpeed: 0.08, // Slightly faster fade for better responsiveness
   };
 
@@ -130,16 +130,31 @@ const MatrixBackground: React.FC = () => {
       
       if (distance < config.hoverRadius) {
         const intensity = 1 - (distance / config.hoverRadius);
-        dot.targetBrightness = config.baseBrightness + 
-          (config.hoverBrightness - config.baseBrightness) * intensity;
+        dot.targetBrightness = config.baseBrightness + (config.hoverBrightness - config.baseBrightness) * intensity;
         
-        // Brighten connected lines
-        connections.forEach(conn => {
-          if (conn.from === index || conn.to === index) {
-            conn.targetBrightness = config.baseBrightness + 
-              (config.hoverBrightness - config.baseBrightness) * intensity * 0.7;
-            conn.targetThickness = config.baseThickness + 
-              (config.hoverThickness - config.baseThickness) * intensity;
+        // Enhance connected dots and their connections
+        dot.connections.forEach(connIndex => {
+          if (dots[connIndex]) {
+            dots[connIndex].targetBrightness = Math.max(
+              dots[connIndex].targetBrightness,
+              config.baseBrightness + (config.hoverBrightness - config.baseBrightness) * intensity * 0.5
+            );
+          }
+          
+          // Find and enhance the connection
+          const connection = connections.find(
+            conn => (conn.from === index && conn.to === connIndex) || 
+                    (conn.from === connIndex && conn.to === index)
+          );
+          if (connection) {
+            connection.targetBrightness = Math.max(
+              connection.targetBrightness,
+              config.baseBrightness + (config.hoverBrightness - config.baseBrightness) * intensity
+            );
+            connection.targetThickness = Math.max(
+              connection.targetThickness,
+              config.baseThickness + (config.hoverThickness - config.baseThickness) * intensity
+            );
           }
         });
       }
@@ -180,11 +195,11 @@ const MatrixBackground: React.FC = () => {
 
       // Bounce off edges
       if (dot.x <= 0 || dot.x >= width) {
-        dot.vx *= -1;
+        dot.vx = -dot.vx;
         dot.x = Math.max(0, Math.min(width, dot.x));
       }
       if (dot.y <= 0 || dot.y >= height) {
-        dot.vy *= -1;
+        dot.vy = -dot.vy;
         dot.y = Math.max(0, Math.min(height, dot.y));
       }
     });
@@ -197,14 +212,14 @@ const MatrixBackground: React.FC = () => {
     // Update hover effects
     updateHoverEffects(dots, connections, mouseRef.current.x, mouseRef.current.y);
 
-    // Draw connections
+    // Draw connections with moderate opacity for main background
     connections.forEach(conn => {
       const fromDot = dots[conn.from];
       const toDot = dots[conn.to];
       
       if (!fromDot || !toDot) return;
 
-      ctx.strokeStyle = `rgba(100, 200, 255, ${conn.brightness * 0.3})`; // Changed to blue with 30% opacity
+      ctx.strokeStyle = `rgba(100, 200, 255, ${conn.brightness * 0.25})`;
       ctx.lineWidth = conn.thickness;
       ctx.lineCap = 'round';
       
@@ -214,15 +229,15 @@ const MatrixBackground: React.FC = () => {
       ctx.stroke();
     });
 
-    // Draw dots
+    // Draw dots with moderate opacity for main background
     dots.forEach(dot => {
-      ctx.fillStyle = `rgba(100, 200, 255, ${dot.brightness * 0.3})`; // Changed to blue with 30% opacity
+      ctx.fillStyle = `rgba(100, 200, 255, ${dot.brightness * 0.25})`;
       ctx.beginPath();
       ctx.arc(dot.x, dot.y, 2, 0, Math.PI * 2);
       ctx.fill();
       
       // Add subtle glow
-      ctx.shadowColor = `rgba(100, 200, 255, ${dot.brightness * 0.15})`; // Reduced glow opacity
+      ctx.shadowColor = `rgba(100, 200, 255, ${dot.brightness * 0.12})`;
       ctx.shadowBlur = 4;
       ctx.beginPath();
       ctx.arc(dot.x, dot.y, 1.5, 0, Math.PI * 2);
@@ -268,7 +283,7 @@ const MatrixBackground: React.FC = () => {
     const canvas = canvasRef.current;
     if (!canvas) {
       if (process.env.NODE_ENV === 'development') {
-        console.log('MatrixBackground: Canvas not found');
+        console.log('MatrixBackground: Canvas ref not found');
       }
       return;
     }