added new themes and the 'ION Lang' card

index.html

@@ -5,12 +5,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta property="og:title" content="ION606.com">
-    <meta property="og:description"
-        content="My personal website!">
+    <meta property="og:description" content="My personal website!">
     <meta property="og:image" content="https://avatars.githubusercontent.com/u/58801387">
     <meta property="og:url" content="https://ion606.com/">
     <meta property="og:type" content="website">
-    
+
     <title>Home - ION606.com</title>
     <link rel="icon" href="https://avatars.githubusercontent.com/u/58801387" type="image/jpeg">
 
@@ -32,7 +31,6 @@
             <button onclick="window.location.href = 'projects';">Projects</button>
         </div>
     </div>
-
 </body>
 
 </html>

projects.html

@@ -66,6 +66,18 @@
                 <a href="https://chat.ion606.com" target="_blank">Visit Website</a>
             </div>
         </div>
+
+        <div class="project-card" onclick="window.open('https://ionlang.ion606.com', target='_blank')">
+            <div class="project-preview">
+                <img src="https://github.com/The-ION-Language/ION-Lang/blob/main/assets/ION_LANG_LOGO.png?raw=true"
+                    alt="Streamelements Emotes Overlay Preview">
+            </div>
+            <div class="project-info">
+                <h2>The ION Language</h2>
+                <p>My attempt at a custom programming language!</p>
+                <a href="https://ionlang.ion606.com" target="_blank">Visit Website</a>
+            </div>
+        </div>
     </div>
 
     <footer class="footer">

script.js

@@ -1,4 +1,21 @@
+function getRandomColorScheme() {
+    const schemes = [
+        () => `rgb(${Math.floor(Math.random() * 205) + 50}, 0, ${Math.floor(Math.random() * 205) + 50})`, // Pink and purple shades
+        () => `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0)`, // Yellow
+        () => `rgb(0, ${Math.floor(Math.random() * 256)}, 0)`, // Green
+        () => `rgb(0, 0, ${Math.floor(Math.random() * 256)})`, // Blue
+        () => `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`, // White (grayscale)
+        () => 'rgb(0,0,0)' //`rgb(${Math.floor(Math.random() * 56)}, ${Math.floor(Math.random() * 56)}, ${Math.floor(Math.random() * 56)})` // Black (dark grayscale)
+    ];
+    const ind = Math.floor(Math.random() * schemes.length);
+    return { ind, scheme: schemes[ind] };
+}
+
 document.addEventListener('DOMContentLoaded', (e) => {
+    const {ind, scheme} = getRandomColorScheme();
+
+    console.log(ind);
+
     const canvas = document.getElementById('matrixCanvas');
     const context = canvas.getContext('2d');
 
@@ -26,10 +43,10 @@ document.addEventListener('DOMContentLoaded', (e) => {
     const matrixChars = katakana + latin + nums;
 
     function draw() {
-        context.fillStyle = 'rgba(0, 0, 0, 0.05)';
+        context.fillStyle = (ind === 5) ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)';
         context.fillRect(0, 0, canvas.width, canvas.height);
 
-        context.fillStyle = '#ff00ff'; // Bright pink color
+        context.fillStyle =  scheme(); //'#ff00ff'; // Bright pink color
         context.font = fontSize + 'px monospace';
 
         for (let i = 0; i < drops.length; i++) {
@@ -43,11 +60,11 @@ document.addEventListener('DOMContentLoaded', (e) => {
             // Move the drop down
             drops[i]++;
 
-            // Change color over time
-            context.fillStyle = `rgb(${Math.floor(Math.random() * 205) + 50}, 0, ${Math.floor(Math.random() * 205) + 50})`; // Pink and purple shades
+            // Assign a random color from the color schemes
+            context.fillStyle = scheme();
         }
     }
 
     setup(); // Call setup initially to set up canvas and drops
     setInterval(draw, 33);
-});
+});