[FEATURE]: Add Shareable Developer Card with PNG Export & Social Sharing

[arpit2006]

📌 Feature Summary

Introduce a Shareable Developer Card feature that generates a visually appealing developer profile card based on GitHub data. Users can download the card as a PNG image and share it directly on social platforms such as LinkedIn and X (Twitter).

This feature will allow developers to showcase their GitHub presence, achievements, and activity in a professional and shareable format.

---

🚨 Problem Statement

Currently, GitHub Spy provides repository and profile analytics, but users cannot easily share their GitHub insights with others.

There is no way to:

• Create a professional developer summary card.
• Download profile statistics as an image.
• Share GitHub achievements on social platforms.
• Showcase GitHub activity in a visually appealing format.

This limits the social and portfolio-building value of the platform.

---

💡 Proposed Solution

Create a dedicated Developer Card Generator that transforms GitHub profile data into a modern shareable card.

The card should be generated dynamically using the fetched GitHub profile information and provide options for downloading and sharing.

---

✨ Suggested Features

🎨 Developer Card Design

Display key profile information:

• Avatar
• Name
• Username
• Bio
• Followers & Following
• Public Repositories
• Total Stars
• Most Used Language
• GitHub Join Date

📥 PNG Export

• Download the generated card as a PNG image.
• High-quality export suitable for social media and portfolios.

🔗 Social Sharing

Quick-share buttons for:

• LinkedIn
• X (Twitter)

🌈 Theme Support

• Light Mode
• Dark Mode
• Multiple card styles/templates

📱 Responsive Design

• Mobile-friendly generation and sharing experience.

---

📊 Example Card Content

John Doe
Full Stack Developer

⭐ Total Stars: 1,245
📦 Repositories: 87
👥 Followers: 320
💻 Top Language: TypeScript

github.com/johndoe

---

✅ Benefits

• Improves user engagement.
• Encourages social sharing and platform visibility.
• Provides developers with a portfolio-ready asset.
• Makes GitHub analytics more interactive and useful.
• Enhances the overall user experience.

---

🛠️ Possible Implementation

• Use html-to-image or html2canvas for PNG generation.
• Create reusable card templates with React components.
• Integrate LinkedIn and X share URLs.
• Support downloadable assets directly from the browser.

---

📋 Acceptance Criteria

• Users can generate a developer card from GitHub profile data.
• Card displays key profile statistics.
• PNG download functionality works across devices.
• LinkedIn sharing is supported.
• X (Twitter) sharing is supported.
• Card supports both light and dark themes.
• Responsive layout for mobile and desktop.

Please assign this issue to me under GSSoC!

[Nareshkumawat-star]

/assign

[ANU5565]

Hi @arpit2006,

This is a fantastic feature request! Introducing a Shareable Developer Card will significantly boost user engagement and give developers a sleek, professional asset to showcase on LinkedIn and X.

I would love to collaborate on this or help implement it. Here is a quick Plan of Action for how we can approach the development:

1. Frontend & UI Design (React Components)
   Component Layout: Build a reusable, highly polished component that dynamically maps the fetched GitHub profile data (Avatar, Bio, Stars, Top Languages, etc.).

Theme & Templates: Use Tailwind CSS to implement both Light/Dark modes and create a couple of distinct modern styles/variants.

Responsiveness: Ensure the card scales cleanly on both mobile views and desktop dashboards before export.

2. Image Generation (PNG Export)
   Library Integration: Utilize html-to-image (or html2canvas) to target the card component's DOM node and convert it cleanly into a high-resolution Blob/Data URL.

Trigger: Add a discrete "Download PNG" button that initiates the browser download directly.

3. Social Sharing Integration
   Web Intent URLs: Implement dynamic sharing triggers using platform-specific intent links:

X (Twitter): https://twitter.com/intent/tweet?text=[Custom_Text]&url=[Profile_Link]

LinkedIn: https://www.linkedin.com/sharing/share-offsite/?url=[Profile_Link]

Fallbacks: Since social platforms don't always allow direct image injection via simple query params, we can guide users to download the image or generate a public shareable URL if the backend supports hosting it.

Looking forward to your thoughts on this approach!