Skip to content

Commit 3b702c2

Browse files
0l1v3rr0l1v3rr
committed
update README
1 parent 66869f1 commit 3b702c2

File tree

1 file changed

+57
-47
lines changed

1 file changed

+57
-47
lines changed

‎README.md

Lines changed: 57 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -24,28 +24,15 @@
2424
<br>
2525

2626
<div align="center">
27-
<a href="https://github.com/0l1v3rr/github-readme-tech-stack/stargazers" target="_blank">
28-
<img src="https://img.shields.io/github/stars/0l1v3rr/github-readme-tech-stack.svg?style=for-the-badge&logo=chart.js&color=26689A&logoColor=D9E0EE&labelColor=343A40" alt="Stars">
29-
</a>
30-
<a href="https://github.com/0l1v3rr/github-readme-tech-stack/graphs/contributors" target="_blank">
31-
<img src="https://img.shields.io/github/contributors/0l1v3rr/github-readme-tech-stack.svg?style=for-the-badge&logo=trello&color=008CDD&logoColor=D9E0EE&labelColor=343A40" alt="Contributors">
32-
</a>
33-
<a href="https://github.com/0l1v3rr/github-readme-tech-stack/releases" target="_blank">
34-
<img src="https://img.shields.io/github/release/0l1v3rr/github-readme-tech-stack.svg?style=for-the-badge&logo=github&color=00B274&logoColor=D9E0EE&labelColor=343A40" alt="Version">
35-
</a>
36-
</div>
37-
38-
<br>
39-
40-
<div align="center">
41-
<a href="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark_green&lineCount=2&line1=node.js,node.js,0;typescript,typescript,0;express,express,61DAFB&line2=html5,html,0;react,react,0;tailwindcss,tailwind,0&title=This%20Project%27s%20Tech%20Stack">
42-
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark_green&lineCount=2&line1=node.js,node.js,0;typescript,typescript,0;express,express,61DAFB&line2=html5,html,0;react,react,0;tailwindcss,tailwind,0&title=This%20Project%27s%20Tech%20Stack" title="Tech Stack">
27+
<a href="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark_red&lineCount=2&line1=node.js,node.js,0;typescript,typescript,0;express,express,61DAFB&line2=html5,html,0;react,react,0;tailwindcss,tailwind,0&title=This%20Project%27s%20Tech%20Stack">
28+
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark_red&lineCount=2&line1=node.js,node.js,0;typescript,typescript,0;express,express,61DAFB&line2=html5,html,0;react,react,0;tailwindcss,tailwind,0&title=This%20Project%27s%20Tech%20Stack" title="Tech Stack">
4329
</a>
4430
</div>
4531

4632
<hr>
4733

