dcodes

Posted on Aug 21, 2022 • Edited on Aug 29, 2022 • Originally published at dawsoncodes.com

Beautify GitHub profile

#github #webdev #programming #career

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.

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.

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:

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

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

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.

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