Skip to content

feat: implement 3D interactive badge cards#70

Merged
joelamouche merged 8 commits intomainfrom
feat/badge-3d-cards
Oct 30, 2025
Merged

feat: implement 3D interactive badge cards#70
joelamouche merged 8 commits intomainfrom
feat/badge-3d-cards

Conversation

@Teddy1792
Copy link
Collaborator

This PR introduces interactive 3D badge cards on the Badges page.

Changes

  • Added a new BadgeCard wrapper component with perspective, tilt, and hover interactions.
  • Integrated BadgeCard into BadgesList, replacing plain Card components.
  • Added support for a foreground icon layer (translateZ(180px)) to enhance the 3D effect while the rest of the content uses a shallower depth (translateZ(30px)).
  • Hooked in SVG badge icons from /public/badges.

Behavior

  • On hover, cards tilt according to cursor position (rotateX, rotateY).
  • Smooth transitions when entering/leaving the component.
  • Foreground icon “pops out” more than the rest of the card for extra depth.

Closes

Closes #64

@Teddy1792
Copy link
Collaborator Author

Simplified the different badges using only one standard icon, by-passing the need for custom hosting.

Copy link
Contributor

@joelamouche joelamouche left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some comments and suggestions

Copy link
Contributor

@joelamouche joelamouche left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay great job!

@joelamouche joelamouche enabled auto-merge (rebase) October 30, 2025 09:35
@joelamouche joelamouche merged commit dfe4b22 into main Oct 30, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement 3D Card Component for Badge Page

3 participants

Comments