fix(web): scroll hint via IntersectionObserver + icons for new projects

apps/web/src/features/hero/components/Hero/Hero.tsx

@@ -44,6 +44,7 @@ const Hero: FC<ExtendedHeroProps> = memo(
       logger.debug(`[Home] Section "${id}" is now visible`);
     });
     const containerRef = useRef<HTMLDivElement>(null);
+    const topSentinelRef = useRef<HTMLDivElement>(null);
     const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
     const [isMouseNearBorder, setIsMouseNearBorder] = useState(false);
 
@@ -92,20 +93,33 @@ const Hero: FC<ExtendedHeroProps> = memo(
       const handleScroll = (): void => {
         const currentScrollPosition = window.scrollY;
         setScrollPosition(currentScrollPosition);
-
-        // The "Scroll to Explore" hint is only for the very top of the page —
-        // hide it as soon as the user scrolls at all (small threshold avoids
-        // sub-pixel flicker). Return-to-stars still waits until meaningfully
-        // scrolled away.
-        setShowScrollIndicator(currentScrollPosition <= 4);
+        // Return-to-stars appears once the user has scrolled meaningfully away.
         setShowReturnToStars(currentScrollPosition > 50);
       };
 
-      window.addEventListener("scroll", handleScroll);
+      window.addEventListener("scroll", handleScroll, { passive: true });
       handleScroll(); // Initial check
       return (): void => window.removeEventListener("scroll", handleScroll);
     }, []);
 
+    // The "Scroll to Explore" hint belongs only at the very top of the page.
+    // Drive its visibility from an IntersectionObserver on a 1px sentinel at the
+    // top of the hero rather than window.scrollY — on this layout window.scrollY
+    // wasn't a reliable signal, which left the hint visible far down the page.
+    // The sentinel leaves the viewport the moment the user scrolls at all, and
+    // re-enters when they scroll back to the top.
+    useEffect(() => {
+      const sentinel = topSentinelRef.current;
+      if (!sentinel) return;
+
+      const observer = new IntersectionObserver(
+        ([entry]): void => setShowScrollIndicator(entry.isIntersecting),
+        { threshold: 0 },
+      );
+      observer.observe(sentinel);
+      return (): void => observer.disconnect();
+    }, []);
+
     const getThemeStyles = (): {
       textColor: string;
       gradientColors: string;
@@ -144,6 +158,12 @@ const Hero: FC<ExtendedHeroProps> = memo(
           backgroundPosition: `center ${scrollPosition * 0.05}px`,
         }}
       >
+        {/* 1px sentinel at the very top — drives the scroll-hint visibility */}
+        <div
+          ref={topSentinelRef}
+          aria-hidden="true"
+          className={styles.scrollSentinel}
+        />
         <div
           className={
             isDarkMode ? styles.heroOverlayDark : styles.heroOverlayLight

apps/web/src/features/hero/components/Hero/hero.module.css

@@ -203,6 +203,14 @@
   transform: translateY(-2px);
 }
 
+/* 1px marker at the top of the hero; the scroll-to-explore hint is shown only
+   while this is in the viewport (i.e. the page is at the very top). */
+.scrollSentinel {
+  width: 100%;
+  height: 1px;
+  pointer-events: none;
+}
+
 .scrollIndicator {
   position: fixed; /* Changed from absolute to fixed for viewport positioning */
   /* Hug the very bottom edge and stay compact so it overlaps the interactive

apps/web/src/features/portfolio/ProjectDetail.tsx

@@ -23,6 +23,10 @@ import {
   ChevronRight,
   Home,
   Bot,
+  Waypoints,
+  Receipt,
+  MessagesSquare,
+  Share2,
   X,
 } from "lucide-react";
 import { SEO } from "@/components/SEO";
@@ -48,6 +52,10 @@ const projectIcons: Record<string, React.ReactNode> = {
   autopr: <Bot size={48} />,
   "phoenixvc-website": <Globe size={48} />,
   "design-system": <Code size={48} />,
+  sluice: <Waypoints size={48} />,
+  docket: <Receipt size={48} />,
+  convolens: <MessagesSquare size={48} />,
+  omnipost: <Share2 size={48} />,
 };
 
 // Focus area icons (non-serializable, kept local)