TheLazy.Dev
Portfolio GitHub

Blog

industry |readme |markdown |github

Creating a Standout GitHub Profile README

thisisvillegas

Andres Villegas

Posted on March 24, 2021

Creating a Standout GitHub Profile README

Looking to have your GitHub profile stand out? Wanting it to match all the beautiful and intricate design work that you have put into your projects? We’ve got you covered.

In this post, we will walk you through how to update your GitHub profile, add more personality, and help you stand out from the crowd. To make our updates, we’ll be using Markdown language (here is a quick Markdown guide if you’re unfamiliar with it).

This blog post will cover:

  • How to use images and badges
  • Adding a Github Status Card and top language card
  • How to include button links to your social media accounts

Creating the README file

In order to customize your profile, you’ll need to create a README file project. This project will be your home for all the cool, personalized objects you’d like to showcase on your profile. To create your README, follow these steps

  1. Once you’re logged in to your Github account, create a new repo. You will use your username to name this repo. For the purposes of this tutorial, I’ll be using my own Github README as an example and since my username is thisisvillegas, that is what I’ll use to name the repo.

  1. Make sure that you check off the box to have the README file created when the repo is initialized.

  1. Once the repo has been created, you will see that GitHub knows you have accessed this special repo and presents you with the option to edit the file. Go ahead and click on this. You will get directed over to the file editor that is built into GitHub. If you have never updated a README file before, Make a README has a deeper look into README files.

Adding Images

Adding images is a fun way to customize and add color to your profile. This will visually engage whoever is looking at your profile. You can also use free tools like Canva to create your own beautiful header images.

Need some inspiration? We have you covered.

Uploaded to my repo are some BigCommerce Developer-themed images you can use on your profile. You can find them under assets. These are named DeveloperHeroBanner, BigCommerceDevs, and SpaceMan.

  1. Using the following code, you can add an image via Markdown. 
![alt text](https://{insert your image URL} “add your alt text”)
Enter fullscreen mode Exit fullscreen mode
  1. Another way to add an image is via an image tag. This method allows you to size the image with more ease. 
<img src=”drawing.jpg” alt=”alt text” width=”200"/>
Enter fullscreen mode Exit fullscreen mode
  1. Something to note here is, that if you are looking to keep things super organized, you can upload the image you want to use into the repo that you just created and reference that URL as such. 
“https://github.com/[username]/[reponame]/blob/[branch]/assets/image.jpg”
Enter fullscreen mode Exit fullscreen mode

Or reference the image directly

“assets/image.jpg”
Enter fullscreen mode Exit fullscreen mode
  1. As you can see in my example above, my hero banner was uploaded to this repo and I was able to insert it with the following code: 
<img src=”https://github.com/thisisvillegas/thisisvillegas/blob/main/assets/GitHubBanner.png" alt=”horizon hero banner”/>
Enter fullscreen mode Exit fullscreen mode
  1. Taking this a step further, you can shorten the src to reference just the image, for example, the shortened version of the example above is: 
<img src=”assets/GitHubBanner.png” alt=”horizon hero banner”/>
Enter fullscreen mode Exit fullscreen mode

Adding Github Status Card & Most Used Language Card

Another popular profile customization is adding detail cards to your GitHub to your page. This is a way to easily show-off all your GitHub stats in a fun, visual way.

  1. Using the following code you will be able to add a GitHub status card to your profile. This will condense all the activities for the year in one easy-to-read card. 
![Andres’ GitHub stats](https://github-readme-stats.vercel.app/api?username=thisisvillegas&theme=synthwave&show_icons=true&count_private=true “Andres’ GutHub Stats”)
Enter fullscreen mode Exit fullscreen mode
  1. We can break this string down into a few components. 
[https://github-readme-stats.vercel.app/api?](https://github-readme-stats.vercel.app/api?)
Enter fullscreen mode Exit fullscreen mode
  • This the API url for the card, this won’t change for you 
username=thisisvillegas
Enter fullscreen mode Exit fullscreen mode
  • Make sure you update this to your username 
theme=synthwave
Enter fullscreen mode Exit fullscreen mode
  • There are different themes you can use, you can find them all listed in the github-readme-stats repo 
show_icons=true
Enter fullscreen mode Exit fullscreen mode
  • Toggles whether or not the icons display on the card 
count_private=true
Enter fullscreen mode Exit fullscreen mode
  • This includes the count of all the private contributions made 
“Andres’ GutHub Stats”
Enter fullscreen mode Exit fullscreen mode
  • This is the alt text and like with any image, should be included for accessibility purposes.
  1. The following code will grant you access to the top language card, this card aggregates all the languages used in your repo and puts them in one easy graphic. 
![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=thisisvillegas&theme=synthwave “Andres’ Top Languages Card”)
Enter fullscreen mode Exit fullscreen mode
  1. Breaking this down, we can see it uses very similar components to the initial card.
  • Uses a different API but like on the first card, it won’t change for you. You will have to update the username to match your Github username and then if you want to add a theme you can include that last parameter.
  • The last section is the alt text for the card. Again, this should be included with every image/graphic that you add to any page for accessibility purposes. If you would like to learn more about alt text and accessibility, check out this blog post I put together.

Adding Social Media Links

As a developer, growing your network and connecting with people is very important. Below we will walk you through how to link your social media accounts with embedded buttons.

  1. To add your social media links we are going to be using Shields.io. For more customization options you can visit their site.
  2. In order to get these cool badges to show up, in your file, add the following lines into your README file:
  • For LinkedIn: 
<a href=”https://www.linkedin.com/in/andres-villegas-79867ab7/"> ![alt text](https://img.shields.io/badge/-LinkedIn-0e76a8?style=plastic&logo=linkedIn)</a>
Enter fullscreen mode Exit fullscreen mode
  • For Twitter: 
<a href=”https://twitter.com/thisisvillegas">![alt text](https://img.shields.io/badge/-Twitter-1DA1F2?style=plastic&logo=Twitter) </a>
Enter fullscreen mode Exit fullscreen mode
  • For Instagram: 
<a href=”https://www.instagram.com/doktordres/">![alt text](https://img.shields.io/badge/-Instagram-833AB4?style=plastic&logo=Instagram)</a>
Enter fullscreen mode Exit fullscreen mode
  1. In the example above you can see that I added three buttons. One for LinkedIn, another for Twitter, and the last one for Instagram. In order to customize these for your profile, just updated the href tag.

Conclusion

Making sure that you stand out from the rest is crucial when sending someone over to your GitHub Profile. Take advantage of the ability to personalize your account to really showcase your personality.

For more inspiration on how to customize your profile, check out the examples below:

Have you already updated your profile? I’d love to take a look at it! Feel free to share it with me. Leave a comment below or reach out to me on Twitter at @thisisvillegas.

💖 💪 🙅 🚩
thisisvillegas
Andres Villegas

Posted on March 24, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Creating a Standout GitHub Profile README
industry Creating a Standout GitHub Profile README

March 24, 2021