NextCommunity · jbampton · Jan 29, 2026 · Jan 29, 2026 · Jan 29, 2026
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ name }} | {{ role }}</title>
   <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.90.0/phaser.min.js"></script>
   <link rel="stylesheet" href="/assets/css/style.css">
 </head>
 <body class="min-h-screen scroll-smooth bg-[var(--bg-page)] text-[var(--text-main)] transition-colors duration-300">

@@ -8,7 +8,7 @@
 
         <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>
+          <span id="footer-heart" class="inline-block transition-colors duration-500 cursor-pointer">❤️</span>
           by the Open-Source Community
         </p>
 

@@ -1,5 +1,7 @@
 {% include "footer-details.njk" %}
 
+<div id="phaser-container"></div>
+
 {% include "system-override.njk" %}
 
 {% include "matrix-overlay.njk" %}

@@ -4,3 +4,4 @@
 </script>
 
 <script src="/assets/js/script.js"></script>
+<script src="/assets/js/eggs.js"></script>
@@ -912,3 +912,12 @@ a:hover {
     opacity: 0;
   }
 }
+#phaser-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  pointer-events: none; /* Allow clicks to pass through to the site if needed */
+}
@@ -0,0 +1,113 @@
+function initPhaserGame() {
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    parent: "phaser-container", // Make sure this div exists in your HTML
+    transparent: true,
+    physics: {
+      default: "arcade",
+      arcade: { gravity: { y: 300 } },
+    },
+    scene: {
+      preload: preload,
+      create: create,
+    },
+  };
+
+  const game = new Phaser.Game(config);
+}
+
+function preload() {
+  // No need to preload images if we are only using text/emojis!
+}
+
+function create() {
+  const emojis = [
+    // Gaming & Tech
+    "🎮",
+    "🕹️",
+    "👾",
+    "🚀",
+    "💻",
+    "📱",
+    "⌨️",
+    "🖱️",
+    "🔋",
+    "🔌",
+    // Magic & Space
+    "✨",
+    "⭐",
+    "🌟",
+    "🔮",
+    "🌌",
+    "🌠",
+    "🌙",
+    "☄️",
+    "🛸",
+    "👽",
+    // Action & Fun
+    "🔥",
+    "💥",
+    "🧨",
+    "⚡",
+    "🌈",
+    "🎉",
+    "🎊",
+    "🎈",
+    "🎁",
+    "💎",
+    // Hearts & Expressions
+    "💖",
+    "🎯",
+    "🏆",
+    "🥇",
+    "🧿",
+    "🍀",
+    "🍕",
+    "🍭",
+    "🍦",
+    "🍩",
+    // Creatures & Icons
+    "🤖",
+    "👻",
+    "🐲",
+    "🦄",
+    "🦊",
+    "🐱",
+    "🐧",
+    "🦖",
+    "🍄",
+    "🌍",
+  ];
+  const heartRect = document
+    .getElementById("footer-heart")
+    .getBoundingClientRect();
+
+  for (let i = 0; i < 75; i++) {
+    // 1. Pick a random emoji
+    const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
+
+    // 2. Create the emoji at the heart's location
+    // We use this.add.text instead of this.physics.add.image
+    const particle = this.add.text(heartRect.left, heartRect.top, randomEmoji, {
+      fontSize: "32px",
+    });
+
+    // 3. Manually add physics to the text object
+    this.physics.add.existing(particle);
+
+    // 4. Apply the "Explosion" physics
+    // Shoots them out in a cone shape upward
+    particle.body.setVelocity(
+      Phaser.Math.Between(-300, 300),
+      Phaser.Math.Between(-500, -1000),
+    );
+
+    particle.body.setCollideWorldBounds(true);
+    particle.body.setBounce(0.7);
+
+    // Optional: Add a little random rotation for flair
+    particle.setAngle(Phaser.Math.Between(0, 360));
+  }
+}
@@ -1337,6 +1337,41 @@ window.addEventListener("DOMContentLoaded", () => {
   }
 });
 
+let heartClickCount = 0;
+let phaserStarted = false;
+
+const heart = document.getElementById("footer-heart");
+
+heart.addEventListener("click", () => {
+  heartClickCount++;
+
+  // 1. Grow the heart with each click
+  const scaleAmount = 1 + heartClickCount * 0.3;
+  heart.style.transform = `scale(${scaleAmount})`;
+  heart.style.display = "inline-block"; // Ensuring transform works
+  heart.style.transition =
+    "transform 0.1s cubic-bezier(0.17, 0.67, 0.83, 0.67)";
+
+  // 2. The Big Swap at 5 clicks
+  if (heartClickCount === 5 && !phaserStarted) {
+    phaserStarted = true;
+
+    // Visual "Pop" effect
+    heart.innerHTML = "🎮"; // Swap to gamer emoji
+    heart.style.transform = "scale(1.5)"; // Slight bounce
+
+    // Give the user a split second to see the emoji before Phaser starts
+    setTimeout(() => {
+      // Optional: make the emoji float away or disappear
+      heart.classList.add("animate-ping"); // Uses Tailwind's built-in animation
+
+      initPhaserGame();
+
+      // Optional: Hide the emoji after Phaser covers the screen
+      // setTimeout(() => { heart.style.opacity = '0'; }, 500);
+    }, 300);
+  }
+});
 /**
  * INITIALIZATION
  */

@@ -8,6 +8,7 @@ layout: false
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Developer Directory</title>
   <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.90.0/phaser.min.js"></script>
   <link rel="stylesheet" href="/assets/css/style.css">
 </head>
 <body class="min-h-screen scroll-smooth bg-[var(--bg-page)] text-[var(--text-main)] transition-colors duration-300">
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,4 @@
		</script>

		<script src="/assets/js/script.js"></script>
		<script src="/assets/js/eggs.js"></script>