feat(portfolio): show per-category counts on filter buttons

Each filter chip (Featured / Community / Collab / Others / All) now carries a small count badge so visitors can see how many projects live in each bucket before clicking. Empty categories are auto-hidden (All is always kept as a fallback). Counts use tabular-nums so width is stable across 1- and 2-digit values. Includes aria-label per button so screen readers announce the count.

Author: Sagargupta16

src/pages/portfolio/Portfolio.tsx

@@ -34,6 +34,33 @@ const Portfolio = () => {
    const collaborativeProjects = useMemo(() => getCollaborativeProjects(), []);
    const otherProjects = useMemo(() => getOtherProjects(), []);
 
+   // Counts per filter — drives both the badge text and the "hide empty" rule.
+   const counts = useMemo<Record<string, number>>(() => {
+      const f = featuredProjects.length;
+      const c = communityProjects.length;
+      const x = collaborativeProjects.length;
+      const o = otherProjects.length;
+      return {
+         Featured: f,
+         Community: c,
+         Collab: x,
+         Others: o,
+         All: f + c + x + o,
+      };
+   }, [
+      featuredProjects,
+      communityProjects,
+      collaborativeProjects,
+      otherProjects,
+   ]);
+
+   // Skip categories with zero items so the filter bar never shows dead options.
+   // "All" is kept even at zero so the bar still renders with a fallback.
+   const visibleFilters = useMemo(
+      () => FILTERS.filter((f) => f === "All" || (counts[f] ?? 0) > 0),
+      [counts],
+   );
+
    const filteredProjects = useMemo(() => {
       const featured = featuredProjects.map((p) => ({
          ...p,
@@ -84,40 +111,68 @@ const Portfolio = () => {
                }}
                variants={fadeInUp}
             >
-               {FILTERS.map((filter, idx) => (
-                  <motion.button
-                     key={filter}
-                     onClick={() => handleFilterChange(filter)}
-                     className={activeFilter === filter ? "btn-primary" : ""}
-                     style={
-                        activeFilter === filter
-                           ? {}
-                           : {
-                                padding: "8px 20px",
-                                borderRadius: 12,
-                                fontSize: 14,
-                                fontFamily: MONO_FONT,
-                                fontWeight: 500,
-                                cursor: "pointer",
-                                border: "1px solid rgba(255, 255, 255, 0.06)",
-                                color: "#a5a5c0",
-                                background: "rgba(255, 255, 255, 0.03)",
-                                backdropFilter: "blur(8px)",
-                             }
-                     }
-                     initial={{ opacity: 0, y: 15 }}
-                     animate={{ opacity: 1, y: 0 }}
-                     transition={{
-                        duration: 0.7,
-                        ease: [0.4, 0, 0.2, 1],
-                        delay: 0.1 + idx * 0.08,
-                     }}
-                     whileHover={{ scale: 1.05 }}
-                     whileTap={{ scale: 0.97 }}
-                  >
-                     {filter}
-                  </motion.button>
-               ))}
+               {visibleFilters.map((filter, idx) => {
+                  const isActive = activeFilter === filter;
+                  const count = counts[filter] ?? 0;
+                  return (
+                     <motion.button
+                        key={filter}
+                        onClick={() => handleFilterChange(filter)}
+                        className={isActive ? "btn-primary" : ""}
+                        style={
+                           isActive
+                              ? {}
+                              : {
+                                   padding: "8px 20px",
+                                   borderRadius: 12,
+                                   fontSize: 14,
+                                   fontFamily: MONO_FONT,
+                                   fontWeight: 500,
+                                   cursor: "pointer",
+                                   border:
+                                      "1px solid rgba(255, 255, 255, 0.06)",
+                                   color: "#a5a5c0",
+                                   background: "rgba(255, 255, 255, 0.03)",
+                                   backdropFilter: "blur(8px)",
+                                   display: "inline-flex",
+                                   alignItems: "center",
+                                   gap: 8,
+                                }
+                        }
+                        initial={{ opacity: 0, y: 15 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{
+                           duration: 0.7,
+                           ease: [0.4, 0, 0.2, 1],
+                           delay: 0.1 + idx * 0.08,
+                        }}
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.97 }}
+                        aria-label={`${filter} (${count} project${count === 1 ? "" : "s"})`}
+                     >
+                        <span>{filter}</span>
+                        <span
+                           aria-hidden="true"
+                           style={{
+                              fontFamily: MONO_FONT,
+                              fontSize: 11,
+                              fontWeight: 600,
+                              opacity: 0.65,
+                              padding: "1px 6px",
+                              borderRadius: 6,
+                              background: isActive
+                                 ? "rgba(0, 0, 0, 0.18)"
+                                 : "rgba(255, 255, 255, 0.06)",
+                              // Use tabular digits so 1-digit and 2-digit counts
+                              // don't shift the button width during filter swaps.
+                              fontVariantNumeric: "tabular-nums",
+                           }}
+                        >
+                           {count}
+                        </span>
+                     </motion.button>
+                  );
+               })}
             </motion.div>
 
             {/* Vertical timeline */}