Back to Blog

This post is also available in 中文.

Introducing GitHubCard: Showcase Your GitHub Profile and Projects

We are thrilled to introduce GitHubCard—a visualization platform built for developers, allowing your GitHub data to be presented in a more elegant and personalized way.

In the open source world, an excellent project needs more than solid code—it needs outstanding presentation. Have you ever felt disappointed by the generic preview images when sharing GitHub project links on social media? When embedding your GitHub profile on your personal website or blog, do you find the official options too monotonous?

GitHubCard was born to solve these problems.

Why Do You Need GitHubCard?

Traditional GitHub sharing methods have many limitations:

  • Lack of Visual Impact: Default link previews often show just simple text and the GitHub logo, failing to catch attention
  • Limited Information Display: Unable to highlight key project metrics like Star count, language distribution, or activity levels
  • Difficult Customization: Want personalized displays? You either manually create images or use third-party tools—both processes are tedious with limited results
  • Inconvenient Embedding: Embedding GitHub information in personal websites, README files, or tech blogs often requires complex API calls and style adjustments

GitHubCard was created to address these pain points. We believe every developer deserves the best way to showcase their work.

Core Features: Two Card Generators

1. GitHub Profile Card - Personal Card Generator

Imagine your GitHub profile transformed into an elegant digital business card, containing your avatar, bio, statistics, and social links—all information at a glance.

See the Difference:

When shared on social media like Twitter, the default preview looks like this: Default Preview

With GitHubCard (githubcard.com/sxyazi), it looks like this: GitHubCard Preview

Key Features:

  • Complete Personal Information Display: Automatically fetches your GitHub avatar, username, and bio
  • Real-time Statistics: Repository count, followers, following—dynamically updated
  • Social Information Integration: Company, location, email, website, Twitter account, and more
  • SVG Vector Format: Crystal clear at any scale, perfectly adapted to all screens
  • Secure Avatar Embedding: Uses Base64 encoding to ensure images display correctly in any environment

Use Cases:

  • Display GitHub profile on your personal website's "About Me" page
  • Embed personal card in tech blog author introduction sections
  • Get better preview effects when sharing your GitHub homepage on social media
  • Present open source contributions visually in resumes or portfolios

2. GitHub Repo Card - Project Showcase Card

Every open source project deserves its own showcase card. Repo Card makes your projects more attractive when shared.

See the Difference:

Default social media preview: Default Repo Preview

With GitHubCard (githubcard.com/Cactusinhand/filter-repo-rs), it looks like this: GitHub Repo Card

Key Features:

  • Core Project Information: Repository name, description, primary programming language
  • Key Metrics Display: Star count, Fork count, Issue count—showing project popularity at a glance
  • Language Distribution Visualization: Intuitively displays the project's tech stack
  • Instant Embedding Support: Generated SVG can be directly embedded in any webpage or Markdown document

Use Cases:

  • Add an elegant project card at the top of your project README
  • Provide visual displays when referencing open source projects in technical articles
  • Highlight project information on project documentation website homepages
  • Get more professional preview images when sharing projects on social media

Canvas Visual Editor: Full Customization Power

Every developer has unique aesthetics and needs. Our powerful visual canvas editor allows you to fully customize every detail of your cards without writing a single line of code.

Canvas Editor

Canvas Editor Features

Intuitive Drag-and-Drop Design:

  • No coding required—design cards through intuitive drag-and-drop operations
  • Real-time preview effects—what you see is what you get
  • 25 professional Widget components including:
    • Profile Widgets: Avatar, Bio, Profile Details, Streak, Top Repos
    • Stats Widgets: Comprehensive Stats, Language Bar, Language Donut
    • Repository Widgets: Title, Description, Metrics, License, Topics, Links, Status
    • Data Visualization: Star History, Code Frequency, Commits Weekly, Contributors, Contribution Heatmap
    • Utility Widgets: Text, GitHub Logo
  • Flexible layer management for precise control of element stacking
  • Smart guides and alignment tools for pixel-perfect layouts

Visual Capabilities:

The canvas editor lets you flexibly choose different sizes and place various data widgets:

  • Star History: Visualize repository growth over time
  • Code Frequency: Show code additions and deletions
  • Language Distribution: Display tech stack breakdown
  • Contributors: Highlight team members
  • Custom Layouts: Arrange components freely

Canvas Features 1 Canvas Features 2 Canvas Features 3

Rich Preset Layouts:

  • Minimal Layout (800×400): Minimalist style, suitable for quick generation
  • Detailed Layout (1200×900): Detailed display with more data dimensions
  • Social Media Layout (1200×630): Optimized aspect ratio for social media
  • All layouts can serve as starting points for deep customization

Powerful Export & Sharing:

  • Powerful Export & Sharing:
  • Support for both SVG and PNG formats
  • Generated designs can be saved and get dedicated short links
  • Secure Storage: Log in with GitHub to ensure only you can modify your designs
  • Access your custom designs through URL parameters
  • Set default designs for automatic OG image generation
  • Publish designs with OG compatibility validation (1200×630)

Built for Performance

GitHubCard is built on Cloudflare Workers, leveraging serverless edge computing technology.

  • Edge Computing: Logic runs on Cloudflare Workers for low latency
  • Fast Loading: Images are served from edge locations close to your visitors
  • Reliability: Benefiting from Cloudflare's global infrastructure
  • Vector Quality: SVG format ensures clear visuals on any screen size

Get Started

Ready to make your GitHub profile stand out? It's as simple as changing a URL:

For Profile Cards:

  • Original: https://github.com/your-username
  • Designer: GitHub profile card generator
  • GitHubCard: https://githubcard.com/your-username
  • Edit: https://githubcard.com/your-username/card/edit

For Repository Cards:

  • Original: https://github.com/owner/repo
  • Designer: GitHub repo card generator
  • GitHubCard: https://githubcard.com/owner/repo
  • Edit: https://githubcard.com/owner/repo/card/edit

Embed in README:

![GitHubCard](https://githubcard.com/your-username.svg)
![Repo Card](https://githubcard.com/owner/repo.svg)

Start creating beautiful GitHub cards now.

GitHubCard - Showcase Your GitHub, Stand Out Everywhere

Website: githubcard.com

Twitter: @githubcard

YouTube: @githubcard

Turn this into a card

Turn the ideas from this article into an editable GitHub profile card, repo card, or README section.

Create repo cardOpen profile designer