Uh oh!
There was an error while loading. Please reload this page.
feat(home): horizontal slider for Hackatones / Proyectos / Tecnologías - #56
Merged
Merged
Conversation
Replace the desktop scroll-jacking + mobile stacked layout of Hackatones / Proyectos / Tecnologías with a single horizontal slider: 3 fixed-height slides navigated by arrows, dot indicators, swipe (pointer) and ← / → keys. Reuses all the section content (features, stats, TechMatrix, project marquee, floating icons, animated counters). Drops the now-unused SectionPanel, Timeline and TechChips helpers. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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 (1)
📝 WalkthroughWalkthroughHomeScroll is converted from a scroll-driven sticky layout into an index-based carousel with keyboard, swipe, arrow, and dot navigation. Section content rendering is updated, the CTA row is simplified, and some section data and sizing values change. ChangesHomeScroll Carousel Refactor
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant HomeScroll
participant SlidePanel
User->>HomeScroll: keyboard, swipe, arrow, or dot input
HomeScroll->>HomeScroll: go(index) updates bounded index state
HomeScroll->>SlidePanel: render active section via translated track
SlidePanel-->>User: display section content
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/sections/HomeScroll.tsx`:
- Around line 195-204: Inactive slides in HomeScroll are only marked with
aria-hidden, so their nested CTA Link remains keyboard-focusable. Update the
SECTIONS.map render in HomeScroll so the offscreen slide wrapper also receives
inert when i !== index, keeping inactive SlidePanel content out of both the
accessibility tree and tab order while preserving the existing aria-hidden
behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
Uh oh!
There was an error while loading. Please reload this page.
… slide Remove the FloatingTechIcons overlay (Lightning/Nostr/NWC icons + connecting lines + ambient glow) that sat behind the Hackatones slide and cluttered the content. Deletes the now-unused component and its type. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bump the Hackatones-slide stat from 48 to 50 with a "+" suffix. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The TechMatrix was a fixed 460/520px which, with the title + description + CTA, overflowed the 86vh slide and got cropped top/bottom by the centered overflow-hidden panel. Make the matrix viewport-relative (38vh, clamped 280–440px) and tighten the description/matrix margins so the whole slide fits. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
PR review: offscreen slides were only aria-hidden, leaving their CTA <Link> in the tab order. Add `inert` (React 19 boolean) on inactive slides so they're removed from both the accessibility tree and keyboard navigation. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Uh oh!
There was an error while loading. Please reload this page.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesigns the home "Hackatones · Proyectos · Tecnologías" block from a vertical scroll (desktop scroll-jacking + mobile stacked sections) into a single horizontal slider with 3 fixed-height slides.
TechMatrix, project marquee, floating tech icons, CTAs.SectionPanel,TimelineandTechChipshelpers (net −327 lines).Implementation notes
width: N*100%, slides100/N%) +translateX(-index * 100/N %)so the transform is deterministic regardless of measured width.onPointerDown/Upon the viewport (50px threshold); taps still pass through to links/CTAs.Testing
tsc --noEmitclean.translateXresolves to0 / -1270 / -2540for indices 0/1/2; dots + arrows updatearia-currentand the transform; each slide fully rendered (title, features, stats, TechMatrix, CTA).🤖 Generated with Claude Code
Summary by CodeRabbit