fix/ Fixes issue of project card routing and makes the cards more interactive

[Swap-24]

Addressed Issues:

Fixes #726

Fixed the project cards in the landing page of the website so that clicking on them directly navigates the user to the corresponding project link. Also took a little bit of stylistic liberty to add a hover/focus interaction where the hovered card becomes slightly larger while the other cards become slightly smaller and move away, making the project section feel more interactive. Also ensured safety by opening external project links in a new tab with noopener noreferrer.

Screenshots/Recordings:

After the fix:
https://github.com/user-attachments/assets/28d5a83b-d820-4cfa-a31c-5142d9d89695

Additional Notes

1. Used the project links included in the src/helper/projects.js and passed them as props inside the CardEffect component in src/app/pages.jsx
2. Added link animations using the famer-motion on the next/link component

• [ x] This PR does not contain AI-generated code at all.
• This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

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.
• I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Project cards in the “Our Projects” section now track hover and keyboard focus, with the active card scaling up while other cards subtly dim and shift for clearer visual emphasis.
  • Cards now support direct navigation via an associated link, including external links that open safely in a new tab.

• Bug Fixes

  • Improved consistency of keyboard and mouse interactions so card highlighting behaves reliably across hover and focus states.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 55bd13dc-5d78-4581-bb97-2a5d8c668a0b

📥 Commits

Reviewing files that changed from the base of the PR and between 9bc1c87 and 34dea2d.

📒 Files selected for processing (1)

• src/components/home/CardEffect.jsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/home/CardEffect.jsx

---

📝 Walkthrough

Walkthrough

Adds hoveredProjectIndex state to the Home page and updates project card rendering to compute per-card hover values and pass link/animation props into CardEffect. CardEffect now uses a Framer Motion-wrapped next/link root with hover-based animation and external link handling.

Project Card Hover & Navigation

Layer / File(s)	Summary
CardEffect: MotionLink, hover props, animation src/components/home/CardEffect.jsx	Replaces motion.a with MotionLink (Framer Motion + next/link), adds href, isHovered, isDimmed, offSetDirection props, derives target/rel for external links, and updates animate/transition to support scale, x/y offset, and z-index per hover state.
Home page: hover state and card wiring src/app/page.jsx	Adds hoveredProjectIndex state initialized to null and rewrites the randomProjects map to set that state on mouse/focus events, derive per-card hover flags, and pass href plus hover props into CardEffect.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• AOSSIE-Org/Website#670: Also changes src/components/home/CardEffect.jsx in the same project-card area.
• AOSSIE-Org/Website#678: Also modifies CardEffect.jsx’s animated wrapper element and related styling.

Suggested reviewers

• Zahnentferner

Poem

🐇 A card once sat without a trail,
Now links and hover set the sail.
With gentle offsets, bright and neat,
Each project card has found its feet.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Title is concise and accurately reflects the project-card routing and interactivity changes.
Linked Issues check	✅ Passed	The changes add href-based links to project cards so each card navigates to its project page, matching #726.
Out of Scope Changes check	✅ Passed	The added hover and focus effects plus external-link handling support the stated card-interaction goal and stay in scope.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

🧹 Nitpick comments (1)

src/app/page.jsx (1)

222-235: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Keyboard/touch users get the scale effect but never the card flip.

The new onFocus/onBlur handlers drive the hover scale state, but the card’s face flip is bound to group-hover only (in CardEffect.jsx). So keyboard and touch users can focus/navigate a card yet never see the back-face description. Since the cards are now interactive links, consider adding a group-focus/group-focus-within variant to the flip transform so the description is reachable without a mouse.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/page.jsx` around lines 222 - 235, The card flip in CardEffect is only
triggered by the mouse hover state, so keyboard/touch users can focus the link
but never reveal the back face. Update the flip behavior in CardEffect.jsx to
also react to focus-based states by adding a group-focus or group-focus-within
variant alongside group-hover, and make sure the link wrapper in
src/app/page.jsx supports that focus state so the description is reachable
without a mouse.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/app/page.jsx`:
- Around line 222-235: The card flip in CardEffect is only triggered by the
mouse hover state, so keyboard/touch users can focus the link but never reveal
the back face. Update the flip behavior in CardEffect.jsx to also react to
focus-based states by adding a group-focus or group-focus-within variant
alongside group-hover, and make sure the link wrapper in src/app/page.jsx
supports that focus state so the description is reachable without a mouse.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7184573d-bf3a-41ae-8ba2-fed93000e087

📥 Commits

Reviewing files that changed from the base of the PR and between 895772c and 9bc1c87.

📒 Files selected for processing (2)

• src/app/page.jsx
• src/components/home/CardEffect.jsx