feat(my): interactive My Passport in the members hub#172
Open
Darkest-Teddy wants to merge 1 commit into
Open
Conversation
Port the "My Passport" Claude Design component into the /my members hub (Pillar 03). A collectible hacker passport flips open in 3D to reveal ink-stamped visas for the hackathons you've hacked. - New components/hq/passport.tsx: faithful React port of the DCLogic design - leather cover with a foil "incognito hacker" crest, guilloche pages, and eight turbulence-warped SVG stamps that stamp in on open. - Uses the app font tokens (Syncopate/Space Mono via CSS vars), honors prefers-reduced-motion, and scales the fixed 680x470 spread to fit any width via a ResizeObserver instead of the original fixed overlay. - Add the pp-stamp-in keyframes to globals.css. - Render <Passport /> above the tracker in both the signed-in hub and the open-mode fallback in my-client.tsx.
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
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.
What
Imports and implements the My Passport design from Claude Design into the
/mymembers hub (Pillar 03).A collectible hacker passport that flips open in 3D to reveal ink-stamped "visas" for every hackathon you've hacked — leather cover with a foil incognito hacker crest, guilloché security pages, and eight turbulence-warped SVG stamps (Hack the North, PennApps, MHacks, Hack the 6ix, LA Hacks, Bitcamp, cuHacking, HackUMass).
How
components/hq/passport.tsx— a faithful React port of the sourceMy Passport.dc.html(Claude Design's DCLogic format). Theclosed → flash → openstate machine, transforms, and timings are preserved 1:1.--font-display/--font-mono) instead of re-importing Google fonts.prefers-reduced-motion— skips the flip/stamp choreography.ResizeObserverand lives inside the standard page.shell.app/globals.css— adds thepp-stamp-inkeyframes (with a reduced-motion guard).components/hq/my-client.tsx— renders<Passport />above the tracker in both the signed-in hub and the open-mode fallback.Verification
npm run lint— cleannpm run build— succeeds; TypeScript passes;/myprerenders/my: the closed passport (cover art, crest, title, control) renders; stamps stamp in on open.