From b3381d622b0da3f920df1d0be24f48dabd25aa1b Mon Sep 17 00:00:00 2001 From: John Bampton Date: Mon, 26 Jan 2026 11:29:18 +1000 Subject: [PATCH] Add common header and clean up --- src/_includes/bio.njk | 34 +---------- src/_includes/header.njk | 62 +++++++++++++++++++ src/assets/css/style.css | 128 ++++++++++++++++++++++++++++----------- src/assets/js/script.js | 46 ++++++++------ src/index.njk | 85 ++++++-------------------- 5 files changed, 200 insertions(+), 155 deletions(-) create mode 100644 src/_includes/header.njk diff --git a/src/_includes/bio.njk b/src/_includes/bio.njk index f19d6dd4..0610c97b 100644 --- a/src/_includes/bio.njk +++ b/src/_includes/bio.njk @@ -13,39 +13,7 @@ -
-
- - ← - Directory - - -
-
-
- -
-
- --- - - - LVL 0 - -
- -
-
-
-
-
- -
-
+ {% include "header.njk" %}
diff --git a/src/_includes/header.njk b/src/_includes/header.njk new file mode 100644 index 00000000..7e62a28b --- /dev/null +++ b/src/_includes/header.njk @@ -0,0 +1,62 @@ +
+
+ +
+ +
+ {% if page.url == "/" %} +

+ Our Developers +

+ {% else %} + + ← +

+ Directory +

+ + {% endif %} +
+ +
+ {{ collections.developer.length or 60 }} Active Profiles +
+ + +
+ +
+ {% if page.url == "/" %} + + {% endif %} + +
+
🐣
+ + + +
+ + +
+
+
+
diff --git a/src/assets/css/style.css b/src/assets/css/style.css index da586b15..038c069d 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -1,5 +1,7 @@ +/** + * 1. THEME VARIABLES + */ :root { - /* Default Light Mode */ --bg-page: #f8fafc; --bg-card: #ffffff; --bg-footer: #f1f5f9; @@ -7,9 +9,9 @@ --text-muted: #64748b; --border-color: #e2e8f0; --accent: #4f46e5; + --accent-rgb: 79, 70, 229; } -/* Dark Mode Class */ .dark { --bg-page: #020617; --bg-card: #0f172a; @@ -18,19 +20,61 @@ --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 { @@ -38,49 +82,61 @@ body { 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; } diff --git a/src/assets/js/script.js b/src/assets/js/script.js index 3574a7d9..eff688b9 100644 --- a/src/assets/js/script.js +++ b/src/assets/js/script.js @@ -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 @@ -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 diff --git a/src/index.njk b/src/index.njk index 60c8727a..d9a54bd3 100644 --- a/src/index.njk +++ b/src/index.njk @@ -9,63 +9,16 @@ layout: false Developer Directory - - + -
-
+ {% include "header.njk" %} -
-

Our Developers

-
- - {{ collections.randomPeople.length }} Active Profiles - - | -

- Global Network: Worldwide -

-
-
- -
-
-
- -
-
- --- - - - LVL 0 - -
- -
-
-
-
-
- -
- - -
-
-
- -
-
+
+
+ {# We use collections.developer (or whichever tag you use in your .md files) #} {% for person in collections.randomPeople %} -
+
@@ -73,38 +26,33 @@ layout: false

{{ person.data.role }}

- {{ person.data.location }}{% if person.data.country %}, {{ person.data.country }}{% endif %} + {{ person.data.location }}
{% set skills = person.data.languages.split(' ') %} {% for skill in skills %} - {{ skill }} + {{ skill }} {% endfor %}

"{{ person.data.bio | truncate(120) }}"

-
+
{% if person.data.github %} - - GitHub - + GitHub {% endif %} - {% if person.data.linkedin %} - - LinkedIn - + LinkedIn {% endif %}
- - Full Bio - → + + Profile + →
@@ -114,6 +62,11 @@ layout: false {% include "footer.njk" %} + +