GitHub Cards

Inspired by the need for developers to showcase their work visually, GitHub Cards transforms GitHub profiles into beautiful, shareable images. The app lets you quickly access key GitHub metrics and present them in three elegant layouts. With just a username, instantly visualize repositories, languages, contributions, and other essential stats in a format perfect for portfolios, presentations, or social media.

Try it yourself

Launch DemoGithub Repo
GitHub Cards Application Overview

APIs

The GitHub Cards project leverages GitHub's public REST API to retrieve and visualize user data. This free API allows fetching profile information, repositories, languages, and pull requests with endpoints. The API has a rate limit of 60 requests per hour for unauthenticated usage, which is sufficient for this application's basic functionality.

Three Elegant Layouts

Classic Layout

The Classic Layout presents GitHub user data in a visually clean card format with profile info at the top and colorful stat boxes for key metrics below.

  • Profile summary with avatar and bio
  • Programming language distribution
  • Repository highlights and contribution graph
GitHub Cards Classic Layout
GitHub Cards Terminal Layout

Terminal Layout

The Terminal Layout presents GitHub data in a nostalgic command-line interface style, with syntax highlighting and command prompts.

  • Syntax-highlighted data presentation
  • Command-line aesthetic with directory tree
  • Perfect for developers who appreciate the CLI

Receipt Layout

The Receipt Layout transforms GitHub stats into a creative digital receipt format, complete with itemized "purchases" of programming languages.

  • Narrow, vertical receipt format
  • Languages as "purchased items" with percentages
  • Mock barcode and receipt elements for a unique touch
GitHub Cards Receipt Layout

Tech Stack

Next.js

TypeScript

TailwindCSS

GitHub API

html-to-image

React Icons