Your GitHub profile is a great place to highlight your skills. You could create a bullet list of your skills in your profile, but why do that when you can easily include skill icons and badges instead!
Skill Icons
User tandpfun on GitHub created a fine set of skill icons, including information on how to apply them to your GitHub profile. They provide a lovely list of icons, and make it simple to display in your profile!
The documentation README is thorough and explains exactly how to use the tool, configure the format, and what icons are available. Definitely check that out for more detail.
It begins with a screenshot of the author's profile, including a number of the skill icons available for use.
The next few sections explain how to specify which icons you want to display, alter the icon theme, specify the number of icons per line, and center the icons.
Finally, there is a list of all the available icons including the name you would use when you choose to display a specific icon.
For example, to add a short list of skills to a GitHub profile, you would include the following line of Markdown in your README.
The above Markdown will render as follows in your profile:
You can follow the documentation to configure the available settings, if you wish.
There are other options for skill icons available on the Beautify GitHub Profile repo as well, if you don't find everything you want to highlight in this list.
Skill and Various Badges
There are many options for badge creation. The Beautify GitHub Profile list contains a Badges section with 26 options.
Users Naereen and Ileriayo on GitHub put together a badges repo and a markdown-badges repo, respectively, each divided up into categories, and including the Markdown code necessary to add them to your GitHub profile README.
Check out the READMEs in each repo for more details on usage and for the Markdown necessary to render the available badges.
All of the badges available on Ileriayo's list are generated on Shields.io. Shields.io is a site for generating static and dynamic badges for a wide variety of skills and topics.
The badges on Naereen's list are pulled from various sites. You can sort out where they were generated by looking at the URL in the suggested Markdown code. For example, this Generic badge on Naereen's list was generated on Shields.io.
The nice thing about Naereen and Ileriayo's lists are that they provides a lengthy list of example badges to get you started. If you're more interested in generating your own, there are a number of options.
A very popular option for generating your own badges is Shields.io.
The main page is made up of two major sections, the latter of which has a number of subsections. The first section is a list of categories that contain existing badges, which you can search using the search / project URL dialogue at the top of the page.
The second section provides the option to create your own badge, either static or dynamic, and provides the URL query strings necessary to configure your badge style. There are details on each of the style options in the Styles section.
When you generate a badge, it will switch to the relevant URL and page containing your badge. This is the URL to a simple static badge. To use, you would add the following line of Markdown to your profile.
Once added, it would render as follows.
Another option for generating a simple static badge is For the Badge.
You can customise the text for both halves of the badge, as well as the text and background color. Then you are given the option to download the badge as an SVG, or copy the Markdown code necessary to embed it in your profile.
To add a badge from this site, you'd design it, click Copy Markdown <>, and paste it into your profile page where you'd like the badge to show up. The Markdown for their badges is too lengthy to include in this guide. Here is an example personally generated badge rendered.
There are options beyond these two sites to find existing badges and customise your own badges. You're not limited by the options highlighted above!
Text editor powered by tinymce.
