Customized tech stack badges for your profile!
Tags: badge, html, shields
Published: 2021-05-20 04:33:15

### **In need of badges for your project?**

I’ve been in a continuous pursuit making sure I code daily! The goal is to add small features into my projects as I discover and learn more things in Software development! 

While rebuilding my GitHub markdown, one of my recent discoveries are these badges you can use to show off your tech stack!  I have been seeing it from other people’s profiles as well and I was inspired to put some on mines! Where best to test out and display these badges than your portfolio! So here’s how I personalized mines!


First up, here's where you look for the icons you wanted. 
[Simple Icons](https://simple-icons.github.io/simple-icons-website/) *(They redesigned their website! They added a search function + night mode toggle!)*
 
 **Reference Syntax:**
 ```HTML
<img src="https://img.shields.io/badge/-{BADGELABEL}-{COLOR/HEX}?logo={ICON-NAME}&logoColor={LOGO-COLOR}&style={STYLE}" alt="badge sample"/>
```
Things we will touch base with are the marked one right here:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwpt4i2p3z81pe84xw5b.jpeg)

## BREAKDOWN: 

#### **Badge Label**: 
Not case-sensitive, but for spaces just add `%20` in replacement. (Ex. Ruby%20on%20Rails)

In application:

`https://img.shields.io/badge/-`**Ruby%20on%20Rails**


#### **Color/Hex**: 
Named colors do work with these badges as well as hex code colors just take out the ‘#’ (Ex. #bf00ff = bf00ff). This one is my fave because you can further customize your badges whether for a theme or just wanted more uniformity across your styling.

In application:
`https://img.shields.io/badge/-Ruby%20on%20Rails-`**CC0000** 
OR
`https://img.shields.io/badge/-Ruby%20on%20Rails-`**red**

#### **Icon Name**: 
At this time, you should already know if the icons you need are available from [Simple Icons](https://simple-icons.github.io/simple-icons-website/). Majority of languages/brands/framework icons are there and is easy to find!
The page also provides the corresponding hex color code for the icon of your choosing. (Ex. ruby%20on%20rails)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz6tr1a9j8cxn75qm4te.png)


In application:

`https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000?logo=`**ruby%20on%20rails**


#### **Style** : 
For the look and shape of your badge! Multiple ways to choose from! 
In application:
`https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000?logo=ruby%20on%20rails&logoColor=white&`**style=for-the-badge**

| Name of style |  Badge    |
|———————————————|:—————————:|
|For-the-badge  |
<img src="https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000?logo=ruby%20on%20rails&logoColor=white&style=for-the-badge" alt="ruby"/> |
|
Flat |
<img src="https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000?logo=ruby%20on%20rails&logoColor=white&style=flat" alt="ruby"/> |

|Flat-square |
<img src="https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000?logo=ruby%20on%20rails&logoColor=white&style=flat-square" alt="ruby"/>|

|Plastic |
<img src="https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000?logo=ruby%20on%20rails&logoColor=white&style=plastic" alt="ruby"/>|

|Social |
<img src="https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000?logo=ruby%20on%20rails&logoColor=CC0000&style=social" alt="ruby"/>|


Viola! That is basically it! Here’s how mine turned out!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3t25ci4y942gppi9lup.png)

There are a lot more options for badge styles and you can definitely mix and match them to make your portfolio bring more of your own style.

### Here are more resources that you can use:

[Aleen42’s Badges](https://badges.aleen42.com/) | [Github repo](https://github.com/aleen42/badges/blob/master/README.md)

Syntax:
```HTML
<img src="https://badges.aleen42.com/src/react.svg" alt="badge"/>
```
Which looks like something like this :  <img src="https://badges.aleen42.com/src/react.svg" alt="badge"/>

[Alexandresanlim’s Repo](https://github.com/alexandresanlim/Badges4-README.md-Profile)

Syntax:
```HTML
<img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="html"/>
```
Which looks like something like this :  <img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="html"/>

[FontAwesome to React](https://fontawesome.com/how-to-use/on-the-web/using-with/react) - You can definitely use FontAwesome icons to show your tech stack! in my case, I used these icons to show my 'social media stack' on my website.

Syntax:
```JavaScript
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {faDev} from '@fortawesome/free-brands-svg-icons';

<FontAwesomeIcon focusable="true" icon={faDev} size="2x" color="#caf000;" className="icon"/>
```

And it came out like this!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsqk21yxiv9xuoqbkijn