Pro-HintergrundReact
facebook/react
01Die GitHub-Kartenwerkstatt
GitHub-Profil-README-Generator
GitHubCard ist ein GitHub-Profil-README-Generator mit Drag-and-drop. Kombiniere Statistiken, Projekte und Aktivitäten in einer Karte.
aus aktuellen GitHub-Daten gerendertExport → SVG / PNG · 1200 × 630
02Das Problem
Ersetze mehrere README-Einbettungen durch einen GitHubCard-Link.
In einer selbst geschriebenen Profil-README können Statistiken, Sprachen, Beitragsserien, Aktivitäten und Fähigkeiten sechs Einbettungen, fünf Dienste und Dutzende URL-Parameter erfordern. GitHubCard stellt dieselben aktuellen Daten in einem Design dar. Deine README braucht nur einen Link.
README.md
@@ -1,29 +1,6 @@# Hi, I'm Alex 👋Full-stack developer building useful products.<!-- Profile and repository stats --><!-- Top languages --><a href="https://github.com/you?tab=repositories"><img height="165" src="https://github-readme-stats.vercel.app/api/top-langs?username=you&layout=compact&theme=tokyonight" alt="Top languages" /></a><!-- Commit streak --><p align="center"><img width="48%" src="https://streak-stats.demolab.com?user=you&theme=tokyonight&hide_border=true" alt="Commit streak" /></p><!-- Contribution heatmap (light / dark) --><picture><source media="(prefers-color-scheme: dark)" srcset="https://ghchart.rshah.org/2f81f7/you" /><img src="https://ghchart.rshah.org/40c463/you" alt="Contribution heatmap" /></picture><!-- Activity graph -->[](https://github.com/you)<!-- Tech skills -->## Featured projects
# Hi, I'm Alex 👋Full-stack developer building useful products.## Featured projects
03Widgets
Eine Auswahl an Komponenten.
GitHub-Statistiken, Beitrags-Heatmaps, Commit-Serien, Sprachen, Technologien, Top-Repositories und Star History. Wähle die Komponenten aus, platziere sie und lege ein gemeinsames Design fest.
8 von über 20 Widgets · zum Anhalten mit der Maus darüberfahren
Sprachen-Ringdiagramm
Sprachen-Rangliste als Balken
Profilstatistiken
Beitragsserien-Statistiken
Beitrags-Heatmap
Star-Trends
Repository-Commits
Repository-Codefrequenz
Sprachen-Ringdiagramm
Sprachen-Rangliste als Balken
Profilstatistiken
Beitragsserien-Statistiken
Beitrags-Heatmap
Star-Trends
Repository-Commits
Repository-Codefrequenz
04So funktioniert es
Drei Schritte, ohne Einrichtung.
Derselbe Ablauf wie im Editor: Karte wählen, gestalten und veröffentlichen.
05Echte Karten
Echte Repositories, ein Kartensystem.
Echte GitHubCard-Karten öffentlicher Repositories, täglich aktualisiert. Drei davon nutzen einen Pro-Hintergrund.
Pro-HintergrundÖffnen
Vite
vitejs/vite
Pro-Hintergrundshadcn/ui
shadcn-ui/ui
Supabase
supabase/supabase
Ollama
ollama/ollama
Pro-Hintergrunduv
astral-sh/uv
Im Einsatz →chris-grieser.decodes.oeiuwq.comwilliams.science/resourcesvon Hand geprüfte Seiten mit eingebetteter GitHubCard
Repository-Karte erstellen06Vergleich
Eine Arbeitsfläche im Vergleich zu Spezialwerkzeugen.
Vergleiche Bearbeitung, Ergebnis und Wartungsaufwand.
01Fazit
Arbeitsablauf
Bei GitHubCard findet alles auf einer Arbeitsfläche statt, von der Gestaltung bis zur fertigen Karte.
- GitHubCard
- Layout, Daten und Widgets werden im selben Ablauf bearbeitet.
- Spezialwerkzeuge
- Spezialwerkzeuge verteilen Einstellungen auf mehrere Generatoren.
Visueller EditorEine ArbeitsflächeWeniger Zusammenbauen
02Fazit
Ergebnis
Das Ergebnis ist eine Karte mit einheitlichem Design.
- GitHubCard
- Profil-, Repository- und Statistik-Komponenten nutzen dasselbe visuelle Design.
- Spezialwerkzeuge
- Andere Werkzeuge exportieren meist getrennte Karten, Diagramme oder URLs.
Einheitlicher StilFertige ZusammenstellungBereit zum Export
03Fazit
Wartung
Weniger Abhängigkeiten bedeuten weniger Tokens, geplante Aufgaben und manuelle Aktualisierungen.
- GitHubCard
- Karten werden anhand von GitHub-Daten mit vorhersehbarem Cache-Verhalten aktualisiert.
- Spezialwerkzeuge
- Zuverlässigkeit hängt oft von Hosting, geplanten Aufgaben oder API-Limits ab.
Weniger EinrichtungAutomatische AktualisierungKlare Grenzen
Dieser Vergleich behandelt Werkzeugkategorien und keine einzelnen Marken.
07Preise
Kostenlos starten. Für Pro einmal bezahlen.
Kostenlos gestalten und ansehen. Pro Lifetime kostet einmalig 19 US-Dollar und bietet Premium-Hintergründe, Premium-Schriften sowie Exporte ohne Wasserzeichen und in 4×-Auflösung. Kein Abo.
Einmalige Zahlung · Kein Abo · 7 Tage Geld-zurück-Garantie. Alle Preise ansehen
08Fragen
Fragen vor dem Veröffentlichen.
Was ist GitHubCard?
GitHubCard ist ein visueller GitHub-Profil-README-Generator. Ordne GitHub-Daten zu Profil- und Repository-Karten an und nutze sie in einer README, im Portfolio oder in sozialen Beiträgen.
Wie nutze ich GitHubCard?
Ersetze github.com in einer Profil- oder Repository-URL durch githubcard.com, etwa githubcard.com/torvalds oder githubcard.com/facebook/react. Öffne den Editor, um die Karte anzupassen.
Muss ich mich anmelden?
Standardkarten kannst du ohne Anmeldung ansehen. Melde dich mit GitHub an, um eigene Designs zu speichern, zu veröffentlichen, zu bearbeiten oder zu löschen.
Wie bette ich eine Karte in meine README ein?
Kopiere die SVG-URL (z. B. githubcard.com/username.svg) und füge sie als Bild in deine Markdown-Datei ein. Die Karte zeigt aktuelle GitHub-Daten.
Wie erstelle ich eine GitHub-Profil-README?
Erstelle ein Repository mit deinem GitHub-Benutzernamen und füge eine README.md hinzu. GitHub zeigt sie auf deinem Profil an, wenn das Repository öffentlich und richtig benannt ist.
Anleitung zur GitHub-Profil-READMEWerden die Karten automatisch aktualisiert?
Ja. Karten zeigen aktuelle GitHub-Daten. Wir nutzen einen Cache für bessere Leistung; Änderungen können daher bis zu einer Stunde brauchen.
Kann ich meine Karten anpassen?
Ja. Ziehe über 20 Daten-Widgets in den Editor, passe das Layout an und exportiere SVG oder PNG.
Ist GitHubCard kostenlos?
Die Kernfunktionen sind kostenlos. Pro Lifetime kostet einmalig 19 US-Dollar ohne Abo und bietet Premium-Hintergründe und -Schriften sowie Exporte ohne Wasserzeichen und in hoher Auflösung (4×).
Starte, wann du willst
Gestalte deine Karte. So, wie du willst.
Öffne die Arbeitsfläche, füge deine GitHub-Daten hinzu und erstelle eine Karte für deine README oder Website.