DEV Community

Cover image for Beautify GitHub profile
dcodes
dcodes

Posted on • Edited on • Originally published at dawsoncodes.com

Beautify GitHub profile

There is no better way to show off your skills than having an attractive GitHub profile, not only does it show you’re passionate and love your job, but it will also make you stand out when applying for a job. In this article, I will show you what makes a good profile and GitHub profile overview and how to beautify GitHub profile.

Now, let’s build an awesome GitHub profile and impress those recruiters 😀

GitHub profile README

In order to start editing our profile, we need to create a public repository and name it exactly like our GitHub username and create a file inside of it called README.md, wherever we put this readme file will show up on our GitHub profile page.

Now it is time to start writing some markdown and make our profile a little fun to look at, what is a markdown file? Markdown is a lightweight markup language that is intended for readability and to make the code look just like the output. Read more here.

Let’s start by adding something simple, like adding an introduction of ourselves. You can use bullet points and emojis to add aesthetic typography to it.

Here is how mine looks, feel free to add more information about yourself.

screenshot.png

There are some cool dynamic features you can add to your readme file and take your profile to a completely next level 🚀

Here are some features you can use which will help you build an eye-grabbing GitHub profile.

1. Use a GitHub profile README generator

Don’t waste your time writing all the GitHub profile README file all by yourself, there are some other quick and handy tools that can help you build a beautiful GitHub profile without wasting your time.

README file generators

Here are some GitHub profile README generators that can help you build your GitHub with minimum effort and ease.

2. Show the latest followers on your profile

For this purpose, you can use the GitHub API to update your profile and bring your latest followers and show them on your profile.

Here’s an example of my GitHub profile, as you can see it shows the latest accounts who have followed me, and will update automatically every day.

Github followers

How does it work?

Before writing any code let’s see how this works, first, we have to set up a CronJob to run every day at a specific time and fetch the latest data.

Then, we need to write a script that sends a request to the GitHub API and returns our latest followers, after that we make this script to write a piece of HTML to embed in our README file and then commit the changes and push them to update our repository.

What do you need to do?

  • Set up a CronJob.
  • Write a script that gets the latest data.
  • Update the repository with the same script.

How to set it up?

There are some simple steps you can take to implement this to your own GitHub account, I highly recommend having a look at my GitHub account and try to implement what I’ve done there.

  • Write a script that fetches the latest data (Or you can go to my GitHub account and copy the script there)
  • Generate a personal access token and select the read:user scope when you do.
  • Create a .yml workflow file that runs the script every day (Or you can use mine
  • Create a repository secret called TOKEN and paste the personal access token as the value
  • Add that token as an argument in the yml file.
  • In your README.MD file add two lines of comment to indicate the start of the section and the end of the sectoin, so that when you write the script you know where to put the HTML file that you generate, these two lines might look like something like this:

<!-- FOLLOWER-LIST:START -->

<!-- FOLLOWER-LIST:END -->

That’s it, if you’ve done all of these steps correctly, your followers will be shown on your GitHub profile and will automatically update every day, or anytime you push any changes to the main branch.

3. Add dynamically generated stats card

You can also add a dynamically generated status card which you can change and customize as you want.

We will use this GitHub repo GitHub-README-stats to generate our stats card.

How to add GitHub stats cards to your profile?

Doing this is pretty straightforward and easy, you can just copy and paste the markdown code into your README.md file.

The only change you’ll need to make is just to change the username on the link to your own GitHub username.

The cool thing about this is that there are multiple cards you can add to your profile and you can customize each however you want.

GitHub cards examples

github card

Stats card

Github card

GitHub stats example

4. Add a list of your latest blog posts

You can also add a list of your latest blog posts.

For this we will be using a workflow using GitHub actions, we will schedule it to run a cron job to automatically update the list every day or every some hours.

The workflow we’ll be using is called blog post workflow by gautamkrishnar.

Implementing this is quite easy just go to the blog post workflow repository and follow the instructions.

5. Add a profile header

Adding a header image will instantly make your GitHub account stand out.

You can use REHeader by Khaleel Gibran to generate a profile header image, it will generate you a header image that you can later download and upload to your GitHub repository and show it off on your profile.

I recommend putting the header image at the very top of your profile.

6. Add an animation

Yes, you can also add GIFs as well.

You can create or download a GIF file and add it to your GitHub profile, pretty cool right?

Here is an example of an animation on a GitHub profile 👇

Credit: argyleink

animation GitHub header

What else can I do?

There are many other things you can add to your GitHub profile and customize it as you want, here are some extra features you can add to your GitHub.

Integrating WakaTime into your GitHub readme

There is a Vs Code extension called WakaTime, once you set it up, it will calculate the minutes of you coding a specific programming language.

They also have an API feature that you can use to get that data and show it off on your GitHub profile so that others know which programming language you use the most.

You can use wakapi to integrate WakaTime with your GitHub profile.

waka time

Showing off the projects starred by you

You can also show a list of projects starred by you. It’s also a CronJob and uses the GitHub actions to run every day.

Starred can help with that.

Showing your latest YouTube videos on your profile README

If you’re a YouTuber or have some videos published on YouTube, you can show them off on your GitHub account as well.

Just as we added a CronJob to fetch our blog posts every day, we can use the same action to fetch our YouTube videos, instead this time we change the feed link to YouTube.

Replace the channel_id with your own channel id:

https://www.youtube.com/feeds/videos.xml?channel_id=<your-channel-id>

Add a game to your GitHub profile

Yes, you can add a game to your GitHub profile, and others who show your page can play it.

Here’s an inspiration which is made by rossjrw which you can add to your profile as well.

How to get more inspiration to beautify your GitHub profile?

Awesome GitHub Profile READMEs provides GitHub profile examples and a great place full of creativity where you can find the best Github profiles and get inspiration from them to build your own beautiful GitHub profile.

Thanks for reading, hope you enjoyed it and you got something out of it, and if you did please consider sharing this article with a friend.

If you want to stay tuned for more content just like this one, give me a follow from Twitter

Top comments (19)

Collapse
 
balastrong profile image
Leonardo Montini

Thanks for the article!

On the same topic, I also created an action to update your README.md with stats and game history from chess.com, if you're a chess player ♟

Here's the post where I showcase it:

Collapse
 
dcodes profile image
dcodes

Glad you liked the article, thanks for adding value.

Collapse
 
maymeow profile image
Meow • Edited

Nice Guide, thanks.

There is also script which makes you snake game from your contribution graph :)

github.com/Platane/snk (i have one on my profile)

Collapse
 
devvsakib profile image
Sakib Ahmed

that was great article!! thank you

Collapse
 
devangtomar profile image
Devang Tomar

Thanks for sharing this. I will try to add some to my profile 🎈

Collapse
 
jirosworld profile image
Jiro Ghianni

Let's hope we won't go back to GeoCities designs though ☺️

Collapse
 
shahriarshafin profile image
Shahriar Shafin
Collapse
 
jyotiprakashrout profile image
Jyoti prakash Rout

Awesome!

Collapse
 
irrfan profile image
Irfan

beautiful guide, thanks for sharing

Collapse
 
chand1012 profile image
Chandler

This is what I like to use for my ReadMe generation: github.com/lowlighter/metrics

Collapse
 
husseinkizz profile image
Hussein Kizz

That generator is so cool and mind blowing, thanks for sharing!

Collapse
 
bobbyiliev profile image
Bobby Iliev

Cool!