Movatterモバイル変換

0l1v3rr/github-readme-tech-stackPublic

NotificationsYou must be signed in to change notification settings
Fork48
Star252

Show off your favorite technologies by using cards in your GitHub README

github-readme-tech-stack.vercel.app

License

MIT license

252 stars 48 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 1,058 Commits
.github		.github
.husky		.husky
.storybook		.storybook
docs		docs
public		public
scripts		scripts
src		src
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
.vercelignore		.vercelignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vercel.json		vercel.json

Repository files navigation

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. Withgithub-readme-tech-stack, you can easily create a visual representation of the technologies used in your GitHub repository and include it in yourprofile 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 ofgithub-readme-streak-stats andgithub-readme-stats. Withgithub-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 yourprofile 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 yourownsvg 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 yourown!
Badges: github-readme-tech-stack usesshields.io badges andsimple-icons under the hood.
Style: github-readme-tech-stack is designed to match the style ofgithub-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 themeshere.
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 clickinghere.
You can also customize the themes. It's easier to do with thedemo website.

⚒️ Building from source

# Clone the project:git clone https://github.com/0l1v3rr/github-readme-tech-stack.gitcd github-readme-tech-stack# Install the dependencies:npm inpm run prepare# Running the application:npm run dev# Running the storybook:npm run storybook