Add circular reveal animation for theme transitions#21
Merged
Conversation
- Create new /contact page with email and social links - Add contact navigation item to top nav (keyboard shortcut: 6) - Display full URLs in monospace font with arrow prefix - Includes email, LinkedIn, GitHub, and X (Twitter) links Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Display contact links as terminal commands: \`$ open <url>\` - Add subtle container with muted border and background - Style command prompt \`$\` in accent color - Color-code 'open' command keyword - Underline URLs on hover for better interactivity - More developer-oriented feel matching terminal/CLI aesthetic Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Restore the introduction paragraph above the terminal-style commands - Maintains context while keeping the shell command aesthetic Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Show humorous comment below LinkedIn link on hover - "unfortunately i still need this platform" appears with smooth animation - Styled as a code comment matching the terminal aesthetic - Uses Framer Motion for height/opacity animation Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Move onMouseEnter/onMouseLeave to parent wrapper - Hover area now includes both the link row and the comment - Prevents jitter when comment appears/disappears Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Use same flex layout for comment as commands - \`#\` now aligns with \`$\` at the start - Consistent visual indentation across all lines Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Show comment below GitHub link on hover - "idek if this has dms so don't reach out here but check out my commit history maps" - Same smooth animation and styling as LinkedIn easter egg Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Create ContactLink component to handle individual link rendering - Accept optional easterEgg prop for comments - Simplify page.tsx by removing duplicated state and animation logic - Makes it easy to add more easter eggs in the future Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Wrap comment in Link to same URL as parent link - Add hover color transition for feedback - Comments are now fully interactive Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add blinking cursor at end of easter egg comments - Add hover background highlight for better interactivity - Style looks like text being actively typed in terminal - Cursor animates to feel more dynamic and "live" Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Text reveals character by character like live typing (1.5s animation) - Cursor is now a terminal-style block character - Cursor blinks in sync with typing animation - Uses CSS steps() for smooth character reveal effect - Monospace font for authentic terminal feel Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Reduce animation duration from 1.5s to 0.8s - Reduce steps from 100 to 45 for jerkier appearance - Each character now appears more distinctly - Faster, choppier typing effect Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Remove hover background highlight - Remove rounded styling - Comment stays subtle and blends in - Still clickable but doesn't feel pressable Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Fix flash bug where text showed fully then disappeared - Use Framer Motion for initial hidden state - Add randomized CSS keyframes for natural typing feel - Char reveal intervals vary (2.5%-6%) instead of uniform - Feels more human-like and less mechanical Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Generate random keyframes each time easter egg is revealed - Each step reveals 1-5% of text width (truly random, not predetermined) - Keyframes are injected dynamically into DOM - Every hover gets unique, unpredictable typing pattern - Feels more natural and different each time Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Use Date.now() + random ID for guaranteed unique animation names - Remove and recreate style element each time (not just update) - Add cleanup to prevent memory leaks - Add console logging to verify animations are regenerating - Each hover now guaranteed to have different typing pattern Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Randomize number of steps (15-29) for each animation - Each step fills 1-5% of width (independently random) - Different animations reach 100% with different intervals and fills - Some animations fast (fewer big steps), others slower (more smaller steps) - Each hover now has noticeably different typing pattern Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Generate random increments (1-5%) for each step - Normalize all increments so they sum to exactly 100% - Create keyframes with cumulative widths - Now properly scales: low increment % animations reach 100% in more steps - High increment % animations reach 100% quickly - Each animation visibly different with correct pacing Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
…rlap With 6 nav items, the page title overlaps the leftmost tabs on medium screens. Switching to the mobile hamburger layout at <1024px gives the nav enough breathing room. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Escape apostrophes in JSX text content to satisfy react/no-unescaped-entities lint rule. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Use the View Transitions API with a radial-gradient mask to animate theme changes as an expanding circle from the toggle button. Gracefully falls back to instant swap in unsupported browsers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
|
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
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
Test plan
tkeyboard shortcut — same behavior🤖 Generated with Claude Code