Der einfachste Weg, um loszulegen, besteht darin, unsere Website zu besuchen, auf der Sie Ihre Karte live anpassen und vorschauen können.
https://github-readme-tech-stack.vercel.app
Als Entwickler ist es wichtig, Ihr Fachwissen in verschiedenen Technologien potenziellen Mitarbeitern und Arbeitgebern zu präsentieren. Mit GitHub-Readme-Tech-Stack können Sie problemlos eine visuelle Darstellung der in Ihrem Github-Repository verwendeten Technologien erstellen und in Ihr Profile-Readme aufnehmen. Dies kann Ihnen helfen, sich von anderen aufzuheben und die Aufmerksamkeit anderer aufzuziehen, die Entwickler mit bestimmten Fähigkeiten suchen.
Die Bilder sind vollständig anpassbar, sodass Sie die Technologien auswählen können, die Sie präsentieren möchten, und sogar die Farben, Symbole und die Ausrichtung an Ihre persönliche Marke anpassen.
Persönlich wollte ich immer meine Fähigkeiten auf saubere und moderne Weise zeigen. Ich konnte das nur mit den Abzeichen tun, aber sie passten nicht zu dem Stil der Github-Readme-Streak-Stats und der Github-Readme-Stats. Mit Github-Readme-Tech-Stack ist das kein Problem mehr, es passt natürlich zu diesen Karten!
profile README .svg -Symbole hochladen und verwenden, wenn sie noch nicht existieren.Keiner der Felder ist erforderlich. Jeder Abfrageparameter hat einen Standardwert, der unten aufgeführt ist.
| Parameter | Beispiel | Standardwert | Beschreibung |
|---|---|---|---|
| Titel | title=My%20Title | Mein Tech -Stack | Der Titel der Karte. %20 kann als Raum genutzt werden. |
| Thema | theme=github_dark | Github | Das Thema der Karte. Sie können hier zwischen den Themen stöbern. |
| ausrichten | align=center | links | Die Ausrichtung der Abzeichen. ( left , center , right ) |
| Titlealign | align=center | links | Die Ausrichtung des Titels. ( left , center , right ) |
| Showborder | showBorder=false | WAHR | Zeigen Sie den Rand um die Karte an oder nicht. ( true , false ) |
| Hidetitle | hideTitle=true | FALSCH | Zeigen Sie den Titel der Karte an oder nicht. ( true , false ) |
| HideBg | hideBg=true | FALSCH | Wenn wahr, setzt der Hintergrund transparent. ( true , false ) |
| Borderradius | borderRadius=12.5 | 4.5 | Nummer zwischen 0 und 50. |
| Schriftfamilie | fontFamily=consolas | Segoe ui | Die Schriftfamilie des Titels. Wenn die angegebene Familie nicht vorhanden ist, wird der Standard verwendet. |
| Schriftgröße | fontSize=20 | 18 | Die Größe des Titels. Akzeptiert eine Zahl zwischen 15 und 30. |
| Schriftgewicht | fontWeight=normal | Halbkalte | Die Dicke des Titels. ( thin , normal , semibold , bold ) |
| Breite | width=500 | 495 | Die Breite der Karte. Akzeptiert eine gültige Nummer. |
| Lücke | gap=15 | 10 | Die Lücke zwischen den Abzeichen. Akzeptiert eine Zahl zwischen 0 und 30. |
| LineHeight | lineHeight=10 | 7 | Die Lücke zwischen den Linien. Akzeptiert eine Zahl zwischen 0 und 30. |
| Linecount | lineCount=2 | 1 | Die Anzahl der Zeilen, die Sie Ihrer Karte hinzufügen möchten. |
| Leinen} | line1=html5,html5,auto | - - | Die aktuelle Linie des Abzeichens, wobei {n} eine Zahl ist. (1 <= n <= lineCount) |
| BG | bg=%2383324c | - - | Die Farbe des Hintergrunds. |
| Grenze | border=%232da7c7 | - - | Die Farbe des Grenze. |
| Abzeichen | badge=%2383324c | - - | Die Farbe der Abzeichen. |
| Titlecolor | titleColor=%232da7c7 | - - | Die Farbe des Titels. |
Diese Karten werden mit mehreren eingebauten Themen ausgestattet, die Sie verwenden können. Sie können sie alle finden, indem Sie hier klicken.
Sie können die Themen auch anpassen. Mit der Demo -Website ist es einfacher.
# Clone the project:
git clone https://github.com/0l1v3rr/github-readme-tech-stack.git
cd github-readme-tech-stack
# Install the dependencies:
npm i
npm run prepare
# Running the application:
npm run dev
# Running the storybook:
npm run storybook Alle Beiträge sind willkommen.
Hier finden Sie eine beitragende Richtlinie.
Dieses Projekt wird unter der MIT -Lizenz veröffentlicht.