diff --git a/web-app/games.html b/web-app/games.html
index 374802ef..f084d543 100644
--- a/web-app/games.html
+++ b/web-app/games.html
@@ -1,98 +1,134 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Play beginner-friendly Python games in your browser. Arcade games, puzzles, strategy, and memory challenges with sleek dark/light mode UI. Zero installation required."
+    />
+    <meta name="color-scheme" content="dark light" />
+    <meta id="themeColorMeta" name="theme-color" content="#0f172a" />
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Play beginner-friendly Python games in your browser. Arcade games, puzzles, strategy, and memory challenges with sleek dark/light mode UI. Zero installation required.">
-    <meta name="color-scheme" content="dark light">
-    <meta id="themeColorMeta" name="theme-color" content="#0f172a">
-    
     <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://steam-bell-92.github.io/python-mini-project/games.html">
-    <meta property="og:title" content="Python Mini Games - Interactive Web Edition">
-    <meta property="og:description" content="Play beginner-friendly Python games in your browser. Arcade games, puzzles, strategy, and memory challenges with sleek dark/light mode UI. Zero installation required.">
-    <meta property="og:site_name" content="py.mini() lab">
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:url"
+      content="https://steam-bell-92.github.io/python-mini-project/games.html"
+    />
+    <meta
+      property="og:title"
+      content="Python Mini Games - Interactive Web Edition"
+    />
+    <meta
+      property="og:description"
+      content="Play beginner-friendly Python games in your browser. Arcade games, puzzles, strategy, and memory challenges with sleek dark/light mode UI. Zero installation required."
+    />
+    <meta property="og:site_name" content="py.mini() lab" />
 
     <!-- Twitter -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:url" content="https://steam-bell-92.github.io/python-mini-project/games.html">
-    <meta name="twitter:title" content="Python Mini Games - Interactive Web Edition">
-    <meta name="twitter:description" content="Play beginner-friendly Python games in your browser. Arcade games, puzzles, strategy, and memory challenges with sleek dark/light mode UI. Zero installation required.">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:url"
+      content="https://steam-bell-92.github.io/python-mini-project/games.html"
+    />
+    <meta
+      name="twitter:title"
+      content="Python Mini Games - Interactive Web Edition"
+    />
+    <meta
+      name="twitter:description"
+      content="Play beginner-friendly Python games in your browser. Arcade games, puzzles, strategy, and memory challenges with sleek dark/light mode UI. Zero installation required."
+    />
     <!-- Canonical Link -->
-    <link rel="canonical" href="https://steam-bell-92.github.io/python-mini-project/games.html">
+    <link
+      rel="canonical"
+      href="https://steam-bell-92.github.io/python-mini-project/games.html"
+    />
 
     <title>Python Mini Games - Interactive Web Edition</title>
-    <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
-    
+    <link rel="icon" href="assets/favicon.svg" type="image/svg+xml" />
+
     <!-- Structured Data (JSON-LD) -->
     <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "ItemPage",
-      "name": "Interactive Python Games",
-      "description": "Play beginner-friendly Python arcade games, puzzles, and memory challenges in the browser.",
-      "url": "https://steam-bell-92.github.io/python-mini-project/games.html",
-      "publisher": {
-        "@type": "Organization",
-        "name": "py.mini() lab"
+      {
+        "@context": "https://schema.org",
+        "@type": "ItemPage",
+        "name": "Interactive Python Games",
+        "description": "Play beginner-friendly Python arcade games, puzzles, and memory challenges in the browser.",
+        "url": "https://steam-bell-92.github.io/python-mini-project/games.html",
+        "publisher": {
+          "@type": "Organization",
+          "name": "py.mini() lab"
+        }
       }
-    }
     </script>
 
-    <link rel="stylesheet" href="css/styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="css/styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
     <style>
-        /* ── Page background ── */
-        body[data-page="games"] {
-            background-image: url('assets/games-bg.jpg');
-            background-size: cover;
-            background-attachment: fixed;
-            background-position: center;
-        }
+      /* ── Page background ── */
+      body[data-page="games"] {
+        background-image: url("assets/games-bg.jpg");
+        background-size: cover;
+        background-attachment: fixed;
+        background-position: center;
+      }
 
-        /* Overlay so cards stay readable */
-        body[data-page="games"]::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            background: rgba(10, 4, 30, 0.72);
-            z-index: 0;
-            pointer-events: none;
-        }
+      /* Overlay so cards stay readable */
+      body[data-page="games"]::before {
+        content: "";
+        position: fixed;
+        inset: 0;
+        background: rgba(10, 4, 30, 0.72);
+        z-index: 0;
+        pointer-events: none;
+      }
 
-        body[data-page="games"] .navbar,
-        body[data-page="games"] main,
-        body[data-page="games"] .footer {
-            position: relative;
-            z-index: 1;
-        }
+      body[data-page="games"] .navbar,
+      body[data-page="games"] main,
+      body[data-page="games"] .footer {
+        position: relative;
+        z-index: 1;
+      }
 
-        /* Light mode overlay */
-        [data-theme="light"] body[data-page="games"]::before {
-            background: rgba(237, 233, 254, 0.80);
-        }
+      /* Light mode overlay */
+      [data-theme="light"] body[data-page="games"]::before {
+        background: rgba(237, 233, 254, 0.8);
+      }
 
-        /* Active tab highlight for this page */
-        .tab[data-category="games"] {
-            background: var(--primary-color);
-            border-color: var(--primary-color);
-            color: white;
-        }
+      /* Active tab highlight for this page */
+      .tab[data-category="games"] {
+        background: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+      }
     </style>
-</head>
+  </head>
 
-<body data-page="games" class="sidebar-active">
+  <body data-page="games" class="sidebar-active">
     <a href="#main-content" class="skip-link">🚀 Skip to main content</a>
 
     <!-- Mobile Sidebar Toggle -->
-    <button type="button" class="mobile-sidebar-toggle" id="mobileSidebarToggle" aria-label="Toggle sidebar menu" aria-expanded="false">
+    <button
+      type="button"
+      class="mobile-sidebar-toggle"
+      id="mobileSidebarToggle"
+      aria-label="Toggle sidebar menu"
+      aria-expanded="false"
+    >
       <i class="fas fa-bars"></i>
     </button>
 
     <!-- ── PRIMARY SIDEBAR DOCK ──────────────────────────────────── -->
-    <aside class="sidebar-dock" id="mainSidebar" aria-label="Primary Navigation">
+    <aside
+      class="sidebar-dock"
+      id="mainSidebar"
+      aria-label="Primary Navigation"
+    >
       <div class="sidebar-brand">
         <a class="logo-wrap" href="index.html">
           <div class="logo-top-row">
@@ -107,29 +143,55 @@
       </div>
 
       <div class="sidebar-search">
-        <div class="search-box" style="position:relative">
+        <div class="search-box" style="position: relative">
           <i class="fas fa-search"></i>
-          <input aria-label="Search projects" id="searchInput" placeholder="Search projects or tags..." type="text"/>
+          <input
+            aria-label="Search projects"
+            id="searchInput"
+            placeholder="Search projects or tags..."
+            type="text"
+          />
           <div class="search-dropdown" id="searchDropdown">
             <div class="dropdown-content" id="searchDropdownContent">
-              <div class="search-loader" id="searchLoader" style="display:none"><div class="spinner"></div></div>
+              <div
+                class="search-loader"
+                id="searchLoader"
+                style="display: none"
+              >
+                <div class="spinner"></div>
+              </div>
               <div class="recent-searches-section" id="recentSearchesSection">
                 <div class="dropdown-section-title">Recent</div>
                 <div class="dropdown-list" id="recentSearchesList"></div>
               </div>
-              <div class="results-section" id="resultsSection" style="display:none">
+              <div
+                class="results-section"
+                id="resultsSection"
+                style="display: none"
+              >
                 <div class="dropdown-section-title">Projects</div>
                 <div class="dropdown-list" id="resultsList"></div>
               </div>
               <div class="tips-section" id="tipsSection">
                 <p><strong>Search tips</strong></p>
                 <ul>
-                  <li>Type a project name — <code>snake</code>, <code>quiz</code></li>
-                  <li>Filter by tag — <code>game</code>, <code>math</code>, <code>utility</code></li>
+                  <li>
+                    Type a project name — <code>snake</code>, <code>quiz</code>
+                  </li>
+                  <li>
+                    Filter by tag — <code>game</code>, <code>math</code>,
+                    <code>utility</code>
+                  </li>
                   <li>Press <code>Ctrl+K</code> to focus search</li>
                 </ul>
               </div>
-              <div class="no-results-message" id="noResultsMessage" style="display:none">No projects found. Try a different keyword.</div>
+              <div
+                class="no-results-message"
+                id="noResultsMessage"
+                style="display: none"
+              >
+                No projects found. Try a different keyword.
+              </div>
             </div>
           </div>
         </div>
@@ -137,28 +199,70 @@
 
       <div class="sidebar-menu-wrapper">
         <div class="sidebar-menu-title">Categories</div>
-        <nav class="sidebar-menu" role="tablist" aria-label="Filter by category">
-          <button aria-selected="false" class="sidebar-tab" data-category="all" role="tab" tabindex="-1">
+        <nav
+          class="sidebar-menu"
+          role="tablist"
+          aria-label="Filter by category"
+        >
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="all"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="layers"></svg></span>
             <span class="sidebar-label">All Projects</span>
           </button>
-          <button aria-selected="true" class="sidebar-tab active" data-category="games" role="tab" tabindex="0">
-            <span class="sidebar-icon"><svg data-lucide="gamepad-2"></svg></span>
+          <button
+            aria-selected="true"
+            class="sidebar-tab active"
+            data-category="games"
+            role="tab"
+            tabindex="0"
+          >
+            <span class="sidebar-icon"
+              ><svg data-lucide="gamepad-2"></svg
+            ></span>
             <span class="sidebar-label">Games Arcade</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="math" role="tab" tabindex="-1">
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="math"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="sigma"></svg></span>
             <span class="sidebar-label">Math Visuals</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="utilities" role="tab" tabindex="-1">
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="utilities"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="wrench"></svg></span>
             <span class="sidebar-label">Utilities Lab</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="favorites" role="tab" tabindex="-1">
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="favorites"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="star"></svg></span>
             <span class="sidebar-label">My Favorites</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="playground" role="tab" tabindex="-1">
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="playground"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="terminal"></svg></span>
             <span class="sidebar-label">Playground</span>
           </button>
@@ -167,10 +271,20 @@
 
       <div class="sidebar-footer">
         <div class="sidebar-controls">
-          <button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
+          <button
+            aria-label="Mute sounds"
+            class="sound-toggle"
+            id="soundToggle"
+            type="button"
+          >
             <i class="fas fa-volume-up"></i>
           </button>
-          <button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
+          <button
+            aria-label="Switch theme"
+            class="theme-toggle"
+            id="themeToggle"
+            type="button"
+          >
             <i class="fas fa-moon"></i>
           </button>
         </div>
@@ -178,156 +292,385 @@
     </aside>
 
     <main id="main-content" tabindex="-1">
