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
- 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.
- Make sure that you check off the box to have the README file created when the repo is initialized.
- 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.
- Using the following code, you can add an image via Markdown.
- 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"/>
- 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”
Or reference the image directly
“assets/image.jpg”
- 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”/>
- 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”/>
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.
- 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.
- We can break this string down into a few components.
[https://github-readme-stats.vercel.app/api?](https://github-readme-stats.vercel.app/api?)
- This the API url for the card, this won’t change for you
username=thisisvillegas
- Make sure you update this to your username
theme=synthwave
- There are different themes you can use, you can find them all listed in the github-readme-stats repo
show_icons=true
- Toggles whether or not the icons display on the card
count_private=true
- This includes the count of all the private contributions made
“Andres’ GutHub Stats”
- This is the alt text and like with any image, should be included for accessibility purposes.
- 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.
- 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.
- To add your social media links we are going to be using Shields.io. For more customization options you can visit their site.
- 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/"> </a>
- For Twitter:
<a href=”https://twitter.com/thisisvillegas"> </a>
- For Instagram:
<a href=”https://www.instagram.com/doktordres/"></a>
- 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.
Top comments (0)