Add Gradient Glow Hover Effect to Project Cards

[Riyanshverma]

Summary

This PR implements a visually appealing "glow on hover" effect for the project cards on the Projects page. The effect combines a gradient box shadow and a slight scale-up transformation, with colors sourced from the existing website theme to ensure consistency in both light and dark modes.

Details

• Added a gradient box-shadow and scale transform on card hover.
• The glow color adapts to light (green) and dark (yellow) themes.
• Enhances the user experience and visual appeal of the Projects section.

Screenshots

Related Issue

Closes #461

Summary by CodeRabbit

• Style
  • Improved Card component visual feedback with smooth hover transitions, scaling effects, and dynamic shadow rendering compatible with both light and dark color modes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@Riyanshverma is attempting to deploy a commit to the AOSSIE Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Enhanced the Card component in projects page by adding Tailwind CSS utilities for interactive hover effects, including smooth transitions, scale transformation, and shadow changes in both light and dark modes.

Changes

Cohort / File(s)	Summary
Card Hover Effects src/pages/projects.jsx	Added group hover utilities and transitions to Card component className: group, transition-all, duration-300, ease-in-out, hover:scale-105, and conditional hover shadows for normal and dark themes

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A card that glows when hover's near,
With gentle scale and shadows clear,
Smooth transitions through the dark and light,
Each hover brings a pure delight! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a gradient glow hover effect to project cards, which matches the PR objectives and code changes.
Linked Issues check	✅ Passed	The PR implements the hover effect for cards as required by issue #461, with gradient glow and scale-up transform on hover using theme-aware colors.
Out of Scope Changes check	✅ Passed	All changes are scoped to adding hover effects to project cards in src/pages/projects.jsx, directly addressing issue #461 without unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

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.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/pages/projects.jsx (1)

36-42: Border color conflict between Tailwind and MUI styles.

The dark:border-white class on line 36 conflicts with the borderColor: '#3c982c' set in the sx prop on line 41. MUI's sx prop typically has higher CSS specificity, so the border will likely remain green in dark mode, rendering the Tailwind class ineffective.

Apply this diff to remove the redundant class:

-            className={`dark:bg-[#2A2A2A] dark:border-white group transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[0_0_15px_3px_rgba(50,168,82,0.7),0_0_48px_8px_rgba(255,255,0,0.2)] dark:hover:shadow-[0_0_15px_3px_rgba(255,255,0,0.7),0_0_48px_8px_rgba(50,168,82,0.2)]`}
+            className={`dark:bg-[#2A2A2A] group transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[0_0_15px_3px_rgba(50,168,82,0.7),0_0_48px_8px_rgba(255,255,0,0.2)] dark:hover:shadow-[0_0_15px_3px_rgba(255,255,0,0.7),0_0_48px_8px_rgba(50,168,82,0.2)]`}

Alternatively, if you want a white border in dark mode, set it via the sx prop instead:

             sx={{
               height: 400,
               borderRadius: 2,
               border: '1px solid',
-              borderColor: '#3c982c',
+              borderColor: { xs: '#3c982c', dark: 'white' },

🧹 Nitpick comments (2)

src/pages/projects.jsx (2)

36-46: Consider consolidating to a single styling approach.

The Card component mixes Tailwind utilities in className with MUI's sx prop, which can lead to style conflicts (as seen with the border) and make the component harder to maintain. While both approaches work, consolidating styles improves consistency and reduces debugging complexity.

Option 1: Move all styles to MUI sx prop:

           <MuiCard
-            className={`dark:bg-[#2A2A2A] dark:border-white group transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[0_0_15px_3px_rgba(50,168,82,0.7),0_0_48px_8px_rgba(255,255,0,0.2)] dark:hover:shadow-[0_0_15px_3px_rgba(255,255,0,0.7),0_0_48px_8px_rgba(50,168,82,0.2)]`}
             sx={{
               height: 400,
               borderRadius: 2,
               border: '1px solid',
               borderColor: '#3c982c',
               boxShadow: '0px 4px 4px #00000040',
               backdropFilter: 'blur(4px) brightness(100%)',
               display: 'flex',
               flexDirection: 'column',
+              bgcolor: { dark: '#2A2A2A' },
+              transition: 'all 0.3s ease-in-out',
+              '&:hover': {
+                transform: 'scale(1.05)',
+                boxShadow: '0 0 15px 3px rgba(50,168,82,0.7), 0 0 48px 8px rgba(255,255,0,0.2)',
+                '.dark &': {
+                  boxShadow: '0 0 15px 3px rgba(255,255,0,0.7), 0 0 48px 8px rgba(50,168,82,0.2)',
+                },
+              },
             }}
           >

Option 2: Extract hover styles to a constant for readability while keeping Tailwind.

---

36-36: Extract long className to a constant for readability.

The 247-character className string on line 36 reduces readability. Consider extracting it to a named constant.

+const cardHoverClasses = `
+  dark:bg-[#2A2A2A] 
+  group 
+  transition-all duration-300 ease-in-out 
+  hover:scale-105 
+  hover:shadow-[0_0_15px_3px_rgba(50,168,82,0.7),0_0_48px_8px_rgba(255,255,0,0.2)] 
+  dark:hover:shadow-[0_0_15px_3px_rgba(255,255,0,0.7),0_0_48px_8px_rgba(50,168,82,0.2)]
+`.replace(/\s+/g, ' ').trim();
+
 // Define the Cards component here
 const Cards = () => {
   const router = useRouter();

Then use it:

-            className={`dark:bg-[#2A2A2A] dark:border-white group transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[0_0_15px_3px_rgba(50,168,82,0.7),0_0_48px_8px_rgba(255,255,0,0.2)] dark:hover:shadow-[0_0_15px_3px_rgba(255,255,0,0.7),0_0_48px_8px_rgba(50,168,82,0.2)]`}
+            className={cardHoverClasses}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dfb8668 and 7fd0177.

📒 Files selected for processing (1)

• src/pages/projects.jsx (1 hunks)

🔇 Additional comments (1)

src/pages/projects.jsx (1)

36-36: Verify hover effect behavior on touch devices.

The hover effects (scale and glow) may not provide the intended user experience on mobile/tablet devices where hover states are triggered by tap rather than pointer movement. Users on touch devices might see a brief flash of the effect or miss it entirely.

Test the effect on mobile devices and consider wrapping hover-specific styles in a @media (hover: hover) query to only apply them on devices with true hover capability:

-            className={`dark:bg-[#2A2A2A] dark:border-white group transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[0_0_15px_3px_rgba(50,168,82,0.7),0_0_48px_8px_rgba(255,255,0,0.2)] dark:hover:shadow-[0_0_15px_3px_rgba(255,255,0,0.7),0_0_48px_8px_rgba(50,168,82,0.2)]`}
+            className={`dark:bg-[#2A2A2A] dark:border-white group transition-all duration-300 ease-in-out md:hover:scale-105 md:hover:shadow-[0_0_15px_3px_rgba(50,168,82,0.7),0_0_48px_8px_rgba(255,255,0,0.2)] dark:md:hover:shadow-[0_0_15px_3px_rgba(255,255,0,0.7),0_0_48px_8px_rgba(50,168,82,0.2)]`}

Or test with Tailwind's @media (hover: hover) support if configured in your project.