Merge branch 'steam-bell-92:main' into main

Author: Alvi24-hub

pyproject.toml

@@ -9,11 +9,11 @@ python = ">=3.10,<3.13"
 pygame = "2.6.1"
 numpy = "1.26.4"
 matplotlib = "3.8.3"
-pillow = "12.2.0"
+pillow = "12.3.0"
 requests = "2.34.2"
 markdown2 = "2.5.5"
 reportlab = "4.5.1"
-nltk = "3.9.1"
+nltk = "3.10.0"
 
 
 [tool.poetry.group.dev.dependencies]

requirements.txt

@@ -16,7 +16,7 @@ markdown2==2.5.5
 reportlab==4.5.1
 
 # NLP dependencies
-nltk==3.9.1
+nltk==3.10.0
 pyenchant==3.3.0
 
 # TUI dependencies

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");
@@ -877,7 +928,15 @@ if (!pageCategory && projectsSection) {
       // Show sidebar when projects section is in view AND we're scrolled past hero
       const heroSection = document.querySelector('.hero-section');
       const heroBottom = heroSection ? heroSection.getBoundingClientRect().bottom : 0;
-      const showSidebar = rect.top < window.innerHeight && window.scrollY > heroBottom - 100;
+      // FIX ISSUE #1704: Hide the fixed sidebar when the footer enters the viewport
+      const footer = document.querySelector(".footer");
+      const isFooterVisible = footer
+        ? footer.getBoundingClientRect().top < window.innerHeight
+        : false;
+      const showSidebar =
+        rect.top < window.innerHeight &&
+        !isFooterVisible &&
+        window.scrollY > heroBottom - 100;
 
       document.body.classList.toggle("sidebar-active", showSidebar);
       console.log('Sidebar active:', showSidebar, 'scrollY:', window.scrollY, 'playgroundActive:', playgroundActive);