UStackUStack
GitCity icon

GitCity

GitCity macht deine öffentliche GitHub-Commit-Historie zu einer interaktiven isometrischen 3D-Stadt, inklusive einbettbarem SVG für README & Portfolio.

GitCity

Was ist GitCity?

GitCity wandelt die GitHub-Commit-Historie eines Nutzers in eine interaktive isometrische 3D-Stadt um. Die Kernidee: Jeder Tag mit öffentlichen Beiträgen wird zu einem „Gebäude“, wobei die Commit-Aktivität die Höhe bestimmt – so kannst du deine Aktivität visuell erkunden statt als Gitter.

Es richtet sich an GitHub-Nutzer, die Beitragsdaten ansprechender präsentieren wollen – z. B. durch Einbetten eines SVGs in ein README oder Developer-Portfolio – ohne manuelle Einrichtung jenseits der Eingabe eines GitHub-Benutzernamens.

Wichtige Funktionen

  • Interaktive isometrische 3D-Stadt aus GitHub-Beiträgen: Baut eine Skyline basierend auf öffentlicher Beitragstätigkeit auf, damit Muster auf einen Blick erkennbar sind.
  • Fahr-Simulation der Stadt: Enthält einen Simulationsmodus, in dem du die Stadt „Straßenebene“ navigierst, um die Skyline räumlich zu betrachten.
  • Themenwechsel (6 Themen): Bietet thematische Designs wie Matrix, Noir, Aurora, Ocean, Gold und Ice für unterschiedliche optische Vorlieben.
  • Zeitfilter nach Jahr, Monat oder Woche: Ermöglicht Einschränkung der Visualisierung auf bestimmte Zeiträume statt nur einer vollständigen Historie.
  • Einbettbarer SVG für GitHub-READMEs und Portfolios: Erzeugt einen SVG zum Einbetten in Developer-Profile und Projektseiten.
  • Null-Konfiguration über GitHub-Benutzernamen: Holt öffentliche Beitragsdaten automatisch mit dem eingegebenen Benutzernamen – minimale Einrichtung.

So nutzt du GitCity

  1. Öffne GitCity und gib deinen GitHub-Benutzernamen ein.
  2. GitCity lädt deine öffentlichen Beitragsdaten und rendert die Stadt, wobei Tage mit Commits als Gebäude erscheinen.
  3. Nutze Themensteuerungen, um das Aussehen zu ändern, und Filtersteuerungen, um dich auf ein Jahr, Monat oder Woche zu fokussieren.
  4. Zum Teilen: Verwende die Option für einbettbaren SVG, um ein Embed für dein GitHub-README oder Developer-Portfolio zu erzeugen.
  5. (Optional) Wechsle in den Simulationsmodus und fahre durch die Stadt, um sie auf Straßenebene zu erkunden.

Anwendungsfälle

  • Visualisierung im persönlichen GitHub-README: Betten den generierten SVG in ein README ein, um Beitragsaktivität als 3D-Skyline statt statischem Diagramm zu zeigen.
  • Portfolio-Präsentation: Füge die Stadtvisualisierung auf einer Developer-Portfolio-Seite hinzu für einen schnellen Überblick über Coding-Aktivität.
  • Zeitraum-Analyse (monatlich oder wöchentlich): Filtere nach Monat oder Woche, um Veränderungen im Beitragsvolumen in kürzeren Perioden zu prüfen.
  • Ästhetische Aktivitätsgeschichte: Wechsle Themen (z. B. Noir oder Aurora) für Präsentationen auf Projektseiten oder Social-Profilen.
  • Erkundender „Spaziergang“ durch Beiträge: Nutze den Simulationsmodus, um die Stadt zu navigieren und Muster in der Commit-Dichte visuell zu deuten.

FAQ

  • Welche Daten verwendet GitCity? GitCity lädt öffentliche GitHub-Beitragsdaten für den eingegebenen Benutzernamen.

  • Wie bildet GitCity Commits auf die 3D-Stadt ab? Laut Seite wird jeder Tag mit Commits zu einem Gebäude, und je mehr Commits, desto höher der Turm.

  • Kann ich die Visualisierung auf einen bestimmten Zeitraum beschränken? Ja. GitCity bietet Filter für Jahr, Monat oder Woche.

  • Kann ich die Visualisierung auf anderen Seiten einbetten? Ja. GitCity liefert einen einbettbaren SVG für GitHub-READMEs und Developer-Portfolios.

  • Muss ich etwas außer dem GitHub-Benutzernamen konfigurieren? Die Seite beschreibt die Einrichtung als null Konfiguration abgesehen von der Eingabe eines GitHub-Benutzernamens.

Alternativen

  • GitHub-Beitragsvisualisierungen (2D-Heatmaps/Diagramme): Statt 3D-Stadt und Simulation zeigen diese Alternativen Beiträge als Gitter oder Diagramme; einfacher, aber weniger räumlich.
  • Portfolio/Statische GitHub-Stats-Widgets: Tools für Badges oder statische Zusammenfassungen sind leichter einbettbar, bieten aber meist keine Fahrerfahrung durch die Stadt oder zeitlich begrenzte 3D-Ansicht.
  • Eigene Visualisierung aus GitHub-API-Daten: Ein DIY-Ansatz erzeugt maßgeschneiderte Visuals (inkl. 3D), verlagert aber Einrichtung und Wartung auf den Nutzer statt null-Konfigurations-Workflow.