All Articles

OpenSource Widgets to Power GitHub Profile README - Part2

Profile REAME example

This is a two-part blog, and if you haven’t read the first part, check it out here: Creating GitHub README for Students (Part1).

This article covers some of the free open-source widgets that you can use in your GitHub profile to make it more appealing and add more informative.

This article includes Plug and Play code, which you can copy paste into your README, make minor edits, and get these widgets live on your Profile running within seconds.

I have used these widgets myself in my GitHub profile, you can check out the live demo in my Profile here:Laxmena-GitHub Profile*

1. Profile Visitors Counter Widget

Profile Counter Widget

Profile Counter Widget

This widget can help us keep track of the number of times our profile has been viewed. When you add this widget to your profile and every time someone visits your GitHub profile the counter increments itself by one.

Visitor Badge is a free online service that lets us allow this widget to our profile with a single line of markdown code.

Copy-paste the following markdown code into your README file, and replace username and reponame with your username and repository name.

![Visitor](https://visitor-badge.laobi.icu/badge?page_id=username.repoName)

Note: Make sure the pageid is unique, as the profile counter widget keeps count based on pageid. Using your username followed by your repoName should be fine.

2. GitHub Overall Stats

You can add your GitHub overall stats to your Profile readme to give an overview of your projects, commits, and contributions.

Top Languages Stats Widget

Github overall stats

Use the following code as a guide to including your GitHub overall summary in your README profile page.

![Overall Stats](https://github-readme-stats.vercel.app/api?username=laxmena&count_private=true&show_icons=true&hide=contribs)
  • Replace ‘laxmena’ in the above markdown code with your GitHub username
  • If you don’t want to include your private repositories in the stats, then set false for the count_private attribute.
  • setting show_icons to true, displays star, commit, pull request, and other icons in the stats image.
  • hide attribute lets you choose which attributes you don’t want to be published in your profile.

Feel free to play with these attributes as per your liking.

3. Top Languages Widget

This widget allows you to include a stats graph about all the Programming languages that you have used in your repository.

Top Languages Stats Widget

Top Languages Stats Widget

You can customize this card, you can have the card list all the languages that you’ve used, or you can choose the languages to ignore from the list. The markdown code to include this in your profile is

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=laxmena&layout=compact)
  • replace username ‘laxmena’ with your username.
  • If you want elaborate stats on all the languages that you’ve used in your GitHub, remove the layout attribute.
  • add an attribute hide, which will allow you to hide specific languages from the stats image. for example, if you want to hide CSS from the list, hide=css will remove CSS from the image.

4. Include Gmail, LinkedIn cards

If you are looking to add contact methods to your GitHub profile, try out aesthetic cards instead. There are cards available for different platforms, here I’ll show the most common two ways to contact — Email and LinkedIn.

Contact Cards

Contact Cards

Adding Gmail Card:

<a href="mailto:YourEmail@gmail.com">![YourEmail@gmail.com](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white)</a>

Copy-paste this code into your README file, and replace YourEmail@gmail.com with your actual email id, and you are ready to go.

LinkedIn Card:

<a href="<LinkedInURL>">![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)</a>

Copy-paste this code into your readme file and replace LinkedInURL with your actual LinkedIn Profile URL.

For further readings and experimentation

You can customize your widgets even further, by selecting plenty of themes available. I like to keep it clean and minimal wherever possible, but there are options to decorate the cards and make them more visually appealing.

  • Check this link to customize themes for the cards.
  • Here is a collection of all innovative and creative README’s that you can look for inspiration.
  • Learn more about the Visitor Badge counter here

Originally published by Lakshmanan Meiyappan on Medium.