About page with interactive character avatar#15
Merged
Conversation
- CharacterAvatar: original line-art SVG portrait in the LCB palette (off-white strokes, side-swept dark hair, navy polo). Pupils follow the cursor via framer-motion springs, idle blink every 4-6s, wink + grin on hover; fully static under prefers-reduced-motion - /about route: server page with metadata, terminal-styled panel with name/handle, blurb, GitHub + LinkedIn links, back link; owns its own scrolling since the root layout pins body overflow - SocialIcons: inline GitHub/LinkedIn SVGs (lucide has no brand icons) - About link added to the game header https://claude.ai/code/session_01RQVRtRAigoNCzJc37A5Ses
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Summary
Adds an /about page featuring an interactive cartoon avatar of Martin, in the style of the Framer "Character" portfolio module but recreated as an original SVG (the Framer module is a licensed asset and needed visual customization anyway), restyled to the LCB terminal theme.
CharacterAvatar (
src/components/CharacterAvatar.tsx)useMotionValue+useSpring, clamped travel — no React state on pointermove, so the strict react-hooks rules stay happy).prefers-reduced-motion(no listeners or timers), per the PRODUCT.md accessibility commitment.About page (
src/app/about/page.tsx)metadata; the avatar is the only client island.@martinl5, a short blurb, GitHub profile and LinkedIn links (owner-selected), and a back link to the terminal.fixed inset-0 overflow-y-auto) since the root layout pinsbodytooverflow: hidden.SocialIcons.tsx) because lucide-react dropped brand icons.Verification
/aboutprerenders static (○ /aboutin the route table).next dev+ curl (HTTP 200, correct title, both links present) and rasterized the rendered SVG to visually verify the character.https://claude.ai/code/session_01RQVRtRAigoNCzJc37A5Ses
Generated by Claude Code