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
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.
Note: Make sure the page_id is unique, as the profile counter widget keeps count based on page_id. 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.
Use the following code as a guide to including your GitHub overall summary in your README profile page.
- 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.
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
- 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.
Adding Gmail Card:
<a href="mailto:YourEmail@gmail.com"></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>"></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
If you liked this article😃, show your appreciation through claps👏🏻 or comments. Also for more such content follow💖 my Medium Page — Laxmena
