From 2f3098cac4eb8b85e8b8bf12c5b82acc586147ce Mon Sep 17 00:00:00 2001
From: Jurie Smit <smit.jurie@gmail.com>
Date: Mon, 22 Jun 2026 23:12:02 +0200
Subject: [PATCH] fix(web): hide scroll hint via IntersectionObserver + icons
 for new projects
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "Scroll to Explore" hint was driven by window.scrollY, which on this layout
left it visible far down the page (only disappearing near the last section).
Drive its visibility from an IntersectionObserver on a 1px sentinel at the top
of the hero instead — it now hides the moment you scroll and returns at the top,
regardless of how the page scrolls.

Also give the newly-added portfolio projects detail-page icons (they were
falling back to the generic Layers icon): Sluice→Waypoints, Docket→Receipt,
ConvoLens→MessagesSquare, OmniPost→Share2.
---
 .../features/hero/components/Hero/Hero.tsx    | 34 +++++++++++++++----
 .../hero/components/Hero/hero.module.css      |  8 +++++
 .../src/features/portfolio/ProjectDetail.tsx  |  8 +++++
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/features/hero/components/Hero/Hero.tsx b/apps/web/src/features/hero/components/Hero/Hero.tsx
index 23e6a089..5223fa75 100644
--- a/apps/web/src/features/hero/components/Hero/Hero.tsx
+++ b/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
diff --git a/apps/web/src/features/hero/components/Hero/hero.module.css b/apps/web/src/features/hero/components/Hero/hero.module.css
index b20e09df..b4f2461a 100644
--- a/apps/web/src/features/hero/components/Hero/hero.module.css
+++ b/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
diff --git a/apps/web/src/features/portfolio/ProjectDetail.tsx b/apps/web/src/features/portfolio/ProjectDetail.tsx
index c7e2caca..357260f4 100644
--- a/apps/web/src/features/portfolio/ProjectDetail.tsx
+++ b/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)