agent: Fix mobile responsiveness and conversion across pa

src/pages/portfolio.astro

@@ -348,8 +348,11 @@ const featuredProjects = projects.filter(p => p.featured);
           </div>
         </div>
 
-        <!-- Category Filter Tabs -->
-        <div class="flex flex-wrap justify-center gap-3" role="tablist" aria-label="Filter projects by category">
+        <!-- Category Filter Tabs
+             Mobile (<sm): a single horizontally-scrollable row so the five
+             chips never wrap into a tall stack that pushes the project grid
+             below the fold. ≥sm: centered wrapping row as before. -->
+        <div class="filter-scroll flex flex-nowrap gap-3 overflow-x-auto pb-1 snap-x sm:flex-wrap sm:justify-center sm:overflow-visible sm:pb-0" role="tablist" aria-label="Filter projects by category">
           <button
             data-filter="all"
             class="filter-btn active rounded-full bg-primary px-6 py-2.5 font-semibold text-white transition-all duration-300 hover:shadow-lg hover:shadow-primary/25 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2"
@@ -1190,4 +1193,28 @@ const featuredProjects = projects.filter(p => p.featured);
     display: flex;
     flex-wrap: wrap;
   }
+
+  /* Horizontally-scrollable category filter row on mobile.
+     Chips keep their intrinsic width (no shrinking) and snap as the user
+     swipes; the scrollbar is hidden for a clean native-app feel. At >=sm the
+     row wraps normally so the scroll affordance is mobile-only. */
+  .filter-scroll {
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
+  }
+  .filter-scroll > .filter-btn {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    scroll-snap-align: start;
+  }
+  /* Hide the scrollbar (still scrollable) only while in the mobile scroll mode */
+  @media (max-width: 639px) {
+    .filter-scroll {
+      scrollbar-width: none;          /* Firefox */
+      -ms-overflow-style: none;       /* IE/Edge legacy */
+    }
+    .filter-scroll::-webkit-scrollbar {
+      display: none;                  /* Chrome/Safari */
+    }
+  }
 </style>