Problem:

Currently, contributor badges inside the BadgeModal are static. Users cannot export or share their open-source achievements (points, rank, merged PRs) to external networks like LinkedIn or X/Twitter.

Proposed Feature:

Add a "Share Achievements" button in BadgeModal.tsx that dynamically compiles a premium, downloadable sharing card containing the contributor's GitHub avatar, stats, and unlocked badges on the client-side.

Suggested Approach:

• Card Compiler: Use browser-native HTML5 Canvas or html-to-image client-side to generate a PNG of the stats card dynamically.
• Sharing Flow: Trigger a direct download of the image, and use navigator.share (Web Share API) on mobile for easy sharing.
• Assets: Include Recode Hive branding, username, PR counts, and icons of unlocked badges.

Why this is valuable:

• Gives contributors a verified asset to showcase in their portfolios/resumes.
• Creates a natural word-of-mouth marketing funnel on LinkedIn/X to attract new open-source contributors.

Files affected:

• src/components/dashboard/LeaderBoard/BadgeModal.tsx
• src/utils/cardGenerator.ts [NEW]

Maintainers, if this is a valid issue, please assign under gssoc26.