The easiest way to start using these cards is to visit our website, where you can customize your card with a live preview.
https://github-readme-tech-stack.vercel.app
None of the fields are required. Every query parameter has a default value displayed below.
| Parameter | Example | Default value | Description |
|---|---|---|---|
| title | ?title=My%20Title |
My Tech Stack | The title of the card. %20 can be used as a space. |
| theme | ?theme=github_dark |
github | The theme of the card. You can browse between the themes here. |
| align | ?align=center |
left | The alignment of the badges. (left, center, right) |
| showBorder | ?showBorder=false |
true | Display the border around the card or not. (true, false) |
| borderRadius | ?borderRadius=12.5 |
4.5 | Value between 0 and 50. |
| fontSize | ?fontSize=20 |
18 | The size of the title. Accepts a value between 15 and 30. |
| fontWeight | ?fontWeight=normal |
semibold | The thickness of the title. (thin, normal, semibold, bold) |
| lineCount | ?lineCount=2 |
1 | The number of lines you want to add to your card. |
| line{n} | ?line1=html5,html5,auto |
- | The current line of the badge, where {n} is a number. (1 <= n <= lineCount) |
These cards come with several built-in themes you can use. You can find all of them by clicking here.
If you would like to use other themes, and add one for yourself and others, please check this issue.
- We suggest you not put too many badges inside one card, because the loading time can be too slow, and it can overflow the 15s limit, which results in a card that's not displayed. The maximum amount of badges inside one card should be around 16. If you want to display more, do it in two or three cards.
- If you use our Demo Website to generate and customize your card, and it displays an empty screen, it's because your browser cached the previously deployed names of the JS bundles. In order to resolve this issue, clear your browser's cache or open the site in incognito mode.
- You can browse between the icons here.
If you're using markdown, you may want to align your cards. There's an easy way to do it with the align attribute:
<img align="center" src="https://github-readme-tech-stack.vercel.app/api/cards" alt="My Tech Stack" />You can use GitHub's new feature to specify whether to display images for light or dark mode users.
<picture>
<source
srcset="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark&lineCount=1&line1=typescript,typescript,auto"
media="(prefers-color-scheme: dark)"
/>
<source
srcset="https://github-readme-tech-stack.vercel.app/api/cards?theme=github&lineCount=1&line1=typescript,typescript,auto"
media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
/>
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=github&lineCount=1&line1=typescript,typescript,auto" />
</picture>We support this using Base64 format.
* Here's an easy 3-step guide:
- Download the SVG and use one of the many online tools, e.g. http://b64.io/, to encode it.
- Encode the Base64 string in percent-encoding. Take the Base64 string and use one of the many online tools, e.g. http://meyerweb.com/eric/tools/dencoder/, to encode the string.
- Finally, replace the first element of a badge (the
logoName) with this string inside the URL. (<Base64>,typescript,2D79C7;)
If you don't have NodeJS, download and install it.
Then open a terminal and type these commands:
Backend:
# 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
# Run the application:
npm run devFrontend:
cd client
# Install the dependencies:
npm i
# Run the application:
npm startEvery contribution is welcomed.
You can find a contributing guideline here.
This project is licensed under the MIT License.