Add hackathon resources page and home teaser#154
Merged
Conversation
…tile Review follow-ups on the resources page and home teaser. The teaser's stage numbers were written by hand and had drifted from the guide they link to: the tile reading "Stage 03 · Leveling up" opened the section the page numbers 04, and "Stage 04 · Tools and templates" opened a strip that is not a stage at all. Stage numbers now come from a stage's position in RESOURCE_STAGES, so the two cannot disagree, and the toolkit tile is labelled "Toolkit" to match the strip it opens. The teaser's copy is derived from the same data; only the gradients still live in the component. The parallax plane overhangs its tile by `inset-[-18%]` — an overhang that scales with the tile, which is sized in vh — but travelled a fixed number of pixels. Past ~18% of tile height the plane slid further than it overhung and left a bare strip along the tile's edge: measured 6.4px at a 962px viewport, and worse as the viewport shortens, since the overhang shrinks while the travel does not. Travel is now a percentage of the plane's own height, capped below the 13.2% that the overhang can absorb, so every tile stays covered at any viewport size. Also: drop the never-set `image` field and its dead <img> branch, drop the duplicate MLH organizer-guide link, and normalise guide.mlh.io to the guide.mlh.com it redirects to. Adds lib/resources.test.ts, which fails on the original numbering drift. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The footer link was the only way in. NAV_LINKS feeds both the nav pill and the mobile menu, so off the home page — and on mobile everywhere — /resources was reachable only by scrolling to the footer, the same dead end the mobile menu was added to fix (#113). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Two follow-ups on the pinned rail. It pinned for the whole page, because a sticky element's containing block is its parent and the rail's parent was <main>. It stayed stuck over the toolkit and the closing CTA, long after the last section it links to. Wrapping the rail with the sections it targets scopes the pin to that range, so it now releases after the toolkit. Its clearance was `scroll-mt-36` — 144px, a literal standing in for "the nav pill plus the rail". That is the guess that broke the mobile menu (#113): the rail is sized by px-based text, so a browser minimum-font-size setting grows it past any literal and a jumped-to section lands underneath. The rail now measures itself and publishes --stage-scroll-offset; sections offset by that, keeping a 9rem fallback for the server render and for JS-off, which is what the rail measures at default text size. Verified by inflating the rail's link text to 24px: the rail grows 62px->81px, the published offset follows 142px->161px, and a jump still lands flush. With the 144px literal the same section would land 17.5px behind the rail. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Jose-Gael-Cruz-Lopez
marked this pull request as ready for review
July 22, 2026 05:57
Adding RESOURCES to NAV_LINKS grew the inline row by 110px, so the pill needs 674px of viewport. The row switched on at `sm` (640px), which left a 640-673px band where the pill was squeezed narrower than its content and wrapped to a second line — measured 74.2px tall against its natural 61.2px. The row now switches on at `md` (768px), giving 744px of gutter-adjusted space against the 649.6px the pill wants. Below that the mobile menu carries the same links, as it already did below 640px. The menu's own breakpoint moves with it: `md:hidden` plus the matchMedia that closes the panel when the breakpoint is crossed, which has to agree with the CSS or the panel outlives its own visibility (the rotate-to-landscape bug the comment there describes). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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 free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Closes #153
Summary
Add a /resources field guide with stage-based tips (getting started → advanced), curated links, and a tools/templates strip
Add a home-page 2×2 resources teaser with brand colors (ink / coral / paper), scroll parallax, and deep links into each stage
Wire navigation via footer “Resources” link (Site column)
Test plan
Visit /resources — hero, stage jump nav, all five stages, tools strip, and globe/deck CTAs render
Jump links (#getting-started, #finding-people, #leveling-up, #tools) scroll to the right sections
Home page shows the 2×2 teaser between the theme marquee and submit section
Each teaser tile links to the matching /resources#… section
Scroll through the teaser — entrance animation + background parallax (respects reduced motion)
Footer → Resources goes to /resources
Spot-check mobile: teaser stacks to one column; resources page jump nav scrolls horizontally