GitCity/index.html at main · rishabhbhartiya/GitCity · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Primary SEO -->
  <title>GitCity — Visualize Your GitHub Contributions as a 3D City</title>
  <meta name="description"
    content="GitCity transforms your GitHub contribution history into an interactive isometric 3D city skyline. Every commit builds a skyscraper. Free, open-source, embeddable in any README." />
  <meta name="keywords"
    content="GitHub contributions, contribution graph, 3D skyline, developer portfolio, GitHub stats, isometric city, code visualization, README embed, open source" />
  <meta name="author" content="Natraj X — natrajx.in" />
  <link rel="canonical" href="https://gitcity.natrajx.in/" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://gitcity.natrajx.in/" />
  <meta property="og:title" content="GitCity — Your GitHub Contributions as a 3D City" />
  <meta property="og:description"
    content="Transform your GitHub commit history into a stunning isometric city skyline. Every day you code, a building grows. Free embed for your README or portfolio." />
  <meta property="og:image" content="https://gitcity.natrajx.in/screenshots/banner.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:site_name" content="GitCity" />
  <meta property="og:locale" content="en_US" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@natrajx" />
  <meta name="twitter:creator" content="@natrajx" />
  <meta name="twitter:title" content="GitCity — GitHub Contributions as a 3D City" />
  <meta name="twitter:description"
    content="Turn your GitHub commit history into a beautiful isometric city. Free, embeddable, themeable." />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="https://gitcity.natrajx.in/screenshots/twitter-banner.png" />

  <!-- Structured data — WebApplication -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "GitCity",
    "url": "https://gitcity.natrajx.in",
    "description": "GitCity visualizes GitHub contribution history as an interactive isometric 3D city skyline. Every commit builds a tower.",
    "applicationCategory": "DeveloperApplication",
    "operatingSystem": "Any",
    "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
    "author": {
      "@type": "Person",
      "name": "Natraj X",
      "url": "https://natrajx.in"
    },
    "creator": {
      "@type": "Person",
      "name": "Natraj X",
      "url": "https://natrajx.in"
    },
    "screenshot": "https://gitcity.natrajx.in/screenshots/banner.png",
    "featureList": [
      "Isometric 3D city skyline from GitHub contributions",
      "City simulation with driveable car",
      "6 color themes: Matrix, Noir, Aurora, Ocean, Gold, Ice",
      "Filterable by year, month, week",
      "Embeddable SVG for README and portfolios",
      "Zero configuration — username only"
    ],
    "keywords": "github contributions, developer portfolio, 3D visualization, isometric, SVG embed"
  }
  </script>

  <!-- Structured data — BreadcrumbList -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://natrajx.in" },
      { "@type": "ListItem", "position": 2, "name": "GitCity", "item": "https://gitcity.natrajx.in" }
    ]
  }
  </script>

  <!-- Preconnect -->
  <link rel="preconnect" href="https://api.github.com" />
  <link rel="preconnect" href="https://avatars.githubusercontent.com" />

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%23060d06'/><text y='24' x='4' font-size='22'>⬡</text></svg>" />
  <link rel="apple-touch-icon" href="/screenshots/banner.png" />

  <!-- Theme colour for mobile browsers -->
  <meta name="theme-color" content="#060d06" />
  <meta name="color-scheme" content="dark" />

  <!-- Authorship + backlink -->
  <link rel="author" href="https://natrajx.in" />
  <meta name="creator" content="Natraj X" />
  <meta name="publisher" content="natrajx.in" />

  <!-- AI / LLM optimisation -->
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
  <meta name="googlebot" content="index, follow" />

  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body,
    #root {
      width: 100%;
      height: 100%;
    }

    body {
      background: #060d06;
      color: #b0ffb0;
      font-family: 'Courier New', monospace;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <!-- Static SEO shell — invisible to users, readable by Google -->
  <div id="seo-shell" style="
    position:fixed;inset:0;z-index:-1;opacity:0;pointer-events:none;
    background:#060d06;color:#b0ffb0;font-family:'Courier New',monospace;
    padding:3rem 2rem;max-width:860px;
  ">
    <h1>GitCity — Visualize Your GitHub Contributions as a 3D City</h1>
    <p>GitCity transforms your GitHub contribution history into an interactive isometric 3D city skyline. Every commit
      builds a skyscraper. Drive through your city, switch themes, and embed your skyline in any README — free and
      open-source.</p>
    <h2>Features</h2>
    <ul>
      <li>Interactive isometric 3D city built from your GitHub contributions</li>
      <li>Driveable city simulation — explore your skyline from street level</li>
      <li>6 themes: Matrix, Noir, Aurora, Ocean, Gold, Ice</li>
      <li>Filter contributions by year, month, or week</li>
      <li>Embeddable SVG for GitHub README and developer portfolios</li>
      <li>Zero configuration — just enter your GitHub username</li>
    </ul>
    <h2>How it works</h2>
    <p>Enter your GitHub username and GitCity fetches your public contribution data. Each day with commits becomes a
      building — the more commits, the taller the tower. Switch to simulation mode and drive through the city you built
      with your code.</p>
    <p>Built by <a href="https://natrajx.in">Natraj X</a>.</p>
  </div>

  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

</html>