Drop this into any GitHub README, portfolio, or blog post:

[![My GitCity Skyline](https://gitcity.natrajx.in/api/svg?u=YOUR_USERNAME)](https://gitcity.natrajx.in/YOUR_USERNAME)

GitCity fetches your entire GitHub contribution history via the GitHub GraphQL API and renders it as:

No personal access token required. Enter your username and go.

Six handcrafted themes — switch instantly:

Theme	Preview
Matrix
Noir
Aurora
Ocean
Gold
Ice

The SVG embed API is dynamic — it re-renders from live GitHub data on each request.

![GitCity](https://gitcity.natrajx.in/api/svg?u=YOUR_USERNAME)

![GitCity Noir](https://gitcity.natrajx.in/api/svg?u=YOUR_USERNAME&theme=noir)

Available themes: matrix · noir · aurora · ocean · gold · ice

<a href="https://gitcity.natrajx.in/YOUR_USERNAME">
  <img src="https://gitcity.natrajx.in/api/svg?u=YOUR_USERNAME&theme=aurora"
       alt="My GitHub Skyline" width="100%" />
</a>

<iframe
  src="https://gitcity.natrajx.in/YOUR_USERNAME"
  width="100%" height="500"
  frameborder="0"
  title="GitHub Contribution Skyline">
</iframe>

Just go to gitcity.natrajx.in/YOUR_USERNAME — no setup needed.

# 1. Clone
git clone https://github.com/natrajx/gitcity
cd gitcity

# 2. Install
npm install

# 3. Set your GitHub token (for API calls)
echo "GITHUB_TOKEN=ghp_your_token_here" > .env.local

# 4. Run locally
vercel dev          # uses /api serverless functions
# OR
npm run dev         # Vite only (no API — use hosted API instead)

# 5. Deploy to Vercel
vercel --prod

Three files live in public/ and are served directly from the site root:

Why public/? Vite copies everything in public/ verbatim into dist/ at build time, so these files are served at the bare URL with no routing involved — exactly what crawlers and search engines expect.

gitcity/
├── public/                           # ← Static files served at site root
│   ├── robots.txt                    #   gitcity.natrajx.in/robots.txt
│   ├── sitemap.xml                   #   gitcity.natrajx.in/sitemap.xml
│   └── llms.txt                      #   gitcity.natrajx.in/llms.txt
├── api/
│   ├── contributions/[username].js   # Serverless: GitHub GraphQL proxy
│   └── og/[username].js              # Serverless: SVG generator for embeds
├── index.html                        # Root HTML with SEO/OG meta
├── src/
│   ├── App.jsx                       # Auth flow, URL params
│   ├── components/ContributionGraph3D/
│   │   ├── ContributionGraph3D.jsx   # Main graph component + filters
│   │   ├── IsometricGrid.jsx         # SVG isometric 3D skyline
│   │   ├── CitySimulation.jsx        # Three.js driveable city
│   │   ├── BirdsEyeGrid.jsx          # Heatmap view
│   │   └── Building.jsx              # Individual isometric building
│   ├── constants/
│   │   └── themes.js                 # 6 colour themes
│   └── hooks/
│       └── useGitHubData.js          # Data fetching hook
├── vercel.json                       # Routing rules
└── vite.config.js

• React 18 — UI
• Vite 5 — build
• Three.js r128 — city simulation (WebGL)
• SVG — isometric skyline (pure, embeddable)
• GitHub GraphQL API — contribution data
• Vercel — hosting + serverless

PRs welcome. Open an issue first for major changes.

git checkout -b feat/your-feature
# make changes
git commit -m "feat: your feature"
git push origin feat/your-feature
# open PR → main

GitCity is free and open-source — no login, no paywall, no token required.

If it made your README cooler or your portfolio stand out, consider buying me a coffee. It goes directly toward hosting costs, GPU time for experiments, and building more free tools like this one.

Built by Rishabh Bhartiya — ML Engineer & full-stack developer. 3 years turning research-grade ideas into production systems at scale.

• 🌐 Portfolio: rishabhbhartiya.natrajx.in
• 💼 Projects: rishabhbhartiya.natrajx.in/projects
• ✍️ Writing: rishabhbhartiya.natrajx.in/blog
• 🐙 GitHub: @rishabhbhartiya
• ☕ Ko-fi: ko-fi.com/rishabhbhartiya

If GitCity is useful to you, a ⭐ on the repo and a mention helps a lot.

Is this the same as thegitcity.com?
No — completely different. See COMPARISON.md for the full breakdown.

MIT © Rishabh Bhartiya — free to use, modify, and distribute.