Create separate nunjucks files

.gitignore

@@ -2,3 +2,4 @@ _site
 .jekyll-cache
 node_modules
 vendor
+.venv

src/_includes/bio.njk

@@ -85,11 +85,7 @@
           <h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6">Technologies</h2>
           <div class="flex flex-wrap gap-3">
             {% set skills = languages.split(' ') %}
-            {% for skill in skills %}
-              <span class="px-4 py-2 bg-accent text-white text-xs font-black rounded-xl uppercase tracking-widest shadow-sm">
-                {{ skill }}
-              </span>
-            {% endfor %}
+            {% include "skills-list.njk" %}
           </div>
         </div>
       </div>

src/_includes/footer-details.njk

@@ -0,0 +1,46 @@
+<footer class="mt-20 border-t border-[var(--border-color)] bg-[var(--bg-footer)] py-12">
+  <div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-8">
+
+    <div class="flex flex-col items-center md:items-start text-center md:text-left">
+      <p class="text-[var(--text-main)] font-bold text-sm uppercase tracking-widest">
+        Developer Directory
+      </p>
+
+        <p class="mt-1 text-[var(--text-muted)] text-[10px] font-mono uppercase tracking-[0.15em]">
+          &copy; <span id="current-year">{% currentYear %}</span> Built with
+          <span id="footer-heart" class="transition-colors duration-500">❤️</span>
+          by the Open-Source Community
+        </p>
+
+      <div class="flex items-center justify-center md:justify-start gap-3 mt-4">
+        <a href="https://www.11ty.dev/" target="_blank" class="text-[10px] font-bold px-2 py-1 rounded bg-[var(--bg-card)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-accent transition-all">🎈 11ty</a>
+        <a href="https://tailwindcss.com/" target="_blank" class="text-[10px] font-bold px-2 py-1 rounded bg-[var(--bg-card)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-accent transition-all">🌊 Tailwind</a>
+      </div>
+    </div>
+
+    <div class="flex flex-col items-center md:items-end gap-2">
+      <div class="flex items-center gap-3">
+        <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+        <span class="text-[var(--text-muted)] text-[10px] font-black uppercase tracking-widest">Build: {{ build.timestamp }}</span>
+      </div>
+
+     <div class="flex items-center bg-[var(--bg-card)] border border-[var(--border-color)] rounded-lg overflow-hidden shadow-sm">
+      <button onclick="triggerSecretUnlock('gravity')" class="px-3 py-1.5 text-[10px] font-mono hover:bg-red-500/10 transition-colors group/hash">
+        <span class="text-[var(--text-muted)] group-hover/hash:text-red-500">Hash:</span>
+        <span class="text-accent font-bold underline decoration-dotted">
+          <code class="cursor-pointer hover:text-red-500 transition-colors">{{ build.hash }}</code>
+        </span>
+      </button>
+
+      <a href="{{ build.repoUrl }}/commit/{{ build.hash }}"
+         target="_blank"
+         rel="noopener"
+         class="px-3 py-1.5 border-l border-[var(--border-color)] bg-[var(--bg-footer)] hover:text-accent transition-colors"
+         title="View Commit on GitHub">
+        <span>↗</span>
+      </a>
+    </div>
+    </div>
+
+  </div>
+</footer>

src/_includes/footer.njk

