Skip to content

Commit bd3d1e4

Browse files
jbamptonjbampton
authored
Add common header and clean up (#232)
1 parent 7a40f09 commit bd3d1e4

5 files changed

Lines changed: 200 additions & 155 deletions

File tree

‎src/_includes/bio.njk‎

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -13,39 +13,7 @@
1313
</head>
1414
<body class="min-h-screen">
1515

16-
<header class="sticky top-0 z-50 bg-[var(--bg-page)]/80 backdrop-blur-md border-b border-[var(--border-color)] py-4">
17-
<div class="max-w-7xl mx-auto px-4 flex justify-between items-center">
18-
<a href="/" class="group flex items-center gap-2 font-bold text-accent transition-colors">
19-
<span class="transition-transform group-hover:-translate-x-1">←</span>
20-
<span>Directory</span>
21-
</a>
22-
<div class="text-center hidden sm:block">
23-
<p class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)]">Viewing Profile</p>
24-
<p class="font-bold text-sm">{{ name }}</p>
25-
</div>
26-
<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">
27-
<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">
28-
</div>
29-
30-
<div class="flex flex-col">
31-
<div class="flex items-center gap-2">
32-
<span id="level-name" class="text-sm font-black uppercase tracking-widest leading-none">---</span>
33-
34-
<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)]">
35-
LVL <span id="level-number">0</span>
36-
</span>
37-
</div>
38-
39-
<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)]">
40-
<div id="level-progress" class="h-full bg-accent transition-all duration-1000 shadow-[0_0_8px_var(--accent)]" style="width: 0%"></div>
41-
</div>
42-
</div>
43-
</div>
44-
<button onclick="toggleTheme()" class="p-2.5 rounded-full bg-[var(--bg-card)] border border-[var(--border-color)] shadow-sm">
45-
<span id="theme-icon">🌙</span>
46-
</button>
47-
</div>
48-
</header>
16+
{% include "header.njk" %}
4917

5018
<main class="max-w-5xl mx-auto px-4 py-12">
5119
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

‎src/_includes/header.njk‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<header class="sticky top-0 z-[100] w-full bg-[var(--bg-page)]/80 backdrop-blur-md border-b-2 border-[var(--border-color)]">
2+
<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">
3+
4+
<div class="flex flex-col items-center lg:items-start group">
5+
6+
<div class="flex items-center">
7+
{% if page.url == "/" %}
8+
<h1 class="text-3xl md:text-5xl font-black tracking-tighter text-[var(--text-main)] uppercase italic leading-none transition-all">
9+
Our Developers
10+
</h1>
11+
{% else %}
12+
<a href="/" class="group/back flex items-center gap-3">
13+
<span class="text-2xl md:text-4xl text-accent transition-transform group-hover/back:-translate-x-2">←</span>
14+
<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">
15+
Directory
16+
</h1>
17+
</a>
18+
{% endif %}
19+
</div>
20+
21+
<div class="mt-2 text-accent font-mono text-sm md:text-base font-bold tracking-tight">
22+
<span class="opacity-100">{{ collections.developer.length or 60 }}</span> Active Profiles
23+
</div>
24+
25+
<p class="hidden md:flex text-[var(--text-muted)] text-[9px] font-mono uppercase tracking-[0.3em] mt-1 items-center gap-2">
26+
{% if page.url == "/" %}
27+
<span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
28+
Global Talent Directory
29+
{% else %}
30+
Viewing Profile Details
31+
{% endif %}
32+
</p>
33+
</div>
34+
35+
<div class="flex items-center gap-3 md:gap-4">
36+
{% if page.url == "/" %}
37+
<button onclick="scrollToRandomUser()"
38+
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">
39+
✨ Surprise
40+
</button>
41+
{% endif %}
42+
43+
<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">
44+
<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>
45+
46+
<div class="hidden sm:flex flex-col">
47+
<div class="flex items-center gap-2">
48+
<span id="level-name" class="text-[9px] md:text-[10px] font-black uppercase tracking-widest text-[var(--text-main)]">Newbie</span>
49+
<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>
50+
</div>
51+
<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">
52+
<div id="level-progress" class="h-full bg-accent transition-all duration-1000" style="width: 0%"></div>
53+
</div>
54+
</div>
55+
56+
<div class="w-px h-6 md:h-8 bg-[var(--border-color)]"></div>
57+
58+
<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>
59+
</div>
60+
</div>
61+
</div>
62+
</header>

