Skip to content

Add common header and clean up #232

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 2 commits into from
Jan 26, 2026
Merged

Add common header and clean up #232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3381d6
Add common header and clean up
jbampton Jan 26, 2026
29062ad
Merge branch 'main' into cleanups
jbampton Jan 26, 2026
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
34 changes: 1 addition & 33 deletions src/_includes/bio.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,39 +13,7 @@
</head>
<body class="min-h-screen">

<header class="sticky top-0 z-50 bg-[var(--bg-page)]/80 backdrop-blur-md border-b border-[var(--border-color)] py-4">
<div class="max-w-7xl mx-auto px-4 flex justify-between items-center">
<a href="/" class="group flex items-center gap-2 font-bold text-accent transition-colors">
<span class="transition-transform group-hover:-translate-x-1">←</span>
<span>Directory</span>
</a>
<div class="text-center hidden sm:block">
<p class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)]">Viewing Profile</p>
<p class="font-bold text-sm">{{ name }}</p>
</div>
<div id="game-stats" class="flex items-center gap-4 px-5 py-3 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-3xl shadow-lg">
<div id="level-badge" class="flex items-center justify-center w-12 h-12 rounded-2xl text-2xl shadow-md transition-all duration-700 transform hover:scale-110">
</div>

<div class="flex flex-col">
<div class="flex items-center gap-2">
<span id="level-name" class="text-sm font-black uppercase tracking-widest leading-none">---</span>

<span class="text-[10px] bg-black/10 dark:bg-white/10 px-2 py-1 rounded-md font-bold text-[var(--text-main)] opacity-80 border border-[var(--border-color)]">
LVL <span id="level-number">0</span>
</span>
</div>

<div class="w-32 h-1.5 bg-black/5 dark:bg-white/5 rounded-full mt-2 overflow-hidden border border-[var(--border-color)]">
<div id="level-progress" class="h-full bg-accent transition-all duration-1000 shadow-[0_0_8px_var(--accent)]" style="width: 0%"></div>
</div>
</div>
</div>
<button onclick="toggleTheme()" class="p-2.5 rounded-full bg-[var(--bg-card)] border border-[var(--border-color)] shadow-sm">
<span id="theme-icon">🌙</span>
</button>
</div>
</header>
{% include "header.njk" %}

<main class="max-w-5xl mx-auto px-4 py-12">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
Expand Down
62 changes: 62 additions & 0 deletions src/_includes/header.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<header class="sticky top-0 z-[100] w-full bg-[var(--bg-page)]/80 backdrop-blur-md border-b-2 border-[var(--border-color)]">
<div class="max-w-7xl mx-auto px-4 py-4 md:py-6 flex flex-col lg:flex-row items-center justify-between gap-6">

<div class="flex flex-col items-center lg:items-start group">

<div class="flex items-center">
{% if page.url == "/" %}
<h1 class="text-3xl md:text-5xl font-black tracking-tighter text-[var(--text-main)] uppercase italic leading-none transition-all">
Our Developers
</h1>
{% else %}
<a href="/" class="group/back flex items-center gap-3">
<span class="text-2xl md:text-4xl text-accent transition-transform group-hover/back:-translate-x-2">←</span>
<h1 class="text-3xl md:text-5xl font-black tracking-tighter text-[var(--text-main)] uppercase italic leading-none transition-all group-hover/back:text-accent">
Directory
</h1>
</a>
{% endif %}
</div>

<div class="mt-2 text-accent font-mono text-sm md:text-base font-bold tracking-tight">
<span class="opacity-100">{{ collections.developer.length or 60 }}</span> Active Profiles
</div>

<p class="hidden md:flex text-[var(--text-muted)] text-[9px] font-mono uppercase tracking-[0.3em] mt-1 items-center gap-2">
{% if page.url == "/" %}
<span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
Global Talent Directory
{% else %}
Viewing Profile Details
{% endif %}
</p>
</div>