4834
## ⚡ Quick Start
35+
4936
The easiest way to get started is to visit our website, where you can customize and preview your card live.
5037
[https://github-readme-tech-stack.vercel.app](https://github-readme-tech-stack.vercel.app)
5138

@@ -56,88 +43,108 @@ The easiest way to get started is to visit our website, where you can customize
5643
<hr>
5744

5845
## 🔧 Query parameters
59-
None of the fields are required. Each query parameter has a default value, which is listed below.
60-
61-
| Parameter | Example | Default value | Description |
62-
|---------- |---------|---------------|------------ |
63-
| **title** | `?title=My%20Title` | My Tech Stack | The title of the card. `%20` can be used as a space. |
64-
| **theme** | `?theme=github_dark` | github | The theme of the card. You can browse between the themes [here](docs/THEMES.md). |
65-
| **align** | `?align=center` | left | The alignment of the badges. (`left`, `center`, `right`) |
66-
| **titleAlign** | `?align=center` | left | The alignment of the title. (`left`, `center`, `right`) |
67-
| **showBorder** | `?showBorder=false` | true | Display the border around the card or not. (`true`, `false`) |
68-
| **hideTitle** | `?hideTitle=true` | false | Display the title of the card or not. (`true`, `false`) |
69-
| **hideBg** | `?hideBg=true` | false | If true, sets the background to transparent. (`true`, `false`) |
70-
| **borderRadius** | `?borderRadius=12.5` | 4.5 | Number between 0 and 50. |
71-
| **fontFamily** | `?fontFamily=consolas` | Segoe UI | The font family of the title. If the specified family doesn't exist, the default is used. |
72-
| **fontSize** | `?fontSize=20` | 18 | The size of the title. Accepts a number between 15 and 30. |
73-
| **fontWeight** | `?fontWeight=normal` | semibold | The thickness of the title. (`thin`, `normal`, `semibold`, `bold`) |
74-
| **width** | `?width=500` | 495 | The width of the card. Accepts a valid number. |
75-
| **gap** | `?gap=15` | 10 | The gap between the badges. Accepts a number between 0 and 30. |
76-
| **lineHeight** | `?lineHeight=10` | 7 | The gap between the lines. Accepts a number between 0 and 30. |
77-
| **lineCount** | `?lineCount=2` | 1 | The number of lines you want to add to your card. |
78-
| **line{n}** | `?line1=html5,html5,auto` | - | The current line of the badge, where {n} is a number. *`(1 <= n <= lineCount)`* |
46+
47+
None of the fields are required. Each query parameter has a default value, which is listed below.
48+
49+
| Parameter | Example | Default value | Description |
50+
| ---------------- | ------------------------- | ------------- | ----------------------------------------------------------------------------------------- |
51+
| **title** | `?title=My%20Title` | My Tech Stack | The title of the card. `%20` can be used as a space. |
52+
| **theme** | `?theme=github_dark` | github | The theme of the card. You can browse between the themes [here](docs/THEMES.md). |
53+
| **align** | `?align=center` | left | The alignment of the badges. (`left`, `center`, `right`) |
54+
| **titleAlign** | `?align=center` | left | The alignment of the title. (`left`, `center`, `right`) |
55+
| **showBorder** | `?showBorder=false` | true | Display the border around the card or not. (`true`, `false`) |
56+
| **hideTitle** | `?hideTitle=true` | false | Display the title of the card or not. (`true`, `false`) |
57+
| **hideBg** | `?hideBg=true` | false | If true, sets the background to transparent. (`true`, `false`) |
58+
| **borderRadius** | `?borderRadius=12.5` | 4.5 | Number between 0 and 50. |
59+
| **fontFamily** | `?fontFamily=consolas` | Segoe UI | The font family of the title. If the specified family doesn't exist, the default is used. |
60+
| **fontSize** | `?fontSize=20` | 18 | The size of the title. Accepts a number between 15 and 30. |
61+
| **fontWeight** | `?fontWeight=normal` | semibold | The thickness of the title. (`thin`, `normal`, `semibold`, `bold`) |
62+
| **width** | `?width=500` | 495 | The width of the card. Accepts a valid number. |
63+
| **gap** | `?gap=15` | 10 | The gap between the badges. Accepts a number between 0 and 30. |
64+
| **lineHeight** | `?lineHeight=10` | 7 | The gap between the lines. Accepts a number between 0 and 30. |
65+
| **lineCount** | `?lineCount=2` | 1 | The number of lines you want to add to your card. |
66+
| **line{n}** | `?line1=html5,html5,auto` | - | The current line of the badge, where {n} is a number. _`(1 <= n <= lineCount)`_ |
7967

8068
<hr>
8169

8270
## 🪁 Themes
71+
8372
These cards come with several built-in themes that you can use. You can find them all by clicking [here](docs/THEMES.md).
8473
If you have a cool new theme in mind, or want to add one for yourself and others, please see [#45](https://github.com/0l1v3rr/github-readme-tech-stack/issues/45).
8574

8675
### 🖌 Customizing a theme
76+
8777
These query parameters allow you to customize a theme.
8878
These parameters only accept valid hexadecimal colors, otherwise they will not be applied. Please use `%23` instead of `#`.
8979

9080
> **Warning**
9181
> If the `?theme=` parameter is specified, any of these color adjustments will override the theme values.
9282
93-
| Parameter | Example | Description |
94-
|-----------|---------|-------------|
95-
| **bg** | `?bg=%2383324c` | The color of the background. |
96-
| **border** | `?border=%232da7c7` | The color of the border. |
97-
| **badge** | `?badge=%2383324c` | The color of the badges. |
98-
| **titleColor** | `?titleColor=%232da7c7` | The color of the title. |
83+
| Parameter | Example | Description |
84+
| -------------- | ----------------------- | ---------------------------- |
85+
| **bg** | `?bg=%2383324c` | The color of the background. |
86+
| **border** | `?border=%232da7c7` | The color of the border. |
87+
| **badge** | `?badge=%2383324c` | The color of the badges. |
88+
| **titleColor** | `?titleColor=%232da7c7` | The color of the title. |
9989

10090
<hr>
10191

10292
## 🧠 Tips
10393

10494
### 🪢 Align the card in the markdown
95+
10596
If you're using markdown, you may want to align your cards. There's an easy way to do this with the align attribute:
97+
10698
```html
107-
<img align="center" src="https://github-readme-tech-stack.vercel.app/api/cards" alt="My Tech Stack" />
99+
<img
100+
align="center"
101+
src="https://github-readme-tech-stack.vercel.app/api/cards"
102+
alt="My Tech Stack"
103+
/>
108104
```
109105

110106
### 📚 GitHub's media feature
107+
111108
You can use [GitHub's new feature](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) to specify whether to display images for light or dark mode users.
112109

113110
```html
114111
<picture>
115112
<source
116-
srcset="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark&lineCount=1&line1=typescript,typescript,auto"
113+
srcset="
114+
https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark&lineCount=1&line1=typescript,typescript,auto
115+
"
117116
media="(prefers-color-scheme: dark)"
118117
/>
119118
<source
120-
srcset="https://github-readme-tech-stack.vercel.app/api/cards?theme=github&lineCount=1&line1=typescript,typescript,auto"
119+
srcset="
120+
https://github-readme-tech-stack.vercel.app/api/cards?theme=github&lineCount=1&line1=typescript,typescript,auto
121+
"
121122
media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
122123
/>
123-
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=github&lineCount=1&line1=typescript,typescript,auto" />
124+
<img
125+
src="https://github-readme-tech-stack.vercel.app/api/cards?theme=github&lineCount=1&line1=typescript,typescript,auto"
126+
/>
124127
</picture>
125128
```
126129

127130
### 🎭 Adding custom SVG logo
131+
128132
We support this using [Base64](https://en.wikipedia.org/wiki/Base64) format.
129-
**[\*](https://stackoverflow.com/questions/38985050/how-do-i-use-the-logo-option-in-shields-io-badges) Here's an easy 3-step guide:**
133+
**[\*](https://stackoverflow.com/questions/38985050/how-do-i-use-the-logo-option-in-shields-io-badges) Here's an easy 3-step guide:**
134+
130135
1. Download the SVG and use one of the many online tools, e.g. [http://b64.io/](http://b64.io/), to encode it.
131136
2. Encode the Base64 string in [percent-encoding](https://en.wikipedia.org/wiki/Percent-encoding). Take the Base64 string and use one of the many online tools, e.g. [http://meyerweb.com/eric/tools/dencoder/](http://meyerweb.com/eric/tools/dencoder/), to encode the string.
132137
3. Finally, replace the first element of a badge (the `logoName`) with this string inside the URL. (`<Base64>,typescript,2D79C7;`)
133138

134139
<hr>
135140

136141
## ⚒️ Building from source
142+
137143
If you don't have NodeJS, [download and install it](https://nodejs.org/en/).
138144
Then open a terminal and type the following commands:
139145

140146
**Backend:**
147+
141148
```sh
142149
# Clone the project:
143150
git clone https://github.com/0l1v3rr/github-readme-tech-stack.git
@@ -152,6 +159,7 @@ npm run dev
152159
```
153160

154161
**Frontend:**
162+
155163
```sh
156164
cd client
157165

@@ -165,13 +173,15 @@ npm start
165173
<hr>
166174

167175
## 🧑‍🤝‍🧑 Contributing
176+
168177
All contributions are welcome.
169178
You can find a contributing guideline [here](CONTRIBUTING.md).
170179
This project is released under the [MIT License](LICENSE).
171180

172181
<hr>
173182

174183
## 💡 Inspiration
184+
175185
- [github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats)
176186
- [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
177187
- [github-profile-summary-cards](https://github.com/vn7n24fzkq/github-profile-summary-cards)

0 commit comments

Comments
 (0)