Merge dev into main: redesign, projects, timeline, contact, and fixes#28
Merged
Merge dev into main: redesign, projects, timeline, contact, and fixes#28
Conversation
- Replace turquoise/blue palette with warm earth tones + orange accent - Remove sidebar, add centered top navigation with keyboard shortcuts - Simplify home page to minimal intro with links - Consolidate components into components/common/ folder - Rename all files to kebab-case - Add page transitions with framer-motion - Add ShortcutTooltip component with sliding nav indicator - Add shadcn kbd component for keyboard hints - Update ESLint: enforce 2-space indent, kebab-case filenames - Enable system theme preference Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add 1-hour revalidate to Notion fetch calls for server-side caching - Warm quotes cache in background on every page load so /quotes loads instantly Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace horizontal scroll nav on mobile with hamburger menu - Add animated two-line hamburger icon that morphs to X - Create slide-in mobile menu with smooth fade animation - Add sticky page titles on mobile that stay in header while scrolling - Disable keyboard shortcut tooltips on touch devices - Add useIsTouchDevice hook for centralized touch detection - Update all pages to use new PageTitle component Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Use screen width instead of touch detection to determine when to show tooltips, fixing false positives on Macs with multi-touch trackpads. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Switching to Vercel for builds - no longer need scheduled GitHub Actions for Notion content syncing. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove GitHub Actions/Pages references from CLAUDE.md and README.md - Remove quotes-hash.txt from .gitignore (no longer used) - Remove redundant cache warming from layout.tsx (ISR handles this) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Delete unused Radix toast system (toast.tsx, toaster.tsx, use-toast.ts) - Remove unused useIsTouchDevice hook - Clean up unused Sonner variant styles - Add GPTSlopToast to layout Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create PageWrapper component with title, subtitle, and children props - Update quotes, blogs, timeline, and projects pages to use PageWrapper - Remove redundant timeline-header.tsx and project-header.tsx - Fix timeline sticky header issue with overflow-hidden on mobile wrapper - Make timeline colors more soothing (use foreground instead of primary) - Include linter formatting fixes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Links animate out in reverse order on close - Faster exit timing (0.1s vs 0.15s) - Container waits for links to animate before fading Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Pages now slide in from the direction you're navigating (carousel style). Uses spring physics with subtle scale for a natural feel. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Mobile now just fades in. Desktop uses origin-top to prevent upward drift from scale animation. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add GitHub Actions workflow for PRs to main/dev - Add tsc script to package.json - Add "page" variant to PageTitle for PageWrapper Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Refactor: UI improvements, CI setup, and Vercel migration
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Remove redundant CI trigger on push
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Move dev tag to top left
Resolve conflict: keep indicator fix, accept ThemeToggle extraction. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Fix nav indicator animation when scrolled
* Hide shortcut tooltip when theme dropdown is open and use direct React imports
Fix the "press t" tooltip showing behind the theme dropdown by passing
dropdown open state to ShortcutTooltip's new disabled prop. Also replace
all `import * as React from "react"` with direct named imports across
the codebase.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Auto-close theme dropdown on mouse leave with 100ms buffer
Also fix tooltip disabled behavior to keep Tooltip mounted (using
open={false}) instead of unmounting it, which was causing the dropdown
to reset its state.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Refactor theme toggle to use Radix DropdownMenu
Replace custom dropdown implementation with Radix DropdownMenu, which
natively handles click-outside, escape key, focus management, and
keyboard navigation. ThemeToggle now owns its tooltip internally via a
shortcut prop, eliminating state lifting through TopNav.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix dropdown z-index, hover style, and alignment
Bump dropdown z-index above nav, use subtle muted hover instead of
saturated accent, align dropdown to start (left) of trigger, and
disable modal overlay for proper pointer events.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
* Extend sticky page title catch effect to desktop The mobile sticky title (scrolls with page, catches in the nav bar) now works on all screen sizes. Removed the dual mobile/desktop rendering split in PageTitle — one sticky element for all viewports. Made the nav background transparent on desktop so the title bar shows through when caught. Also fixed the nav indicator not following the active tab by adding pathname to the useLayoutEffect dependency array. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Sticky page title on desktop + fix theme dropdown on mobile Move sticky positioning from PageTitle into PageWrapper so PageTitle stays a pure typography component and home page is unaffected. Make TopNav transparent on desktop so the page title slides into the nav row. Fix theme dropdown not opening on mobile by guarding hover handlers with pointerType check, and align dropdown to end on mobile. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
* Fix blog page animations to slide in from right, back to left (#15) Detect navigation direction based on path depth for routes within the same section. When navigating deeper into routes (list → detail), use right direction. When navigating back (detail → list), use left direction. This creates a more natural page swipe animation for blog navigation. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * Fix scrollbar shimmer when navigating between blogs Add scrollbar-gutter: stable to reserve space for scrollbars even when not visible, preventing layout shift when scrollbars appear/disappear during page transitions. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
* Add contact page with minimalist URL-based design - 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> * Redesign contact page with shell command aesthetic - 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> * Add intro text back to contact page - 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> * Add LinkedIn easter egg to contact page - 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> * Fix LinkedIn easter egg hover jitter - 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> * Align easter egg comment indentation with $ prompts - 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> * Add GitHub easter egg to contact page - 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> * Extract ContactLink component to reuse easter egg logic - 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> * Shorten GitHub easter egg message Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * Make easter egg comments clickable - 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> * Style comments like active terminal text with blinking cursor - 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> * Add character-by-character typing animation with block cursor - 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> * Make typing animation more char-by-char and snappy - 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> * Make easter egg comments quiet links - 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 typing animation initial render and add randomized character timing - 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> * Implement truly randomized typing animation - 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> * Fix randomization - ensure truly unique animations each hover - 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> * Implement truly variable typing animations - 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> * Fix animation width scaling - normalize increments to reach 100% - 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> * Remove debug console logs Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * Refactor keyframe generation to use Array.from and reduce * Swap X and LinkedIn order, add 'no spam pls' easter egg to email * Bump nav desktop/mobile breakpoint from md to lg to prevent title overlap 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> * Fix unescaped apostrophes in contact page text Escape apostrophes in JSX text content to satisfy react/no-unescaped-entities lint rule. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
* Add contact page with minimalist URL-based design - 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> * Redesign contact page with shell command aesthetic - 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> * Add intro text back to contact page - 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> * Add LinkedIn easter egg to contact page - 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> * Fix LinkedIn easter egg hover jitter - 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> * Align easter egg comment indentation with $ prompts - 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> * Add GitHub easter egg to contact page - 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> * Extract ContactLink component to reuse easter egg logic - 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> * Shorten GitHub easter egg message Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * Make easter egg comments clickable - 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> * Style comments like active terminal text with blinking cursor - 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> * Add character-by-character typing animation with block cursor - 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> * Make typing animation more char-by-char and snappy - 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> * Make easter egg comments quiet links - 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 typing animation initial render and add randomized character timing - 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> * Implement truly randomized typing animation - 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> * Fix randomization - ensure truly unique animations each hover - 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> * Implement truly variable typing animations - 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> * Fix animation width scaling - normalize increments to reach 100% - 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> * Remove debug console logs Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * Refactor keyframe generation to use Array.from and reduce * Swap X and LinkedIn order, add 'no spam pls' easter egg to email * Bump nav desktop/mobile breakpoint from md to lg to prevent title overlap 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> * Fix unescaped apostrophes in contact page text Escape apostrophes in JSX text content to satisfy react/no-unescaped-entities lint rule. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * Add circular reveal animation for theme transitions 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> --------- Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
Replace ComingSoon placeholder with a real projects showcase using stacked cards, tech stack badges, and native tweet embeds via react-tweet. Theme overrides ensure the tweet embed matches the site's warm light/dark palette. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ticky title Increases nav height to h-20 on desktop (h-14 on mobile). Adds StickyTitleProvider context so TopNav renders bg-background on pages without a sticky page title (e.g. blog posts), preventing content from clashing through the transparent nav. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Pages with sticky titles show gradient only when title is stuck (detected via IntersectionObserver). Pages without sticky titles always show gradient below the nav. Uses child div instead of pseudo-element on nav to avoid position:relative overriding position:sticky. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace pseudo-element gradient in PageWrapper with child div to match TopNav's approach. Remove lg:h-20 desktop override now that gradient fades make the extra breathing room unnecessary. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Shows contribution activity with a note about NDA'd company work, linked to GitHub profile. Separated from project list with dividers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add projects page with GitHub calendar
…postrophe (#24) Co-authored-by: Cursor <cursoragent@cursor.com>
- Fix projects/timeline transition sliding from wrong side (nav order mismatch) - Extract nav items to shared lib/nav-config.ts for single source of truth - TopNav and NavigationProvider now both import from nav-config Co-authored-by: Cursor <cursoragent@cursor.com>
…ibility Co-authored-by: Cursor <cursoragent@cursor.com>
fix: correct page transition direction and centralize nav config
- Keep comment inline in terminal with fixed-height slot - Reserve same space for all links (with or without easter egg) - No layout shift when comment appears on hover Co-authored-by: Cursor <cursoragent@cursor.com>
fix(contact): prevent open line shift, even spacing between links
- Keep dev's Next.js 16.1.6 and lint/tsc scripts - Remove check-quotes script (no longer needed with direct Notion API + ISR) Co-authored-by: Cursor <cursoragent@cursor.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
PR to merge all
devchanges intomain. This PR includes the merge commit resolving conflicts withmain.Features
Infrastructure & content
notion.ts, caching and background prefetchFixes
Merge conflicts resolved
Docs
Note: This replaces PR #27. The original PR couldn't be updated directly because
devis a protected branch.Made with Cursor