- ❓How do I use the card?
- 🕹️ Customize the card
- 🔨 How to customize a line
- 🪁 Themes
- 🧠 Tips
- ⚒️ Building from source
- 📝 License
- 🧑🤝🧑 Contributing
- 💡 Inspiration
It's pretty simple, just copy and paste this line of markdown:
[](https://github-readme-tech-stack.vercel.app/api/cards)Note
This will create an empty card. You can customize this as you want. Here are the available options.
Instead of building your card manually, please, use our website.
| Parameter | Example | Default value | Description |
|---|---|---|---|
| title | ?title=My%20Custom%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) |
| lineCount | ?lineCount=2 |
1 | The number of lines you want to add to your card. |
| line{n} | ?line1=typescript,typescript,2D79C7 |
- | The current line of the badge, where {n} is a number. (1 <= n <= lineCount) Learn how to create a line like this here. |
Creating a line seems complicated, but it's very easy.
Lines are created of badges.
Every badge is built like this: {logoName},{logoTitle},{logoColor} (e.g typescript,typescript,2D79C7).
The logoColor has to be a hexadecimal color code, without the # symbol.
We need to separate the values with commas. (,)
Note
If you set thelogoColortoauto, it will use the default color of the SVG logo.
Now that we know how to create badges, we can move on to creating a line.
We just simply put badges next to each other separated by semicolons. ({badge};{another one};{another one})
Congrats, you have successfully created your line of badges. Here is an example:
https://github-readme-tech-stack.vercel.app/api/cards?lineCount=1&line1=node.js,node.js,539E43;typescript,typescript,2D79C7;express,express.js,61DAFB
Note
These cards use shields.io badges under the hood.
Here are the themes spread in a table. The card title is the name of the theme.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Would you like to add a new theme to the list? Check this issue, please. Thanks!
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" />Let's assume that you have a line created and want to use your own SVGs. We support that using Base64 format.
* Here's an easy 3-step guide:
- Download the image 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 the badge (the
logoName) with this string. (e.g<Base64>,typescript,2D79C7;)
Note
Sometimes the encoded string, of either step 2 or 3, may be too long to be used. You should then try to reduce the size (total pixels) of the image and try again.
If you don't have NodeJS, download and install it.
Then open a terminal and type these commands:
# 1. Clone the project:
git clone https://github.com/0l1v3rr/github-readme-tech-stack.git
cd github-readme-tech-stack
# 2. Install the dependencies:
npm i
# 3. Install husky (optional, but recommended)
npm run prepare
# 4. Run the application:
npm run devThis project is licensed under the MIT License.
Every contribution is welcomed.
You can find a contributing guideline here.
I was inspired by dozens of other projects, check 'em out as well!