Fix dogfood pass-2: grid thumbs, AI view, featured/recent dedupe

- Portfolio cards: eager first-page load, cache-safe onLoad via ref,
  soft opacity while loading, error placeholder (no stuck black voids)
- Hide home view chips when primary category has zero projects (AI)
- Seed AI view with showOthers false; home Recent excludes Featured
- Slightly larger scroll-padding under sticky header

client/src/components/ProjectCard.scss

@@ -49,7 +49,8 @@
       width: 100%;
       height: 100%;
       object-fit: cover;
-      opacity: 0;
+      // Stay slightly visible under shimmer so cards never look "broken"
+      opacity: 0.12;
       transition: transform 0.55s ease, opacity 0.35s ease;
 
       &.is-loaded {

client/src/components/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Link } from "react-router-dom";
 import type { Project } from "../lib/api";
 import { thumbOf, thumbAltOf } from "../lib/api";
@@ -10,8 +10,17 @@ export function ProjectCard({ project, index = 0 }: { project: Project; index?:
   const alt = thumbAltOf(project);
   const year = formatProjectYear(project.date);
   const [loaded, setLoaded] = useState(false);
-  // First row-ish: eager load so portfolio doesn't look empty pre-scroll
-  const eager = index < 8;
+  const [failed, setFailed] = useState(false);
+  // Load full first page eagerly so mid-grid never stays black on first paint
+  const eager = index < 24;
+
+  // Handle cache hits (onLoad may not fire if already complete when attached)
+  const imgRef = useCallback((node: HTMLImageElement | null) => {
+    if (!node) return;
+    if (node.complete && node.naturalWidth > 0) {
+      setLoaded(true);
+    }
+  }, []);
 
   return (
     <article
@@ -19,15 +28,19 @@ export function ProjectCard({ project, index = 0 }: { project: Project; index?:
       style={{ animationDelay: `${Math.min(index, 12) * 40}ms` }}
     >
       <Link to={`/project/${project.slug}`} className="project-card__link">
-        <div className={`project-card__media${thumb && !loaded ? " is-loading" : ""}`}>
-          {thumb ? (
+        <div
+          className={`project-card__media${thumb && !loaded && !failed ? " is-loading" : ""}`}
+        >
+          {thumb && !failed ? (
             <img
+              ref={imgRef}
               src={thumb}
               alt={alt}
               loading={eager ? "eager" : "lazy"}
               decoding="async"
-              fetchPriority={eager ? "high" : "auto"}
+              fetchPriority={index < 6 ? "high" : "auto"}
               onLoad={() => setLoaded(true)}
+              onError={() => setFailed(true)}
               className={loaded ? "is-loaded" : undefined}
             />
           ) : (