Take your GitHub profile to the next level with these easy steps

Take your GitHub profile to the next level with these easy steps

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

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

In order to start editing our GitHub 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 in this readme file will show up in 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 markdown? Markdown is a lightweight markup language that is intended for readabillity and making 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 an aesthetic typography to it.

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

Screenshot from 2022-03-08 20-47-42.png

There are some cool dynamic features you can add to your readme file and take your GitHub 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 README generator

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

Here are some README generators that can help you build your GitHub profile 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 it works?

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.

SEO tactics

3. Add dynamically generated GitHub stats card

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

We will use github-readme-stats to generate our GitHub stats card.

How to implement?

Doing this is pretty straight forward 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.

Here are some examples

github stats card

stats card

github card

github stats

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 profile.

Coding time

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

Projects starred by me

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.

SEO tactics

Latest YouTube videos

If you’re a YouTuber or have some videos published on YouTube, you can show them off in 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 to 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 inspirations?

Awesome GitHub Profile READMEs provides github profile examples and a great place full of creativity that 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

Comments

We won't show your email address!

500 characters left
the art of twitter

Syntax highlighting with Prism and Next.js

Learn how to highlight your syntax the easiest way for your dev blog. This tutorial will show you the easiest and most efficient way of highlighting syntax in your code using Next.js and PrismJs.

Syntax highlighting with Prism and Next.js

10 React community hooks you should be using

When it comes to programming, clean code is what you should always strive for. Here are 10 community hooks to help you write cleaner and more performant code.

10 React community hooks you should be using

Continuous Integrations with GitHub actions

Set up your GitHub workflow and never worry about hosting, testing, and building your project again. This tutorial will show you how to set up your GitHub workflow so that you never have to worry about hosting your project on a server again. Code more and redeploy less.

Continuous Integrations with GitHub actions

Building a REST API with Prisma and express.js

Prisma is an amazing tool when it comes to TypeScript ORMs, in this tutorial we are going to build a REST API with Prisma and Express.js.

Building a REST API with Prisma and express.js

Become an amazing developer 🙌

  • Subscribe to my newsletter if you're interested in:
  • 👨‍💻 Web development in general
  • 🔥 JavaScript
  • React

  • 💻 Web 3.0
  • 😃 Helping you to become a great developer

Join over other developers growing their skills and learning the latest technologies