From 864b04b53c1adbfeb493fc01c7ac5c9b75d59fac Mon Sep 17 00:00:00 2001
From: John Bampton <jbampton@gmail.com>
Date: Tue, 27 Jan 2026 02:42:53 +1000
Subject: [PATCH] Better random theme; fix JS console error

---
 src/_includes/footer.njk |  2 +-
 src/assets/css/style.css | 32 ++++++++++++++++++++++++++++++++
 src/assets/js/script.js  | 25 ++++++++++++++++---------
 3 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk
index 2567d315..7c0b85fb 100644
--- a/src/_includes/footer.njk
+++ b/src/_includes/footer.njk
@@ -115,7 +115,7 @@
         </button>
     </div>
 
-    <p class="mt-2 text-[7px] text-slate-600 text-center uppercase tracking-tighter">Press <span class="text-slate-400">'D'</span> to toggle</p>
+    <p class="mt-2 text-center uppercase tracking-tighter text-[9px] text-white/60 tracking-widest mb-1.5 block font-bold">Press <span class="text-red-400">'D'</span> to toggle</p>
 </div>
 
 <div id="matrix-overlay" class="fixed inset-0 bg-black hidden z-[9999]">
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index b4cc01fd..ab9df846 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -551,3 +551,35 @@ body[data-level="6"]::after {
     /* This makes sure the text is crisp on light/dark themes */
     text-shadow: 0 0 4px rgba(0,0,0,0.3);
 }
+
+
+
+/* Username: Big, bold, and using the random accent */
+.developer-name, h1 {
+    color: var(--accent);
+    text-shadow: 0 0 20px hsla(var(--accent-hue), 90%, 65%, 0.3);
+}
+
+/* Skills: Give them a 'glass' look using the random background */
+.skill-tag {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    color: var(--text-main);
+}
+
+.skill-tag:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+    box-shadow: 0 0 15px var(--accent);
+}
+
+/* Links: Make them pop! */
+a {
+    color: var(--accent);
+    transition: all 0.2s ease;
+}
+
+a:hover {
+    filter: brightness(1.2);
+    text-decoration: underline;
+}
diff --git a/src/assets/js/script.js b/src/assets/js/script.js
index 6388945e..669b8833 100644
--- a/src/assets/js/script.js
+++ b/src/assets/js/script.js
@@ -455,15 +455,22 @@ function applyTheme(theme) {
         if (heart) heart.innerText = '💜';
     }
     else if (theme === 'random') {
-        // Generate a random Hue (0-360)
         const h = Math.floor(Math.random() * 360);
+        // The "Secret Sauce": A second hue for accents (180 degrees away or +40)
+        const accentHue = (h + 160) % 360;
 
-        // VIBRANT NEON LOGIC: Keep saturation high and lightness balanced
-        html.style.setProperty('--bg-page', `hsl(${h}, 45%, 7%)`);     // Very Dark
-        html.style.setProperty('--bg-card', `hsl(${h}, 35%, 12%)`);    // Slightly lighter
-        html.style.setProperty('--bg-footer', `hsl(${h}, 40%, 5%)`);   // Deepest
-        html.style.setProperty('--text-main', `hsl(${h}, 20%, 95%)`);  // Near White
-        html.style.setProperty('--text-muted', `hsl(${h}, 15%, 70%)`); // Softened
+        // Backgrounds (Consistent and Dark)
+        html.style.setProperty('--bg-page', `hsl(${h}, 45%, 7%)`);
+        html.style.setProperty('--bg-card', `hsl(${h}, 35%, 12%)`);
+        html.style.setProperty('--bg-footer', `hsl(${h}, 40%, 5%)`);
+
+        // Typography
+        html.style.setProperty('--text-main', `hsl(${h}, 10%, 98%)`);  // Crisp White
+        html.style.setProperty('--text-muted', `hsl(${h}, 20%, 70%)`); // Readable Muted
+
+        // The Pop Colors (The ones you were missing!)
+        html.style.setProperty('--accent', `hsl(${accentHue}, 90%, 65%)`);
+        html.style.setProperty('--accent-light', `hsl(${accentHue}, 90%, 40%)`);
         html.style.setProperty('--border-color', `hsl(${h}, 30%, 20%)`);
 
         if (heart) {
@@ -949,8 +956,8 @@ function initSkillMining() {
 
     skillTags.forEach(tag => {
         // Remove old listeners to prevent double-firing
-        tag.removeEventListener('mouseenter', createXPPopup);
-        tag.addEventListener('mouseenter', createXPPopup);
+        tag.removeEventListener('mouseenter', createFloatingXP);
+        tag.addEventListener('mouseenter', createFloatingXP);
     });
 }