trying a different way to get the matrix code to show on live

sirkitree · sirkitree · commit 48af829bd909 · 2024-10-28T18:41:33.000-07:00
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     </style>
     </head>
     <body>
-        <canvas class="matrix-bg" id="matrixCanvas"></canvas>
+        <canvas id="matrixCanvas"></canvas>
     
     <section class="hero">
       <div class="logo">ai16z</div>
diff --git a/script.js b/script.js
@@ -1,12 +1,10 @@
 document.addEventListener('DOMContentLoaded', () => {
     const canvas = document.getElementById('matrixCanvas');
-    console.log('Canvas element:', canvas);
     if (!canvas) {
         console.error('Matrix canvas element not found');
         return;
     }
     const ctx = canvas.getContext('2d');
-    console.log('Canvas context:', ctx);
 
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
@@ -26,10 +24,10 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function draw() {
-        ctx.fillStyle = 'rgba(10, 10, 10, 0.05)';
+        ctx.fillStyle = 'rgba(10, 10, 10, 0.1)';
         ctx.fillRect(0, 0, canvas.width, canvas.height);
         
-        ctx.fillStyle = '#0F0';
+        ctx.fillStyle = 'rgba(0, 255, 0, 0.15)';
         ctx.font = fontSize + 'px monospace';
 
         for(let i = 0; i < rainDrops.length; i++) {
diff --git a/style.css b/style.css
@@ -63,6 +63,7 @@ body {
   align-items: center;
   padding: 2rem;
   text-align: center;
+  background: transparent;
 }
 
 .logo {
@@ -269,4 +270,13 @@ footer img {
     padding: 1rem;
     gap: 0.8rem;
   }
+}
+
+#matrixCanvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
 }