+      <!-- Page Title Section -->
+      <section
+        class="page-title-section"
+        style="text-align: center; padding: 2rem 0 1rem 0"
+      >
+        <div class="container">
+          <h1
+            style="
+              font-size: 2.5rem;
+              font-family: &quot;Space Grotesk&quot;, sans-serif;
+              background: linear-gradient(135deg, #10b981, #6366f1);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              background-clip: text;
+              margin: 0;
+            "
+          >
+            Interactive Python Games
+          </h1>
+          <p
+            style="
+              color: var(--text-secondary);
+              margin-top: 0.5rem;
+              font-size: 1.1rem;
+              opacity: 0.85;
+            "
+          >
+            Play beginner-friendly Python game projects in your browser—arcade
+            games, puzzles, and more.
+          </p>
+        </div>
+      </section>
+
+      <!-- Projects Grid — Games only -->
+      <section class="projects-section" aria-label="Game Projects">
+        <div class="container">
+          <div class="projects-grid" id="projectsGrid">
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="2048-game"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/2048-game.jpg"
+                alt="2048 Game"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>2048 Game</h3>
+              <p>Combine tiles and reach 2048!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="coin-flip"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/coin-flip.jpg"
+                alt="Coin Flip"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Coin Flip</h3>
+              <p>Heads or tails with spinning animation!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="dice-rolling"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/dice-rolling.jpg"
+                alt="Dice Rolling"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Dice Rolling</h3>
+              <p>Roll the dice with 3D animation!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="dots-boxes"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/dots-boxes.jpg"
+                alt="Dots &amp; Boxes AI"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Dots &amp; Boxes AI</h3>
+              <p>Challenge friends or AI in this strategy game!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="emoji-memory"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/emoji-memory.jpg"
+                alt="Emoji Memory Game"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Emoji Memory Game</h3>
+              <p>Test your memory with matching emojis!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="flames"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/flames.jpg"
+                alt="FLAMES Game"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>FLAMES Game</h3>
+              <p>Discover your relationship status!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="flappy-game"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/flappy-game.jpg"
+                alt="Flappy Game"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Flappy Game</h3>
+              <p>Dodge the incoming balls and survive!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="hangman"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/hangman.jpg"
+                alt="Hangman"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Hangman</h3>
+              <p>Classic word-guessing game!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="math-quiz"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/math-quiz.jpg"
+                alt="Math Quiz"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Math Quiz</h3>
+              <p>MCQ quiz with lives, streaks & difficulty levels!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="number-guessing"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/number-guessing.jpg"
+                alt="Number Guessing"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Number Guessing</h3>
+              <p>Guess the secret number!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="password-forge"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/password-forge.jpg"
+                alt="Password Forge"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Password Forge</h3>
+              <p>Survive evolving firewall password rules!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="rock-paper-scissor"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/rock-paper-scissor.jpg"
+                alt="Rock Paper Scissors"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
 
-        <!-- Page Title Section -->
-        <section class="page-title-section" style="text-align: center; padding: 2rem 0 1rem 0;">
-            <div class="container">
-                <h1 style="font-size: 2.5rem; font-family: 'Space Grotesk', sans-serif; background: linear-gradient(135deg, #10b981, #6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0;">Interactive Python Games</h1>
-                <p style="color: var(--text-secondary); margin-top: 0.5rem; font-size: 1.1rem; opacity: 0.85;">Play beginner-friendly Python game projects in your browser—arcade games, puzzles, and more.</p>
+              <h3>Rock Paper Scissors</h3>
+              <p>Battle against the computer!</p>
             </div>
-        </section>
-
-        <!-- Projects Grid — Games only -->
-        <section class="projects-section" aria-label="Game Projects">
-            <div class="container">
-                <div class="projects-grid" id="projectsGrid">
-
-                    <div class="project-card" data-category="games" data-project="2048-game"><img class="card-banner" src="assets/banners/2048-game.jpg" alt="2048 Game" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>2048 Game</h3>
-                        <p>Combine tiles and reach 2048!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="coin-flip"><img class="card-banner" src="assets/banners/coin-flip.jpg" alt="Coin Flip" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Coin Flip</h3>
-                        <p>Heads or tails with spinning animation!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="dice-rolling"><img class="card-banner" src="assets/banners/dice-rolling.jpg" alt="Dice Rolling" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Dice Rolling</h3>
-                        <p>Roll the dice with 3D animation!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="dots-boxes"><img class="card-banner" src="assets/banners/dots-boxes.jpg" alt="Dots &amp; Boxes AI" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Dots &amp; Boxes AI</h3>
-                        <p>Challenge friends or AI in this strategy game!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="emoji-memory"><img class="card-banner" src="assets/banners/emoji-memory.jpg" alt="Emoji Memory Game" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Emoji Memory Game</h3>
-                        <p>Test your memory with matching emojis!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="flames"><img class="card-banner" src="assets/banners/flames.jpg" alt="FLAMES Game" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>FLAMES Game</h3>
-                        <p>Discover your relationship status!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="flappy-game"><img class="card-banner" src="assets/banners/flappy-game.jpg" alt="Flappy Game" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Flappy Game</h3>
-                        <p>Dodge the incoming balls and survive!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="hangman"><img class="card-banner" src="assets/banners/hangman.jpg" alt="Hangman" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Hangman</h3>
-                        <p>Classic word-guessing game!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="math-quiz"><img class="card-banner" src="assets/banners/math-quiz.jpg" alt="Math Quiz" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Math Quiz</h3>
-                        <p>MCQ quiz with lives, streaks & difficulty levels!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="number-guessing"><img class="card-banner" src="assets/banners/number-guessing.jpg" alt="Number Guessing" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Number Guessing</h3>
-                        <p>Guess the secret number!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="password-forge"><img class="card-banner" src="assets/banners/password-forge.jpg" alt="Password Forge" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Password Forge</h3>
-                        <p>Survive evolving firewall password rules!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="rock-paper-scissor"><img class="card-banner" src="assets/banners/rock-paper-scissor.jpg" alt="Rock Paper Scissors" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Rock Paper Scissors</h3>
-                        <p>Battle against the computer!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="snake-game"><img class="card-banner" src="assets/banners/snake-game.jpg" alt="Snake Game" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Snake Game</h3>
-                        <p>Classic snake game!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="whack-a-mole"><img class="card-banner" src="assets/banners/whack-a-mole.jpg" alt="Whack-a-Mole" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Whack-a-Mole</h3>
-                        <p>Hit the moles before they disappear!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="word-scramble"><img class="card-banner" src="assets/banners/word-scramble.jpg" alt="Word Scramble" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Word Scramble</h3>
-                        <p>Unscramble words before attempts run out!</p>
-                        
-                    </div>
-
-                </div><!-- /projects-grid -->
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="snake-game"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/snake-game.jpg"
+                alt="Snake Game"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Snake Game</h3>
+              <p>Classic snake game!</p>
             </div>
-        </section>
 
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="whack-a-mole"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/whack-a-mole.jpg"
+                alt="Whack-a-Mole"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Whack-a-Mole</h3>
+              <p>Hit the moles before they disappear!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="word-scramble"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/word-scramble.jpg"
+                alt="Word Scramble"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Word Scramble</h3>
+              <p>Unscramble words before attempts run out!</p>
+            </div>
+          </div>
+          <!-- /projects-grid -->
+        </div>
+      </section>
     </main>
 
     <!-- Project Modal -->
-    <div class="modal" id="projectModal" role="dialog" aria-modal="true"
-         aria-labelledby="modalDialogTitle" aria-hidden="true">
-        <div class="modal-content">
-            <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-1">Interactive project</h2>
-            <button type="button" class="modal-close" id="modalClose"
-                    aria-label="Close project dialog">&times;</button>
-            <div id="modalBody"></div>
-        </div>
+    <div
+      class="modal"
+      id="projectModal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modalDialogTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-content">
+        <h2
+          id="modalDialogTitle"
+          class="modal-dialog-title visually-hidden"
+          tabindex="-1"
+        >
+          Interactive project
+        </h2>
+        <button
+          type="button"
+          class="modal-close"
+          id="modalClose"
+          aria-label="Close project dialog"
+        >
+          &times;
+        </button>
+        <div id="modalBody"></div>
+      </div>
     </div>
 
-    <button type="button" class="back-to-top" id="backToTop" aria-label="Back to top" title="Back to top">
-        <i class="fas fa-arrow-up" aria-hidden="true"></i>
+    <button
+      type="button"
+      class="back-to-top"
+      id="backToTop"
+      aria-label="Back to top"
+      title="Back to top"
+    >
+      <i class="fas fa-arrow-up" aria-hidden="true"></i>
     </button>
 
     <footer class="footer">
-        <div class="container">
-            <p>Made with ❤️ for Python learners everywhere</p>
-            <p>
-                <a href="https://github.com/steam-bell-92/python-mini-project"
-                   target="_blank" rel="noopener noreferrer">
-                    <i class="fab fa-github" aria-hidden="true"></i> View on GitHub
-                </a>
-            </p>
-        </div>
+      <div class="container">
+        <p>Made with ❤️ for Python learners everywhere</p>
+        <p>
+          <a
+            href="https://github.com/steam-bell-92/python-mini-project"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <i class="fab fa-github" aria-hidden="true"></i> View on GitHub
+          </a>
+        </p>
+      </div>
     </footer>
 
     <script src="js/audio.js"></script>
@@ -337,12 +680,12 @@ <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-
     <script src="js/projects/number-guessing.js"></script>
     <script src="js/projects/hangman.js"></script>
     <script src="js/projects/flames.js"></script>
-    <script src="js/projects/dots-boxes.js"></script> 
-    <script src="js/projects/password-forge.js"></script> 
-    <script src="js/projects/snake.js"></script> 
+    <script src="js/projects/dots-boxes.js"></script>
+    <script src="js/projects/password-forge.js"></script>
+    <script src="js/projects/snake.js"></script>
     <script src="js/projects/emoji-memory-game.js"></script>
     <script src="js/projects/whack-a-mole.js"></script>
-    <script src="js/projects/2048-game.js"></script>        
+    <script src="js/projects/2048-game.js"></script>
     <script src="js/projects/fibonacci.js"></script>
     <script src="js/projects/pascal-triangle.js"></script>
     <script src="js/projects/calculator.js"></script>
@@ -371,7 +714,7 @@ <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-
     <script src="js/projects/spot-the-difference.js"></script>
     <script src="js/projects.js"></script>
     <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
-    <script src="js/main.js"></script>
+    <script type="module" src="js/main.js"></script>
     <script>lucide.createIcons();</script>
 
 </body>
diff --git a/web-app/index.html b/web-app/index.html
index b0433f78..eab50afe 100644
--- a/web-app/index.html
+++ b/web-app/index.html
@@ -820,7 +820,7 @@ <h3>Legal</h3>
 <!-- CodeMirror 6 – syntax-highlighted Python editor (local bundle) -->
 <script src="js/cm-editor.js"></script>
 <script src="js/playground.js"></script>
-<script src="js/main.js"></script>
+<script type="module" src="js/main.js"></script>
 <script src="js/hero-canvas.js"></script>
 <script>lucide.createIcons();</script>
 <script src="js/fix.js"></script>
diff --git a/web-app/js/main.js b/web-app/js/main.js
index a9640e42..af817af8 100644
--- a/web-app/js/main.js
+++ b/web-app/js/main.js
@@ -1,1407 +1,656 @@
-/* ═══════════════════════════════════════════════════════════════
-   main.js — App wiring for Premium Python Projects Gallery
-   ═══════════════════════════════════════════════════════════════ */
-
-function prefersReducedMotion() {
-  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-
-function safeRun(fn) { try { fn(); } catch (e) { console.error(e); } }
-
-function debounce(fn, ms) {
-  var timer;
-  return function () {
-    var args = arguments; var ctx = this;
-    clearTimeout(timer);
-    timer = setTimeout(function () { fn.apply(ctx, args); }, ms);
-  };
-}
-
-function syncThemeColor(theme) {
-  var meta = document.getElementById('themeColorMeta');
-  if (meta) meta.setAttribute('content', theme === 'light' ? '#f4f6f9' : '#0c0f1a');
-}
-
-function escapeHtml(str) {
-  var d = document.createElement('div');
-  d.textContent = str;
-  return d.textContent;
-}
-
-function setMainInert(isInert) {
-  var main = document.getElementById('main-content');
-  if (!main) return;
-  if (isInert) main.setAttribute('inert', ''); else main.removeAttribute('inert');
-}
-
-var modal = null;
-var modalBody = null;
-var modalClose = null;
-var modalTitle = null;
-var removeTrap = null;
-var lastFocusedElement = null;
-var currentCategory = 'all';
-var currentSearchQuery = '';
-var playgroundActive = false;
-var selectedSuggestionIndex = -1;
-var projectCards = [];
-var recentSearches = JSON.parse(localStorage.getItem('recentSearches') || '[]');
-
-// ============================================
-// INFO MODAL FUNCTIONS
-// ============================================
-
-function showInfoModal(title, steps) {
-    var overlay = document.getElementById('infoModalOverlay');
-    var titleEl = document.getElementById('infoModalTitle');
-    var listEl = document.getElementById('infoModalList');
-    
-    if (!overlay || !titleEl || !listEl) return;
-    
-    titleEl.textContent = title;
-    listEl.textContent = steps.map(function(step) {
-        return '<li>' + step + '</li>';
-    }).join('');
-    
-    overlay.classList.add('active');
-    
-    function closeModal() {
-        overlay.classList.remove('active');
-        closeBtn.removeEventListener('click', closeModal);
-        gotItBtn.removeEventListener('click', closeModal);
-        overlay.removeEventListener('click', overlayClick);
-    }
-    
-    function overlayClick(e) {
-        if (e.target === overlay) closeModal();
-    }
-    
-    var closeBtn = document.getElementById('infoModalClose');
-    var gotItBtn = document.getElementById('infoModalGotIt');
-    
-    closeBtn.addEventListener('click', closeModal);
-    gotItBtn.addEventListener('click', closeModal);
-    overlay.addEventListener('click', overlayClick);
-}
-
-var currentProjectName = '';
-
-function setupModalInfoButton(projectName) {
-    currentProjectName = projectName;
-    var infoBtn = document.getElementById('modalInfoBtn');
-    if (!infoBtn) return;
-    
-    // Remove old listener by cloning
-    var newBtn = infoBtn.cloneNode(true);
-    infoBtn.parentNode.replaceChild(newBtn, infoBtn);
-    
-    newBtn.addEventListener('click', function() {
-        if (typeof getProjectInstructions === 'function') {
-            var info = getProjectInstructions(currentProjectName);
-            showInfoModal(info.title, info.steps);
-        }
-    });
-}
-
-/* ── DOMContentLoaded ──────────────────────────────────────── */
-document.addEventListener('DOMContentLoaded', function () {
-  function repairLegacyHomeLayoutNow() {
-    var legacyHost = document.querySelector('.hero-code-snippets')
-      ? document.querySelector('.hero-code-snippets').closest('.hero-section')
-      : null;
-
-    if (!legacyHost) {
-      return;
-    }
-
-    var allMains = Array.from(document.querySelectorAll('main#main-content'));
-    var visibleMain = allMains[1] || allMains[0] || null;
-    var timelineSectionNode = document.getElementById('timelineSection');
-    var projectsSectionNode = document.getElementById('projectsSection');
-    var playgroundSectionNode = document.getElementById('playgroundSection');
-    var footerNode = document.querySelector('footer.footer');
-    var backToTopNode = document.getElementById('backToTop');
-    var infoModalNode = document.getElementById('infoModalOverlay');
-    var sidebarDockNode = document.getElementById('mainSidebar');
-    var mobileToggleNode = document.getElementById('mobileSidebarToggle');
-    var heroControlsNode = document.querySelector('.hero-controls');
-    var fragment = document.createDocumentFragment();
-
-    if (mobileToggleNode) fragment.appendChild(mobileToggleNode);
-    if (sidebarDockNode) fragment.appendChild(sidebarDockNode);
-    if (visibleMain) fragment.appendChild(visibleMain);
-    if (footerNode) fragment.appendChild(footerNode);
-    if (backToTopNode) fragment.appendChild(backToTopNode);
-    if (infoModalNode) fragment.appendChild(infoModalNode);
-    if (heroControlsNode) heroControlsNode.remove();
-
-    document.body.appendChild(fragment);
-
-    legacyHost.classList.add('legacy-home-hero');
-  }
-
-  repairLegacyHomeLayoutNow();
-  window.addEventListener('load', repairLegacyHomeLayoutNow, { once: true });
-
-  var html = document.documentElement;
-  var themeToggle = document.querySelector('.sidebar-dock #themeToggle');
-  var soundToggle = document.querySelector('.sidebar-dock #soundToggle');
-  var backToTopButton = document.getElementById('backToTop');
-  var searchInput = document.querySelector('.sidebar-dock #searchInput');
-  var navSearchInput = document.getElementById('navSearchInput');
-  var searchDropdown = document.getElementById('searchDropdown');
-  var searchLoader = document.getElementById('searchLoader');
-  var recentSearchesList = document.getElementById('recentSearchesList');
-  var recentSearchesSection = document.getElementById('recentSearchesSection');
-  var resultsList = document.getElementById('resultsList');
-  var resultsSection = document.getElementById('resultsSection');
-  var tipsSection = document.getElementById('tipsSection');
-  var noResultsMessage = document.getElementById('noResultsMessage');
-  var projectsSection = document.getElementById('projectsSection');
-  var playgroundSection = document.getElementById('playgroundSection');
-  var stickyFilterBar = document.getElementById('stickyFilterBar');
-  var stickyTabs = document.querySelectorAll('.sticky-tab');
-  var heroSection = document.querySelector('.hero-section');
-  var cursorGlow = document.getElementById('cursorGlow');
-  var heroProjectCounts = document.querySelectorAll('#heroProjectCount');
-  var heroGameCounts = document.querySelectorAll('#heroGameCount');
-  var heroMathCounts = document.querySelectorAll('#heroMathCount');
-  var heroUtilityCounts = document.querySelectorAll('#heroUtilityCount');
-  modal = document.getElementById('projectModal');
-  modalBody = document.getElementById('modalBody');
-  modalClose = document.getElementById('modalClose');
-  modalTitle = document.getElementById('modalDialogTitle');
-  var exploreBtn = document.getElementById('exploreBtn');
-  var randomProjectBtn = document.getElementById('randomProjectBtn');
-  var randomProjectBtnSidebar = document.querySelector('.projects-section #randomProjectBtnSidebar');
-  var emptyState = document.getElementById('emptyState');
-  var emptyStateHint = document.getElementById('emptyStateHint');
-  var projectCountBadge = document.getElementById('projectCountBadge');
-  var mobileMenuToggle = document.getElementById('mobileMenuToggle');
-  var navControls = document.getElementById('navControls');
-  var navbar = document.getElementById('mainNavbar');
-
-  function syncSearchInputs(value, sourceInput) {
-    [searchInput, navSearchInput].forEach(function (input) {
-      if (input && input !== sourceInput && input.value !== value) {
-        input.value = value;
-      }
-    });
-  }
-
-  function syncCountNodes(nodes, value) {
-    Array.from(nodes || []).forEach(function (node) {
-      node.textContent = value;
-    });
-  }
-
-  /* ── Theme Toggle ─────────────────────────────────────────── */
-  function updateThemeToggleAria(isLight) {
-    if (!themeToggle) return;
-    themeToggle.setAttribute('aria-label', isLight ? 'Switch to dark mode' : 'Switch to light mode');
-  }
-
-  if (themeToggle) {
-    var savedTheme = localStorage.getItem('theme') || 'dark';
-    html.setAttribute('data-theme', savedTheme);
-    syncThemeColor(savedTheme);
-    // Prefer showing a sun icon when the site is dark (site's main theme).
-    // Show sun for dark theme, moon for light theme so reload displays sun by default.
-    themeToggle.textContent = savedTheme === 'dark'
-      ? '<i class="fas fa-sun"></i>'
-      : '<i class="fas fa-moon"></i>';
-    updateThemeToggleAria(savedTheme === 'light');
-
-    themeToggle.addEventListener('click', function () {
-      var current = html.getAttribute('data-theme');
-      var next = current === 'light' ? 'dark' : 'light';
-      html.setAttribute('data-theme', next);
-      localStorage.setItem('theme', next);
-      syncThemeColor(next);
-      // After toggling, show sun when the new theme is dark, moon when it's light.
-      themeToggle.textContent = next === 'dark'
-        ? '<i class="fas fa-sun"></i>'
-        : '<i class="fas fa-moon"></i>';
-      updateThemeToggleAria(next === 'light');
-    });
-  }
-
-  /* ── Sound Toggle ─────────────────────────────────────────── */
-  if (soundToggle && window.audioController) {
-    function updateSoundIcon() {
-      soundToggle.textContent = window.audioController.isMuted
-        ? '<i class="fas fa-volume-mute"></i>'
-        : '<i class="fas fa-volume-up"></i>';
-    }
-    updateSoundIcon();
-    soundToggle.addEventListener('click', function () {
-      if (typeof window.audioController.toggleMute === 'function') {
-        window.audioController.toggleMute();
-        updateSoundIcon();
-        if (!window.audioController.isMuted && typeof window.audioController.play === 'function') {
-          window.audioController.play('click');
-        }
-      }
-    });
-  } else if (soundToggle) {
-    soundToggle.addEventListener('click', function () {
-      var icon = soundToggle.querySelector('i');
-      if (icon) icon.className = icon.className === 'fas fa-volume-up' ? 'fas fa-volume-mute' : 'fas fa-volume-up';
-    });
-  }
-
-  /* ── Hero Controls Mirror Toggles ─────────────────────────── */
-  var heroSoundToggle = document.getElementById('heroSoundToggle');
-  var heroThemeToggle = document.getElementById('heroThemeToggle');
-
-  function syncHeroControlsIcons() {
-    if (heroSoundToggle && soundToggle) {
-      var realSoundIcon = soundToggle.querySelector('i');
-      var heroSoundIcon = heroSoundToggle.querySelector('i');
-      if (realSoundIcon && heroSoundIcon) {
-        heroSoundIcon.className = realSoundIcon.className;
-      }
-    }
-    if (heroThemeToggle && themeToggle) {
-      var realThemeIcon = themeToggle.querySelector('i');
-      var heroThemeIcon = heroThemeToggle.querySelector('i');
-      if (realThemeIcon && heroThemeIcon) {
-        heroThemeIcon.className = realThemeIcon.className;
-      }
-    }
-  }
-
-  if (heroSoundToggle && soundToggle) {
-    heroSoundToggle.addEventListener('click', function () {
-      soundToggle.click();
-      setTimeout(syncHeroControlsIcons, 50);
-    });
-  }
-
-  if (heroThemeToggle && themeToggle) {
-    heroThemeToggle.addEventListener('click', function () {
-      themeToggle.click();
-      setTimeout(syncHeroControlsIcons, 50);
-    });
-  }
-
-  // Initial sync on load
-  setTimeout(syncHeroControlsIcons, 100);
-
-  /* ── Mobile Sidebar Toggle ──────────────────────────────── */
-  var mobileSidebarToggle = document.getElementById('mobileSidebarToggle');
-  var mainSidebar = document.getElementById('mainSidebar');
-  if (mobileSidebarToggle && mainSidebar) {
-    mobileSidebarToggle.addEventListener('click', function () {
-      var active = mainSidebar.classList.toggle('open');
-      mobileSidebarToggle.setAttribute('aria-expanded', active);
-      var icon = mobileSidebarToggle.querySelector('i');
-      if (icon) icon.className = active ? 'fas fa-times' : 'fas fa-bars';
-    });
-
-    document.addEventListener('click', function (e) {
-      if (mainSidebar && mobileSidebarToggle &&
-          !mainSidebar.contains(e.target) && e.target !== mobileSidebarToggle &&
-          mainSidebar.classList.contains('open')) {
-        mainSidebar.classList.remove('open');
-        mobileSidebarToggle.setAttribute('aria-expanded', 'false');
-        var icon = mobileSidebarToggle.querySelector('i');
-        if (icon) icon.className = 'fas fa-bars';
-      }
-    });
-  }
-
-    /* ── Desktop Sidebar Toggle ──────────────────────────────── */
-  var desktopSidebarToggle = document.getElementById("sidebarCollapseBtn");
-  if (desktopSidebarToggle && mainSidebar) {
-    desktopSidebarToggle.addEventListener("click", function () {
-      var collapsed = mainSidebar.classList.toggle("collapsed");
-      document.body.classList.toggle("sidebar-collapsed", collapsed);
-
-      var icon = desktopSidebarToggle.querySelector("i");
-      if (icon) {
-        icon.className = collapsed ? "fas fa-chevron-right" : "fas fa-chevron-left";
-      }
-    });
-  }
-
-  if (backToTopButton) {
-    var toggleBackToTop = function () {
-      backToTopButton.classList.toggle('visible', window.scrollY > 300);
-    };
-    window.addEventListener('scroll', toggleBackToTop, { passive: true });
-    toggleBackToTop();
-
-    backToTopButton.addEventListener('click', function () {
-      window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
-    });
-  }
-
-  /* ── Cursor Glow ──────────────────────────────────────────── */
-  if (cursorGlow && !prefersReducedMotion() && html.getAttribute('data-theme') !== 'light') {
-    var glowTimeout;
-    document.addEventListener('pointermove', function (e) {
-      cursorGlow.style.left = e.clientX + 'px';
-      cursorGlow.style.top = e.clientY + 'px';
-      cursorGlow.style.opacity = '0.5';
-      clearTimeout(glowTimeout);
-      glowTimeout = setTimeout(function () { cursorGlow.style.opacity = '0'; }, 3000);
-    });
-    document.addEventListener('pointerleave', function () {
-      cursorGlow.style.opacity = '0';
-    });
-  }
-
-  /* ── Gather Project Cards ─────────────────────────────────── */
-  var projectsGrid = document.querySelector('.projects-grid');
-  var projectsTemplate = document.getElementById('projectsTemplate');
-  if (projectsGrid && projectsGrid.children.length === 0 && projectsTemplate && projectsTemplate.content) {
-    Array.from(projectsTemplate.content.querySelectorAll('.project-card')).forEach(function (card) {
-      projectsGrid.appendChild(card.cloneNode(true));
-    });
-  }
-
-  projectCards = projectsGrid
-    ? Array.from(projectsGrid.querySelectorAll('.project-card'))
-    : Array.from(document.querySelectorAll('.project-card'));
-
-  projectCards.sort(function (a, b) {
-    var titleA = (a.querySelector('h3') || {}).textContent || '';
-    var titleB = (b.querySelector('h3') || {}).textContent || '';
-    return titleA.localeCompare(titleB, undefined, { sensitivity: 'base', numeric: true });
-  });
-
-  if (projectsGrid) {
-    projectCards.forEach(function (card) {
-      projectsGrid.appendChild(card);
-    });
-  }
-
-  /* ── Hero Stats ───────────────────────────────────────────── */
-  var totalCount = projectCards.length;
-  var gameCount = projectCards.filter(function (c) { return c.getAttribute('data-category') === 'games'; }).length;
-  var mathCount = projectCards.filter(function (c) { return c.getAttribute('data-category') === 'math'; }).length;
-  var utilityCount = projectCards.filter(function (c) { return c.getAttribute('data-category') === 'utilities'; }).length;
-
-  syncCountNodes(heroProjectCounts, String(totalCount));
-  syncCountNodes(heroGameCounts, String(gameCount));
-  syncCountNodes(heroMathCounts, String(mathCount));
-  syncCountNodes(heroUtilityCounts, String(utilityCount));
-  if (projectCountBadge) projectCountBadge.textContent = String(totalCount) + ' projects';
-
-  /* ── Explore Button ───────────────────────────────────────── */
-  if (exploreBtn) {
-    exploreBtn.addEventListener('click', function () {
-      if (projectsSection) projectsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    });
-  }
-
-  /* ── Category Filtering ───────────────────────────────────── */
-  var sidebarTabs = document.querySelectorAll('.sidebar-dock .sidebar-tab');
-  var sidebarBadge = null;
-
-  function applyCategoryFilter(category) {
-    if (category === 'playground') return;
-    currentCategory = category;
-    syncSidebarTabs(category);
-    syncStickyTabs(category);
-    var visibleCount = 0;
-    var favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-    projectCards.forEach(function (card) {
-      var cardCat = card.getAttribute('data-category');
-      var projectName = card.getAttribute('data-project');
-      var isFav = favorites.includes(projectName);
-      if (category === 'all' ||
-          (category === 'favorites' && isFav) ||
-          (category !== 'favorites' && cardCat === category)) {
-        card.style.display = '';
-        visibleCount++;
-      } else {
-        card.style.display = 'none';
-      }
-    });
-    if (emptyState) {
-      emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
-    }
-    if (projectCountBadge) {
-      projectCountBadge.textContent = String(visibleCount) + ' projects';
-    }
-  }
-
-  function syncSidebarTabs(category) {
-    sidebarTabs.forEach(function (st) {
-      var selected = st.getAttribute('data-category') === category;
-      st.classList.toggle('active', selected);
-      st.setAttribute('aria-selected', selected ? 'true' : 'false');
-      st.setAttribute('tabindex', selected ? '0' : '-1');
-    });
-  }
-
-  function syncStickyTabs(category) {
-    stickyTabs.forEach(function (st) {
-      var selected = st.getAttribute('data-sticky-category') === category;
-      st.classList.toggle('active', selected);
-      st.setAttribute('aria-selected', selected ? 'true' : 'false');
-      st.setAttribute('tabindex', selected ? '0' : '-1');
-    });
-  }
-
-  /* ── Playground Section Toggle ────────────────────────────── */
+/*
+  main.js - Orchestration entry point for the Premium Python Projects Gallery
+*/
+
+import { initTheme } from "./modules/theme.js";
+import { initModal, openProjectSafe } from "./modules/modal.js";
+import { initSearch } from "./modules/search.js";
+import { initSidebar } from "./modules/sidebar.js";
+import {
+  prefersReducedMotion,
+  updateProjectVisibility,
+  debounce,
+} from "./modules/utils.js";
+
+let currentCategory = "all";
+let currentSearchQuery = "";
+let playgroundActive = false;
+
+document.addEventListener("DOMContentLoaded", function () {
+  const html = document.documentElement;
+  const backToTopButton = document.getElementById("backToTop");
+  const cursorGlow = document.getElementById("cursorGlow");
+  const exploreBtn = document.getElementById("exploreBtn");
+  const randomProjectBtn = document.getElementById("randomProjectBtn");
+  const randomProjectBtnSidebar = document.getElementById(
+    "randomProjectBtnSidebar"
+  );
+  const projectsGrid = document.querySelector(".projects-grid");
+  const projectsTemplate = document.getElementById("projectsTemplate");
+  const projectsSection = document.getElementById("projectsSection");
+  const playgroundSection = document.getElementById("playgroundSection");
+  const stickyFilterBar = document.getElementById("stickyFilterBar");
+  const navbar = document.getElementById("mainNavbar");
+  const soundToggle = document.getElementById("soundToggle");
+  const heroSoundToggle = document.getElementById("heroSoundToggle");
+
+  // Initialize core modules
+  initTheme();
+  initModal();
+
+  // Helper functions for sections
   function showProjectsSection() {
     playgroundActive = false;
-    if (playgroundSection) playgroundSection.style.display = 'none';
-    if (projectsSection) projectsSection.style.display = '';
-    if (window.playgroundAPI && typeof window.playgroundAPI.deactivate === 'function') {
+    if (playgroundSection) playgroundSection.style.display = "none";
+    if (projectsSection) projectsSection.style.display = "";
+    if (
+      window.playgroundAPI &&
+      typeof window.playgroundAPI.deactivate === "function"
+    ) {
       window.playgroundAPI.deactivate();
     }
   }
 
   function showPlaygroundSection() {
     playgroundActive = true;
-    syncStickyTabs('playground');
-    if (projectsSection) projectsSection.style.display = 'none';
+    if (projectsSection) projectsSection.style.display = "none";
     if (playgroundSection) {
-      playgroundSection.style.display = '';
-      if (window.playgroundAPI && typeof window.playgroundAPI.activate === 'function') {
+      playgroundSection.style.display = "";
+      if (
+        window.playgroundAPI &&
+        typeof window.playgroundAPI.activate === "function"
+      ) {
         window.playgroundAPI.activate();
       }
     }
   }
 
-  /* ── Sidebar Tabs ─────────────────────────────────────────── */
-  sidebarTabs.forEach(function (st) {
-    st.addEventListener('click', function () {
-      var category = st.getAttribute('data-category');
-      
-      var pageCategory = document.body.getAttribute('data-page');
-      if (pageCategory) {
-        // We are on a subpage (games, math, or utilities)
-        if (category === pageCategory) {
-          var grid = document.getElementById('projectsGrid');
-          if (grid) grid.scrollIntoView({ behavior: 'smooth', block: 'start' });
-          return;
-        }
-      }
-    });    
-    st.addEventListener("click", function () {
-      var category = st.getAttribute("data-category");
-
-      var pageCategory = document.body.getAttribute("data-page");
-      if (pageCategory && category !== pageCategory) {
-        var pageMap = {
-          'all': 'index.html',
-          'games': 'games.html',
-          'math': 'math.html',
-          'utilities': 'utilities.html',
-          'favorites': 'index.html?category=favorites',
-          'playground': 'index.html?category=playground'
-        };
-        window.location.href = pageMap[category] || 'index.html';
-        return;
-      }
-
-      // If we're already on the matching subpage, just scroll to the grid
-      if (pageCategory && category === pageCategory) {
-        var grid = document.getElementById("projectsGrid");
-        if (grid) grid.scrollIntoView({ behavior: "smooth", block: "start" });
-        return;
-      }
-
-      syncSidebarTabs(category);
-      syncStickyTabs(category);
-
-      if (category === 'playground') {
-        showPlaygroundSection();
-        if (playgroundSection) playgroundSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      } else {
-        showProjectsSection();
-        applyCategoryFilter(category);
-        if (projectsSection) projectsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      }
-      });
-  });
-
-  /* ── Sticky Tabs ──────────────────────────────────────────── */
-  stickyTabs.forEach(function (st) {
-    st.addEventListener('click', function () {
-      var category = st.getAttribute('data-sticky-category');
-      syncStickyTabs(category);
-      syncSidebarTabs(category);
-
-      if (category === 'playground') {
-        showPlaygroundSection();
-        if (playgroundSection) playgroundSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      } else {
-        showProjectsSection();
-        applyCategoryFilter(category);
-        if (projectsSection) projectsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      }
-    });
-  });
-
-  /* ── Sticky Filter Bar Visibility ─────────────────────────── */
-  if (stickyFilterBar && heroSection) {
-    var heroObserver = new IntersectionObserver(function (entries) {
-      entries.forEach(function (entry) {
-        stickyFilterBar.classList.toggle('visible', !entry.isIntersecting);
-      });
-    }, { threshold: 0, rootMargin: '-80px 0px 0px 0px' });
-    heroObserver.observe(heroSection);
-
-    window.addEventListener('scroll', function () {
-      var navH = navbar ? navbar.getBoundingClientRect().height : 72;
-      stickyFilterBar.style.top = (navH + 16) + 'px';
-    }, { passive: true });
-  }
-
-  /* ── Random Project ───────────────────────────────────────── */
-  function openRandomProject(trigger) {
-    var visible = projectCards.filter(function (c) { return c.style.display !== 'none'; });
-    var pool = visible.length ? visible : projectCards;
-    var pick = pool[Math.floor(Math.random() * pool.length)];
-    var name = pick.getAttribute('data-project');
-    if (name && typeof openProjectSafe === 'function') {
-      openProjectSafe(name, trigger);
-    }
-  }
-
-  if (randomProjectBtn) {
-    randomProjectBtn.addEventListener('click', function () { openRandomProject(randomProjectBtn); });
-  }
-  if (randomProjectBtnSidebar) {
-    randomProjectBtnSidebar.addEventListener('click', function () { openRandomProject(randomProjectBtnSidebar); });
-  }
-
-  /* ── Init sidebar ─────────────────────────────────────────── */
-  var pageCategory = document.body.getAttribute('data-page');
-  if (sidebarTabs.length) {
-    if (pageCategory) {
-      syncSidebarTabs(pageCategory);
-    } else {
-      syncSidebarTabs('all');
-    }
-  }
-  if (stickyTabs.length) syncStickyTabs('all');
-
-  /* ── Sidebar Active Scroll Observer ───────────────────────── */
-  if (!pageCategory && projectsSection) {
-    // On homepage, observe projectsSection to toggle sidebar-active class
-    var sidebarActiveObserver = new IntersectionObserver(function (entries) {
-      entries.forEach(function (entry) {
-        var isVisible = entry.isIntersecting || entry.boundingClientRect.top < 200;
-        document.body.classList.toggle('sidebar-active', isVisible);
-      });
-    }, { threshold: 0.05 });
-    sidebarActiveObserver.observe(projectsSection);
-  } else if (pageCategory) {
-    // On subpages, always ensure sidebar is active
-    document.body.classList.add('sidebar-active');
-  }
-
-  /* ═══════════════════════════════════════════════════════════════
-     SEARCH
-     ═══════════════════════════════════════════════════════════════ */
-  function getMatchingProjects(query) {
-    if (!query) return [];
-    var matches = [];
-    projectCards.forEach(function (card) {
-      var category = card.getAttribute('data-category');
-      var title = (card.querySelector('h3') || {}).textContent || '';
-      var desc = (card.querySelector('p') || {}).textContent || '';
-      var tags = (card.getAttribute('data-tags') || '').toLowerCase();
-      var q = query.toLowerCase();
-
-      var catMatch = currentCategory === 'all' || category === currentCategory;
-      var searchMatch = title.toLowerCase().includes(q) ||
-                        desc.toLowerCase().includes(q) ||
-                        tags.includes(q);
-
-      if (catMatch && searchMatch) {
-        matches.push({ card: card, title: title, tags: tags, category: category });
-      }
-    });
-    return matches;
-  }
-
-  function highlightText(container, text, query) {
-    var safe = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    var parts = text.split(new RegExp('(' + safe + ')', 'gi'));
-    parts.forEach(function (part) {
-      if (part.toLowerCase() === query.toLowerCase()) {
-        var mark = document.createElement('mark');
-        mark.style.background = 'var(--accent-soft)';
-        mark.style.color = 'var(--accent)';
-        mark.style.fontWeight = '600';
-        mark.style.borderRadius = '2px';
-        mark.style.padding = '0 2px';
-        mark.textContent = part;
-        container.appendChild(mark);
-      } else if (part) {
-        container.appendChild(document.createTextNode(part));
-      }
-    });
-  }
-
-  function closeDropdown() {
-    if (searchDropdown) searchDropdown.classList.remove('active');
-  }
-
-  function renderRecentSearches() {
-    if (noResultsMessage) noResultsMessage.style.display = 'none';
-    if (!recentSearchesSection) return;
-
-    if (recentSearches.length === 0) {
-      recentSearchesSection.style.display = 'none';
-      if (tipsSection) tipsSection.style.display = 'block';
-      if (resultsSection) resultsSection.style.display = 'none';
-      return;
-    }
-
-    if (recentSearchesList) {
-      recentSearchesList.textContent = '';
-      recentSearches.slice(0, 5).forEach(function (search) {
-        var item = document.createElement('div');
-        item.className = 'dropdown-recent-item';
-        var text = document.createElement('div');
-        text.className = 'dropdown-recent-text';
-
-        var clock = document.createElement('i');
-        clock.className = 'fas fa-history';
-        clock.style.opacity = '0.5';
-        clock.style.fontSize = '0.8rem';
-
-        var label = document.createElement('span');
-        label.textContent = search;
-
-        text.append(clock, label);
-
-        var removeBtn = document.createElement('button');
-        removeBtn.className = 'dropdown-recent-remove';
-        removeBtn.setAttribute('aria-label', 'Remove search');
-        removeBtn.textContent = '<i class="fas fa-times"></i>';
-
-        item.append(text, removeBtn);
-
-        label.addEventListener('click', function () {
-          syncSearchInputs(search, searchInput);
-          currentSearchQuery = search;
-          performSearch();
-          closeDropdown();
-        });
-
-        removeBtn.addEventListener('click', function (e) {
-          e.stopPropagation();
-          recentSearches = recentSearches.filter(function (s) { return s !== search; });
-          localStorage.setItem('recentSearches', JSON.stringify(recentSearches));
-          renderRecentSearches();
-        });
-
-        recentSearchesList.appendChild(item);
-      });
-    }
-
-    recentSearchesSection.style.display = 'block';
-    if (resultsSection) resultsSection.style.display = 'none';
-    if (tipsSection) tipsSection.style.display = 'block';
-  }
-
-  function renderSuggestions(query) {
-    if (searchLoader) searchLoader.style.display = 'none';
-    if (!query) { renderRecentSearches(); return; }
-
-    var matches = getMatchingProjects(query);
-
-    if (matches.length === 0) {
-      if (resultsSection) resultsSection.style.display = 'none';
-      if (recentSearchesSection) recentSearchesSection.style.display = 'none';
-      if (tipsSection) tipsSection.style.display = 'block';
-      if (noResultsMessage) noResultsMessage.style.display = 'block';
-      return;
-    }
-
-    if (noResultsMessage) noResultsMessage.style.display = 'none';
-
-    if (resultsList) {
-      resultsList.textContent = '';
-      matches.slice(0, 8).forEach(function (project, index) {
-        var item = document.createElement('div');
-        item.className = 'dropdown-item' + (index === selectedSuggestionIndex ? ' selected' : '');
-
-        var iconBox = document.createElement('div');
-        iconBox.className = 'dropdown-item-icon';
-        var banner = project.card.querySelector('.card-banner');
-        if (banner) {
-          var img = document.createElement('img');
-          img.src = banner.src;
-          img.alt = '';
-          iconBox.appendChild(img);
-        }
-
-        var titleBox = document.createElement('div');
-        titleBox.className = 'dropdown-item-text';
-        highlightText(titleBox, project.title, query);
-
-        var tag = document.createElement('span');
-        tag.className = 'dropdown-item-tag';
-        tag.textContent = project.category;
-
-        item.append(iconBox, titleBox, tag);
-        item.addEventListener('click', function () { selectSuggestion(project.title); });
-        item.addEventListener('mouseenter', function () {
-          selectedSuggestionIndex = index;
-          updateSuggestionHighlight();
-        });
-        resultsList.appendChild(item);
-      });
-    }
-
-    if (resultsSection) resultsSection.style.display = 'block';
-    if (recentSearchesSection) recentSearchesSection.style.display = 'none';
-    if (tipsSection) tipsSection.style.display = 'none';
-    selectedSuggestionIndex = -1;
-  }
-
-  function updateSuggestionHighlight() {
-    if (!resultsList) return;
-    var items = resultsList.querySelectorAll('.dropdown-item');
-    items.forEach(function (item, i) {
-      item.classList.toggle('selected', i === selectedSuggestionIndex);
-    });
-  }
-
-  function selectSuggestion(title) {
-    if (!searchInput) return;
-    searchInput.value = title;
-    currentSearchQuery = title.toLowerCase();
-    performSearch();
-    closeDropdown();
-    if (projectsSection) {
-      projectsSection.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
-    }
-  }
-
-  function performSearch() {
-    var query = currentSearchQuery;
-    if (!query) {
-      applyCategoryFilter(currentCategory);
-      if (emptyStateHint) emptyStateHint.textContent = 'Try adjusting your search or category filter.';
-      return;
-    }
-
-    if (currentCategory !== 'all') {
-      currentCategory = 'all';
-      syncSidebarTabs('all');
-      syncStickyTabs('all');
-    }
-
-    recentSearches = recentSearches.filter(function (s) { return s !== query; });
-    recentSearches.unshift(query);
-    recentSearches = recentSearches.slice(0, 10);
-    localStorage.setItem('recentSearches', JSON.stringify(recentSearches));
-
-    var visibleCount = 0;
-    var favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-    projectCards.forEach(function (card) {
-      var category = card.getAttribute('data-category');
-      var title = (card.querySelector('h3') || {}).textContent || '';
-      var desc = (card.querySelector('p') || {}).textContent || '';
-      var tags = (card.getAttribute('data-tags') || '').toLowerCase();
-      var projectName = card.getAttribute('data-project');
-      var isFav = favorites.includes(projectName);
-
-      var catMatch = (currentCategory === 'all') ||
-                     (currentCategory === 'favorites' && isFav) ||
-                     (currentCategory !== 'favorites' && category === currentCategory);
-      var searchMatch = title.toLowerCase().includes(query) ||
-                        desc.toLowerCase().includes(query) ||
-                        tags.includes(query);
-
-      if (catMatch && searchMatch) {
-        card.style.display = '';
-        visibleCount++;
-      } else {
-        card.style.display = 'none';
-      }
-    });
+  // Init Sidebar and obtain references to update tabs
+  const sidebarInterface = initSidebar(
+    (category) => {
+      currentCategory = category;
+      updateProjectVisibility(currentCategory, currentSearchQuery);
+    },
+    showPlaygroundSection,
+    showProjectsSection
+  );
 
-    if (emptyState) {
-      emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
-      if (visibleCount === 0 && emptyStateHint) {
-        emptyStateHint.textContent = 'No projects match "' + query + '". Try a different keyword.';
+  // Init Search module
+  initSearch((query) => {
+    currentSearchQuery = query;
+    if (query && currentCategory !== "all") {
+      currentCategory = "all";
+      if (sidebarInterface) {
+        sidebarInterface.syncSidebarTabs("all");
+        sidebarInterface.syncStickyTabs("all");
       }
     }
-    if (projectCountBadge) projectCountBadge.textContent = String(visibleCount) + ' projects';
-  }
-
-  var searchInputs = [searchInput, navSearchInput].filter(Boolean);
-  if (searchInputs.length) {
-    var debouncedSearch = debounce(function (query) {
-      renderSuggestions(query);
-    }, 200);
-
-    searchInputs.forEach(function (input) {
-      input.addEventListener('input', function (e) {
-        var rawValue = e.target.value;
-        var query = rawValue.trim().toLowerCase();
-        syncSearchInputs(rawValue, e.target);
-        currentSearchQuery = query;
-        if (searchLoader) searchLoader.style.display = query ? 'block' : 'none';
-        debouncedSearch(query);
-        performSearch();
-      });
-
-      input.addEventListener('focus', function () {
-        if (input === searchInput && searchDropdown) searchDropdown.classList.add('active');
-        if (input === searchInput && !currentSearchQuery) renderRecentSearches();
-      });
-
-      input.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape') { closeDropdown(); input.blur(); }
-      });
-    });
-  }
-
-  document.addEventListener('click', function (e) {
-    if (searchDropdown && searchInput &&
-        !searchDropdown.contains(e.target) && e.target !== searchInput && e.target !== navSearchInput) {
-      closeDropdown();
-    }
+    updateProjectVisibility(currentCategory, currentSearchQuery);
   });
 
-  document.addEventListener('keydown', function (e) {
-    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
-      e.preventDefault();
-      if (navSearchInput) navSearchInput.focus();
-      else if (searchInput) searchInput.focus();
-    }
+  // Handle project modal close notification to re-filter (Fix: #601)
+  document.addEventListener("projectModalClosed", () => {
+    updateProjectVisibility(currentCategory, currentSearchQuery);
   });
 
-  renderRecentSearches();
-})
-  /* ═══════════════════════════════════════════════════════════════
-      MODAL
-    ═══════════════════════════════════════════════════════════════ */
-  function getFocusableElements(root) {
-    var sel = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-    return Array.from(root.querySelectorAll(sel)).filter(function (el) {
-      return !el.closest('[aria-hidden="true"]') && !el.classList.contains('visually-hidden');
+  // Populate projects from Template if container is empty
+  if (
+    projectsGrid &&
+    projectsGrid.children.length === 0 &&
+    projectsTemplate &&
+    projectsTemplate.content
+  ) {
+    Array.from(
+      projectsTemplate.content.querySelectorAll(".project-card")
+    ).forEach((card) => {
+      projectsGrid.appendChild(card.cloneNode(true));
     });
   }
 
-  function trapFocus(modalEl) {
-    var handler = function (e) {
-      if (e.key !== 'Tab' || !modalEl.classList.contains('active')) return;
-      var focusables = getFocusableElements(modalEl);
-      if (!focusables.length) return;
-      var first = focusables[0];
-      var last = focusables[focusables.length - 1];
-      if (e.shiftKey && document.activeElement === first) {
-        e.preventDefault(); last.focus({ preventScroll: true });
-      } else if (!e.shiftKey && document.activeElement === last) {
-        e.preventDefault(); first.focus({ preventScroll: true });
-      }
-    };
-    document.addEventListener('keydown', handler, true);
-    return function () { document.removeEventListener('keydown', handler, true); };
-  }
+  // Reference and sort project cards
+  const projectCards = projectsGrid
+    ? Array.from(projectsGrid.querySelectorAll(".project-card"))
+    : Array.from(document.querySelectorAll(".project-card"));
 
-  function openProjectSafe(name, trigger) {
-    if (!modal || !modalBody) return;
-    lastFocusedElement = trigger || document.activeElement;
-    modal.classList.add('active');
-    modal.setAttribute('aria-hidden', 'false');
-    var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-    document.body.style.paddingRight = scrollbarWidth + 'px';
-    document.body.style.overflow = 'hidden';
-    window.setMainInert(true);
-
-    safeRun(function () {
-      if (typeof getProjectHTML === 'function') {
-        modalBody.textContent = getProjectHTML(name) || '<div style="padding:1rem;color:var(--text-secondary)">Project content unavailable.</div>';
-      } else {
-        modalBody.textContent = '<div style="padding:1rem;color:var(--text-secondary)">Project content unavailable.</div>';
-      }
-      if (typeof initializeProject === 'function') initializeProject(name);
-      setupModalInfoButton(name);
-      
-      // Inject info button next to the title (works for all projects)
-var projectContent = modalBody.querySelector('.project-content');
-if (projectContent) {
-    // Try to find the title element (could be h2, or other heading)
-    var firstHeading = projectContent.querySelector('h2, h3, .resume-analyzer-copy h2, .pet-title');
-    
-    if (!firstHeading) {
-        // If no heading found, look for any element with a title-like class
-        firstHeading = projectContent.querySelector('[class*="title"], [class*="header"] h2');
-    }
-    
-    if (firstHeading && !projectContent.querySelector('.inline-info-btn')) {
-        // Create info button
-        var infoBtn = document.createElement('button');
-        infoBtn.className = 'inline-info-btn';
-        infoBtn.textContent = 'ⓘ';
-        infoBtn.setAttribute('aria-label', 'How to use this project');
-        
-        // Style the button
-        infoBtn.style.marginLeft = '12px';
-        infoBtn.style.background = 'none';
-        infoBtn.style.border = 'none';
-        infoBtn.style.fontSize = '1.3rem';
-        infoBtn.style.cursor = 'pointer';
-        infoBtn.style.color = 'var(--accent)';
-        infoBtn.style.verticalAlign = 'middle';
-        
-        infoBtn.addEventListener('click', function(e) {
-            e.stopPropagation();
-            if (typeof getProjectInstructions === 'function') {
-                var info = getProjectInstructions(name);
-                showInfoModal(info.title, info.steps);
-            }
-        });
-        
-        // Make heading display inline if it's a block element
-        if (firstHeading.style.display !== 'inline-block') {
-            firstHeading.style.display = 'inline-block';
-        }
-        firstHeading.appendChild(infoBtn);
-    }
-}
-    });
-
-    removeTrap = trapFocus(modal);
-    var focusables = getFocusableElements(modalBody);
-    var firstFocusable = focusables[0] || modalClose;
-    if (firstFocusable && typeof firstFocusable.focus === 'function') {
-      firstFocusable.focus({ preventScroll: true });
-    }
-}
-
-  function closeProjectSafe() {
-    if (!modal || !modal.classList.contains('active')) return;
-    modal.classList.remove('active');
-    modal.setAttribute('aria-hidden', 'true');
-    document.body.style.paddingRight = '';
-    document.body.style.overflow = '';
-    window.setMainInert(false);
-    if (removeTrap) { removeTrap(); removeTrap = null; }
-    if (modalBody) {
-      modalBody.textContent = '';
-    }
-    if (lastFocusedElement && typeof lastFocusedElement.focus === 'function') {
-      lastFocusedElement.focus({ preventScroll: true });
-    }
-    lastFocusedElement = null;
-  }
-
-  if (modalClose) modalClose.addEventListener('click', closeProjectSafe);
-  if (modal) {
-    modal.addEventListener('click', function (e) {
-      if (e.target === modal) closeProjectSafe();
+  projectCards.sort((a, b) => {
+    const titleA = a.querySelector("h3")?.textContent || "";
+    const titleB = b.querySelector("h3")?.textContent || "";
+    return titleA.localeCompare(titleB, undefined, {
+      sensitivity: "base",
+      numeric: true,
     });
-  }
-  document.addEventListener('keydown', function (e) {
-    if (e.key === 'Escape') closeProjectSafe();
   });
 
-  /* ── Expose for inline use ────────────────────────────────── */
-  window.openProjectSafe = openProjectSafe;
-  window.closeProjectSafe = closeProjectSafe;
+  if (projectsGrid) {
+    projectCards.forEach((card) => projectsGrid.appendChild(card));
+  }
 
-  /* ═══════════════════════════════════════════════════════════════
-     WIRE PROJECT CARDS
-     ═══════════════════════════════════════════════════════════════ */
-  projectCards.forEach(function (card) {
-    var name = card.getAttribute('data-project');
+  // Wire up project cards (Favorites, Sharing, Play trigger)
+  projectCards.forEach((card) => {
+    const name = card.getAttribute("data-project");
+    const cardActions = card.querySelector(".card-actions");
 
-    /* ── Favorite Button ──────────────────────────────────── */
-    var favBtn = document.createElement('button');
-    favBtn.className = 'btn-favorite';
-    favBtn.setAttribute('aria-label', 'Toggle favorite');
-    favBtn.textContent = '<i class="far fa-star"></i>';
+    // Favorites Button
+    const favBtn = document.createElement("button");
+    favBtn.className = "btn-favorite";
+    favBtn.setAttribute("aria-label", "Toggle favorite");
+    favBtn.innerHTML = '<i class="far fa-star"></i>';
 
-    var favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
+    const favorites = JSON.parse(localStorage.getItem("favorites") || "[]");
     if (favorites.includes(name)) {
-      favBtn.classList.add('active');
-      favBtn.textContent = '<i class="fas fa-star"></i>';
+      favBtn.classList.add("active");
+      favBtn.innerHTML = '<i class="fas fa-star"></i>';
     }
 
-    favBtn.addEventListener('click', function (e) {
+    favBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      var favs = JSON.parse(localStorage.getItem('favorites') || '[]');
-      var idx = favs.indexOf(name);
+      const favs = JSON.parse(localStorage.getItem("favorites") || "[]");
+      const idx = favs.indexOf(name);
       if (idx === -1) {
         favs.push(name);
-        favBtn.classList.add('active');
-        favBtn.textContent = '<i class="fas fa-star"></i>';
+        favBtn.classList.add("active");
+        favBtn.innerHTML = '<i class="fas fa-star"></i>';
       } else {
         favs.splice(idx, 1);
-        favBtn.classList.remove('active');
-        favBtn.textContent = '<i class="far fa-star"></i>';
-        if (currentCategory === 'favorites') {
-          card.style.display = 'none';
+        favBtn.classList.remove("active");
+        favBtn.innerHTML = '<i class="far fa-star"></i>';
+        if (currentCategory === "favorites") {
+          card.style.display = "none";
         }
       }
-      localStorage.setItem('favorites', JSON.stringify(favs));
+      localStorage.setItem("favorites", JSON.stringify(favs));
     });
 
-    var cardActions = card.querySelector('.card-actions');
     if (cardActions) cardActions.appendChild(favBtn);
 
-    /* ── Share Button ─────────────────────────────────────── */
-    var shareBtn = document.createElement('button');
-    shareBtn.className = 'btn-share';
-    shareBtn.setAttribute('aria-label', 'Share ' + name);
-    shareBtn.textContent = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>';
-    shareBtn.title = 'Copy shareable link';
+    // Share Button
+    const shareBtn = document.createElement("button");
+    shareBtn.className = "btn-share";
+    shareBtn.setAttribute("aria-label", `Share ${name}`);
+    shareBtn.innerHTML =
+      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>';
+    shareBtn.title = "Copy shareable link";
 
-    shareBtn.addEventListener('click', function (e) {
+    shareBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      var url = window.location.origin + window.location.pathname + '?project=' + encodeURIComponent(name);
-      navigator.clipboard.writeText(url).then(function () {
-        showToast('Link copied!');
-      }).catch(function () {
-        showToast('Copy this: ' + url);
-      });
+      const url =
+        window.location.origin +
+        window.location.pathname +
+        "?project=" +
+        encodeURIComponent(name);
+      navigator.clipboard
+        .writeText(url)
+        .then(() => showToast("Link copied!"))
+        .catch(() => showToast(`Copy this: ${url}`));
     });
 
     if (cardActions) cardActions.appendChild(shareBtn);
 
-    /* ── Play Button ──────────────────────────────────────── */
-    var playBtns = card.querySelectorAll('.btn-play');
-    playBtns.forEach(function (play) {
-      play.setAttribute('aria-label', 'Open ' + name);
-      play.addEventListener('click', function (e) {
+    // Play Button
+    const playBtns = card.querySelectorAll(".btn-play");
+    playBtns.forEach((play) => {
+      play.setAttribute("aria-label", `Open ${name}`);
+      play.addEventListener("click", (e) => {
         e.stopPropagation();
         openProjectSafe(name, play);
       });
     });
 
-    /* ── Card Click ───────────────────────────────────────── */
-    card.addEventListener('click', function (e) {
-      if (e.target.closest('.btn-play') || e.target.closest('.btn-favorite') || e.target.closest('.btn-share')) return;
+    // Card Click
+    card.addEventListener("click", (e) => {
+      if (
+        e.target.closest(".btn-play") ||
+        e.target.closest(".btn-favorite") ||
+        e.target.closest(".btn-share")
+      ) {
+        return;
+      }
       openProjectSafe(name, card);
     });
 
-    /* ── Card Mouse Tracking for Border Glow ──────────────── */
+    // Mouse Border Glow
     if (!prefersReducedMotion()) {
-      card.addEventListener('mousemove', function (e) {
-        var rect = card.getBoundingClientRect();
-        var x = ((e.clientX - rect.left) / rect.width) * 100;
-        var y = ((e.clientY - rect.top) / rect.height) * 100;
-        card.style.setProperty('--mouse-x', x + '%');
-        card.style.setProperty('--mouse-y', y + '%');
+      card.addEventListener("mousemove", (e) => {
+        const rect = card.getBoundingClientRect();
+        const x = ((e.clientX - rect.left) / rect.width) * 100;
+        const y = ((e.clientY - rect.top) / rect.height) * 100;
+        card.style.setProperty("--mouse-x", `${x}%`);
+        card.style.setProperty("--mouse-y", `${y}%`);
       });
     }
   });
 
-  /* ── Toast ─────────────────────────────────────────────────── */
+  // Sound logic (safe wrapper)
+  function syncHeroControlsIcons() {
+    if (heroSoundToggle && soundToggle) {
+      const realSoundIcon = soundToggle.querySelector("i");
+      const heroSoundIcon = heroSoundToggle.querySelector("i");
+      if (realSoundIcon && heroSoundIcon) {
+        heroSoundIcon.className = realSoundIcon.className;
+      }
+    }
+  }
+
+  if (soundToggle) {
+    const updateSoundIcon = () => {
+      if (window.audioController) {
+        const isMuted = window.audioController.isMuted;
+        soundToggle.innerHTML = isMuted
+          ? '<i class="fas fa-volume-mute" aria-hidden="true"></i>'
+          : '<i class="fas fa-volume-up" aria-hidden="true"></i>';
+        soundToggle.setAttribute(
+          "aria-label",
+          isMuted ? "Unmute sound" : "Mute sound"
+        );
+      }
+    };
+    updateSoundIcon();
+    soundToggle.addEventListener("click", () => {
+      if (
+        window.audioController &&
+        typeof window.audioController.toggleMute === "function"
+      ) {
+        window.audioController.toggleMute();
+        updateSoundIcon();
+        if (
+          !window.audioController.isMuted &&
+          typeof window.audioController.play === "function"
+        ) {
+          window.audioController.play("click");
+        }
+        syncHeroControlsIcons();
+      }
+    });
+  }
+
+  if (heroSoundToggle && soundToggle) {
+    heroSoundToggle.addEventListener("click", () => {
+      soundToggle.click();
+      setTimeout(syncHeroControlsIcons, 50);
+    });
+  }
+
+  // Toast
   function showToast(message) {
-    var existing = document.getElementById('shareToast');
+    const existing = document.getElementById("shareToast");
     if (existing) existing.remove();
-    var toast = document.createElement('div');
-    toast.id = 'shareToast';
-    toast.className = 'share-toast';
+    const toast = document.createElement("div");
+    toast.id = "shareToast";
+    toast.className = "share-toast";
     toast.textContent = message;
     document.body.appendChild(toast);
-    requestAnimationFrame(function () {
-      toast.classList.add('share-toast--visible');
+    requestAnimationFrame(() => {
+      toast.classList.add("share-toast--visible");
     });
-    setTimeout(function () {
-      toast.classList.remove('share-toast--visible');
-      setTimeout(function () { toast.remove(); }, 300);
+    setTimeout(() => {
+      toast.classList.remove("share-toast--visible");
+      setTimeout(() => toast.remove(), 300);
     }, 2500);
   }
 
-  /* ── URL params auto-open ──────────────────────────────────── */
-  (function () {
-    var params = new URLSearchParams(window.location.search);
-    var projectParam = params.get('project');
-    if (projectParam) {
-      var match = projectCards.find(function (c) { return c.getAttribute('data-project') === projectParam; });
-      if (match) {
-        setTimeout(function () {
-          openProjectSafe(projectParam, match);
-          match.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }, 300);
-      }
-    }
-    var catParam = params.get('category');
-    var valid = ['all', 'games', 'math', 'utilities', 'playground', 'favorites'];
-    if (catParam && valid.includes(catParam)) {
-      var tab = document.querySelector('[data-category="' + catParam + '"]');
-      if (tab) setTimeout(function () { tab.click(); }, 100);
+  // Back to Top Button
+  if (backToTopButton) {
+    const toggleBackToTop = () => {
+      backToTopButton.classList.toggle("visible", window.scrollY > 300);
+    };
+    window.addEventListener("scroll", toggleBackToTop, { passive: true });
+    toggleBackToTop();
+
+    backToTopButton.addEventListener("click", () => {
+      window.scrollTo({
+        top: 0,
+        behavior: prefersReducedMotion() ? "auto" : "smooth",
+      });
+    });
+  }
+
+  // Cursor Glow
+  if (
+    cursorGlow &&
+    !prefersReducedMotion() &&
+    html.getAttribute("data-theme") !== "light"
+  ) {
+    let glowTimeout;
+    document.addEventListener("pointermove", (e) => {
+      cursorGlow.style.left = `${e.clientX}px`;
+      cursorGlow.style.top = `${e.clientY}px`;
+      cursorGlow.style.opacity = "0.5";
+      clearTimeout(glowTimeout);
+      glowTimeout = setTimeout(() => {
+        cursorGlow.style.opacity = "0";
+      }, 3000);
+    });
+    document.addEventListener("pointerleave", () => {
+      cursorGlow.style.opacity = "0";
+    });
+  }
+
+  // Explore CTA Button
+  if (exploreBtn && projectsSection) {
+    exploreBtn.addEventListener("click", () => {
+      projectsSection.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  }
+
+  // Random Project Selector
+  function openRandomProject(trigger) {
+    const visible = projectCards.filter((c) => c.style.display !== "none");
+    const pool = visible.length ? visible : projectCards;
+    const pick = pool[Math.floor(Math.random() * pool.length)];
+    const name = pick.getAttribute("data-project");
+    if (name) {
+      openProjectSafe(name, trigger);
     }
-  })();
+  }
+
+  if (randomProjectBtn) {
+    randomProjectBtn.addEventListener("click", () =>
+      openRandomProject(randomProjectBtn)
+    );
+  }
+  if (randomProjectBtnSidebar) {
+    randomProjectBtnSidebar.addEventListener("click", () =>
+      openRandomProject(randomProjectBtnSidebar)
+    );
+  }
+
+  // Sticky Filter Bar Intersection Observer
+  if (stickyFilterBar && document.querySelector(".hero-section")) {
+    const heroSection = document.querySelector(".hero-section");
+    const heroObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          stickyFilterBar.classList.toggle("visible", !entry.isIntersecting);
+        });
+      },
+      { threshold: 0, rootMargin: "-80px 0px 0px 0px" }
+    );
+    heroObserver.observe(heroSection);
 
-  /* ═══════════════════════════════════════════════════════════════
-     TIMELINE SCROLL REVEAL
-     ═══════════════════════════════════════════════════════════════ */
-  var timelineItems = document.querySelectorAll('.timeline-item[data-reveal]');
-  var timelineFill = document.getElementById('timelineFill');
-  var timelineSection = document.getElementById('timelineSection');
+    window.addEventListener(
+      "scroll",
+      () => {
+        const navH = navbar ? navbar.getBoundingClientRect().height : 72;
+        stickyFilterBar.style.top = `${navH + 16}px`;
+      },
+      { passive: true }
+    );
+  }
 
+  // Serpentine SVG winding Timeline Path
+  const timelineItems = document.querySelectorAll(
+    ".timeline-item[data-reveal]"
+  );
+  const timelineSection = document.getElementById("timelineSection");
   if (timelineItems.length && !prefersReducedMotion()) {
-    var timelineObserver = new IntersectionObserver(function (entries) {
-      entries.forEach(function (entry) {
-        if (entry.isIntersecting) {
-          entry.target.classList.add('visible');
-        }
-      });
-    }, { threshold: 0.25, rootMargin: '0px 0px -50px 0px' });
+    const timelineObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("visible");
+          }
+        });
+      },
+      { threshold: 0.25, rootMargin: "0px 0px -50px 0px" }
+    );
 
-    timelineItems.forEach(function (item) {
-      timelineObserver.observe(item);
-    });
+    timelineItems.forEach((item) => timelineObserver.observe(item));
 
-    /* ── Serpentine SVG Winding Timeline Path ─────────────────── */
-    var svgNamespace = 'http://www.w3.org/2000/svg';
-    
+    const svgNamespace = "http://www.w3.org/2000/svg";
     function getElementOffset(el, parent) {
-      var top = 0;
-      var left = 0;
-      var curr = el;
+      let top = 0;
+      let left = 0;
+      let curr = el;
       while (curr && curr !== parent) {
         top += curr.offsetTop || 0;
         left += curr.offsetLeft || 0;
         curr = curr.offsetParent;
       }
-      return { top: top, left: left };
+      return { top, left };
     }
 
     function rebuildTimelineSvg() {
-      var container = document.querySelector('.timeline-container');
+      const container = document.querySelector(".timeline-container");
       if (!container) return;
-      var dots = document.querySelectorAll('.timeline-dot');
+      const dots = document.querySelectorAll(".timeline-dot");
       if (dots.length < 2) return;
 
-      var containerWidth = container.offsetWidth;
-      var containerHeight = container.offsetHeight;
+      const containerWidth = container.offsetWidth;
+      const containerHeight = container.offsetHeight;
 
-      var svg = document.getElementById('timelineSvg');
+      let svg = document.getElementById("timelineSvg");
       if (!svg) {
-        svg = document.createElementNS(svgNamespace, 'svg');
-        svg.id = 'timelineSvg';
-        svg.setAttribute('class', 'timeline-svg');
-        
-        var defs = document.createElementNS(svgNamespace, 'defs');
-        var grad = document.createElementNS(svgNamespace, 'linearGradient');
-        grad.id = 'timelineGrad';
-        grad.setAttribute('x1', '0%');
-        grad.setAttribute('y1', '0%');
-        grad.setAttribute('x2', '0%');
-        grad.setAttribute('y2', '100%');
-
-        var stop1 = document.createElementNS(svgNamespace, 'stop');
-        stop1.setAttribute('offset', '0%');
-        stop1.setAttribute('stop-color', 'var(--accent)');
-
-        var stop2 = document.createElementNS(svgNamespace, 'stop');
-        stop2.setAttribute('offset', '100%');
-        stop2.setAttribute('stop-color', '#06b6d4');
+        svg = document.createElementNS(svgNamespace, "svg");
+        svg.id = "timelineSvg";
+        svg.setAttribute("class", "timeline-svg");
+
+        const defs = document.createElementNS(svgNamespace, "defs");
+        const grad = document.createElementNS(svgNamespace, "linearGradient");
+        grad.id = "timelineGrad";
+        grad.setAttribute("x1", "0%");
+        grad.setAttribute("y1", "0%");
+        grad.setAttribute("x2", "0%");
+        grad.setAttribute("y2", "100%");
+
+        const stop1 = document.createElementNS(svgNamespace, "stop");
+        stop1.setAttribute("offset", "0%");
+        stop1.setAttribute("stop-color", "var(--accent)");
+
+        const stop2 = document.createElementNS(svgNamespace, "stop");
+        stop2.setAttribute("offset", "100%");
+        stop2.setAttribute("stop-color", "#06b6d4");
 
         grad.appendChild(stop1);
         grad.appendChild(stop2);
         defs.appendChild(grad);
 
-        // Define a dynamic layout mask path for progress crawling
-        var mask = document.createElementNS(svgNamespace, 'mask');
-        mask.id = 'timelineMask';
+        const mask = document.createElementNS(svgNamespace, "mask");
+        mask.id = "timelineMask";
 
-        var maskPath = document.createElementNS(svgNamespace, 'path');
-        maskPath.id = 'timelineMaskPath';
-        maskPath.setAttribute('fill', 'none');
-        maskPath.setAttribute('stroke', '#ffffff');
-        maskPath.setAttribute('stroke-width', '24'); // Wide enough to fully cover glowing dots
-        maskPath.setAttribute('stroke-linecap', 'round');
+        const maskPath = document.createElementNS(svgNamespace, "path");
+        maskPath.id = "timelineMaskPath";
+        maskPath.setAttribute("fill", "none");
+        maskPath.setAttribute("stroke", "#ffffff");
+        maskPath.setAttribute("stroke-width", "24");
+        maskPath.setAttribute("stroke-linecap", "round");
 
         mask.appendChild(maskPath);
         defs.appendChild(mask);
         svg.appendChild(defs);
 
-        var track = document.createElementNS(svgNamespace, 'path');
-        track.id = 'timelineSvgTrack';
-        track.setAttribute('class', 'timeline-svg-track');
-        track.setAttribute('fill', 'none');
+        const track = document.createElementNS(svgNamespace, "path");
+        track.id = "timelineSvgTrack";
+        track.setAttribute("class", "timeline-svg-track");
+        track.setAttribute("fill", "none");
 
-        var fill = document.createElementNS(svgNamespace, 'path');
-        fill.id = 'timelineSvgFill';
-        fill.setAttribute('class', 'timeline-svg-fill');
-        fill.setAttribute('fill', 'none');
-        fill.setAttribute('stroke', 'var(--accent)');
-        fill.setAttribute('mask', 'url(#timelineMask)');
+        const fill = document.createElementNS(svgNamespace, "path");
+        fill.id = "timelineSvgFill";
+        fill.setAttribute("class", "timeline-svg-fill");
+        fill.setAttribute("fill", "none");
+        fill.setAttribute("stroke", "var(--accent)");
+        fill.setAttribute("mask", "url(#timelineMask)");
 
         svg.appendChild(track);
         svg.appendChild(fill);
 
-        var grid = document.querySelector('.timeline-grid');
+        const grid = document.querySelector(".timeline-grid");
         container.insertBefore(svg, grid);
       }
 
-      // Determine layout stable coordinate points for all timeline dots
-      var coords = [];
-      dots.forEach(function (dot) {
-        var offset = getElementOffset(dot, container);
-        var x = offset.left + dot.offsetWidth / 2;
-        var y = offset.top + dot.offsetHeight / 2;
-        coords.push({ x: x, y: y });
+      const coords = [];
+      dots.forEach((dot) => {
+        const offset = getElementOffset(dot, container);
+        const x = offset.left + dot.offsetWidth / 2;
+        const y = offset.top + dot.offsetHeight / 2;
+        coords.push({ x, y });
       });
 
-      // Create the winding path
-      var d = "";
-      var startX = containerWidth / 2;
-      d += "M " + startX + " 0";
-      d += " L " + coords[0].x + " " + coords[0].y;
-
-      // Calculate a sweep width that is perfectly responsive
-      // e.g. 16% of container width, capped at 180px for desktop beauty
-      var W = Math.min(180, containerWidth * 0.16);
-
-      for (var i = 0; i < coords.length - 1; i++) {
-        var pStart = coords[i];
-        var pEnd = coords[i + 1];
-        var H = pEnd.y - pStart.y;
-        var dy = H * 0.35; // Symmetrical control point height
-        
-        // Even segments (0, 2, 4...) snake to the right, odd segments to the left
-        var dx = (i % 2 === 0) ? W : -W;
-
-        var cp1x = pStart.x + dx;
-        var cp1y = pStart.y + dy;
-        var cp2x = pEnd.x + dx;
-        var cp2y = pEnd.y - dy;
-
-        d += " C " + cp1x + " " + cp1y + ", " + cp2x + " " + cp2y + ", " + pEnd.x + " " + pEnd.y;
+      let d = "";
+      const startX = containerWidth / 2;
+      d += `M ${startX} 0 L ${coords[0].x} ${coords[0].y}`;
+
+      const W = Math.min(180, containerWidth * 0.16);
+
+      for (let i = 0; i < coords.length - 1; i++) {
+        const pStart = coords[i];
+        const pEnd = coords[i + 1];
+        const H = pEnd.y - pStart.y;
+        const dy = H * 0.35;
+        const dx = i % 2 === 0 ? W : -W;
+
+        const cp1x = pStart.x + dx;
+        const cp1y = pStart.y + dy;
+        const cp2x = pEnd.x + dx;
+        const cp2y = pEnd.y - dy;
+
+        d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${pEnd.x} ${pEnd.y}`;
       }
 
-      // Straight exit to the bottom
-      d += " L " + coords[coords.length - 1].x + " " + containerHeight;
+      d += ` L ${coords[coords.length - 1].x} ${containerHeight}`;
 
-      var trackPath = document.getElementById('timelineSvgTrack');
-      var fillPath = document.getElementById('timelineSvgFill');
-      var maskPath = document.getElementById('timelineMaskPath');
+      const trackPath = document.getElementById("timelineSvgTrack");
+      const fillPath = document.getElementById("timelineSvgFill");
+      const maskPath = document.getElementById("timelineMaskPath");
       if (trackPath && fillPath && maskPath) {
-        trackPath.setAttribute('d', d);
-        fillPath.setAttribute('d', d);
-        maskPath.setAttribute('d', d);
+        trackPath.setAttribute("d", d);
+        fillPath.setAttribute("d", d);
+        maskPath.setAttribute("d", d);
 
-        var totalLength = maskPath.getTotalLength();
+        const totalLength = maskPath.getTotalLength();
         maskPath.style.strokeDasharray = totalLength;
         maskPath.dataset.totalLength = totalLength;
-        
-        // Trigger scroll progress sync immediately
+
         updateTimelineFill();
       }
     }
 
-    /* ── Timeline Fill Progress ───────────────────────────── */
     function updateTimelineFill() {
       if (!timelineSection) return;
-      var container = document.querySelector('.timeline-container');
+      const container = document.querySelector(".timeline-container");
       if (!container) return;
 
-      var containerRect = container.getBoundingClientRect();
-      var viewportCenterY = window.innerHeight / 2;
+      const containerRect = container.getBoundingClientRect();
+      const viewportCenterY = window.innerHeight / 2;
+      const relativeY = viewportCenterY - containerRect.top;
+      const offset = Math.max(0, Math.min(1, relativeY / containerRect.height));
 
-      // Calculate relative vertical scroll position of the viewport center relative to the container
-      var relativeY = viewportCenterY - containerRect.top;
-      var offset = Math.max(0, Math.min(1, relativeY / containerRect.height));
-
-      /* ── Dynamic SVG path mask scroll synchronization ──────── */
-      var maskPath = document.getElementById('timelineMaskPath');
+      const maskPath = document.getElementById("timelineMaskPath");
       if (maskPath && maskPath.dataset.totalLength) {
-        var totalLength = parseFloat(maskPath.dataset.totalLength);
-        var dashoffset = totalLength - (offset * totalLength);
-        maskPath.style.strokeDashoffset = Math.max(0, Math.min(totalLength, dashoffset));
+        const totalLength = parseFloat(maskPath.dataset.totalLength);
+        const dashoffset = totalLength - offset * totalLength;
+        maskPath.style.strokeDashoffset = Math.max(
+          0,
+          Math.min(totalLength, dashoffset)
+        );
       }
 
-      /* ── Activate item based on viewport center crossing timeline dots ── */
-      var activeIdx = -1;
-      var dots = document.querySelectorAll('.timeline-dot');
-      
-      dots.forEach(function (dot, i) {
-        var dotRect = dot.getBoundingClientRect();
-        var dotCenterY = dotRect.top + dotRect.height / 2;
-        
-        // A dot is crossed/passed if its vertical center in the viewport is <= the viewport center
+      let activeIdx = -1;
+      const dots = document.querySelectorAll(".timeline-dot");
+
+      dots.forEach((dot, i) => {
+        const dotRect = dot.getBoundingClientRect();
+        const dotCenterY = dotRect.top + dotRect.height / 2;
         if (dotCenterY <= viewportCenterY) {
           activeIdx = i;
         }
       });
 
-      timelineItems.forEach(function (item, i) {
-        item.classList.toggle('active', i === activeIdx);
+      timelineItems.forEach((item, i) => {
+        item.classList.toggle("active", i === activeIdx);
       });
     }
 
-    // Initialize SVG path layout recalculations on page render & resize
     rebuildTimelineSvg();
-    window.addEventListener('resize', debounce(rebuildTimelineSvg, 150));
-    window.addEventListener('scroll', updateTimelineFill, { passive: true });
+    window.addEventListener("resize", debounce(rebuildTimelineSvg, 150));
+    window.addEventListener("scroll", updateTimelineFill, { passive: true });
   } else if (timelineItems.length) {
-    timelineItems.forEach(function (item) { item.classList.add('visible'); });
+    timelineItems.forEach((item) => item.classList.add("visible"));
   }
 
-  /* ── Reveal on Scroll (general) ────────────────────────────── */
-  var revealItems = document.querySelectorAll('.reveal-on-scroll');
+  // Scroll reveal general elements
+  const revealItems = document.querySelectorAll(".reveal-on-scroll");
   if (revealItems.length && !prefersReducedMotion()) {
-    var revealObserver = new IntersectionObserver(function (entries, obs) {
-      entries.forEach(function (entry) {
-        if (!entry.isIntersecting) return;
-        entry.target.classList.add('is-visible');
-        obs.unobserve(entry.target);
-      });
-    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
-    revealItems.forEach(function (item) { revealObserver.observe(item); });
+    const revealObserver = new IntersectionObserver(
+      (entries, obs) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return;
+          entry.target.classList.add("is-visible");
+          obs.unobserve(entry.target);
+        });
+      },
+      { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }
+    );
+    revealItems.forEach((item) => revealObserver.observe(item));
   } else {
-    revealItems.forEach(function (item) { item.classList.add('is-visible'); });
+    revealItems.forEach((item) => item.classList.add("is-visible"));
   }
 
-  document.querySelectorAll(".footer-cat-link").forEach(function (link) {
-    link.addEventListener("click", function (e) {
+  // Footer category quick-links
+  document.querySelectorAll(".footer-cat-link").forEach((a) => {
+    a.addEventListener("click", (e) => {
       e.preventDefault();
-
-      var cat = link.getAttribute("data-cat");
-      var tab = document.querySelector(
-        '.sidebar-tab[data-category="' + cat + '"]'
+      const cat = a.getAttribute("data-cat");
+      const tab = document.querySelector(
+        `.sidebar-tab[data-category="${cat}"]`
       );
       if (tab) tab.click();
     });
   });
 
-/* ── Scroll Progress Bar ───────────────────────────── */
-
-var progressBar = document.getElementById("scrollProgressBar");
-
-if (progressBar) {
-  let ticking = false;
-
-  function updateScrollProgress() {
-    var scrollTop =
-      window.scrollY || document.documentElement.scrollTop;
-
-    var docHeight =
-      document.documentElement.scrollHeight -
-      document.documentElement.clientHeight;
-
-    var progress = docHeight
-      ? (scrollTop / docHeight) * 100
-      : 0;
-
-    progressBar.style.width = progress + "%";
-
-    ticking = false;
-  }
+  // Scroll progress bar
+  const progressBar = document.getElementById("scrollProgressBar");
+  if (progressBar) {
+    let ticking = false;
+    const updateScrollProgress = () => {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop;
+      const docHeight =
+        document.documentElement.scrollHeight -
+        document.documentElement.clientHeight;
+      const progress = docHeight ? (scrollTop / docHeight) * 100 : 0;
+      progressBar.style.width = `${progress}%`;
+      ticking = false;
+    };
 
-  window.addEventListener(
-    "scroll",
-    function () {
+    window.addEventListener("scroll", () => {
       if (!ticking) {
         requestAnimationFrame(updateScrollProgress);
         ticking = true;
       }
-    },
-    { passive: true }
-  );
+    });
+  }
+
+  // URL parameters auto-open logic
+  (function () {
+    const params = new URLSearchParams(window.location.search);
+    const projectParam = params.get("project");
+    if (projectParam) {
+      const match = projectCards.find(
+        (c) => c.getAttribute("data-project") === projectParam
+      );
+      if (match) {
+        setTimeout(() => {
+          openProjectSafe(projectParam, match);
+          match.scrollIntoView({ behavior: "smooth", block: "center" });
+        }, 300);
+      }
+    }
+    const catParam = params.get("category");
+    const valid = [
+      "all",
+      "games",
+      "math",
+      "utilities",
+      "playground",
+      "favorites",
+    ];
+    if (catParam && valid.includes(catParam)) {
+      const tab = document.querySelector(`[data-category="${catParam}"]`);
+      if (tab) {
+        setTimeout(() => tab.click(), 100);
+      }
+    }
+  })();
 
-  updateScrollProgress();
-}
+  // Initial card filtering state update
+  updateProjectVisibility(currentCategory, currentSearchQuery);
+});
diff --git a/web-app/js/modules/modal.js b/web-app/js/modules/modal.js
new file mode 100644
index 00000000..6687a9d2
--- /dev/null
+++ b/web-app/js/modules/modal.js
@@ -0,0 +1,220 @@
+/*
+  modal.js - Project launcher modal dialogue and instructions helper.
+*/
+
+import { safeRun } from "./utils.js";
+
+let lastFocusedElement = null;
+let removeTrap = null;
+let currentProjectName = "";
+
+function getFocusableElements(root) {
+  const sel =
+    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+  return Array.from(root.querySelectorAll(sel)).filter((el) => {
+    return (
+      !el.closest('[aria-hidden="true"]') &&
+      !el.classList.contains("visually-hidden")
+    );
+  });
+}
+
+function trapFocus(modalEl) {
+  const handler = function (e) {
+    if (e.key !== "Tab" || !modalEl.classList.contains("active")) return;
+    const focusables = getFocusableElements(modalEl);
+    if (!focusables.length) return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus({ preventScroll: true });
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus({ preventScroll: true });
+    }
+  };
+  document.addEventListener("keydown", handler, true);
+  return function () {
+    document.removeEventListener("keydown", handler, true);
+  };
+}
+
+function setMainInert(isInert) {
+  const main = document.getElementById("main-content");
+  if (!main) return;
+  if (isInert) main.setAttribute("inert", "");
+  else main.removeAttribute("inert");
+}
+
+export function showInfoModal(title, steps) {
+  const overlay = document.getElementById("infoModalOverlay");
+  const titleEl = document.getElementById("infoModalTitle");
+  const listEl = document.getElementById("infoModalList");
+
+  if (!overlay || !titleEl || !listEl) return;
+
+  titleEl.textContent = title;
+  listEl.innerHTML = steps.map((step) => "<li>" + step + "</li>").join("");
+
+  overlay.classList.add("active");
+
+  const closeBtn = document.getElementById("infoModalClose");
+  const gotItBtn = document.getElementById("infoModalGotIt");
+
+  function closeModal() {
+    overlay.classList.remove("active");
+    closeBtn?.removeEventListener("click", closeModal);
+    gotItBtn?.removeEventListener("click", closeModal);
+    overlay.removeEventListener("click", overlayClick);
+  }
+
+  function overlayClick(e) {
+    if (e.target === overlay) closeModal();
+  }
+
+  closeBtn?.addEventListener("click", closeModal);
+  gotItBtn?.addEventListener("click", closeModal);
+  overlay.addEventListener("click", overlayClick);
+}
+
+export function setupModalInfoButton(projectName) {
+  currentProjectName = projectName;
+  const infoBtn = document.getElementById("modalInfoBtn");
+  if (!infoBtn) return;
+
+  // Remove old listener by cloning
+  const newBtn = infoBtn.cloneNode(true);
+  infoBtn.parentNode.replaceChild(newBtn, infoBtn);
+
+  newBtn.addEventListener("click", function () {
+    if (typeof window.getProjectInstructions === "function") {
+      const info = window.getProjectInstructions(currentProjectName);
+      showInfoModal(info.title, info.steps);
+    }
+  });
+}
+
+export function openProjectSafe(name, trigger) {
+  const modal = document.getElementById("projectModal");
+  const modalBody = document.getElementById("modalBody");
+  const modalClose = document.getElementById("modalClose");
+
+  if (!modal || !modalBody) return;
+  lastFocusedElement = trigger || document.activeElement;
+  modal.classList.add("active");
+  modal.setAttribute("aria-hidden", "false");
+  const scrollbarWidth =
+    window.innerWidth - document.documentElement.clientWidth;
+  document.body.style.paddingRight = scrollbarWidth + "px";
+  document.body.style.overflow = "hidden";
+  setMainInert(true);
+
+  safeRun(function () {
+    if (typeof window.getProjectHTML === "function") {
+      modalBody.innerHTML =
+        window.getProjectHTML(name) ||
+        '<div style="padding:1rem;color:var(--text-secondary)">Project content unavailable.</div>';
+    } else {
+      modalBody.innerHTML =
+        '<div style="padding:1rem;color:var(--text-secondary)">Project content unavailable.</div>';
+    }
+    if (typeof window.initializeProject === "function")
+      window.initializeProject(name);
+    setupModalInfoButton(name);
+
+    // Inject info button next to the title (works for all projects)
+    const projectContent = modalBody.querySelector(".project-content");
+    if (projectContent) {
+      let firstHeading = projectContent.querySelector(
+        "h2, h3, .resume-analyzer-copy h2, .pet-title"
+      );
+      if (!firstHeading) {
+        firstHeading = projectContent.querySelector(
+          '[class*="title"], [class*="header"] h2'
+        );
+      }
+
+      if (firstHeading && !projectContent.querySelector(".inline-info-btn")) {
+        const infoBtn = document.createElement("button");
+        infoBtn.className = "inline-info-btn";
+        infoBtn.innerHTML = "ⓘ";
+        infoBtn.setAttribute("aria-label", "How to use this project");
+
+        infoBtn.style.marginLeft = "12px";
+        infoBtn.style.background = "none";
+        infoBtn.style.border = "none";
+        infoBtn.style.fontSize = "1.3rem";
+        infoBtn.style.cursor = "pointer";
+        infoBtn.style.color = "var(--accent)";
+        infoBtn.style.verticalAlign = "middle";
+
+        infoBtn.addEventListener("click", function (e) {
+          e.stopPropagation();
+          if (typeof window.getProjectInstructions === "function") {
+            const info = window.getProjectInstructions(name);
+            showInfoModal(info.title, info.steps);
+          }
+        });
+
+        if (firstHeading.style.display !== "inline-block") {
+          firstHeading.style.display = "inline-block";
+        }
+        firstHeading.appendChild(infoBtn);
+      }
+    }
+  });
+
+  removeTrap = trapFocus(modal);
+  const focusables = getFocusableElements(modalBody);
+  const firstFocusable = focusables[0] || modalClose;
+  if (firstFocusable && typeof firstFocusable.focus === "function") {
+    firstFocusable.focus({ preventScroll: true });
+  }
+}
+
+export function closeProjectSafe() {
+  const modal = document.getElementById("projectModal");
+  const modalBody = document.getElementById("modalBody");
+
+  if (!modal || !modal.classList.contains("active")) return;
+  modal.classList.remove("active");
+  modal.setAttribute("aria-hidden", "true");
+  document.body.style.paddingRight = "";
+  document.body.style.overflow = "";
+  setMainInert(false);
+  if (removeTrap) {
+    removeTrap();
+    removeTrap = null;
+  }
+  if (modalBody) {
+    modalBody.innerHTML = "";
+  }
+  if (lastFocusedElement && typeof lastFocusedElement.focus === "function") {
+    lastFocusedElement.focus({ preventScroll: true });
+  }
+  lastFocusedElement = null;
+
+  // Dispatch custom event to notify orchestration that modal closed
+  const event = new CustomEvent("projectModalClosed");
+  document.dispatchEvent(event);
+}
+
+export function initModal() {
+  const modal = document.getElementById("projectModal");
+  const modalClose = document.getElementById("modalClose");
+
+  if (modalClose) modalClose.addEventListener("click", closeProjectSafe);
+  if (modal) {
+    modal.addEventListener("click", function (e) {
+      if (e.target === modal) closeProjectSafe();
+    });
+  }
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") closeProjectSafe();
+  });
+
+  // Expose openProjectSafe and closeProjectSafe on window object for legacy references
+  window.openProjectSafe = openProjectSafe;
+  window.closeProjectSafe = closeProjectSafe;
+}
diff --git a/web-app/js/modules/search.js b/web-app/js/modules/search.js
new file mode 100644
index 00000000..af015435
--- /dev/null
+++ b/web-app/js/modules/search.js
@@ -0,0 +1,346 @@
+/*
+  search.js - Interactive search suggestions, history, and keyboard navigations.
+*/
+
+import { debounce, prefersReducedMotion } from "./utils.js";
+
+let recentSearches = JSON.parse(localStorage.getItem("recentSearches") || "[]");
+let selectedSuggestionIndex = -1;
+
+export function getRecentSearches() {
+  return recentSearches;
+}
+
+export function initSearch(onSearchChange) {
+  const searchInput = document.getElementById("searchInput");
+  const searchDropdown = document.getElementById("searchDropdown");
+  const searchLoader = document.getElementById("searchLoader");
+  const recentSearchesList = document.getElementById("recentSearchesList");
+  const recentSearchesSection = document.getElementById(
+    "recentSearchesSection"
+  );
+  const resultsList = document.getElementById("resultsList");
+  const resultsSection = document.getElementById("resultsSection");
+  const tipsSection = document.getElementById("tipsSection");
+  const noResultsMessage = document.getElementById("noResultsMessage");
+  const projectsSection = document.getElementById("projectsSection");
+
+  if (!searchInput) return;
+
+  function getMatchingProjects(query) {
+    if (!query) return [];
+    const projectCards = Array.from(document.querySelectorAll(".project-card"));
+    const matches = [];
+    const q = query.toLowerCase();
+
+    projectCards.forEach((card) => {
+      const category = card.getAttribute("data-category");
+      const title = card.querySelector("h3")?.textContent || "";
+      const desc = card.querySelector("p")?.textContent || "";
+      const tags = (card.getAttribute("data-tags") || "").toLowerCase();
+
+      const searchMatch =
+        title.toLowerCase().includes(q) ||
+        desc.toLowerCase().includes(q) ||
+        tags.includes(q);
+
+      if (searchMatch) {
+        matches.push({
+          card,
+          title,
+          category,
+        });
+      }
+    });
+    return matches;
+  }
+
+  function highlightText(container, text, query) {
+    const safe = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const parts = text.split(new RegExp("(" + safe + ")", "gi"));
+    parts.forEach((part) => {
+      if (part.toLowerCase() === query.toLowerCase()) {
+        const mark = document.createElement("mark");
+        mark.style.background = "var(--accent-soft)";
+        mark.style.color = "var(--accent)";
+        mark.style.fontWeight = "600";
+        mark.style.borderRadius = "2px";
+        mark.style.padding = "0 2px";
+        mark.textContent = part;
+        container.appendChild(mark);
+      } else if (part) {
+        container.appendChild(document.createTextNode(part));
+      }
+    });
+  }
+
+  function closeDropdown() {
+    if (searchDropdown) searchDropdown.classList.remove("active");
+    searchInput.setAttribute("aria-expanded", "false");
+  }
+
+  function renderRecentSearches() {
+    if (noResultsMessage) noResultsMessage.style.display = "none";
+    if (!recentSearchesSection) return;
+
+    if (recentSearches.length === 0) {
+      recentSearchesSection.style.display = "none";
+      if (tipsSection) tipsSection.style.display = "block";
+      if (resultsSection) resultsSection.style.display = "none";
+      return;
+    }
+
+    if (recentSearchesList) {
+      recentSearchesList.innerHTML = "";
+      recentSearches.slice(0, 5).forEach((search) => {
+        const item = document.createElement("div");
+        item.className = "dropdown-recent-item";
+
+        const text = document.createElement("div");
+        text.className = "dropdown-recent-text";
+
+        const clock = document.createElement("i");
+        clock.className = "fas fa-history";
+        clock.style.opacity = "0.5";
+        clock.style.fontSize = "0.8rem";
+
+        const label = document.createElement("span");
+        label.textContent = search;
+
+        text.append(clock, label);
+
+        const removeBtn = document.createElement("button");
+        removeBtn.className = "dropdown-recent-remove";
+        removeBtn.setAttribute("aria-label", "Remove search");
+        removeBtn.innerHTML = '<i class="fas fa-times"></i>';
+
+        item.append(text, removeBtn);
+
+        label.addEventListener("click", () => {
+          searchInput.value = search;
+          triggerSearch(search);
+          closeDropdown();
+        });
+
+        removeBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          recentSearches = recentSearches.filter((s) => s !== search);
+          localStorage.setItem(
+            "recentSearches",
+            JSON.stringify(recentSearches)
+          );
+          renderRecentSearches();
+        });
+
+        recentSearchesList.appendChild(item);
+      });
+    }
+
+    recentSearchesSection.style.display = "block";
+    if (resultsSection) resultsSection.style.display = "none";
+    if (tipsSection) tipsSection.style.display = "block";
+  }
+
+  function renderSuggestions(query) {
+    if (searchLoader) searchLoader.style.display = "none";
+    if (!query) {
+      renderRecentSearches();
+      return;
+    }
+
+    const matches = getMatchingProjects(query);
+
+    if (matches.length === 0) {
+      if (resultsSection) resultsSection.style.display = "none";
+      if (recentSearchesSection) recentSearchesSection.style.display = "none";
+      if (tipsSection) tipsSection.style.display = "block";
+      if (noResultsMessage) noResultsMessage.style.display = "block";
+      return;
+    }
+
+    if (noResultsMessage) noResultsMessage.style.display = "none";
+
+    if (resultsList) {
+      resultsList.innerHTML = "";
+      matches.slice(0, 8).forEach((project, index) => {
+        const item = document.createElement("div");
+        item.className =
+          "dropdown-item" +
+          (index === selectedSuggestionIndex ? " selected" : "");
+        item.setAttribute("role", "option");
+        item.id = "search-option-" + index;
+        if (index === selectedSuggestionIndex) {
+          item.setAttribute("aria-selected", "true");
+        }
+
+        const iconBox = document.createElement("div");
+        iconBox.className = "dropdown-item-icon";
+        const banner = project.card.querySelector(".card-banner");
+        if (banner) {
+          const img = document.createElement("img");
+          img.src = banner.src;
+          img.alt = "";
+          iconBox.appendChild(img);
+        }
+
+        const titleBox = document.createElement("div");
+        titleBox.className = "dropdown-item-text";
+        highlightText(titleBox, project.title, query);
+
+        const tag = document.createElement("span");
+        tag.className = "dropdown-item-tag";
+        tag.textContent = project.category;
+
+        item.append(iconBox, titleBox, tag);
+        item.addEventListener("click", () => {
+          selectSuggestion(project.title);
+        });
+        item.addEventListener("mouseenter", () => {
+          selectedSuggestionIndex = index;
+          updateSuggestionHighlight();
+        });
+        resultsList.appendChild(item);
+      });
+    }
+
+    if (resultsSection) resultsSection.style.display = "block";
+    if (recentSearchesSection) recentSearchesSection.style.display = "none";
+    if (tipsSection) tipsSection.style.display = "none";
+    selectedSuggestionIndex = -1;
+  }
+
+  function updateSuggestionHighlight() {
+    if (!resultsList) return;
+    const items = resultsList.querySelectorAll(".dropdown-item");
+    items.forEach((item, i) => {
+      const isSelected = i === selectedSuggestionIndex;
+      item.classList.toggle("selected", isSelected);
+      item.setAttribute("aria-selected", isSelected ? "true" : "false");
+    });
+    if (
+      selectedSuggestionIndex >= 0 &&
+      selectedSuggestionIndex < items.length
+    ) {
+      searchInput.setAttribute(
+        "aria-activedescendant",
+        "search-option-" + selectedSuggestionIndex
+      );
+    } else {
+      searchInput.removeAttribute("aria-activedescendant");
+    }
+  }
+
+  function selectSuggestion(title) {
+    searchInput.value = title;
+    triggerSearch(title);
+    closeDropdown();
+    if (projectsSection) {
+      projectsSection.scrollIntoView({
+        behavior: prefersReducedMotion() ? "auto" : "smooth",
+        block: "start",
+      });
+    }
+  }
+
+  function triggerSearch(query) {
+    if (query) {
+      recentSearches = recentSearches.filter((s) => s !== query);
+      recentSearches.unshift(query);
+      recentSearches = recentSearches.slice(0, 10);
+      localStorage.setItem("recentSearches", JSON.stringify(recentSearches));
+    }
+    onSearchChange(query);
+  }
+
+  const debouncedSearch = debounce((query) => {
+    renderSuggestions(query);
+  }, 200);
+
+  searchInput.addEventListener("input", (e) => {
+    const query = e.target.value.trim();
+    if (searchLoader) searchLoader.style.display = query ? "block" : "none";
+    debouncedSearch(query);
+    triggerSearch(query);
+  });
+
+  searchInput.addEventListener("focus", () => {
+    if (searchDropdown) searchDropdown.classList.add("active");
+    searchInput.setAttribute("aria-expanded", "true");
+    if (!searchInput.value.trim()) renderRecentSearches();
+  });
+
+  searchInput.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      closeDropdown();
+      searchInput.blur();
+      return;
+    }
+
+    const items = resultsList
+      ? resultsList.querySelectorAll(".dropdown-item")
+      : [];
+    if (items.length === 0) return;
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      selectedSuggestionIndex =
+        selectedSuggestionIndex < items.length - 1
+          ? selectedSuggestionIndex + 1
+          : 0;
+      updateSuggestionHighlight();
+      if (items[selectedSuggestionIndex]) {
+        items[selectedSuggestionIndex].scrollIntoView({ block: "nearest" });
+      }
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      selectedSuggestionIndex =
+        selectedSuggestionIndex > 0
+          ? selectedSuggestionIndex - 1
+          : items.length - 1;
+      updateSuggestionHighlight();
+      if (items[selectedSuggestionIndex]) {
+        items[selectedSuggestionIndex].scrollIntoView({ block: "nearest" });
+      }
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (
+        selectedSuggestionIndex >= 0 &&
+        selectedSuggestionIndex < items.length
+      ) {
+        items[selectedSuggestionIndex].click();
+      }
+    }
+  });
+
+  document.addEventListener("click", (e) => {
+    if (
+      searchDropdown &&
+      !searchDropdown.contains(e.target) &&
+      e.target !== searchInput
+    ) {
+      closeDropdown();
+    }
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+      e.preventDefault();
+      searchInput.focus();
+    }
+  });
+
+  // Wire up clear button if it exists in DOM
+  const searchClear = document.getElementById("searchClear");
+  const searchShortcut = document.getElementById("searchShortcut");
+  if (searchClear) {
+    searchClear.addEventListener("click", () => {
+      searchInput.value = "";
+      if (searchShortcut) searchShortcut.style.display = "";
+      closeDropdown();
+      triggerSearch("");
+      searchInput.focus();
+    });
+  }
+
+  renderRecentSearches();
+}
diff --git a/web-app/js/modules/sidebar.js b/web-app/js/modules/sidebar.js
new file mode 100644
index 00000000..c9be02fa
--- /dev/null
+++ b/web-app/js/modules/sidebar.js
@@ -0,0 +1,202 @@
+/*
+  sidebar.js - Sidebar layout, category tabs, and mobile drawers.
+*/
+
+import { debounce } from "./utils.js";
+
+export function initSidebar(onCategoryChange, showPlayground, showProjects) {
+  const sidebarTabs = document.querySelectorAll(".sidebar-tab");
+  const stickyTabs = document.querySelectorAll(".sticky-tab");
+  const mobileSidebarToggle = document.getElementById("mobileSidebarToggle");
+  const mainSidebar = document.getElementById("mainSidebar");
+  const projectsSection = document.getElementById("projectsSection");
+  const playgroundSection = document.getElementById("playgroundSection");
+  const searchKbdHint = document.getElementById("searchKbdHint");
+  const searchInput = document.getElementById("searchInput");
+
+  const pageCategory = document.body.getAttribute("data-page");
+
+  // Drawer Toggling
+  if (mobileSidebarToggle && mainSidebar) {
+    mobileSidebarToggle.addEventListener("click", () => {
+      const active = mainSidebar.classList.toggle("open");
+      mobileSidebarToggle.setAttribute("aria-expanded", active);
+      const icon = mobileSidebarToggle.querySelector("i");
+      if (icon) icon.className = active ? "fas fa-times" : "fas fa-bars";
+    });
+
+    document.addEventListener("click", (e) => {
+      if (
+        mainSidebar.classList.contains("open") &&
+        !mainSidebar.contains(e.target) &&
+        e.target !== mobileSidebarToggle
+      ) {
+        mainSidebar.classList.remove("open");
+        mobileSidebarToggle.setAttribute("aria-expanded", "false");
+        const icon = mobileSidebarToggle.querySelector("i");
+        if (icon) icon.className = "fas fa-bars";
+      }
+    });
+  }
+
+  // Tabs Sync Helpers
+  function syncSidebarTabs(category) {
+    sidebarTabs.forEach((st) => {
+      const selected = st.getAttribute("data-category") === category;
+      st.classList.toggle("active", selected);
+      st.setAttribute("aria-selected", selected ? "true" : "false");
+      st.setAttribute("tabindex", selected ? "0" : "-1");
+    });
+  }
+
+  function syncStickyTabs(category) {
+    stickyTabs.forEach((st) => {
+      const selected = st.getAttribute("data-sticky-category") === category;
+      st.classList.toggle("active", selected);
+      st.setAttribute("aria-selected", selected ? "true" : "false");
+      st.setAttribute("tabindex", selected ? "0" : "-1");
+    });
+  }
+
+  function handleCategoryClick(category) {
+    if (pageCategory) {
+      if (category === pageCategory) {
+        const grid = document.getElementById("projectsGrid");
+        if (grid) grid.scrollIntoView({ behavior: "smooth", block: "start" });
+        return;
+      }
+      const pageMap = {
+        all: "index.html",
+        games: "games.html",
+        math: "math.html",
+        utilities: "utilities.html",
+        favorites: "index.html?category=favorites",
+        playground: "index.html?category=playground",
+      };
+      window.location.href = pageMap[category] || "index.html";
+      return;
+    }
+
+    syncSidebarTabs(category);
+    syncStickyTabs(category);
+
+    if (category === "playground") {
+      showPlayground();
+      if (playgroundSection) {
+        playgroundSection.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        });
+      }
+    } else {
+      showProjects();
+      onCategoryChange(category);
+      if (projectsSection) {
+        projectsSection.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    }
+  }
+
+  sidebarTabs.forEach((st) => {
+    st.addEventListener("click", () => {
+      handleCategoryClick(st.getAttribute("data-category"));
+    });
+  });
+
+  stickyTabs.forEach((st) => {
+    st.addEventListener("click", () => {
+      handleCategoryClick(st.getAttribute("data-sticky-category"));
+    });
+  });
+
+  // Sidebar Active Scroll Observer
+  if (!pageCategory && projectsSection) {
+    const sidebarActiveObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const isVisible =
+            entry.isIntersecting || entry.boundingClientRect.top < 200;
+          document.body.classList.toggle("sidebar-active", isVisible);
+        });
+      },
+      { threshold: 0.05 }
+    );
+    sidebarActiveObserver.observe(projectsSection);
+  } else if (pageCategory) {
+    document.body.classList.add("sidebar-active");
+  }
+
+  // Search Kbd Hint Watcher
+  let kbdHintTimer;
+  function showKbdHint() {
+    if (!searchKbdHint) return;
+    clearTimeout(kbdHintTimer);
+    searchKbdHint.classList.add("visible");
+    kbdHintTimer = setTimeout(() => {
+      searchKbdHint.classList.remove("visible");
+    }, 3000);
+  }
+
+  const bodyClassObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === "class") {
+        const isActive = document.body.classList.contains("sidebar-active");
+        if (isActive) {
+          showKbdHint();
+        } else {
+          clearTimeout(kbdHintTimer);
+          if (searchKbdHint) searchKbdHint.classList.remove("visible");
+        }
+      }
+    });
+  });
+
+  bodyClassObserver.observe(document.body, { attributes: true });
+
+  if (searchInput) {
+    searchInput.addEventListener("focus", () => {
+      clearTimeout(kbdHintTimer);
+      if (searchKbdHint) searchKbdHint.classList.remove("visible");
+    });
+  }
+
+  // Stats updates
+  const projectCards = Array.from(document.querySelectorAll(".project-card"));
+  const heroProjectCount = document.getElementById("heroProjectCount");
+  const heroGameCount = document.getElementById("heroGameCount");
+  const heroMathCount = document.getElementById("heroMathCount");
+  const heroUtilityCount = document.getElementById("heroUtilityCount");
+  const projectCountBadge = document.getElementById("projectCountBadge");
+
+  const totalCount = projectCards.length;
+  const gameCount = projectCards.filter(
+    (c) => c.getAttribute("data-category") === "games"
+  ).length;
+  const mathCount = projectCards.filter(
+    (c) => c.getAttribute("data-category") === "math"
+  ).length;
+  const utilityCount = projectCards.filter(
+    (c) => c.getAttribute("data-category") === "utilities"
+  ).length;
+
+  if (heroProjectCount) heroProjectCount.textContent = String(totalCount);
+  if (heroGameCount) heroGameCount.textContent = String(gameCount);
+  if (heroMathCount) heroMathCount.textContent = String(mathCount);
+  if (heroUtilityCount) heroUtilityCount.textContent = String(utilityCount);
+  if (projectCountBadge)
+    projectCountBadge.textContent = String(totalCount) + " projects";
+
+  // Initial sync
+  if (pageCategory) {
+    syncSidebarTabs(pageCategory);
+  } else {
+    syncSidebarTabs("all");
+  }
+  syncStickyTabs("all");
+
+  // Expose helpers for external updates (e.g. from search module)
+  return {
+    syncSidebarTabs,
+    syncStickyTabs,
+  };
+}
diff --git a/web-app/js/modules/theme.js b/web-app/js/modules/theme.js
new file mode 100644
index 00000000..d5ec2248
--- /dev/null
+++ b/web-app/js/modules/theme.js
@@ -0,0 +1,63 @@
+/*
+  theme.js - Core theme management and persistence.
+*/
+
+export function syncThemeColor(theme) {
+  const meta = document.getElementById("themeColorMeta");
+  if (meta) {
+    meta.setAttribute("content", theme === "light" ? "#f8fafc" : "#0c0f1a");
+  }
+}
+
+export function updateThemeToggleAria(themeToggle, isLight) {
+  if (!themeToggle) return;
+  themeToggle.setAttribute(
+    "aria-label",
+    isLight ? "Switch to dark mode" : "Switch to light mode"
+  );
+}
+
+export function initTheme() {
+  const html = document.documentElement;
+  const themeToggle = document.getElementById("themeToggle");
+  const heroThemeToggle = document.getElementById("heroThemeToggle");
+
+  const savedTheme = localStorage.getItem("theme") || "dark";
+  html.setAttribute("data-theme", savedTheme);
+  syncThemeColor(savedTheme);
+
+  const updateIconAndAria = (theme) => {
+    const isDark = theme === "dark";
+    const iconClass = isDark ? "fas fa-sun" : "fas fa-moon";
+
+    if (themeToggle) {
+      themeToggle.innerHTML = `<i class="${iconClass}" aria-hidden="true"></i>`;
+      updateThemeToggleAria(themeToggle, theme === "light");
+    }
+    if (heroThemeToggle) {
+      heroThemeToggle.innerHTML = `<i class="${iconClass}" aria-hidden="true"></i>`;
+    }
+  };
+
+  updateIconAndAria(savedTheme);
+
+  const toggleTheme = () => {
+    const current = html.getAttribute("data-theme");
+    const next = current === "light" ? "dark" : "light";
+    html.setAttribute("data-theme", next);
+    localStorage.setItem("theme", next);
+    syncThemeColor(next);
+    updateIconAndAria(next);
+
+    // Dispatch custom themeChanged event for other components to react (like dynamic canvas)
+    const event = new CustomEvent("themeChanged", { detail: { theme: next } });
+    document.dispatchEvent(event);
+  };
+
+  if (themeToggle) {
+    themeToggle.addEventListener("click", toggleTheme);
+  }
+  if (heroThemeToggle) {
+    heroThemeToggle.addEventListener("click", toggleTheme);
+  }
+}
diff --git a/web-app/js/modules/utils.js b/web-app/js/modules/utils.js
new file mode 100644
index 00000000..56b8094c
--- /dev/null
+++ b/web-app/js/modules/utils.js
@@ -0,0 +1,97 @@
+/*
+  utils.js - Shared utilities and card visibility helper.
+*/
+
+export function prefersReducedMotion() {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+export function safeRun(fn) {
+  try {
+    fn();
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+export function debounce(fn, ms) {
+  let timer;
+  return function (...args) {
+    const ctx = this;
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(ctx, args);
+    }, ms);
+  };
+}
+
+export function escapeHtml(str) {
+  const d = document.createElement("div");
+  d.textContent = str;
+  return d.innerHTML;
+}
+
+/**
+ * Unified project card filtering helper.
+ * Filters cards based on both category and search query criteria.
+ */
+export function updateProjectVisibility(currentCategory, currentSearchQuery) {
+  const projectCards = Array.from(document.querySelectorAll(".project-card"));
+  const emptyState = document.getElementById("emptyState");
+  const emptyStateHint = document.getElementById("emptyStateHint");
+  const projectCountBadge = document.getElementById("projectCountBadge");
+  const favorites = JSON.parse(localStorage.getItem("favorites") || "[]");
+
+  let visibleCount = 0;
+  const query = currentSearchQuery
+    ? currentSearchQuery.toLowerCase().trim()
+    : "";
+
+  projectCards.forEach((card) => {
+    const category = card.getAttribute("data-category");
+    const projectName = card.getAttribute("data-project");
+    const isFav = favorites.includes(projectName);
+
+    // Category match logic
+    const catMatch =
+      currentCategory === "all" ||
+      (currentCategory === "favorites" && isFav) ||
+      (currentCategory !== "favorites" && category === currentCategory);
+
+    // Search match logic
+    let searchMatch = true;
+    if (query) {
+      const title = (card.querySelector("h3")?.textContent || "").toLowerCase();
+      const desc = (card.querySelector("p")?.textContent || "").toLowerCase();
+      const tags = (card.getAttribute("data-tags") || "").toLowerCase();
+      searchMatch =
+        title.includes(query) || desc.includes(query) || tags.includes(query);
+    }
+
+    if (catMatch && searchMatch) {
+      card.style.display = "";
+      if (!prefersReducedMotion()) {
+        card.style.animation = "fadeIn 0.6s ease";
+      } else {
+        card.style.animation = "none";
+      }
+      visibleCount++;
+    } else {
+      card.style.display = "none";
+    }
+  });
+
+  if (emptyState) {
+    emptyState.style.display = visibleCount === 0 ? "block" : "none";
+    if (visibleCount === 0 && emptyStateHint && query) {
+      emptyStateHint.textContent = `No projects match "${query}". Try a different keyword.`;
+    } else if (visibleCount === 0 && emptyStateHint) {
+      emptyStateHint.textContent =
+        "Try adjusting your search or category filter.";
+    }
+  }
+
+  if (projectCountBadge) {
+    projectCountBadge.textContent = `${visibleCount} projects`;
+  }
+}
diff --git a/web-app/math.html b/web-app/math.html
index 0db80504..7dd96988 100644
--- a/web-app/math.html
+++ b/web-app/math.html
@@ -1,99 +1,137 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Explore interactive Python math projects: Pascal's triangle, Fibonacci spirals, projectile motion, calculus derivative solver, and number theory analyzers in the browser."
+    />
+    <meta name="color-scheme" content="dark light" />
+    <meta id="themeColorMeta" name="theme-color" content="#0f172a" />
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Explore interactive Python math projects: Pascal's triangle, Fibonacci spirals, projectile motion, calculus derivative solver, and number theory analyzers in the browser.">
-    <meta name="color-scheme" content="dark light">
-    <meta id="themeColorMeta" name="theme-color" content="#0f172a">
-    
     <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://steam-bell-92.github.io/python-mini-project/math.html">
-    <meta property="og:title" content="Python Math Visualizations & Calculators - Interactive Web Edition">
-    <meta property="og:description" content="Explore interactive Python math projects: Pascal's triangle, Fibonacci spirals, projectile motion, calculus derivative solver, and number theory analyzers in the browser.">
-    <meta property="og:site_name" content="py.mini() lab">
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:url"
+      content="https://steam-bell-92.github.io/python-mini-project/math.html"
+    />
+    <meta
+      property="og:title"
+      content="Python Math Visualizations & Calculators - Interactive Web Edition"
+    />
+    <meta
+      property="og:description"
+      content="Explore interactive Python math projects: Pascal's triangle, Fibonacci spirals, projectile motion, calculus derivative solver, and number theory analyzers in the browser."
+    />
+    <meta property="og:site_name" content="py.mini() lab" />
 
     <!-- Twitter -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:url" content="https://steam-bell-92.github.io/python-mini-project/math.html">
-    <meta name="twitter:title" content="Python Math Visualizations & Calculators - Interactive Web Edition">
-    <meta name="twitter:description" content="Explore interactive Python math projects: Pascal's triangle, Fibonacci spirals, projectile motion, calculus derivative solver, and number theory analyzers in the browser.">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:url"
+      content="https://steam-bell-92.github.io/python-mini-project/math.html"
+    />
+    <meta
+      name="twitter:title"
+      content="Python Math Visualizations & Calculators - Interactive Web Edition"
+    />
+    <meta
+      name="twitter:description"
+      content="Explore interactive Python math projects: Pascal's triangle, Fibonacci spirals, projectile motion, calculus derivative solver, and number theory analyzers in the browser."
+    />
     <!-- Canonical Link -->
-    <link rel="canonical" href="https://steam-bell-92.github.io/python-mini-project/math.html">
+    <link
+      rel="canonical"
+      href="https://steam-bell-92.github.io/python-mini-project/math.html"
+    />
+
+    <title>
+      Python Math Visualizations & Calculators - Interactive Web Edition
+    </title>
+    <link rel="icon" href="assets/favicon.svg" type="image/svg+xml" />
 
-    <title>Python Math Visualizations & Calculators - Interactive Web Edition</title>
-    <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
-    
     <!-- Structured Data (JSON-LD) -->
     <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "ItemPage",
-      "name": "Interactive Python Math Visualizations & Calculators",
-      "description": "Explore interactive Python math projects: Pascal's triangle, Fibonacci spirals, projectile motion, calculus derivative solver, and number theory analyzers in the browser.",
-      "url": "https://steam-bell-92.github.io/python-mini-project/math.html",
-      "publisher": {
-        "@type": "Organization",
-        "name": "py.mini() lab"
+      {
+        "@context": "https://schema.org",
+        "@type": "ItemPage",
+        "name": "Interactive Python Math Visualizations & Calculators",
+        "description": "Explore interactive Python math projects: Pascal's triangle, Fibonacci spirals, projectile motion, calculus derivative solver, and number theory analyzers in the browser.",
+        "url": "https://steam-bell-92.github.io/python-mini-project/math.html",
+        "publisher": {
+          "@type": "Organization",
+          "name": "py.mini() lab"
+        }
       }
-    }
     </script>
 
-    <link rel="stylesheet" href="css/styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="css/styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
     <style>
-        /* ── Page background ── */
-        body[data-page="math"] {
-            background-image: url('assets/math-bg.jpg');
-            background-size: cover;
-            background-attachment: fixed;
-            background-position: center;
-        }
+      /* ── Page background ── */
+      body[data-page="math"] {
+        background-image: url("assets/math-bg.jpg");
+        background-size: cover;
+        background-attachment: fixed;
+        background-position: center;
+      }
 
-        /* Overlay so cards stay readable */
-        body[data-page="math"]::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            background: rgba(2, 20, 40, 0.75);
-            z-index: 0;
-            pointer-events: none;
-        }
+      /* Overlay so cards stay readable */
+      body[data-page="math"]::before {
+        content: "";
+        position: fixed;
+        inset: 0;
+        background: rgba(2, 20, 40, 0.75);
+        z-index: 0;
+        pointer-events: none;
+      }
 
-        body[data-page="math"] .navbar,
-        body[data-page="math"] main,
-        body[data-page="math"] .footer {
-            position: relative;
-            z-index: 1;
-        }
+      body[data-page="math"] .navbar,
+      body[data-page="math"] main,
+      body[data-page="math"] .footer {
+        position: relative;
+        z-index: 1;
+      }
 
-        /* Light mode overlay */
-        [data-theme="light"] body[data-page="math"]::before {
-            background: rgba(224, 242, 254, 0.80);
-        }
+      /* Light mode overlay */
+      [data-theme="light"] body[data-page="math"]::before {
+        background: rgba(224, 242, 254, 0.8);
+      }
 
-        /* Active tab highlight for this page */
-        .tab[data-category="math"],
-        a.tab.active {
-            background: var(--primary-color);
-            border-color: var(--primary-color);
-            color: white;
-        }
+      /* Active tab highlight for this page */
+      .tab[data-category="math"],
+      a.tab.active {
+        background: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+      }
     </style>
-</head>
+  </head>
 
-<body data-page="math" class="sidebar-active">
+  <body data-page="math" class="sidebar-active">
     <a href="#main-content" class="skip-link">🚀 Skip to main content</a>
 
     <!-- Mobile Sidebar Toggle -->
-    <button type="button" class="mobile-sidebar-toggle" id="mobileSidebarToggle" aria-label="Toggle sidebar menu" aria-expanded="false">
+    <button
+      type="button"
+      class="mobile-sidebar-toggle"
+      id="mobileSidebarToggle"
+      aria-label="Toggle sidebar menu"
+      aria-expanded="false"
+    >
       <i class="fas fa-bars"></i>
     </button>
 
     <!-- ── PRIMARY SIDEBAR DOCK ──────────────────────────────────── -->
-    <aside class="sidebar-dock" id="mainSidebar" aria-label="Primary Navigation">
+    <aside
+      class="sidebar-dock"
+      id="mainSidebar"
+      aria-label="Primary Navigation"
+    >
       <div class="sidebar-brand">
         <a class="logo-wrap" href="index.html">
           <div class="logo-top-row">
@@ -108,29 +146,55 @@
       </div>
 
       <div class="sidebar-search">
-        <div class="search-box" style="position:relative">
+        <div class="search-box" style="position: relative">
           <i class="fas fa-search"></i>
-          <input aria-label="Search projects" id="searchInput" placeholder="Search projects or tags..." type="text"/>
+          <input
+            aria-label="Search projects"
+            id="searchInput"
+            placeholder="Search projects or tags..."
+            type="text"
+          />
           <div class="search-dropdown" id="searchDropdown">
             <div class="dropdown-content" id="searchDropdownContent">
-              <div class="search-loader" id="searchLoader" style="display:none"><div class="spinner"></div></div>
+              <div
+                class="search-loader"
+                id="searchLoader"
+                style="display: none"
+              >
+                <div class="spinner"></div>
+              </div>
               <div class="recent-searches-section" id="recentSearchesSection">
                 <div class="dropdown-section-title">Recent</div>
                 <div class="dropdown-list" id="recentSearchesList"></div>
               </div>
-              <div class="results-section" id="resultsSection" style="display:none">
+              <div
+                class="results-section"
+                id="resultsSection"
+                style="display: none"
+              >
                 <div class="dropdown-section-title">Projects</div>
                 <div class="dropdown-list" id="resultsList"></div>
               </div>
               <div class="tips-section" id="tipsSection">
                 <p><strong>Search tips</strong></p>
                 <ul>
-                  <li>Type a project name — <code>snake</code>, <code>quiz</code></li>
-                  <li>Filter by tag — <code>game</code>, <code>math</code>, <code>utility</code></li>
+                  <li>
+                    Type a project name — <code>snake</code>, <code>quiz</code>
+                  </li>
+                  <li>
+                    Filter by tag — <code>game</code>, <code>math</code>,
+                    <code>utility</code>
+                  </li>
                   <li>Press <code>Ctrl+K</code> to focus search</li>
                 </ul>
               </div>
-              <div class="no-results-message" id="noResultsMessage" style="display:none">No projects found. Try a different keyword.</div>
+              <div
+                class="no-results-message"
+                id="noResultsMessage"
+                style="display: none"
+              >
+                No projects found. Try a different keyword.
+              </div>
             </div>
           </div>
         </div>
@@ -138,28 +202,70 @@
 
       <div class="sidebar-menu-wrapper">
         <div class="sidebar-menu-title">Categories</div>
-        <nav class="sidebar-menu" role="tablist" aria-label="Filter by category">
-          <button aria-selected="false" class="sidebar-tab" data-category="all" role="tab" tabindex="-1">
+        <nav
+          class="sidebar-menu"
+          role="tablist"
+          aria-label="Filter by category"
+        >
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="all"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="layers"></svg></span>
             <span class="sidebar-label">All Projects</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="games" role="tab" tabindex="-1">
-            <span class="sidebar-icon"><svg data-lucide="gamepad-2"></svg></span>
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="games"
+            role="tab"
+            tabindex="-1"
+          >
+            <span class="sidebar-icon"
+              ><svg data-lucide="gamepad-2"></svg
+            ></span>
             <span class="sidebar-label">Games Arcade</span>
           </button>
-          <button aria-selected="true" class="sidebar-tab active" data-category="math" role="tab" tabindex="0">
+          <button
+            aria-selected="true"
+            class="sidebar-tab active"
+            data-category="math"
+            role="tab"
+            tabindex="0"
+          >
             <span class="sidebar-icon"><svg data-lucide="sigma"></svg></span>
             <span class="sidebar-label">Math Visuals</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="utilities" role="tab" tabindex="-1">
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="utilities"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="wrench"></svg></span>
             <span class="sidebar-label">Utilities Lab</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="favorites" role="tab" tabindex="-1">
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="favorites"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="star"></svg></span>
             <span class="sidebar-label">My Favorites</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="playground" role="tab" tabindex="-1">
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="playground"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="terminal"></svg></span>
             <span class="sidebar-label">Playground</span>
           </button>
@@ -168,10 +274,20 @@
 
       <div class="sidebar-footer">
         <div class="sidebar-controls">
-          <button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
+          <button
+            aria-label="Mute sounds"
+            class="sound-toggle"
+            id="soundToggle"
+            type="button"
+          >
             <i class="fas fa-volume-up"></i>
           </button>
-          <button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
+          <button
+            aria-label="Switch theme"
+            class="theme-toggle"
+            id="themeToggle"
+            type="button"
+          >
             <i class="fas fa-moon"></i>
           </button>
         </div>
@@ -179,121 +295,290 @@
     </aside>
 
     <main id="main-content" tabindex="-1">
+      <!-- Page Title Section -->
+      <section
+        class="page-title-section"
+        style="text-align: center; padding: 2rem 0 1rem 0"
+      >
+        <div class="container">
+          <h1
+            style="
+              font-size: 2.5rem;
+              font-family: &quot;Space Grotesk&quot;, sans-serif;
+              background: linear-gradient(135deg, #10b981, #6366f1);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              background-clip: text;
+              margin: 0;
+            "
+          >
+            Interactive Python Math Visualizations
+          </h1>
+          <p
+            style="
+              color: var(--text-secondary);
+              margin-top: 0.5rem;
+              font-size: 1.1rem;
+              opacity: 0.85;
+            "
+          >
+            Explore beginner-friendly Python math projects in your
+            browser—visualizations, calculators, and more.
+          </p>
+        </div>
+      </section>
+
+      <!-- Projects Grid — Math only -->
+      <section class="projects-section" aria-label="Math Projects">
+        <div class="container">
+          <div class="projects-grid" id="projectsGrid">
+            <div
+              class="project-card"
+              data-category="math"
+              data-project="progression-recognizer"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/progression-recognizer.jpg"
+                alt="AP/GP/AGP/HP Recognizer"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>AP/GP/AGP/HP Recognizer</h3>
+              <p>Identify progression types from any sequence.</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="math"
+              data-project="armstrong"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/armstrong.jpg"
+                alt="Armstrong Numbers"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Armstrong Numbers</h3>
+              <p>Check special number properties!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="math"
+              data-project="calculator"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/calculator.jpg"
+                alt="Calculator"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Calculator</h3>
+              <p>Your mathematical companion!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="math"
+              data-project="collatz"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/collatz.jpg"
+                alt="Collatz Conjecture"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Collatz Conjecture</h3>
+              <p>Explore the 3n+1 problem!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="math"
+              data-project="coordinate-polar-transform"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/coordinate-polar-transform.jpg"
+                alt="Coordinate to Polar"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Coordinate to Polar</h3>
+              <p>Transform Cartesian (x, y) into polar (r, theta).</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="math"
+              data-project="derivative-calculator"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/derivative-calculator.jpg"
+                alt="Derivative Calculator"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Derivative Calculator</h3>
+              <p>Compute 1st/nth polynomial derivatives and evaluate them.</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="math"
+              data-project="fibonacci"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/fibonacci.jpg"
+                alt="Fibonacci Series"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Fibonacci Series</h3>
+              <p>Generate Fibonacci sequences!</p>
+            </div>
 
-        <!-- Page Title Section -->
-        <section class="page-title-section" style="text-align: center; padding: 2rem 0 1rem 0;">
-            <div class="container">
-                <h1 style="font-size: 2.5rem; font-family: 'Space Grotesk', sans-serif; background: linear-gradient(135deg, #10b981, #6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0;">Interactive Python Math Visualizations</h1>
-                <p style="color: var(--text-secondary); margin-top: 0.5rem; font-size: 1.1rem; opacity: 0.85;">Explore beginner-friendly Python math projects in your browser—visualizations, calculators, and more.</p>
+            <div
+              class="project-card"
+              data-category="math"
+              data-project="pascal-triangle"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/pascal-triangle.jpg"
+                alt="Pascal's Triangle"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Pascal's Triangle</h3>
+              <p>Beautiful hexagon visualization!</p>
             </div>
-        </section>
-
-        <!-- Projects Grid — Math only -->
-        <section class="projects-section" aria-label="Math Projects">
-            <div class="container">
-                <div class="projects-grid" id="projectsGrid">
-
-                    <div class="project-card" data-category="math" data-project="progression-recognizer"><img class="card-banner" src="assets/banners/progression-recognizer.jpg" alt="AP/GP/AGP/HP Recognizer" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>AP/GP/AGP/HP Recognizer</h3>
-                        <p>Identify progression types from any sequence.</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="math" data-project="armstrong"><img class="card-banner" src="assets/banners/armstrong.jpg" alt="Armstrong Numbers" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Armstrong Numbers</h3>
-                        <p>Check special number properties!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="math" data-project="calculator"><img class="card-banner" src="assets/banners/calculator.jpg" alt="Calculator" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Calculator</h3>
-                        <p>Your mathematical companion!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="math" data-project="collatz"><img class="card-banner" src="assets/banners/collatz.jpg" alt="Collatz Conjecture" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Collatz Conjecture</h3>
-                        <p>Explore the 3n+1 problem!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="math" data-project="coordinate-polar-transform"><img class="card-banner" src="assets/banners/coordinate-polar-transform.jpg" alt="Coordinate to Polar" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Coordinate to Polar</h3>
-                        <p>Transform Cartesian (x, y) into polar (r, theta).</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="math" data-project="derivative-calculator"><img class="card-banner" src="assets/banners/derivative-calculator.jpg" alt="Derivative Calculator" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Derivative Calculator</h3>
-                        <p>Compute 1st/nth polynomial derivatives and evaluate them.</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="math" data-project="fibonacci"><img class="card-banner" src="assets/banners/fibonacci.jpg" alt="Fibonacci Series" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Fibonacci Series</h3>
-                        <p>Generate Fibonacci sequences!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="math" data-project="pascal-triangle"><img class="card-banner" src="assets/banners/pascal-triangle.jpg" alt="Pascal's Triangle" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Pascal's Triangle</h3>
-                        <p>Beautiful hexagon visualization!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="math" data-project="prime-analyzer"><img class="card-banner" src="assets/banners/prime-analyzer.jpg" alt="Prime Analyzer" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Prime Analyzer</h3>
-                        <p>All-in-one prime number toolkit!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="math" data-project="projectile-motion"><img class="card-banner" src="assets/banners/projectile-motion.jpg" alt="Projectile Motion" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Projectile Motion</h3>
-                        <p>Calculate TOF, Hmax, and Range with physics!</p>
-                        
-                    </div>
-
-                </div><!-- /projects-grid -->
+
+            <div
+              class="project-card"
+              data-category="math"
+              data-project="prime-analyzer"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/prime-analyzer.jpg"
+                alt="Prime Analyzer"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Prime Analyzer</h3>
+              <p>All-in-one prime number toolkit!</p>
             </div>
-        </section>
 
+            <div
+              class="project-card"
+              data-category="math"
+              data-project="projectile-motion"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/projectile-motion.jpg"
+                alt="Projectile Motion"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Projectile Motion</h3>
+              <p>Calculate TOF, Hmax, and Range with physics!</p>
+            </div>
+          </div>
+          <!-- /projects-grid -->
+        </div>
+      </section>
     </main>
 
     <!-- Project Modal -->
-    <div class="modal" id="projectModal" role="dialog" aria-modal="true"
-         aria-labelledby="modalDialogTitle" aria-hidden="true">
-        <div class="modal-content">
-            <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-1">Interactive project</h2>
-            <button type="button" class="modal-close" id="modalClose"
-                    aria-label="Close project dialog">&times;</button>
-            <div id="modalBody"></div>
-        </div>
+    <div
+      class="modal"
+      id="projectModal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modalDialogTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-content">
+        <h2
+          id="modalDialogTitle"
+          class="modal-dialog-title visually-hidden"
+          tabindex="-1"
+        >
+          Interactive project
+        </h2>
+        <button
+          type="button"
+          class="modal-close"
+          id="modalClose"
+          aria-label="Close project dialog"
+        >
+          &times;
+        </button>
+        <div id="modalBody"></div>
+      </div>
     </div>
 
-    <button type="button" class="back-to-top" id="backToTop" aria-label="Back to top" title="Back to top">
-        <i class="fas fa-arrow-up" aria-hidden="true"></i>
+    <button
+      type="button"
+      class="back-to-top"
+      id="backToTop"
+      aria-label="Back to top"
+      title="Back to top"
+    >
+      <i class="fas fa-arrow-up" aria-hidden="true"></i>
     </button>
 
     <footer class="footer">
-        <div class="container">
-            <p>Made with ❤️ for Python learners everywhere</p>
-            <p>
-                <a href="https://github.com/steam-bell-92/python-mini-project"
-                   target="_blank" rel="noopener noreferrer">
-                    <i class="fab fa-github" aria-hidden="true"></i> View on GitHub
-                </a>
-            </p>
-        </div>
+      <div class="container">
+        <p>Made with ❤️ for Python learners everywhere</p>
+        <p>
+          <a
+            href="https://github.com/steam-bell-92/python-mini-project"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <i class="fab fa-github" aria-hidden="true"></i> View on GitHub
+          </a>
+        </p>
+      </div>
     </footer>
 
     <script src="js/audio.js"></script>
@@ -319,7 +604,7 @@ <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-
     <script src="js/projects/simon-says.js"></script>
     <script src="js/projects.js"></script>
     <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
-    <script src="js/main.js"></script>
+    <script type="module" src="js/main.js"></script>
     <script>lucide.createIcons();</script>
 
 </body>
diff --git a/web-app/utilities.html b/web-app/utilities.html
index e699538c..c320fbe0 100644
--- a/web-app/utilities.html
+++ b/web-app/utilities.html
@@ -1,98 +1,134 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver."
+    />
+    <meta name="color-scheme" content="dark light" />
+    <meta id="themeColorMeta" name="theme-color" content="#0f172a" />
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver.">
-    <meta name="color-scheme" content="dark light">
-    <meta id="themeColorMeta" name="theme-color" content="#0f172a">
-    
     <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://steam-bell-92.github.io/python-mini-project/utilities.html">
-    <meta property="og:title" content="Python Web Utilities & Tools - Interactive Web Edition">
-    <meta property="og:description" content="Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver.">
-    <meta property="og:site_name" content="py.mini() lab">
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:url"
+      content="https://steam-bell-92.github.io/python-mini-project/utilities.html"
+    />
+    <meta
+      property="og:title"
+      content="Python Web Utilities & Tools - Interactive Web Edition"
+    />
+    <meta
+      property="og:description"
+      content="Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver."
+    />
+    <meta property="og:site_name" content="py.mini() lab" />
 
     <!-- Twitter -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:url" content="https://steam-bell-92.github.io/python-mini-project/utilities.html">
-    <meta name="twitter:title" content="Python Web Utilities & Tools - Interactive Web Edition">
-    <meta name="twitter:description" content="Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver.">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:url"
+      content="https://steam-bell-92.github.io/python-mini-project/utilities.html"
+    />
+    <meta
+      name="twitter:title"
+      content="Python Web Utilities & Tools - Interactive Web Edition"
+    />
+    <meta
+      name="twitter:description"
+      content="Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver."
+    />
     <!-- Canonical Link -->
-    <link rel="canonical" href="https://steam-bell-92.github.io/python-mini-project/utilities.html">
+    <link
+      rel="canonical"
+      href="https://steam-bell-92.github.io/python-mini-project/utilities.html"
+    />
 
     <title>Python Web Utilities & Tools - Interactive Web Edition</title>
-    <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
-    
+    <link rel="icon" href="assets/favicon.svg" type="image/svg+xml" />
+
     <!-- Structured Data (JSON-LD) -->
     <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "ItemPage",
-      "name": "Interactive Python Utilities & Tools",
-      "description": "Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver.",
-      "url": "https://steam-bell-92.github.io/python-mini-project/utilities.html",
-      "publisher": {
-        "@type": "Organization",
-        "name": "py.mini() lab"
+      {
+        "@context": "https://schema.org",
+        "@type": "ItemPage",
+        "name": "Interactive Python Utilities & Tools",
+        "description": "Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver.",
+        "url": "https://steam-bell-92.github.io/python-mini-project/utilities.html",
+        "publisher": {
+          "@type": "Organization",
+          "name": "py.mini() lab"
+        }
       }
-    }
     </script>
 
-    <link rel="stylesheet" href="css/styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="css/styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
     <style>
-        /* ── Page background ── */
-        body[data-page="utilities"] {
-            background-image: url('assets/utilities-bg.jpg');
-            background-size: cover;
-            background-attachment: fixed;
-            background-position: center;
-        }
+      /* ── Page background ── */
+      body[data-page="utilities"] {
+        background-image: url("assets/utilities-bg.jpg");
+        background-size: cover;
+        background-attachment: fixed;
+        background-position: center;
+      }
 
-        /* Overlay so cards stay readable */
-        body[data-page="utilities"]::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            background: rgba(2, 20, 10, 0.75);
-            z-index: 0;
-            pointer-events: none;
-        }
+      /* Overlay so cards stay readable */
+      body[data-page="utilities"]::before {
+        content: "";
+        position: fixed;
+        inset: 0;
+        background: rgba(2, 20, 10, 0.75);
+        z-index: 0;
+        pointer-events: none;
+      }
 
-        body[data-page="utilities"] .navbar,
-        body[data-page="utilities"] main,
-        body[data-page="utilities"] .footer {
-            position: relative;
-            z-index: 1;
-        }
+      body[data-page="utilities"] .navbar,
+      body[data-page="utilities"] main,
+      body[data-page="utilities"] .footer {
+        position: relative;
+        z-index: 1;
+      }
 
-        /* Light mode overlay */
-        [data-theme="light"] body[data-page="utilities"]::before {
-            background: rgba(220, 252, 231, 0.80);
-        }
+      /* Light mode overlay */
+      [data-theme="light"] body[data-page="utilities"]::before {
+        background: rgba(220, 252, 231, 0.8);
+      }
 
-        /* Active tab highlight for this page */
-        a.tab.active {
-            background: var(--primary-color);
-            border-color: var(--primary-color);
-            color: white;
-        }
+      /* Active tab highlight for this page */
+      a.tab.active {
+        background: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+      }
     </style>
-</head>
+  </head>
 
-<body data-page="utilities" class="sidebar-active">
+  <body data-page="utilities" class="sidebar-active">
     <a href="#main-content" class="skip-link">🚀 Skip to main content</a>
 
     <!-- Mobile Sidebar Toggle -->
-    <button type="button" class="mobile-sidebar-toggle" id="mobileSidebarToggle" aria-label="Toggle sidebar menu" aria-expanded="false">
+    <button
+      type="button"
+      class="mobile-sidebar-toggle"
+      id="mobileSidebarToggle"
+      aria-label="Toggle sidebar menu"
+      aria-expanded="false"
+    >
       <i class="fas fa-bars"></i>
     </button>
 
     <!-- ── PRIMARY SIDEBAR DOCK ──────────────────────────────────── -->
-    <aside class="sidebar-dock" id="mainSidebar" aria-label="Primary Navigation">
+    <aside
+      class="sidebar-dock"
+      id="mainSidebar"
+      aria-label="Primary Navigation"
+    >
       <div class="sidebar-brand">
         <a class="logo-wrap" href="index.html">
           <div class="logo-top-row">
@@ -107,29 +143,55 @@
       </div>
 
       <div class="sidebar-search">
-        <div class="search-box" style="position:relative">
+        <div class="search-box" style="position: relative">
           <i class="fas fa-search"></i>
-          <input aria-label="Search projects" id="searchInput" placeholder="Search projects or tags..." type="text"/>
+          <input
+            aria-label="Search projects"
+            id="searchInput"
+            placeholder="Search projects or tags..."
+            type="text"
+          />
           <div class="search-dropdown" id="searchDropdown">
             <div class="dropdown-content" id="searchDropdownContent">
-              <div class="search-loader" id="searchLoader" style="display:none"><div class="spinner"></div></div>
+              <div
+                class="search-loader"
+                id="searchLoader"
+                style="display: none"
+              >
+                <div class="spinner"></div>
+              </div>
               <div class="recent-searches-section" id="recentSearchesSection">
                 <div class="dropdown-section-title">Recent</div>
                 <div class="dropdown-list" id="recentSearchesList"></div>
               </div>
-              <div class="results-section" id="resultsSection" style="display:none">
+              <div
+                class="results-section"
+                id="resultsSection"
+                style="display: none"
+              >
                 <div class="dropdown-section-title">Projects</div>
                 <div class="dropdown-list" id="resultsList"></div>
               </div>
               <div class="tips-section" id="tipsSection">
                 <p><strong>Search tips</strong></p>
                 <ul>
-                  <li>Type a project name — <code>snake</code>, <code>quiz</code></li>
-                  <li>Filter by tag — <code>game</code>, <code>math</code>, <code>utility</code></li>
+                  <li>
+                    Type a project name — <code>snake</code>, <code>quiz</code>
+                  </li>
+                  <li>
+                    Filter by tag — <code>game</code>, <code>math</code>,
+                    <code>utility</code>
+                  </li>
                   <li>Press <code>Ctrl+K</code> to focus search</li>
                 </ul>
               </div>
-              <div class="no-results-message" id="noResultsMessage" style="display:none">No projects found. Try a different keyword.</div>
+              <div
+                class="no-results-message"
+                id="noResultsMessage"
+                style="display: none"
+              >
+                No projects found. Try a different keyword.
+              </div>
             </div>
           </div>
         </div>
@@ -137,28 +199,70 @@
 
       <div class="sidebar-menu-wrapper">
         <div class="sidebar-menu-title">Categories</div>
-        <nav class="sidebar-menu" role="tablist" aria-label="Filter by category">
-          <button aria-selected="false" class="sidebar-tab" data-category="all" role="tab" tabindex="-1">
+        <nav
+          class="sidebar-menu"
+          role="tablist"
+          aria-label="Filter by category"
+        >
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="all"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="layers"></svg></span>
             <span class="sidebar-label">All Projects</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="games" role="tab" tabindex="-1">
-            <span class="sidebar-icon"><svg data-lucide="gamepad-2"></svg></span>
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="games"
+            role="tab"
+            tabindex="-1"
+          >
+            <span class="sidebar-icon"
+              ><svg data-lucide="gamepad-2"></svg
+            ></span>
             <span class="sidebar-label">Games Arcade</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="math" role="tab" tabindex="-1">
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="math"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="sigma"></svg></span>
             <span class="sidebar-label">Math Visuals</span>
           </button>
-          <button aria-selected="true" class="sidebar-tab active" data-category="utilities" role="tab" tabindex="0">
+          <button
+            aria-selected="true"
+            class="sidebar-tab active"
+            data-category="utilities"
+            role="tab"
+            tabindex="0"
+          >
             <span class="sidebar-icon"><svg data-lucide="wrench"></svg></span>
             <span class="sidebar-label">Utilities Lab</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="favorites" role="tab" tabindex="-1">
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="favorites"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="star"></svg></span>
             <span class="sidebar-label">My Favorites</span>
           </button>
-          <button aria-selected="false" class="sidebar-tab" data-category="playground" role="tab" tabindex="-1">
+          <button
+            aria-selected="false"
+            class="sidebar-tab"
+            data-category="playground"
+            role="tab"
+            tabindex="-1"
+          >
             <span class="sidebar-icon"><svg data-lucide="terminal"></svg></span>
             <span class="sidebar-label">Playground</span>
           </button>
@@ -167,10 +271,20 @@
 
       <div class="sidebar-footer">
         <div class="sidebar-controls">
-          <button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
+          <button
+            aria-label="Mute sounds"
+            class="sound-toggle"
+            id="soundToggle"
+            type="button"
+          >
             <i class="fas fa-volume-up"></i>
           </button>
-          <button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
+          <button
+            aria-label="Switch theme"
+            class="theme-toggle"
+            id="themeToggle"
+            type="button"
+          >
             <i class="fas fa-moon"></i>
           </button>
         </div>
@@ -178,93 +292,216 @@
     </aside>
 
     <main id="main-content" tabindex="-1">
+      <!-- Page Title Section -->
+      <section
+        class="page-title-section"
+        style="text-align: center; padding: 2rem 0 1rem 0"
+      >
+        <div class="container">
+          <h1
+            style="
+              font-size: 2.5rem;
+              font-family: &quot;Space Grotesk&quot;, sans-serif;
+              background: linear-gradient(135deg, #10b981, #6366f1);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              background-clip: text;
+              margin: 0;
+            "
+          >
+            Interactive Python Web Utilities
+          </h1>
+          <p
+            style="
+              color: var(--text-secondary);
+              margin-top: 0.5rem;
+              font-size: 1.1rem;
+              opacity: 0.85;
+            "
+          >
+            Explore beginner-friendly Python utility projects in your
+            browser—converters, translators, and more.
+          </p>
+        </div>
+      </section>
+
+      <!-- Projects Grid — Utilities only -->
+      <section class="projects-section" aria-label="Utility Projects">
+        <div class="container">
+          <div class="projects-grid" id="projectsGrid">
+            <div
+              class="project-card"
+              data-category="utilities"
+              data-project="caesar-cipher"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/caesar-cipher.jpg"
+                alt="Caesar Cipher"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Caesar Cipher</h3>
+              <p>Encrypt &amp; decrypt with a shift!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="utilities"
+              data-project="resume-analyzer"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/resume-analyzer.jpg"
+                alt="AI Resume Analyzer"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>AI Resume Analyzer</h3>
+              <p>
+                Score resumes with ATS-style keyword and formatting insights!
+              </p>
+            </div>
 
-        <!-- Page Title Section -->
-        <section class="page-title-section" style="text-align: center; padding: 2rem 0 1rem 0;">
-            <div class="container">
-                <h1 style="font-size: 2.5rem; font-family: 'Space Grotesk', sans-serif; background: linear-gradient(135deg, #10b981, #6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0;">Interactive Python Web Utilities</h1>
-                <p style="color: var(--text-secondary); margin-top: 0.5rem; font-size: 1.1rem; opacity: 0.85;">Explore beginner-friendly Python utility projects in your browser—converters, translators, and more.</p>
+            <div
+              class="project-card"
+              data-category="utilities"
+              data-project="morse-code"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/morse-code.jpg"
+                alt="Morse Code"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Morse Code</h3>
+              <p>Translate with lights &amp; sound!</p>
             </div>
-        </section>
-
-        <!-- Projects Grid — Utilities only -->
-        <section class="projects-section" aria-label="Utility Projects">
-            <div class="container">
-                <div class="projects-grid" id="projectsGrid">
-
-                    <div class="project-card" data-category="utilities" data-project="caesar-cipher"><img class="card-banner" src="assets/banners/caesar-cipher.jpg" alt="Caesar Cipher" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Caesar Cipher</h3>
-                        <p>Encrypt &amp; decrypt with a shift!</p>
-                    
-                    </div>
-
-                    <div class="project-card" data-category="utilities" data-project="resume-analyzer"><img class="card-banner" src="assets/banners/resume-analyzer.jpg" alt="AI Resume Analyzer" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                      <h3>AI Resume Analyzer</h3>
-                      <p>Score resumes with ATS-style keyword and formatting insights!</p>
-                    
-                    </div>
-
-                    <div class="project-card" data-category="utilities" data-project="morse-code"><img class="card-banner" src="assets/banners/morse-code.jpg" alt="Morse Code" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Morse Code</h3>
-                        <p>Translate with lights &amp; sound!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="utilities" data-project="number-converter"><img class="card-banner" src="assets/banners/number-converter.jpg" alt="Number Converter" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Number Converter</h3>
-                        <p>Convert Dec, Bin, Oct, and Hex!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="utilities" data-project="tower-of-hanoi"><img class="card-banner" src="assets/banners/tower-of-hanoi.jpg" alt="Tower of Hanoi" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Tower of Hanoi</h3>
-                        <p>Solve the classic puzzle!</p>
-                        
-                    </div>
-
-                    <div class="project-card" data-category="utilities" data-project="typing-speed-tester"><img class="card-banner" src="assets/banners/typing-speed-tester.jpg" alt="Typing Speed Tester" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
-                        
-                        <h3>Typing Speed Tester</h3>
-                        <p>Test your typing skills!</p>
-                        
-                    </div>
-
-                </div><!-- /projects-grid -->
+
+            <div
+              class="project-card"
+              data-category="utilities"
+              data-project="number-converter"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/number-converter.jpg"
+                alt="Number Converter"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Number Converter</h3>
+              <p>Convert Dec, Bin, Oct, and Hex!</p>
+            </div>
+
+            <div
+              class="project-card"
+              data-category="utilities"
+              data-project="tower-of-hanoi"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/tower-of-hanoi.jpg"
+                alt="Tower of Hanoi"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Tower of Hanoi</h3>
+              <p>Solve the classic puzzle!</p>
             </div>
-        </section>
 
+            <div
+              class="project-card"
+              data-category="utilities"
+              data-project="typing-speed-tester"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/typing-speed-tester.jpg"
+                alt="Typing Speed Tester"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play">Try It</button>
+              </div>
+
+              <h3>Typing Speed Tester</h3>
+              <p>Test your typing skills!</p>
+            </div>
+          </div>
+          <!-- /projects-grid -->
+        </div>
+      </section>
     </main>
 
     <!-- Project Modal -->
-    <div class="modal" id="projectModal" role="dialog" aria-modal="true"
-         aria-labelledby="modalDialogTitle" aria-hidden="true">
-        <div class="modal-content">
-            <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-1">Interactive project</h2>
-            <button type="button" class="modal-close" id="modalClose"
-                    aria-label="Close project dialog">&times;</button>
-            <div id="modalBody"></div>
-        </div>
+    <div
+      class="modal"
+      id="projectModal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modalDialogTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-content">
+        <h2
+          id="modalDialogTitle"
+          class="modal-dialog-title visually-hidden"
+          tabindex="-1"
+        >
+          Interactive project
+        </h2>
+        <button
+          type="button"
+          class="modal-close"
+          id="modalClose"
+          aria-label="Close project dialog"
+        >
+          &times;
+        </button>
+        <div id="modalBody"></div>
+      </div>
     </div>
 
-    <button type="button" class="back-to-top" id="backToTop" aria-label="Back to top" title="Back to top">
-        <i class="fas fa-arrow-up" aria-hidden="true"></i>
+    <button
+      type="button"
+      class="back-to-top"
+      id="backToTop"
+      aria-label="Back to top"
+      title="Back to top"
+    >
+      <i class="fas fa-arrow-up" aria-hidden="true"></i>
     </button>
 
     <footer class="footer">
-        <div class="container">
-            <p>Made with ❤️ for Python learners everywhere</p>
-            <p>
-                <a href="https://github.com/steam-bell-92/python-mini-project"
-                   target="_blank" rel="noopener noreferrer">
-                    <i class="fab fa-github" aria-hidden="true"></i> View on GitHub
-                </a>
-            </p>
-        </div>
+      <div class="container">
+        <p>Made with ❤️ for Python learners everywhere</p>
+        <p>
+          <a
+            href="https://github.com/steam-bell-92/python-mini-project"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <i class="fab fa-github" aria-hidden="true"></i> View on GitHub
+          </a>
+        </p>
+      </div>
     </footer>
 
     <script src="js/audio.js"></script>
@@ -293,7 +530,7 @@ <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-
     <script src="js/projects/ceasar-cipher.js"></script>
     <script src="js/projects.js"></script>
     <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
-    <script src="js/main.js"></script>
+    <script type="module" src="js/main.js"></script>
     <script>lucide.createIcons();</script>
 
 </body>
