Skip to content

Dev - #33

Merged
kirito666coder merged 2 commits into
mainfrom
dev
Jul 3, 2026
Merged

Dev#33
kirito666coder merged 2 commits into
mainfrom
dev

Conversation

@kirito666coder

@kirito666coder kirito666coder commented Jul 3, 2026

Copy link
Copy Markdown
Owner

Summary by CodeRabbit

  • New Features

    • Added a richer About page with a hero section, scrolling marquee, skills showcase, timeline, bento-style content blocks, and a footer.
    • Introduced interactive motion effects across the page, including hover-responsive buttons, scroll-based reveals, parallax movement, and animated text.
  • Refactor

    • Rebuilt the About page from a single static layout into a composition of reusable sections for a more polished, dynamic experience.

- Replaced the existing bento grid implementation in PremiumBentoGrid with GSAP animations for improved interactivity.
- Updated the SkillsConstellation component to simplify the skills display and removed the complex SVG connections.
- Refactored the About page to utilize the new HeroSection, JourneyTimeline, PremiumBentoGrid, and SkillsConstellation components for better organization and readability.
- Introduced a new MagneticButton component for enhanced button interactions with mouse movement effects.
@vercel

vercel Bot commented Jul 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
blog-web Error Error Jul 3, 2026 5:05pm

@kirito666coder
kirito666coder merged commit 43628c1 into main Jul 3, 2026
1 of 4 checks passed
@coderabbitai

coderabbitai Bot commented Jul 3, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1c0e5d55-6a7f-47ab-9b6a-481cfb570dc2

📥 Commits

Reviewing files that changed from the base of the PR and between 1379967 and 6569e22.

⛔ Files ignored due to path filters (1)
  • web/public/images/Doma.png is excluded by !**/*.png
📒 Files selected for processing (8)
  • web/src/app/about/components/Footer.tsx
  • web/src/app/about/components/HeroSection.tsx
  • web/src/app/about/components/JourneyTimeline.tsx
  • web/src/app/about/components/MagneticButton.tsx
  • web/src/app/about/components/PremiumBentoGrid.tsx
  • web/src/app/about/components/ScrollMarquee.tsx
  • web/src/app/about/components/SkillsConstellation.tsx
  • web/src/app/about/page.tsx

📝 Walkthrough

Walkthrough

This PR adds seven new GSAP-animated React components for an About page (Footer, HeroSection, JourneyTimeline, MagneticButton, PremiumBentoGrid, ScrollMarquee, SkillsConstellation) and refactors about/page.tsx to compose them, replacing the previous hardcoded SpanBox/rotated-text layout.

Changes

About Page Components

Layer / File(s) Summary
Magnetic hover button
web/src/app/about/components/MagneticButton.tsx
New component wrapping a next/link with GSAP-driven magnetic hover motion based on mouse position, resetting on mouse leave.
Hero section with reveal and parallax
web/src/app/about/components/HeroSection.tsx
Renders "About Me" hero layout with GSAP reveal animation on mount and mousemove-driven parallax on background/image elements; includes a MagneticButton CTA.
Infinite scroll marquee
web/src/app/about/components/ScrollMarquee.tsx
Renders duplicated text blocks that continuously translate via requestAnimationFrame, adjusting speed/direction from scroll delta.
Scroll-triggered bento grid
web/src/app/about/components/PremiumBentoGrid.tsx
Renders a responsive card grid with GSAP ScrollTrigger fade/translate animations per card and a MagneticButton in one card.
Journey timeline animations
web/src/app/about/components/JourneyTimeline.tsx
Renders three hard-coded career entries with staggered scroll-triggered GSAP animations for items and timeline dots.
Skills list section
web/src/app/about/components/SkillsConstellation.tsx
Renders a heading and mapped list of technology tags from a hardcoded array.
Footer with scroll-linked heading
web/src/app/about/components/Footer.tsx
Renders contact/social links and a large heading animated via a scroll-linked GSAP fromTo tween.
About page composition
web/src/app/about/page.tsx
Replaces the previous SpanBox/rotated-text layout with imports and rendering of HeroSection, ScrollMarquee, PremiumBentoGrid, JourneyTimeline, SkillsConstellation, and Footer, with updated wrapper styling.

Estimated code review effort: 3 (Moderate) | ~30 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant AboutPage
  participant HeroSection
  participant ScrollTrigger
  participant GSAP

  User->>AboutPage: loads /about
  AboutPage->>HeroSection: render
  HeroSection->>GSAP: gsap.context reveal animation
  User->>HeroSection: mousemove
  HeroSection->>HeroSection: apply parallax transform
  AboutPage->>ScrollTrigger: PremiumBentoGrid/JourneyTimeline/Footer register triggers
  User->>ScrollTrigger: scrolls page
  ScrollTrigger->>GSAP: play card/timeline/footer animations
  GSAP-->>User: rendered scroll-linked animation
Loading

Possibly related PRs

  • kirito666coder/blog#31: Both PRs modify web/src/app/about/page.tsx's layout, with PR #31 introducing the SpanBox-based split-screen layout that this PR replaces.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch dev

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot mentioned this pull request Jul 26, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant