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 @@
-
Press 'D' to toggle
+ Press 'D' to toggle
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);
});
}