<div class="flex items-center gap-3 md:gap-4">
{% if page.url == "/" %}
<button onclick="scrollToRandomUser()"
class="px-4 py-2 md:px-6 md:py-3 bg-accent text-white text-[10px] md:text-[11px] font-black uppercase tracking-widest rounded-xl hover:brightness-110 hover:-translate-y-0.5 transition-all shadow-lg shadow-accent/20">
✨ Surprise
</button>
{% endif %}

<div id="game-stats" class="flex items-center gap-3 md:gap-4 px-3 py-1.5 md:px-4 md:py-2 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-2xl shadow-sm">
<div id="level-badge" class="w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-xl text-lg md:text-xl bg-black/5 dark:bg-white/5">🐣</div>

<div class="hidden sm:flex flex-col">
<div class="flex items-center gap-2">
<span id="level-name" class="text-[9px] md:text-[10px] font-black uppercase tracking-widest text-[var(--text-main)]">Newbie</span>
<span class="text-[8px] md:text-[9px] opacity-60 font-bold bg-black/5 dark:bg-white/10 px-1.5 py-0.5 rounded">LVL <span id="level-number">0</span></span>
</div>
<div class="w-20 md:w-28 h-1 md:h-1.5 bg-black/10 dark:bg-white/10 rounded-full mt-1.5 md:mt-2 overflow-hidden">
<div id="level-progress" class="h-full bg-accent transition-all duration-1000" style="width: 0%"></div>
</div>
</div>

<div class="w-px h-6 md:h-8 bg-[var(--border-color)]"></div>

<button onclick="toggleTheme()" class="text-base md:text-lg p-1 md:p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-full transition-all" id="theme-icon">🌙</button>
</div>
</div>
</div>
</header>
128 changes: 92 additions & 36 deletions src/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
/**
* 1. THEME VARIABLES
*/
:root {
/* Default Light Mode */
--bg-page: #f8fafc;
--bg-card: #ffffff;
--bg-footer: #f1f5f9;
--text-main: #0f172a;
--text-muted: #64748b;
--border-color: #e2e8f0;
--accent: #4f46e5;
--accent-rgb: 79, 70, 229;
}

/* Dark Mode Class */
.dark {
--bg-page: #020617;
--bg-card: #0f172a;
Expand All @@ -18,69 +20,123 @@
--text-muted: #94a3b8;
--border-color: #1e293b;
--accent: #818cf8;
--accent-rgb: 129, 140, 248;
}

/* Base Styles */
body {
/**
* 2. BASE STYLES & STICKY FIXES
*/
html, body {
overflow-x: clip; /* Important: prevents sticky break and horizontal scroll */
height: auto;
min-height: 100%;
background-color: var(--bg-page);
color: var(--text-main);
transition: background-color 0.4s ease, color 0.4s ease;
scroll-behavior: smooth;
}

/**
* 3. STICKY HEADER
*/
header {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
z-index: 100;
background-color: var(--bg-page);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 2px solid var(--border-color);
box-sizing: border-box;
}

h1 {
line-height: 0.85;
text-shadow: 2px 2px 0px transparent;
}

.dark h1 {
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}

/**
* 4. CARD STYLES
*/
.user-card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 0.3s ease,
box-shadow 0.3s ease;
}