‎src/assets/css/style.css‎

Lines changed: 92 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1+
/**
2+
* 1. THEME VARIABLES
3+
*/
14
:root {
2-
/* Default Light Mode */
35
--bg-page: #f8fafc;
46
--bg-card: #ffffff;
57
--bg-footer: #f1f5f9;
68
--text-main: #0f172a;
79
--text-muted: #64748b;
810
--border-color: #e2e8f0;
911
--accent: #4f46e5;
12+
--accent-rgb: 79, 70, 229;
1013
}
1114

12-
/* Dark Mode Class */
1315
.dark {
1416
--bg-page: #020617;
1517
--bg-card: #0f172a;
@@ -18,69 +20,123 @@
1820
--text-muted: #94a3b8;
1921
--border-color: #1e293b;
2022
--accent: #818cf8;
23+
--accent-rgb: 129, 140, 248;
2124
}
2225

23-
/* Base Styles */
24-
body {
26+
/**
27+
* 2. BASE STYLES & STICKY FIXES
28+
*/
29+
html, body {
30+
overflow-x: clip; /* Important: prevents sticky break and horizontal scroll */
31+
height: auto;
32+
min-height: 100%;
2533
background-color: var(--bg-page);
2634
color: var(--text-main);
2735
transition: background-color 0.4s ease, color 0.4s ease;
36+
scroll-behavior: smooth;
2837
}
2938

39+
/**
40+
* 3. STICKY HEADER
41+
*/
42+
header {
43+
position: -webkit-sticky;
44+
position: sticky;
45+
top: 0;
46+
width: 100%;
47+
z-index: 100;
48+
background-color: var(--bg-page);
49+
backdrop-filter: blur(12px);
50+
-webkit-backdrop-filter: blur(12px);
51+
border-bottom: 2px solid var(--border-color);
52+
box-sizing: border-box;
53+
}
54+
55+
h1 {
56+
line-height: 0.85;
57+
text-shadow: 2px 2px 0px transparent;
58+
}
59+
60+
.dark h1 {
61+
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
62+
}
63+
64+
/**
65+
* 4. CARD STYLES
66+
*/
3067
.user-card {
3168
background-color: var(--bg-card);
3269
border: 1px solid var(--border-color);
33-
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
70+
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
71+
border-color 0.3s ease,
72+
box-shadow 0.3s ease;
73+
}
74+
75+
.user-card:hover {
76+
border-color: var(--accent);
77+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
3478
}
3579

3680
.card-footer {
3781
background-color: var(--bg-footer);
3882
border-top: 1px solid var(--border-color);
3983
}
4084

41-
/* Accent Color Overrides */
85+
/**
86+
* 5. GAME & UTILITY
87+
*/
4288
.text-accent { color: var(--accent); }
4389
.bg-accent { background-color: var(--accent); }
44-
.border-accent { border-color: var(--accent); }
4590

46-
/* Animations */
47-
@keyframes glow-pulse {
48-
0% { box-shadow: 0 0 0 0 var(--accent); opacity: 0.7; }
49-
70% { box-shadow: 0 0 0 15px transparent; }
50-
100% { box-shadow: 0 0 0 0 transparent; }
51-
}
52-
53-
.highlight-pulse {
54-
animation: glow-pulse 2s infinite;
55-
transform: translateY(-8px);
56-
border-color: var(--accent) !important;
57-
}
91+
#game-stats { transition: all 0.3s ease; }
92+
#level-progress { box-shadow: 0 0 8px var(--accent); }
5893

59-
html { scroll-behavior: smooth; }
94+
/**
95+
* 6. ANIMATIONS
96+
*/
6097

61-
/* Easter Egg: The Barrel Roll */
98+
/* Konami Barrel Roll - Applied to HTML */
6299
.konami-roll {
63-
transition: transform 2s cubic-bezier(0.65, 0, 0.35, 1);
64-
transform: rotate(360deg);
100+
transition: transform 2s cubic-bezier(0.65, 0, 0.35, 1);
101+
transform: rotate(360deg);
102+
transform-style: preserve-3d;
103+
pointer-events: none;
65104
}
66105

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

112+
/* Matrix Overlay */
74113
#matrix-overlay {
75-
background-color: black;
76-
/* Ensure it's high, but lower than the Level Up notification (z-2000) */
77-
z-index: 1500;
114+
background-color: black;
115+
z-index: 9999 !important;
78116
}
79117

