Skip to content

Replace github.com with gitshow.dev in any profile URL - beautiful developer portfolios from GitHub data

License

Notifications You must be signed in to change notification settings

ofershap/gitshow

Repository files navigation

GitShow — Beautiful Developer Portfolio from Your GitHub Profile

CI TypeScript Next.js License: MIT

Your GitHub profile, but way better. Auto-generated developer portfolio with npm downloads, smart categories, tech stack, and OG social cards.

github.com/username  →  gitshow.dev/username

Replace github.com with gitshow.dev in any profile URL. No signup, no config, no deploy.

Inspired by GitMCP — same URL-swap pattern, but for developer portfolios instead of AI context.

GitShow developer portfolio preview — auto-generated from GitHub profile with npm stats and categories


See It In Action

GitHub Profile GitShow Portfolio
github.com/sindresorhus gitshow.dev/sindresorhus
github.com/torvalds gitshow.dev/torvalds
github.com/kelseyhightower gitshow.dev/kelseyhightower
github.com/ThePrimeagen gitshow.dev/ThePrimeagen

What GitHub Doesn't Show (But GitShow Does)

Feature What you see
npm downloads Total downloads/month across all your packages, with per-package bar chart
Smart categories Repos auto-grouped: MCP Servers, CLI Tools, React & UI, DevOps, i18n...
OS contributions Commits and PRs to other people's repos — what you give back to open source
Focus areas Aggregated topic cloud showing what you specialize in
Project timeline When you shipped projects — your creation velocity
Tech stack bar Visual language breakdown across all repos
Aggregate stats Projects, stars, forks, followers, npm downloads — one glanceable row
OG social card Dynamic 1200×630 image with stats and categories — looks great when shared
Share buttons One-click share to X, LinkedIn, or copy link

Forks and archived repos are automatically filtered out. Only your original work is shown.

The contributions section uses GitHub's GraphQL API to pull the last 12 months of activity. If a user contributes more to external projects than they have of their own, contributions are promoted to the top of the page.


URL Patterns

All of these work:

gitshow.dev/username                              # direct
gitshow.dev/?url=https://github.com/username      # query param
gitshow.dev/?https://github.com/username           # bare prefix

README Badge

Want your own? Add a dynamic profile card to any GitHub README — one line of markdown.

Made by ofershap

Setup

Replace YOUR_USERNAME with your GitHub username:

[![Made by YOUR_USERNAME](https://gitshow.dev/api/card/YOUR_USERNAME)](https://gitshow.dev/YOUR_USERNAME)

The card is a dynamic PNG that pulls your live GitHub stats (repos, stars, npm downloads). It updates automatically every hour via ISR caching. No tokens, no setup — just paste and go.


Architecture

Browser request
    ↓
Next.js App Router (Vercel Edge)
    ↓
GitHub REST API (/users, /repos) + GraphQL API (contributions) + npm Registry
    ↓
Auto-categorize repos + fetch OS contributions + npm stats
    ↓
Server-rendered portfolio page
    ↓
ISR cache (1 hour TTL)
Component Role
Next.js 16 App Router, Server Components, ISR
React 19 Zero client JS on portfolio pages (except share/expand)
Tailwind CSS 4 Dark theme, responsive layout
Vercel OG Dynamic social preview image generation (Satori)
GitHub REST API Profile + repos data, cached with revalidate: 3600
GitHub GraphQL API Open source contributions (last 12 months)
npm Registry Package search + download counts per maintainer

GEO & LLM Readiness

GitShow is optimized for both traditional search engines and AI-powered search (ChatGPT, Perplexity, Claude, Gemini):

Signal Implementation
llms.txt Structured context file at /llms.txt for LLM inference
AI crawler access robots.txt explicitly allows GPTBot, ClaudeBot, PerplexityBot, Google-Extended
Schema.org JSON-LD SoftwareApplication with featureList, FAQPage, ProfilePage, Person, BreadcrumbList
OpenGraph + Twitter Dynamic per-profile OG images and meta descriptions
SSR All content server-rendered — no JS required for AI crawlers
Canonical URLs Every profile has a canonical https://gitshow.dev/{username}
Sitemap Auto-generated with featured profiles

Deploy Your Own

One-click Vercel deploy

Deploy with Vercel

Or clone and run locally

git clone https://github.com/ofershap/gitshow.git
cd gitshow
npm install
npm run dev    # → http://localhost:3000

Environment Variables

Variable Required Description
GITHUB_TOKEN No GitHub PAT for higher rate limits (60/hr → 5,000/hr)

Tip: Without a token, the GitHub API allows 60 requests/hour per IP. If you're deploying publicly, add a token to avoid rate limiting.


Project Structure

public/
├── llms.txt                        # LLM context file for AI search engines
src/
├── app/
│   ├── page.tsx                    # Landing page — URL swap animation, search
│   ├── layout.tsx                  # Root layout — dark theme, fonts
│   ├── robots.ts                   # Robots config with AI crawler rules
│   ├── sitemap.ts                  # Auto-generated sitemap
│   ├── [username]/
│   │   ├── page.tsx                # Portfolio page (SSR + ISR)
│   │   ├── loading.tsx             # Spinner while loading
│   │   ├── error.tsx               # Error boundary (rate limit, etc.)
│   │   └── not-found.tsx           # 404 for invalid usernames
│   └── api/
│       ├── og/[username]/
│       │   └── route.tsx           # OG social card (1200×630 PNG)
│       └── card/[username]/
│           └── route.tsx           # README badge (920×112 PNG, 2x retina)
├── components/
│   ├── hero-card.tsx               # Avatar, name, bio, aggregate stats + npm
│   ├── category-section.tsx        # Auto-grouped repos with expand/collapse
│   ├── contributions-card.tsx      # OS contributions with smart positioning
│   ├── npm-card.tsx                # npm download stats with bar chart
│   ├── tech-stack.tsx              # Language breakdown bar + legend
│   ├── topic-cloud.tsx             # Weighted focus areas cloud
│   ├── activity-graph.tsx          # Project creation timeline
│   ├── share-bar.tsx               # Share to X, LinkedIn, copy link
│   ├── social-links.tsx            # GitHub, Twitter, LinkedIn, website
│   ├── json-ld.tsx                 # Schema.org structured data (FAQ, App, Profile)
│   ├── url-swap.tsx                # Animated URL swap (landing page)
│   ├── username-input.tsx          # Search input (landing page)
│   └── footer.tsx                  # Attribution
├── lib/
│   ├── github.ts                   # GitHub REST + GraphQL API client
│   ├── npm.ts                      # npm registry API client
│   ├── categorize.ts               # Smart repo categorization engine
│   ├── types.ts                    # TypeScript interfaces
│   └── utils.ts                    # formatNumber, timeAgo, getTopRepos
└── proxy.ts                        # URL redirect handler

Development

npm run dev      # Dev server → localhost:3000
npm run build    # Production build
npm run lint     # ESLint

Author

Made by ofershap

LinkedIn GitHub

License

MIT © Ofer Shapira

About

Replace github.com with gitshow.dev in any profile URL - beautiful developer portfolios from GitHub data

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

 
 
 

Contributors