.user-card:hover {
border-color: var(--accent);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.card-footer {
background-color: var(--bg-footer);
border-top: 1px solid var(--border-color);
}

/* Accent Color Overrides */
/**
* 5. GAME & UTILITY
*/
.text-accent { color: var(--accent); }
.bg-accent { background-color: var(--accent); }
.border-accent { border-color: var(--accent); }

/* Animations */
@keyframes glow-pulse {
0% { box-shadow: 0 0 0 0 var(--accent); opacity: 0.7; }
70% { box-shadow: 0 0 0 15px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}

.highlight-pulse {
animation: glow-pulse 2s infinite;
transform: translateY(-8px);
border-color: var(--accent) !important;
}
#game-stats { transition: all 0.3s ease; }
#level-progress { box-shadow: 0 0 8px var(--accent); }

html { scroll-behavior: smooth; }
/**
* 6. ANIMATIONS
*/

/* Easter Egg: The Barrel Roll */
/* Konami Barrel Roll - Applied to HTML */
.konami-roll {
transition: transform 2s cubic-bezier(0.65, 0, 0.35, 1);
transform: rotate(360deg);
transition: transform 2s cubic-bezier(0.65, 0, 0.35, 1);
transform: rotate(360deg);
transform-style: preserve-3d;
pointer-events: none;
}

/* Optional: Fun font change for the title */
.leet-mode h1 {
font-family: "Courier New", monospace !important;
color: #00ff00 !important;
text-shadow: 2px 2px #ff0000;
/* Fix sticky header jitter during rotation */
header {
backface-visibility: hidden;
transform: translateZ(0);
}

/* Matrix Overlay */
#matrix-overlay {
background-color: black;
/* Ensure it's high, but lower than the Level Up notification (z-2000) */
z-index: 1500;
background-color: black;
z-index: 9999 !important;
}

/* Make sure the canvas fills the whole screen even if scrolling */
#matrix-canvas {
display: block;
position: fixed;
top: 0;
left: 0;
display: block;
position: fixed;
top: 0;
left: 0;
}

/* Surprise Me Pulse */
@keyframes glow-pulse {
0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4); opacity: 1; }
70% { box-shadow: 0 0 0 20px rgba(var(--accent-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.highlight-pulse {
animation: glow-pulse 2s infinite;
transform: translateY(-8px);
border-color: var(--accent) !important;
}

/* Level Up Popups */
.fixed.top-24 {
margin-top: 1.5rem;
z-index: 10000;
}
46 changes: 26 additions & 20 deletions src/assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ const LEVELS = [
let unlockedEggs = JSON.parse(localStorage.getItem('unlockedEggs')) || [];
let surpriseClickCount = 0;
let matrixActive = false;
let konamiPosition = 0;
const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];

/**
* 2. GAME ENGINE
Expand Down Expand Up @@ -148,26 +146,34 @@ function scrollToRandomUser() {
}

// EGG 2: Konami Code -> Barrel Roll
document.addEventListener('keydown', (e) => {
if (e.key === konamiCode[konamiPosition]) {
konamiPosition++;
if (konamiPosition === konamiCode.length) {
unlockEgg('konami');
activateKonamiMode();
konamiPosition = 0;
}
} else { konamiPosition = 0; }
});
const konamiCode = ['arrowup', 'arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'b', 'a'];
let konamiPosition = 0;

window.addEventListener('keydown', (e) => {
const key = e.key.toLowerCase();

function activateKonamiMode() {
document.body.classList.add('konami-roll');
const title = document.querySelector('h1');
if (title) {
const originalText = title.innerText;
title.innerText = "1337_D3V_CR3W";
setTimeout(() => { title.innerText = originalText; }, 5000);
if (key === konamiCode[konamiPosition]) {
konamiPosition++;
if (konamiPosition === konamiCode.length) {
activateKonami();
konamiPosition = 0;
}
setTimeout(() => document.body.classList.remove('konami-roll'), 2000);
} else {
// Reset, but check if the wrong key was actually the start of a new attempt
konamiPosition = (key === 'arrowup') ? 1 : 0;
}
});

function activateKonami() {
// Apply to documentElement (html) so the sticky header spins too
document.documentElement.classList.add('konami-roll');

// Call your level up / egg unlock logic here
if (typeof unlockEgg === 'function') unlockEgg('konami');

setTimeout(() => {
document.documentElement.classList.remove('konami-roll');
}, 2000);
}

// EGG 3: Gravity Glitch -> Build Hash Click
Expand Down
Loading
Loading