Skip to content

Better random theme; fix JS console error #253

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jbampton merged 1 commit into from
Jan 26, 2026
Merged

Better random theme; fix JS console error #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/_includes/footer.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]">
Expand Down
32 changes: 32 additions & 0 deletions src/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
25 changes: 16 additions & 9 deletions src/assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
});
}

Expand Down
Loading