0l1v3rr / github-readme-tech-stack

Show off your favorite technologies and tools by using these cards in your GitHub README.

Show off your favorite technologies and tools by using these cards in your GitHub README.

---

⚡ Quick Start

The easiest way to get started is to visit our website, where you can customize and preview your card live.
https://github-readme-tech-stack.vercel.app

---

❓ Why?

As a developer, it's important to showcase your expertise in different technologies to potential collaborators and employers. With github-readme-tech-stack, you can easily create a visual representation of the technologies used in your GitHub repository and include it in your profile README. This can help you stand out and attract the attention of others who are looking for developers with specific skill sets.

The images are fully customizable, so you can choose the technologies you want to showcase and even adjust the colors, icons, and the alignment to match your personal brand.

Personally, I've always wanted to show off my skills in a clean and modern way. I could do that with just the badges, but they didn't match the style of github-readme-streak-stats and github-readme-stats. With github-readme-tech-stack, that's no longer a problem, it naturally matches those cards!

---

👉 Features

• Easy to use: Creating a Tech Stack image is as simple as adding a markdown tag to your profile README.
• Demo website: github-readme-tech-stack has a demo website, where you can build your own card with no effort.
• Customizable: Choose the technologies you want to showcase and customize the colors and icons to match your personal brand.
• Custom icons: You can even upload and use your own svg icons if they don't already exist.
• Multiple themes: These cards come with several pre-made themes that you can use. However, if none of the themes suits your style, you can easily create your own!
• Badges: github-readme-tech-stack uses shields.io badges and simple-icons under the hood.
• Style: github-readme-tech-stack is designed to match the style of github-readme-streak-stats, github-readme-stats and many other cool tools.

---

🔧 Query parameters

None of the fields are required. Each query parameter has a default value, which is listed below.

What are the available query params?

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)
titleAlign	align=center	left	The alignment of the title. (left, center, right)
showBorder	showBorder=false	true	Display the border around the card or not. (true, false)
hideTitle	hideTitle=true	false	Display the title of the card or not. (true, false)
hideBg	hideBg=true	false	If true, sets the background to transparent. (true, false)
borderRadius	borderRadius=12.5	4.5	Number between 0 and 50.
fontFamily	fontFamily=consolas	Segoe UI	The font family of the title. If the specified family doesn't exist, the default is used.
fontSize	fontSize=20	18	The size of the title. Accepts a number between 15 and 30.
fontWeight	fontWeight=normal	semibold	The thickness of the title. (thin, normal, semibold, bold)
width	width=500	495	The width of the card. Accepts a valid number.
gap	gap=15	10	The gap between the badges. Accepts a number between 0 and 30.
lineHeight	lineHeight=10	7	The gap between the lines. Accepts a number between 0 and 30.
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)
bg	bg=%2383324c	-	The color of the background.
border	border=%232da7c7	-	The color of the border.
badge	badge=%2383324c	-	The color of the badges.
titleColor	titleColor=%232da7c7	-	The color of the title.

---

🪁 Themes

These cards come with several built-in themes that you can use. You can find them all by clicking here.
You can also customize the themes. It's easier to do with the demo website.

---

⚒️ Building from source

# 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

---

🧑‍🤝‍🧑 Contributing

All contributions are welcome.
You can find a contributing guideline here.
This project is released under the MIT License.

---

💡 Inspiration

• github-readme-streak-stats
• github-readme-stats
• github-profile-summary-cards
• markdown-badges
• shields.io
• simple-icons

github-readme-tech-stack's Issues

Custom SVGs not not displayed

Hey,

thank you for building this project. I was really enthusiastic when I saw this project and I would like to create a tech-stack-card for my profile. Unfortunatly, simple icons does not include all icons I would like to add (e.g. Seaborn). To handle this, I used custom .svg files from their website and added them to the card.

Depending on the file, the whole card did not show.

SVG that did not work: https://seaborn.pydata.org/_static/logo-wide-lightbg.svg

SVG that did work: https://docs.dask.org/en/stable/_images/dask_icon.svg

From my limited experience with the .svg format, I could not see any problems.

Any idea what might cause the problem?

The generated image is cutting and not showing all the badges

Looks like the 'line' config is not persisting

Create a fetch request with axios

Complete the fetchBadge function. The function should do the following things:

• Using an axios request, fetch the SVG card from the URL. The URL is the one and only parameter of the function.
• Return back the SVG string using the return statement. (<svg>...</svg>)

Additional information:

• The URL is a shields.io badge, it's guaranteed
• If possible, avoid the async/await, use .then() instead

