How to Create an Awesome GitHub Profile Page?

Photo by Roman Synkevych on Unsplash

If you happen to be a software developer/engineer you would probably know that learning here is a never-ending process (similar to some of the other fields out there). As the technology and tools evolve, it has become mandatory to keep our self updated with the recent technologies to be able to sustain ourselves in the field for the long term.

Learning alone is not sufficient in this competitive world to standout. You need to be able to show case your work to the general public. And what can be more popular than GitHub to show case all your works and learning. Being a developer myself, recently I understood the importance of having a good GitHub profile as well as the free resources available through the public repos for knowledge sharing.

Having a good GitHub profile page is an essential part of maintaining a good GitHub account. This will make it easy to display all your works across platforms like LinkedIn, Twitter as well as your digital resumes.

I recently got my profile setup done using online resources and reading through some medium articles. We will see through the setup process; will also share a public repo and cheat sheets that are used to tweak the profile.

Create the repository

GitHub has a hidden feature, that we are going to exploit to create the profile page. Click on the new repository button on the main page of GitHub. In the repository name enter your GitHub name.

GitHub new repository page

Make sure to create it as a public repository and initialize the repo with the README file.

Once the repo is created you will be presented with an initial setup file as below:

Initial README.MD file

Now it’s time to get going with the customization.

You can customize the markdown using the GitHub file editor, which provides a preview pane, or use any of your favorite code/text editors and commit those changes. If you are familiar with the markdown used by GitHub, check this Markdown Cheat Sheet on GitHub.

Let’s break down the profile page into 3 section:

• Introduction section
• Technology used
• Contributions made

First, we will create an introduction section using the initial markdown code we have. Give a good caption or quote to start the intro section. You can also describe what you are currently working on, what are your hobbies etc., You can refer to the emoji cheat sheet to get the markdown name for any emoji you need.

Technology Used:

In this section add all the tech stack you have exposure to, the development environment you are familiar with and any other work-related stuff you want to share.

I have used badges for the technologies used to make it standout in my profile page. Simple Icons website has a huge collection of badges that include almost all of the tech stack and companies available.

It is fairly easy to add them to your profile.

<img src="https://img.shields.io/badge/BadgeText-ColourCode?logo=SimpleIconName&logoColor=ColorName&style=ShieldStyle" />

Let’s take a look at each parameter:

• BadgeText — This is a custom name which you can specify for the badge.
• ColourCode — This will be the colour of the badge. You can give your own colour in the Hexcode format or copy the original colour code from the Simple Icon (make sure you remove the # sign before the colour code)
• logo — This will be the name of the logo as given in the Simple Icon site. If the badge has two names, use the — or + sign to join them. For example to get the Microsoft Azure logo give the logo name as “Microsoft-Azure” or “Microsoft+Azure”.
• logoColor — It can be any single colour or a hexcode colour scheme, but I will suggest to keep it as white, as it gives a clean look to the profile.
• style — You can opt for one of the four available values (plastic, flat, flat-square or for-the-badge). Based on the value look and shape of the badge differs.

The badges can be used to display your contact info like your email account, LinkedIn, Twitter, Facebook, or even your YouTube page.

Here is the snippet of the markdown and final result of my professional details section:

Markdown code

Final output of the Technology used section

Contribution Section:

As a finish to your profile page, it is wise to add some cool stats that gives a quick view of your work and what are you currently working on, to the people visiting your page. Here is a cool repo on GitHub that helps you setting the awesome stats for your page. Two stats that I have used on my page is the GitHub Stats Card and Top Languages Card.

How to add the GitHub Stats Card:

[![YourName's GitHub stats](https://github-readme-stats.vercel.app/api?username=yourusername)](https://github.com/anuraghazra/github-readme-stats)

Or

<img src="https://github-readme-stats.vercel.app/api?username=yourusername&count_private=true&theme=radical&show_icons=true" />

We are provided with the feasibility to customize the stats and look of the card using the query parameters. Lets take a quick look into the query params available for customization

• username : Enter your GitHub user name in the space
• hide : The stats are grouped under 5 flags (stars, commits, prs, issues, contribs). You can hide them by setting those values to hide query param as &hide=stars, commits, prs, issues, contribs.
• count_private : When set to True, this will count the number of commits and PR’s created in the private repos as well in addition to the public repo contribution
• show_icons : This will show the icons for the 5 flags under which the data is grouped.
• theme : This is my favourite. They have a lot of themes that can be used. Just pick a name from the existing theme base or feel free to add your own theme to their repo.

How to add the Top Language Card:

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=yourusername)](https://github.com/anuraghazra/github-readme-stats)

Or

<img src=https://github-readme-stats.vercel.app/api/top-langs/?username=yourusername &layout=compact />

There are different ways to customize the card as well like changing the layout, increasing or decreasing the number of languages shown(1 — 10), hiding any languages or repos to be left out for that stats card

Apart from these two they also have a stat card to show your most popular repos and time spent on each programming language in a week.

The final output of my page after adding all these elements looks something like this

Final image of the GitHub profile

Isn’t it cool? There are different ways to customize your page and the options are countless.

You can check out my profile page where I have used the options and suggestions mentioned in this blog.

More content at plainenglish.io