80-
/* Make sure the canvas fills the whole screen even if scrolling */
81118
#matrix-canvas {
82-
display: block;
83-
position: fixed;
84-
top: 0;
85-
left: 0;
119+
display: block;
120+
position: fixed;
121+
top: 0;
122+
left: 0;
123+
}
124+
125+
/* Surprise Me Pulse */
126+
@keyframes glow-pulse {
127+
0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4); opacity: 1; }
128+
70% { box-shadow: 0 0 0 20px rgba(var(--accent-rgb), 0); }
129+
100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
130+
}
131+
132+
.highlight-pulse {
133+
animation: glow-pulse 2s infinite;
134+
transform: translateY(-8px);
135+
border-color: var(--accent) !important;
136+
}
137+
138+
/* Level Up Popups */
139+
.fixed.top-24 {
140+
margin-top: 1.5rem;
141+
z-index: 10000;
86142
}

‎src/assets/js/script.js‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@ const LEVELS = [
1818
let unlockedEggs = JSON.parse(localStorage.getItem('unlockedEggs')) || [];
1919
let surpriseClickCount = 0;
2020
let matrixActive = false;
21-
let konamiPosition = 0;
22-
const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
2321

2422
/**
2523
* 2. GAME ENGINE
@@ -148,26 +146,34 @@ function scrollToRandomUser() {
148146
}
149147

150148
// EGG 2: Konami Code -> Barrel Roll
151-
document.addEventListener('keydown', (e) => {
152-
if (e.key === konamiCode[konamiPosition]) {
153-
konamiPosition++;
154-
if (konamiPosition === konamiCode.length) {
155-
unlockEgg('konami');
156-
activateKonamiMode();
157-
konamiPosition = 0;
158-
}
159-
} else { konamiPosition = 0; }
160-
});
149+
const konamiCode = ['arrowup', 'arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'b', 'a'];
150+
let konamiPosition = 0;
151+
152+
window.addEventListener('keydown', (e) => {
153+
const key = e.key.toLowerCase();
161154

162-
function activateKonamiMode() {
163-
document.body.classList.add('konami-roll');
164-
const title = document.querySelector('h1');
165-
if (title) {
166-
const originalText = title.innerText;
167-
title.innerText = "1337_D3V_CR3W";
168-
setTimeout(() => { title.innerText = originalText; }, 5000);
155+
if (key === konamiCode[konamiPosition]) {
156+
konamiPosition++;
157+
if (konamiPosition === konamiCode.length) {
158+
activateKonami();
159+
konamiPosition = 0;
169160
}
170-
setTimeout(() => document.body.classList.remove('konami-roll'), 2000);
161+
} else {
162+
// Reset, but check if the wrong key was actually the start of a new attempt
163+
konamiPosition = (key === 'arrowup') ? 1 : 0;
164+
}
165+
});
166+
167+
function activateKonami() {
168+
// Apply to documentElement (html) so the sticky header spins too
169+
document.documentElement.classList.add('konami-roll');
170+
171+
// Call your level up / egg unlock logic here
172+
if (typeof unlockEgg === 'function') unlockEgg('konami');
173+
174+
setTimeout(() => {
175+
document.documentElement.classList.remove('konami-roll');
176+
}, 2000);
171177
}
172178

173179
// EGG 3: Gravity Glitch -> Build Hash Click

0 commit comments

Comments
 (0)