fix(web): scroll hint via IntersectionObserver + icons for new projects#214
Conversation
…rojects 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.
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
Disabled knowledge base sources:
📝 WalkthroughWalkthroughThe Hero component's "Scroll to Explore" hint is refactored to use an ChangesHero Scroll Indicator Refactor
ProjectDetail Icon Additions
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2f3098cac4
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| .scrollSentinel { | ||
| width: 100%; | ||
| height: 1px; | ||
| pointer-events: none; |
There was a problem hiding this comment.
This sentinel is inserted as a normal child of .heroSection, which is a centered flex container, so on the homepage it participates in the row layout alongside .heroContainer: the full-width sentinel can shrink/shift the hero content and, because align-items: center applies, the 1px target is vertically centered rather than at the top. In that state the IntersectionObserver keeps the scroll hint visible until the centered sentinel leaves the viewport instead of hiding on any scroll; position the sentinel absolutely at top: 0 (or otherwise remove it from flex flow).
Useful? React with 👍 / 👎.
1 participant
Follow-ups to the live site.
1. "Scroll to Explore" hint shows at the wrong time
It was driven by
window.scrollY, which on this layout isn't a reliable signal — the hint stayed visible far down the page (you reported it only disappearing around the last section). Now a 1px sentinel sits at the top of the hero and an IntersectionObserver toggles the hint: it hides the moment the top leaves the viewport (any scroll) and returns when you scroll back up — independent of the scroll mechanism.2. New projects had no detail-page icon
Sluice/Docket/ConvoLens/OmniPost were falling back to the generic
Layersicon. Gave each a fitting lucide icon: Sluice→Waypoints, Docket→Receipt, ConvoLens→MessagesSquare, OmniPost→Share2.Notes
@types/react-skew TS2786 type-noise as the 10 existing project icons (repo ships with this; build doesn't typecheck).🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes
New Features
Improvements