- ❓How do I create a card?
- 🔨 Query parameters
- 🪁 Themes
- 🧠 Tips
- ⚒️ Building from source
- 📝 License
- 🧑🤝🧑 Contributing
- 💡 Inspiration
Use this website to customize a card for yourself. It's pretty straightforward.
Note
These cards use shields.io badges under the hood.
We suggest not editing the query parameters manually, use our website instead.
| 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. |
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" />We support this 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 inside the URL. (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:
# Clone the project:
git clone https://github.com/0l1v3rr/github-readme-tech-stack.git
cd github-readme-tech-stack
# Install the dependencies:
npm i
# Install husky (optional, but recommended)
npm run prepare
# Run the application:
npm run dev
# -- Frontend:
cd client
# Install the dependencies:
npm i
# Run the application:
npm startThis 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!