Better random theme; fix JS console error (#253)

Author: jbampton

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]">

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;
+}

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);
     });
 }