Extend the README with a short GIF

Describe the feature
In the project's README, we have a screenshot of the project's website. It would be great to replace it with a short GIF, so everyone could see a better preview of the project.

What should happen while playing the GIF:

1. Change the title to Demo Website
2. Select a good-looking dark theme from the dropdown
3. Add one or two badges (it's the little + under the Line 1 )
4. Click on the Generate button and wait until the preview changes

Here's a little checklist:

• In the README, the screenshot is replaced with the GIF and is exactly in the same position
• The GIF is uploaded in the docs/ folder and referred from there in the README
• The GIF is cropped, so only the site's main content is visible

Additional context
We are open to every idea. Feel free to give us any suggestions in the comment section, or by opening a new issue.

📚 Add new themes

We would like to expand our themes with new, cool ones! Here are the currently available themes.

If you would like to help us, here is a simple guide:

1. Fork the repository
2. Clone your fork
3. Search for the themes.ts file
4. Specify your theme colors using the themes.set() function
5. Display your new theme in the THEMES.md file
6. Commit and push your changes
7. Open a Pull Request that contains your changes

themes.set() example:

// the theme name should be snake_case
themes.set("theme_name", {
  backgroundColor: "#ffffff", // the background color of the card
  borderColor: "#ffffff",     // the border color of the card
  titleColor: "#ffffff",      // the title color
  badgeColor: "#ffffff",      // the background color of the badges
});

Additional context:

• If possible, include a screenshot from your theme when you open the PR to make the reviewer's job easier.
• Please follow the structure of the code.

Note
The theme won't show up correctly in the README until it's deployed, but you can test it locally. There is a shell script under the scripts/ folder, which helps you test it. Make sure you run it from the root folder.

Badge popup doesn't allow badge labels and icons with 3 characters

Describe the bug
The save button remains disabled until the text for the label and icon surpasses 4 characters. This behavior prohibits technologies like Git, Lit, etc. from being added as badges.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Line 1'
2. Click on '+' to add badge
3. Type 'Lit' on Icon and Badge label, and add any color (#324FFF for the Lit logo, for example)
4. Save button remains disabled

Expected behavior
Save button is enabled, able to save the badge

Screenshots

Additional context

📚 Add more themes

We'd love to expand our themes with new, cool ones! If you have a fancy theme in mind or would like to see and design new themes, here are simple instructions on how to get started. (Here are the currently available themes.)

Requesting a theme

1. Open an issue describing your new theme. If possible, include an image. It can be a theme from another README card project.
2. Indicate in the issue if you want someone else to add the theme.

Adding the theme

1. Fork the repository
2. Clone your fork
3. Locate the themes.ts file
4. Set your theme colors using the themes.set() function
5. Add your new theme to the THEMES.md file
6. Commit and push your changes
7. Open a Pull Request containing your changes. Please also include a screenshot of your new theme in the PR.

themes.set() example:

// the theme name should be snake_case
themes.set("theme_name", {
  backgroundColor: "#ffffff", // the background color of the card
  borderColor: "#ffffff",     // the border color of the card
  titleColor: "#ffffff",      // the title color
  badgeColor: "#ffffff",      // the background color of the badges
});

Additional context

• Please follow the structure of the code and make sure the spacing and formatting is consistent.
• The theme will not display correctly in THEMES.md until it is deployed, but you can test it locally. Your added theme will be available when your PR is merged.
• Be sure to check the previously added themes to see if a similar (or identical) theme already exists.
• This issue should remain open, please do not mark it as fixed.

Replace the old GIF in the README

Describe the feature

In our README, there is a GIF of the project's website. We would like to replace this GIF with a better-quality one. Also, the website has been updated with minor changes and we would like to show it off as well.

What should happen while recording the GIF

1. Change the title to Demo Website
2. Choose a nice dark theme from the drop-down menu
3. Add one or two badges (it's the little + below the Line 1 )
4. Click on the Generate button and wait until the preview changes. Make sure you wait 0.5-1 second after the card has generated itself so we can see the result.

Of course, you can include more actions to show off the site's features.

Checklist

• In the README, the old GIF is replaced with the new one and is exactly in the same position.
• The GIF is uploaded to the docs/ folder and referenced from there in the README.
• The GIF is cropped so that only the main content of the page is visible.
• The GIF is high quality and everything is clearly readable.

Additional context

• We are open to any ideas. Feel free to make suggestions in the comments section or by opening a new topic.
• If you want to start working on this task, please write a comment so I can assign you this issue.