code-differently · GTyson261 · Apr 2, 2026 · Apr 2, 2026
diff --git a/src/glenntyson/images/Screenshot 2026-04-01 at 1.21.38 PM.png b/src/glenntyson/images/Screenshot 2026-04-01 at 1.21.38 PM.png
diff --git a/src/glenntyson/index.html b/src/glenntyson/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Shipwreck Shack</title>
+  <link rel="stylesheet" href="styles.css"/>
+</head>
+<body>
+
+  <div id="introScreen" class="intro-screen">
+    <div class="intro-content">
+      <h1>☠ Shipwreck Shack ☠</h1>
+      <p>Prepare to board...</p>
+      <button id="enterSiteBtn">Enter the Shack</button>
+    </div>
+  </div>
+
+  <!-- BACKGROUND FX -->
+  <div class="ocean-overlay"></div>
+  <div class="moon-glow"></div>
+  <div class="lighthouse-beam"></div>
+
+  <header>
+    <h1>☠ Shipwreck Shack ☠</h1>
+    <p class="subtitle">Where Every Meal Be Treasure</p>
+
+    <div class="header-buttons">
+      <button id="grogToggle">🍺 Grog Mode</button>
+      <button id="musicToggle">🎵 Music</button>
+    </div>
+  </header>
+
+  <nav class="nav-menu">
+    <button class="nav-link active" data-page="index">All</button>
+    <button class="nav-link" data-page="breakfast">Breakfast</button>
+    <button class="nav-link" data-page="lunch">Lunch</button>
+    <button class="nav-link" data-page="brunch">Brunch</button>
+    <button class="nav-link" data-page="dinner">Dinner</button>
+    <button class="nav-link" data-page="happy">Happy</button>
+    <button class="nav-link" data-page="drinks">Drinks</button>
+  </nav>
+
+  <section class="treasure-zone">
+    <button id="treasureChest" class="treasure-chest">💰</button>
+  </section>
+
+  <main>
+    <section id="menu" class="menu-container"></section>
+  </main>
+
+  <!-- AUDIO -->
+  <audio id="drinkSound"><source src="sounds/drink.mp3"></audio>
+  <audio id="coinSound"><source src="sounds/coins.mp3"></audio>
+  <audio id="bgMusic" loop><source src="sounds/sea-shanty.mp3"></audio>
+  <audio id="cannonSound"><source src="sounds/cannon.mp3"></audio>
+  <audio id="bellSound"><source src="sounds/bell.mp3"></audio>
+
+  <div id="pirateCursor" class="pirate-cursor"></div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/src/glenntyson/script.js b/src/glenntyson/script.js
@@ -0,0 +1,159 @@
+const menu = [
+  { title: "Shaky Pancakes", category: "breakfast", price: "$8.99", img: "https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg?auto=compress&cs=tinysrgb&w=800" },
+  { title: "Waffles", category: "breakfast", price: "$9.49", img: "https://images.pexels.com/photos/1251198/pexels-photo-1251198.jpeg?auto=compress&cs=tinysrgb&w=800" },
+  { title: "Burger Rats", category: "lunch", price: "$12.99", img: "https://images.pexels.com/photos/1639557/pexels-photo-1639557.jpeg?auto=compress&cs=tinysrgb&w=800" },
+  { title: "Chicken Tenders", category: "lunch", price: "$10.99", img: "https://images.pexels.com/photos/616354/pexels-photo-616354.jpeg?auto=compress&cs=tinysrgb&w=800" },
+  { title: "French Toast", category: "brunch", price: "$10.99", img: "https://images.pexels.com/photos/566566/pexels-photo-566566.jpeg?auto=compress&cs=tinysrgb&w=800" },
+  { title: "Steak", category: "dinner", price: "$22.99", img: "https://images.pexels.com/photos/675951/pexels-photo-675951.jpeg?auto=compress&cs=tinysrgb&w=800" },
+  { title: "Salty Salmon", category: "dinner", price: "$19.99", img: "https://images.pexels.com/photos/3296279/pexels-photo-3296279.jpeg?auto=compress&cs=tinysrgb&w=800" },
+  { title: "Cannon Nachos", category: "happy", price: "$7.99", img: "https://images.pexels.com/photos/4958641/pexels-photo-4958641.jpeg?auto=compress&cs=tinysrgb&w=800" },
+  { title: "Rocking Smoothie", category: "drinks", price: "$5.99", img: "https://images.pexels.com/photos/775032/pexels-photo-775032.jpeg?auto=compress&cs=tinysrgb&w=800" }
+];
+
+const container = document.getElementById("menu");
+const music = document.getElementById("bgMusic");
+const drink = document.getElementById("drinkSound");
+const coin = document.getElementById("coinSound");
+const cannon = document.getElementById("cannonSound");
+const bell = document.getElementById("bellSound");
+const cursor = document.getElementById("pirateCursor");
+
+const introScreen = document.getElementById("introScreen");
+const enterSiteBtn = document.getElementById("enterSiteBtn");
+const grogToggle = document.getElementById("grogToggle");
+const musicToggle = document.getElementById("musicToggle");
+const treasureChest = document.getElementById("treasureChest");
+const navLinks = document.querySelectorAll(".nav-link");
+
+document.body.classList.add("js-cursor");
+
+/* MENU */
+function showMenu(list) {
+  if (!container) return;
+
+  container.innerHTML = "";
+
+  list.forEach(item => {
+    container.innerHTML += `
+      <div class="menu-item">
+        <img
+          src="${item.img}"
+          alt="${item.title}"
+          loading="lazy"
+          onerror="this.src='https://via.placeholder.com/800x500?text=Shipwreck+Shack'"
+        >
+        <h3>${item.title}</h3>
+        <p>${item.price}</p>
+      </div>
+    `;
+  });
+}
+
+navLinks.forEach(btn => {
+  btn.addEventListener("click", () => {
+    navLinks.forEach(b => b.classList.remove("active"));
+    btn.classList.add("active");
+
+    const page = btn.dataset.page;
+    const filtered = page === "index"
+      ? menu
+      : menu.filter(item => item.category === page);
+
+    showMenu(filtered);
+  });
+});
+
+/* INTRO */
+if (enterSiteBtn && introScreen) {
+  enterSiteBtn.addEventListener("click", () => {
+    introScreen.classList.add("hide");
+
+    if (music) {
+      music.play().catch(() => {});
+    }
+
+    if (bell) {
+      bell.currentTime = 0;
+      bell.play().catch(() => {});
+    }
+
+    if (musicToggle) {
+      musicToggle.textContent = music && !music.paused ? "🔇 Pause Music" : "🎵 Music";
+    }
+  });
+}
+
+/* MUSIC TOGGLE FIX */
+if (musicToggle) {
+  musicToggle.addEventListener("click", () => {
+    if (!music) return;
+
+    if (music.paused) {
+      music.play().then(() => {
+        musicToggle.textContent = "🔇 Pause Music";
+      }).catch(() => {});
+    } else {
+      music.pause();
+      musicToggle.textContent = "🎵 Music";
+    }
+  });
+}
+
+/* GROG */
+if (grogToggle) {
+  grogToggle.addEventListener("click", () => {
+    document.body.classList.toggle("grog");
+
+    if (drink) {
+      drink.currentTime = 0;
+      drink.play().catch(() => {});
+    }
+
+    if (cannon && document.body.classList.contains("grog")) {
+      cannon.currentTime = 0;
+      cannon.play().catch(() => {});
+    }
+  });
+}
+
+/* CURSOR */
+if (cursor) {
+  let x = window.innerWidth / 2;
+  let y = window.innerHeight / 2;
+  let tx = x;
+  let ty = y;
+
+  document.addEventListener("mousemove", e => {
+    tx = e.clientX;
+    ty = e.clientY;
+  });
+
+  function animateCursor() {
+    x += (tx - x) * 0.2;
+    y += (ty - y) * 0.2;
+
+    cursor.style.left = `${x}px`;
+    cursor.style.top = `${y}px`;
+
+    requestAnimationFrame(animateCursor);
+  }
+
+  animateCursor();
+}
+
+/* TREASURE */
+if (treasureChest) {
+  treasureChest.addEventListener("click", () => {
+    if (coin) {
+      coin.currentTime = 0;
+      coin.play().catch(() => {});
+    }
+
+    if (bell) {
+      bell.currentTime = 0;
+      bell.play().catch(() => {});
+    }
+  });
+}
+
+showMenu(menu);
diff --git a/src/glenntyson/sounds/bell.mp3 b/src/glenntyson/sounds/bell.mp3
diff --git a/src/glenntyson/sounds/cannon.mp3 b/src/glenntyson/sounds/cannon.mp3
diff --git a/src/glenntyson/sounds/coins.mp3 b/src/glenntyson/sounds/coins.mp3
diff --git a/src/glenntyson/sounds/drink.mp3 b/src/glenntyson/sounds/drink.mp3
diff --git a/src/glenntyson/sounds/sea-shanty.mp3 b/src/glenntyson/sounds/sea-shanty.mp3
diff --git a/src/glenntyson/sounds/waves.mp3 b/src/glenntyson/sounds/waves.mp3
diff --git a/src/glenntyson/styles.css b/src/glenntyson/styles.css
@@ -0,0 +1,161 @@
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: linear-gradient(to bottom, #08131c, #2f2119);
+  color: #f3e6c8;
+  font-family: Georgia, serif;
+  text-align: center;
+  overflow-x: hidden;
+}
+
+/* FORCE HIDE REAL CURSOR EVERYWHERE */
+body.js-cursor,
+body.js-cursor * {
+  cursor: none !important;
+}
+
+/* LAYOUT */
+header, nav, main {
+  position: relative;
+  z-index: 5;
+}
+
+/* INTRO */
+.intro-screen {
+  position: fixed;
+  inset: 0;
+  background: black;
+  display: grid;
+  place-items: center;
+  z-index: 10000;
+}
+
+.intro-screen.hide {
+  display: none;
+}
+
+/* BACKGROUND FX */
+.ocean-overlay,
+.moon-glow,
+.lighthouse-beam {
+  position: fixed;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.ocean-overlay {
+  inset: 0;
+  background: repeating-linear-gradient(
+    120deg,
+    rgba(173,216,230,.2) 0 2px,
+    transparent 2px 20px
+  );
+}
+
+.moon-glow {
+  top: 50px;
+  right: 60px;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: radial-gradient(circle, white, transparent 70%);
+}
+
+.lighthouse-beam {
+  top: 100px;
+  right: 100px;
+  width: 50vw;
+  height: 20px;
+  background: linear-gradient(to left, rgba(255,255,200,.4), transparent);
+  animation: beam 6s infinite;
+}
+
+@keyframes beam {
+  0% { transform: rotate(-10deg); }
+  50% { transform: rotate(15deg); }
+  100% { transform: rotate(-10deg); }
+}
+
+/* NAV */
+.nav-menu {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+button {
+  padding: 10px;
+  background: #5f402b;
+  color: white;
+  border-radius: 8px;
+}
+
+.active {
+  background: gold;
+  color: black;
+}
+
+/* MENU */
+.menu-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
+  gap: 20px;
+  padding: 20px;
+}
+
+.menu-item {
+  background: #422918;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+.menu-item img {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+}
+
+/* GROG */
+body.grog {
+  animation: sway 2s infinite;
+}
+
+@keyframes sway {
+  0% { transform: rotate(-.5deg); }
+  50% { transform: rotate(.5deg); }
+  100% { transform: rotate(-.5deg); }
+}
+
+/* ⛵ PIRATE SHIP CURSOR */
+.pirate-cursor {
+  position: fixed;
+  width: 60px;
+  height: 60px;
+  pointer-events: none;
+  z-index: 999999;
+  transform: translate(-50%, -50%);
+  animation: shipRock 1.5s infinite;
+}
+
+.pirate-cursor::before {
+  content: "⛵";
+  font-size: 30px;
+  position: absolute;
+  left: 10px;
+}
+
+.pirate-cursor::after {
+  content: "🌊";
+  position: absolute;
+  top: 30px;
+  left: 15px;
+  font-size: 22px;
+}
+
+@keyframes shipRock {
+  0% { transform: translate(-50%, -50%) rotate(-8deg); }
+  50% { transform: translate(-50%, -50%) rotate(8deg); }
+  100% { transform: translate(-50%, -50%) rotate(-8deg); }
+}