This repository was archived by the owner on Jun 26, 2026. It is now read-only.
Extract page into 13 reusable components#1
Open
ctrlswing wants to merge 6 commits into
Open
Conversation
- Extract TopNavigation, FloatingBottomNav, HeroSection, SectionHeader, StepCard, TerminalQuoteWindow, SkillCard, ProofCard, FloatingGlowOrb, CTAButton, FooterHero, SocialIconLink from monolithic page.tsx - Upgrade SkillCard to use next/image with Unsplash photos - Harden ScrollReveal with try/catch, IO feature detection, retry logic - Add reveal-delay and float animation CSS utilities - Update metadata and fonts in layout.tsx - Configure next/image for Unsplash remote patterns - page.tsx reduced from 696 to 230 lines Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
CSS: - .gradient-text: 3-stop gradient (accent → #FF9A85 → white) matching SD - .gradient-border-glow: mask-based border technique instead of z-index - .card-shimmer: position-based animation matching SD keyframes - .cta-glow:hover: stop animation on hover, show stronger static glow - .step-number: bounceStep keyframe with group/step hover - .reveal: use cubic-bezier(0.4, 0, 0.2, 1) easing matching SD - .terminal-line: parent .terminal-active class pattern instead of per-line - .newsletter-input: #FF9A85 gradient + border-color transparent on focus - Add missing: .nav-separator, .social-glow, view transitions CSS Markup: - How It Works heading: md:text-7xl (was md:text-6xl lg:text-7xl) - Steps card: add group transition-all duration-500 - Skills label: "Claude Code Plugin — 2024" - Setup heading: md:text-6xl (was md:text-5xl lg:text-6xl) - $750: use gradient-text class (3-stop gradient) - Newsletter form: wrap in max-w-md container - TerminalQuoteWindow: add terminal-lines wrapper class - StepCard: use group/step for bounceStep animation - FooterHero: use gradient-text class Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Download all 5 Satoshi weights (300/400/500/700/900) as local woff2 files - Use next/font/local instead of fragile CSS @import from Fontshare CDN - Add missing weight 300 (light) used for hero slash character - Wire CSS variables properly: --font-satoshi, --font-inter, --font-jetbrains-mono all flow through next/font into Tailwind v4 theme via var() references - Remove external Fontshare @import that could fail silently in production Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Wrap page in div with overflow-x-hidden to prevent horizontal scroll from absolute-positioned glow orbs and radial gradients - Add view-transition same-origin meta tag for smooth page transitions - Both match the Superdesign draft structure Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Scraped the Unicode block-art logo animation from the production Astro build and ported it to a React client component. Added to both TopNavigation (replaces static H7) and HeroSection (above headline with 300ms delay). Co-Authored-By: Claude Opus 4.6 (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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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
page.tsx(696 lines) into 13 focused, reusable React components (~230 lines remaining in page)SkillCardfrom CSS gradient backgrounds tonext/imagewith Unsplash photosScrollRevealwith try/catch, IntersectionObserver feature detection, fallback visibility, and retry logic for async-mounted contentreveal-delay-*stagger classes andanimate-floatkeyframes to globals.cssnext.config.tsfor Unsplash remote image patternsComponents extracted
TopNavigation,FloatingBottomNav,HeroSection,SectionHeader,StepCard,TerminalQuoteWindow,SkillCard,ProofCard,FloatingGlowOrb,CTAButton,FooterHero,SocialIconLinkTest plan
🤖 Generated with Claude Code