fix: resolve project cards flip clipping in Projects section

[madhavansingh]

Addressed Issues:

Fixes #675

Screenshots/Recordings:

Before Fix (card gets clipped during flip):

Screen.Recording.2026-03-16.at.3.02.53.PM.mov

After Fix (flip animation smooth, box no longer cut):

Screen.Recording.2026-03-16.at.3.03.16.PM.mov

Additional Notes:

This PR fixes a UI issue in the Projects section on the landing page where the project cards were getting slightly clipped from the top and bottom corners during the flip animation on hover.

The fix ensures that the card remains fully visible during the entire flip transition while keeping the existing animation style and layout unchanged. Only minimal CSS adjustments were made to prevent the box from being cut during the rotation.

AI Usage Disclosure:

• This PR does not contain AI-generated code at all.

I have used the following AI models and tools: None

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.

Summary by CodeRabbit

• Bug Fixes
  • Enhanced 3D animation and visual effect rendering by removing clipping restrictions on interactive elements. Cards now display complete animation effects during rotations and transforms without content being cut off, resulting in smoother visual transitions and improved animation quality throughout the application.

[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: a1e84dd4-36f8-4cb2-b41f-cd547a8882f0

📥 Commits

Reviewing files that changed from the base of the PR and between 84c46fd and 6fe571a.

📒 Files selected for processing (1)

• src/components/home/CardEffect.jsx

---

📝 Walkthrough

Walkthrough

Removed the overflow-hidden Tailwind class from the CardEffect component's outer animated link element to allow 3D transforms to render without edge clipping during flip animations. The element retains other styling properties and maintains all functionality.

Changes

Cohort / File(s)	Summary
Animation Clipping Fix src/components/home/CardEffect.jsx	Removed overflow-hidden class from the outer animated container to permit 3D rotation overflow during card flip transitions, resolving edge clipping visual artifact.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• Fix project card text overflow on landing page #670: Directly conflicts on the same element's overflow/clipping behavior—PR #670 adds overflow-hidden and wrapping fixes, while this PR removes overflow-hidden to enable 3D transform overflow.

Suggested reviewers

• Zahnentferner

Poem

🐰 A flip, a flip, without the clip!
No more do corners steal the trip,
Perspective flows where once was bound,
The cards now spin without a sound! ✨

🚥 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	The title clearly and specifically describes the main change: fixing the clipping issue in project card flip animations in the Projects section.
Linked Issues check	✅ Passed	The code change (removing overflow-hidden) directly addresses the clipping issue reported in #675, allowing the flipped card to display fully during the 3D rotation animation.
Out of Scope Changes check	✅ Passed	The change is narrowly focused on fixing the reported clipping issue with no unrelated modifications to logic, state, or event handling.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

CodeRabbit can use your project's `biome` configuration to improve the quality of JS/TS/CSS/JSON code reviews.

Add a configuration file to your project to customize how CodeRabbit runs biome.

[madhavansingh]

Hi @Zahnentferner

I’ve submitted a PR that fixes the clipping issue in the project cards flip animation by ensuring the box is not cut during the rotation. The change is minimal and keeps the existing animation intact.

Since I’m also preparing to contribute more actively during GSoC, I’d really appreciate your feedback on the PR. Thank you!