Merge pull request steam-bell-92#1734 from sam-dwdkr404/feat-1703-homepage-navigation

feat: add homepage category navigation (steam-bell-92#1703)

Author: steam-bell-92

web-app/css/styles.css

@@ -937,6 +937,129 @@ main>.hero-section:has(.hero-code-snippets) {
   padding: 0 1rem;
 }
 
+/* ==========================================================
+   FIX ISSUE #1703
+   Homepage Category Navigation
+========================================================== */
+
+.hero-category-nav{
+
+    display:flex;
+
+    justify-content:center;
+
+    align-items:center;
+
+    gap:18px;
+
+    width:fit-content;
+
+    margin:0 auto 42px;
+
+    padding:12px 24px;
+
+    background:rgba(255,255,255,.72);
+
+    backdrop-filter:blur(18px);
+
+    border:1px solid rgba(255,255,255,.35);
+
+    border-radius:18px;
+
+    box-shadow:0 8px 30px rgba(0,0,0,.08);
+
+}
+
+.hero-nav-btn{
+
+    display:flex;
+
+    align-items:center;
+
+    gap:8px;
+
+    background:none;
+
+    border:none;
+
+    cursor:pointer;
+
+    padding:10px 4px;
+
+    position:relative;
+
+    color:var(--text-secondary);
+
+    font-size:15px;
+
+    font-weight:600;
+
+    transition:.25s;
+
+}
+
+.hero-nav-btn i{
+
+    font-size:14px;
+
+}
+
+.hero-nav-btn:hover{
+
+    color:var(--accent);
+
+}
+
+.hero-nav-btn.active{
+
+    color:var(--accent);
+
+}
+
+.hero-nav-btn::after{
+
+    content:"";
+
+    position:absolute;
+
+    left:0;
+
+    bottom:-8px;
+
+    width:100%;
+
+    height:3px;
+
+    background:var(--accent);
+
+    border-radius:999px;
+
+    transform:scaleX(0);
+
+    transition:.25s;
+
+}
+
+.hero-nav-btn.active::after{
+
+    transform:scaleX(1);
+
+}
+
+html[data-theme="dark"] .hero-category-nav{
+
+    background:rgba(28,28,28,.65);
+
+    border:1px solid rgba(255,255,255,.08);
+
+    box-shadow:0 10px 35px rgba(0,0,0,.45);
+
+}
+
+
+
+
+
 /* ── Hero Big Logo & Brand Title ────────────────────────────── */
 .hero-logo-header {
   display: flex;

web-app/index.html

@@ -190,6 +190,39 @@
       <div aria-hidden="true" class="hero-orb hero-orb-three"></div>
 
       <div class="hero-shell">
+        <div class="hero-category-nav">
+
+          <button class="hero-nav-btn active" data-category="all">
+            <i class="fas fa-layer-group"></i>
+            <span>All Projects</span>
+          </button>
+
+          <button class="hero-nav-btn" data-category="games">
+            <i class="fas fa-gamepad"></i>
+            <span>Games</span>
+          </button>
+
+          <button class="hero-nav-btn" data-category="math">
+            <i class="fas fa-calculator"></i>
+            <span>Maths</span>
+          </button>
+
+          <button class="hero-nav-btn" data-category="utilities">
+            <i class="fas fa-wrench"></i>
+            <span>Utilities</span>
+          </button>
+
+          <button class="hero-nav-btn" data-category="favorites">
+            <i class="far fa-star"></i>
+            <span>Favorites</span>
+          </button>
+
+          <button class="hero-nav-btn" data-category="playground">
+            <i class="fas fa-code"></i>
+            <span>Playground</span>
+          </button>
+
+        </div>
         <div class="hero-logo-header">
           <div class="hero-logo-text">
             <span class="hero-logo-py">py</span><span class="hero-logo-mini">.mini</span><span

web-app/js/main.js

@@ -776,6 +776,57 @@ document.addEventListener("DOMContentLoaded", function () {
       }
     });
   });
+  /* ==========================================================
+   FIX ISSUE #1703
+   Wire Hero Category Navigation
+========================================================== */
+
+const heroNavButtons = document.querySelectorAll(".hero-nav-btn");
+
+heroNavButtons.forEach(function (button) {
+
+    button.addEventListener("click", function () {
+
+        const category = button.dataset.category;
+
+        heroNavButtons.forEach(function (btn) {
+            btn.classList.remove("active");
+        });
+
+        button.classList.add("active");
+
+        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",
+                });
+            }
+
+        }
+
+    });
+
+});
+
 
   /* ── Stats Cards ──────────────────────────────────────────── */
   var statsCards = document.querySelectorAll(".stats-card");