@@ -1,59 +1,9 @@
-<footer class="mt-20 border-t border-[var(--border-color)] bg-[var(--bg-footer)] py-12">
-  <div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-8">
-
-    <div class="flex flex-col items-center md:items-start text-center md:text-left">
-      <p class="text-[var(--text-main)] font-bold text-sm uppercase tracking-widest">
-        Developer Directory
-      </p>
-
-        <p class="mt-1 text-[var(--text-muted)] text-[10px] font-mono uppercase tracking-[0.15em]">
-          &copy; <span id="current-year">{% currentYear %}</span> Built with
-          <span id="footer-heart" class="transition-colors duration-500">❤️</span>
-          by the Open-Source Community
-        </p>
-
-      <div class="flex items-center justify-center md:justify-start gap-3 mt-4">
-        <a href="https://www.11ty.dev/" target="_blank" class="text-[10px] font-bold px-2 py-1 rounded bg-[var(--bg-card)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-accent transition-all">🎈 11ty</a>
-        <a href="https://tailwindcss.com/" target="_blank" class="text-[10px] font-bold px-2 py-1 rounded bg-[var(--bg-card)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-accent transition-all">🌊 Tailwind</a>
-      </div>
-    </div>
-
-    <div class="flex flex-col items-center md:items-end gap-2">
-      <div class="flex items-center gap-3">
-        <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
-        <span class="text-[var(--text-muted)] text-[10px] font-black uppercase tracking-widest">Build: {{ build.timestamp }}</span>
-      </div>
-
-     <div class="flex items-center bg-[var(--bg-card)] border border-[var(--border-color)] rounded-lg overflow-hidden shadow-sm">
-      <button onclick="triggerSecretUnlock('gravity')" class="px-3 py-1.5 text-[10px] font-mono hover:bg-red-500/10 transition-colors group/hash">
-        <span class="text-[var(--text-muted)] group-hover/hash:text-red-500">Hash:</span>
-        <span class="text-accent font-bold underline decoration-dotted">
-          <code class="cursor-pointer hover:text-red-500 transition-colors">{{ build.hash }}</code>
-        </span>
-      </button>
-
-      <a href="{{ build.repoUrl }}/commit/{{ build.hash }}"
-         target="_blank"
-         rel="noopener"
-         class="px-3 py-1.5 border-l border-[var(--border-color)] bg-[var(--bg-footer)] hover:text-accent transition-colors"
-         title="View Commit on GitHub">
-        <span>↗</span>
-      </a>
-    </div>
-    </div>
-
-  </div>
-</footer>
+{% include "footer-details.njk" %}
 
 {% include "system-override.njk" %}
 
 {% include "matrix-overlay.njk" %}
 
 {% include "system-log.njk" %}
 
-<script>
-  // This turns your Eleventy data into a global JS constant
-  const LEVELS = {{ levels | dump | safe }};
-</script>
-
-<script src="/assets/js/script.js"></script>
+{% include "scripts.njk" %}

src/_includes/header-details.njk

@@ -0,0 +1,30 @@
+<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.randomPeople.length }}</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>
+      <span class="header-gtd">Global Talent Directory</span>
+    {% else %}
+      Viewing Profile Details
+    {% endif %}
+  </p>
+</div>

src/_includes/header.njk

@@ -1,36 +1,7 @@
 <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.randomPeople.length }}</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>
-          <span class="header-gtd">Global Talent Directory</span>
-        {% else %}
-          Viewing Profile Details
-        {% endif %}
-      </p>
-    </div>
+    {% include "header-details.njk" %}
 
     {% include "game-stats.njk" %}
 

src/_includes/scripts.njk

@@ -0,0 +1,6 @@
+<script>
+  // This turns your Eleventy data into a global JS constant
+  const LEVELS = {{ levels | dump | safe }};
+</script>
+
+<script src="/assets/js/script.js"></script>

src/_includes/skills-list.njk

@@ -0,0 +1,7 @@
+<div class="skills-list">
+  {% for skill in skills %}
+    <span class="skill-item">
+      <span onmouseenter="createFloatingXP(event)" class="skill-tag cursor-crosshair">{{ skill }}</span>
+    </span>
+  {% endfor %}
+</div>

src/index.njk

@@ -32,13 +32,7 @@ layout: false
 
           <div class="mt-6 flex flex-wrap gap-2">
             {% set skills = person.data.languages.split(' ') %}
-            <div class="skills-list">
-              {% for skill in skills %}
-                <span class="skill-item">
-                  <span onmouseenter="createFloatingXP(event)" class="skill-tag cursor-crosshair">{{ skill }}</span>
-                </span>
-              {% endfor %}
-            </div>
+            {% include "skills-list.njk" %}
           </div>
 
           <p class="mt-4 text-[var(--text-muted)] text-sm italic line-clamp-3">"{{ person.data.bio | truncate(120) }}"</p>