feat: enhance homepage interactivity with hover effects and dynamic c…

[kirito666coder]

…lass handling; update footer text and journey timeline details

Summary by CodeRabbit

• New Features

  • Added hover-based highlighting on the home page, with sections now subtly dimming and blurring when other areas are active.
  • Updated the home page’s lower headline area with a more interactive, section-based layout.
  • Refreshed the About page timeline content and footer text.
  • Changed the background music track and slightly brightened the non-dark 3D model lighting.

• Bug Fixes

  • Improved text rendering in the footer and simplified the scrolling marquee for smoother display.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
blog-web	Building	Preview, Comment	Jul 5, 2026 10:52am

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1d9345a7-444c-4c2d-b860-8e6f6e00e64b

📥 Commits

Reviewing files that changed from the base of the PR and between 43628c1 and dc202e7.

⛔ Files ignored due to path filters (1)

• web/public/SLVG.mp3 is excluded by !**/*.mp3

📒 Files selected for processing (7)

• web/src/app/(root)/page.tsx
• web/src/app/about/components/Footer.tsx
• web/src/app/about/components/JourneyTimeline.tsx
• web/src/app/about/components/ScrollMarquee.tsx
• web/src/components/global-music.tsx
• web/src/components/model/displacement-sphere.tsx
• web/src/store/app-store.ts

---

📝 Walkthrough

Walkthrough

Adds a homePageHover state field and setter to the app store, and applies it in the homepage component to add hover-driven blur/scale/opacity styling across the header, actions, and headline sections. Also updates JourneyTimeline placeholder content, ScrollMarquee animation/rendering logic, Footer text, global music source, and ambient light intensity.

Changes

Homepage hover-driven UI

Layer / File(s)	Summary
Store state and setter for hover tracking web/src/store/app-store.ts	Adds homePageHover: string | null field and setHomePageHover action to the app store, initialized to null.
Home page hover state and getClass helper web/src/app/(root)/page.tsx	Wires useAppStore into Home and introduces getClass(id) to compute blur/opacity classes based on the active hover target.
Header/logo/actions hover wrappers web/src/app/(root)/page.tsx	Wraps Logo and action elements (blogs, about, theme toggle, sign-in, logged-in/admin area) with mouse enter/leave handlers and getClass-driven scale/opacity, and alters the admin link's role-guard condition.
Headline section split into hoverable blocks web/src/app/(root)/page.tsx	Replaces the static headline h1/TextIntro sequence with three separately hoverable blocks ("tech blogs 2026", "Coding", "Logs") using mouse handlers and getClass styling.

About page content and marquee updates

Layer / File(s)	Summary
Timeline placeholder content replacement web/src/app/about/components/JourneyTimeline.tsx	Replaces specific job/organization/date details in timeline items 1–3 with generic lorem/placeholder content and removes a labeling comment.
Footer apostrophe entity fix web/src/app/about/components/Footer.tsx	Changes a raw apostrophe in rendered footer text to the escaped HTML entity I'm.
ScrollMarquee animation and rendering rework web/src/app/about/components/ScrollMarquee.tsx	Removes inline prop comments, types currentDirection, rewrites the scroll-delta-based animation loop, adjusts transform string formatting, guards animation-frame cancellation in cleanup, and removes the duplicate cloned text block from the render.

Miscellaneous unrelated tweaks

Layer / File(s)	Summary
Global music track source change web/src/components/global-music.tsx	Changes the Audio source from a previous track to /SLVG.mp3.
Ambient light intensity adjustment web/src/components/model/displacement-sphere.tsx	Increases AmbientLight intensity for the non-dark theme branch from 0.2 to 0.4.

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

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant HomePage
  participant AppStore

  User->>HomePage: mouse enter on section (e.g. Logo, Blogs, Coding)
  HomePage->>AppStore: setHomePageHover(id)
  AppStore-->>HomePage: homePageHover updated
  HomePage->>HomePage: getClass(id) recompute blur/opacity/scale for all sections
  HomePage-->>User: render hovered section highlighted, others blurred
  User->>HomePage: mouse leave
  HomePage->>AppStore: setHomePageHover(null)
  AppStore-->>HomePage: homePageHover cleared
  HomePage-->>User: render all sections normal

Loading

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

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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