Content Updates with projects and experience

src/components/mystic/CircuitField.tsx

@@ -69,9 +69,9 @@ export default function CircuitField({
       canvas.height = Math.floor(height * dpr);
       ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
 
-      // Build an orthogonal circuit on a grid: place nodes at grid intersections
-      // (with jitter + random omissions), then connect neighbors with right-angle
-      // traces. This reads as a PCB / schematic, not a star map.
+      // Build a clean, ALIGNED orthogonal circuit on a grid: pads sit exactly at
+      // grid intersections (no jitter) and traces connect them in straight
+      // right-angle lines. Reads as an orderly schematic / PCB layout.
       const step = 64;
       const cols = Math.ceil(width / step) + 1;
       const rows = Math.ceil(height / step) + 1;
@@ -83,9 +83,8 @@ export default function CircuitField({
           // ~62% of intersections get a pad.
           present[r][c] = Math.random() < 0.62;
           if (present[r][c]) {
-            const jx = (Math.random() - 0.5) * step * 0.25;
-            const jy = (Math.random() - 0.5) * step * 0.25;
-            nodes.push({ x: c * step + jx, y: r * step + jy });
+            // Snapped to the grid — no jitter, so traces land flush on pads.
+            nodes.push({ x: c * step, y: r * step });
           }
         }
       }
@@ -236,21 +235,15 @@ export default function CircuitField({
       className={`pointer-events-none absolute inset-0 -z-10 overflow-hidden ${className}`}
       aria-hidden="true"
     >
-      {/* Base dark purple/blue gradient — the professional hero's atmosphere. */}
+      {/* Base gradient — IDENTICAL colors to AnimatedBackground's night sky so
+          the morph between star field and circuit field is color-consistent.
+          No nebula radials here (the user asked to keep the circuit style only);
+          just the clean deep-blue sky base. */}
       <div
         className="absolute inset-0"
         style={{
           background:
-            'linear-gradient(160deg, #0a0e2a 0%, #14123a 38%, #1a1648 64%, #0e0c28 100%)',
-        }}
-      />
-      {/* Animated violet/teal nebula clouds for depth + motion. */}
-      <div
-        className="animate-gradient-shift absolute inset-0"
-        style={{
-          backgroundImage:
-            'radial-gradient(50% 60% at 18% 20%, rgba(139, 123, 216, 0.28), transparent 62%), radial-gradient(45% 55% at 85% 15%, rgba(111, 182, 173, 0.16), transparent 60%), radial-gradient(55% 70% at 70% 110%, rgba(139, 123, 216, 0.20), transparent 60%)',
-          backgroundSize: '200% 200%',
+            'linear-gradient(180deg, #04061a 0%, #070b24 32%, #0a1230 58%, #0e1a3e 82%, #12224a 100%)',
         }}
       />
       {/* Circuit traces + nodes + signal pulses. */}