Add hover effect in projects card

[Yashvi005-bit]

Addressed Issues:

Fixes #461

Screenshots/Recordings:

Hover.effect.mp4

Additional Notes:

✨Changes made

1. Added yellow box-shadow glow on hover
2. Slightly zoom effect on hover
3. Effect works consistently for all project cards

🎯 Purpose

Improves visual feedback and user interaction while keeping the existing design intact.

🧪 Testing

• Verified hover effect works on all cards
• Layout remains unchanged
• Works in both light and dark modes

Checklist

• My PR addresses a single issue, fixes a single bug or makes a single improvement.
• My code follows the project's code style and conventions
• If applicable, I have made corresponding changes or additions to the documentation
• If applicable, I have made corresponding changes or additions to tests
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contribution Guidelines
• Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.

⚠️ AI Notice - Important!

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.

Summary by CodeRabbit

• New Features
  • Project cards now feature enhanced hover interactions with smooth animations, including subtle scaling and golden accent styling for improved visual feedback.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds hover interactions to project cards in src/pages/projects.jsx. Cards now smoothly transition properties over 0.3 seconds and, when hovered, scale up slightly, change border color to gold, and apply a gold glow shadow effect.

Changes

Cohort / File(s)	Summary
Project Card Hover Effects src/pages/projects.jsx	Added CSS hover state with 0.3s transitions, scale transformation, gold border color, and gold glow box-shadow.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

✨ A hover effect, shiny and bright,
Cards glow in gold, a gleaming sight!
Scale and shimmer, smooth as can be,
Projects now sparkle for all to see! 🐰

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add hover effect in projects card' directly describes the main change in the pull request: adding hover interactions to project cards.
Linked Issues check	✅ Passed	The pull request implements the hover effect requirement from issue #461, adding hover interactions with scaling, border color change, and glow shadow to project cards.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objective of adding hover effects to project cards; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/pages/projects.jsx (1)

46-52: Scope the transition and add z-index to prevent overlap; consider keyboard accessibility.

A few observations on the hover effect:

1. transition: 'all' is unnecessarily broad — it will animate every property change (including layout shifts). Specify only the properties you intend to animate.
2. scale(1.05) in a grid can cause the hovered card to visually overlap its neighbors. Elevate it with zIndex on hover.
3. No :focus-visible state — keyboard-only users won't see this visual feedback at all.
4. The hover boxShadow completely replaces the base shadow (0px 4px 4px Feature : When user scrolls down. Icon, Menu Bar, and Dark Mode Icon will be disabled along with the scrolling. #40``). If you want to keep the elevation feel, layer both shadows.

♻️ Suggested improvement

-              transition: 'all 0.3s ease-in-out',
-
-              '&:hover': {
-                transform: 'scale(1.05)',
-                borderColor: '#FFD700',
-                boxShadow: '0 0 20px rgba(255, 215, 0, 0.7)',
-              },
+              transition: 'transform 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out',
+
+              '&:hover, &:focus-visible': {
+                transform: 'scale(1.05)',
+                zIndex: 1,
+                borderColor: '#FFD700',
+                boxShadow: '0px 4px 4px `#00000040`, 0 0 20px rgba(255, 215, 0, 0.7)',
+              },

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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 and usage tips.}