Tips and tricks to create an awesome GitHub profile README
Every programmer feels GitHub as a tool for version control, open-source ventures, and quite frankly, anything code-related. However, with the introduction of Profile READMEs, GitHub is now renovated for not only showing off your tech skills and coding expertise, but also anything else you might want to share about yourself. Think of it as a creative portfolio, personal website, and expressive canvas all rolled into one. Plus, all your code is there as well!
In this section, we are trying to create an awesome GitHub profile readme.
Getting Started
A well-defined README makes your code well-documented and often encourages collaboration by sharing helpful context with contributors. A README is self-explanatory and automatically rendered on the first page of your code repository as a page to summarize the project, explain project configurations, provide instructions on how to run the project, etc.
The GitHub profile-level README feature allows more content than the profile bio where you can play around with the content more visually. There you have the freedom to include anything like gifs, interactive games, badges, and GitHub stats.
Create a GitHub Profile README
The README file resides in a GitHub repository, the name of which is the same as the username of your GitHub account. To create the repository, follow these steps:
- Log in to GitHub.
- Click on the + icon at the top right of the page and select New Repository
3. Create a new repository page opens. In the Repository name field, enter the username of your GitHub account. After entering the username, GitHub displays a message describing that you’re about to create a GitHub special repository.
4. Tick the Public checkbox under repository type to make the GitHub profile README visible to everyone who visits the GitHub profile page. Also, tick the Add a README file checkbox. This will add a README.md file where we’ll add the profile contents. Finally, click on Create repository button to create your profile readme repository.
5. The special repository is created. Now, you can go to the repository and open the Readme.md file by clicking on the pen icon on the right-hand side of the page to customize it with your information. By default, it comes with some information like this.
### Hi there 👋<!--
**codemaker2015/codemaker2015** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.
Here are some ideas to get you started:
- 🔭 I’m currently working on ...
- 🌱 I’m currently learning ...
- 👯 I’m looking to collaborate on ...
- 🤔 I’m looking for help with ...
- 💬 Ask me about ...
- 📫 How to reach me: ...
- 😄 Pronouns: ...
- ⚡ Fun fact: ...
-->
Tips to stand out with GitHub profile README
It’s often a good idea to have a plan before you jump into creating your profile. Firstly, you want to think about the types of things you wish to add to the profile and what kind of information do you want to showcase?
These are some tips to make your profile beautiful.
Showcase your personality
Use your profile README to show off your hobbies, and many remarkable personality traits. It’s the best way to stand out from the crowd!
Easy access to all your GitHub contributions
Instead of providing some links and resumes in your profile, you can add top-rated repositories and your contributions. It helps recruiters, colleagues, and friends to get a better impression of your skills.
Aesthetically pleasing
Writing CSS is a little bit tricky, instead of that, you can create a README with a basic understanding of Markdown. Use the power of markdown styling to create an awesome readme.
Super flexible
There are many great tools out there that can help you to create an awesome profile. It helps us to automatically link your Twitter, Medium, or blog updates with minimal scripting.
Cover photo
Your cover photo is the large picture at the top of your profile, right above your profile picture. All cover photos are public, and this unique image represents who you are or what you care about.
So, create a unique cover photo and add it to your profile readme. It will make your profile more attractive.
You can add the cover photo to your profile using the img tag or the image markdown syntax.
<img src="URL_TO_YOUR_IMAGE" width="VALUE" height="VALUE" alt="ALTERNATIVE_TEXT" />
// or
For example,
<img src="codemaker.png" alt="Vishnu Sivan" width="100%" />
<img src="animated/light_1.gif" height="20px" />
// or
You should upload the images into the repository. In this example, we are keeping the image subdirectories root folder. If you have any subdirectories then you have to mention that folder’s relative path as well.
Github badges
GitHub Badges can boost the readability of the GitHub repositories as they provide a fast way to show off repository metrics. Badges are supposed to be embedded in your README.md which illustrates the significance of your project to other developers.
To add the badges in the README.md file, please check out the following resources:
Use the following template to add Shields.io badges to the profile.
<a href="TARGET_LINK">
<img alt="ALTERNATIVE_TEXT" src="https://img.shields.io/badge/MESSAGE1-MESSAGE2-lightgrey?color=COLOR&logo=PLATFORM_NAME" />
</a>For example,
<p align="left">
<a href="https://github.com/codemaker2015/codemaker2015">
<img src="https://komarev.com/ghpvc/?username=codemaker2015&color=red" alt="profile views" />
</a>
<a href="https://github.com/codemaker2015/codemaker2015">
<img src="https://visitor-badge.glitch.me/badge?page_id=page.id" alt="page views" />
</a>
<a href="https://stackoverflow.com/users/7103882">
<img alt="Stack Exchange reputation" src="https://img.shields.io/stackexchange/stackoverflow/r/7103882?color=orange&label=reputation&logo=stackoverflow">
</a>
<a href="https://www.hackerrank.com/codemaker2015">
<img alt="HackerRank" src="https://img.shields.io/badge/hackerrank-15+-green?color=green&logo=hackerrank">
</a>
<a href="https://codemaker2015.medium.com">
<img alt="Medium" src="https://img.shields.io/badge/medium-40+-lightgrey?color=lightgrey&logo=medium">
</a>
<a href="https://github.com/codemaker2015?tab=followers">
<img alt="GitHub followers" src="https://img.shields.io/github/followers/codemaker2015?color=yellow&logo=github">
</a>
<a href="https://www.linkedin.com/in/codemaker2015">
<img alt="Linkedin followers" src="https://img.shields.io/badge/followers-1.9K-blue?color=blue&logo=linkedin">
</a>
<a href="https://twitter.com/codemaker2014">
<img alt="Twitter followers" src="https://img.shields.io/badge/followers-1-blue?color=orange&logo=twitter">
</a>
<a href="https://www.facebook.com/vishnu.sivan.754">
<img alt="Facebook friends" src="https://img.shields.io/badge/friends-1.9K-blue?color=yellowgreen&logo=facebook">
</a>
</p>To create something like the above screenshot then first change the GitHub username (in this example, it is codemaker2015) with your GitHub username. Now, you can see the badges in your profile with your metrics.
Animated texts and images
Images and gifs are a great way to embed some flair into your profile. Animated texts give you an extraordinary look on your profile. Also, animated images are useful to make your profile live rather than some static content.
If you want to add any images or gifs to your readme, use the following code snippet,
<p align="center">
<img src="URL_TO_YOUR_IMAGE_OR_GIF" width="100" height="100" />
</p>Align your image towards the left/right/center position by varying the align attribute values in the p tag since there is no direct way to align the image in your profile. Also, specify the width and height values to adjust the size of the image.
There are a couple of online tools available to create animated texts. Here are some of the free sites for creating animated texts.
Descriptive intros
Profile README is the right place to show off your miserable accomplishments. You can let your personality shine by adding some fun facts about yourself or emojis, or anything you wish.
GitHub Stats
The GitHub Stats badge exhibits the total Stars, Commits, Pull Requests, Issues, and Contributions of your GitHub repository.
To add the GitHub Stats badge to your Repository all you have to do is add the below markdown code in your README.md file.
For example:
GitHub streak stats
GitHub streak stats creates beautiful GitHub user stats to add to your profile’s README. It displays your total contributions, current streak, and longest streak on your GitHub profile README.
You can create your own streak stats using this online tool,
[](https://git.io/streak-stats)
Github profile trophy
Let’s make our Github profile readme one more step ahead by showcasing the GitHub profile trophies. Github profile trophy API helps us to incorporate dynamically generated GitHub Stat Trophies on your readme.
To add the GitHub profile trophy to your Repository all you have to do is add the below markdown code in your README.md file.
For example:
Github activity graph
It’s always good to see our progress on a graph. It helps us to understand our strengths and weakness. The Github activity graph is a dynamically generated activity graph to show your GitHub activities for the last 31 days.
To add the GitHub activity graph to your Repository all you have to do is add the below markdown code in your README.md file.
For example:
Most Used Languages
The most used languages badge displays the most common languages used throughout GitHub. and it is a GitHub metric of which languages such as HTML, CSS, JavaScript, Python, Go and many more have the most code on GitHub. These languages are listed in descending order.
To add the Most Used Languages badge to your Repository all you have to do is add the below markdown code in your README.md file.
For example:
Wakatime stats
Wakatime is a collection of open-source text editor plugins that give programmers insights into how they code. It provides metrics, insights, and automatic time tracking generated from your programming activity.
To add the Wakatime stats badge to your repository all you have to do is add the below markdown code in your README.md file. If you don’t have Wakatime account then create one for tracking your code metrics.
For example:
Random Joke Generator
Random Joke Generator will generate a random technical joke in the form of questions and answers every 15 minutes or so. For instance “Is Google male or female?” the answer will be “Female because it doesn’t let you finish a sentence before making a suggestion”. Isn’t that funny.
Anyways, to extend the Badge you need to embed the Markdown code in your README.md file as shown below.
## 😂 Here is a random joke that'll make you laugh!
Interactive README
Using GitHub actions and a bit of code, you can make some really cool interactive README. For example, a word cloud allows visitors to add their own words and update the cloud in real-time. You can check the same in the following repository,
Community games
Include some interactive games such as Connect Four, and Chess, against others in the GitHub community directly on these profile READMEs to engage the visitors on your profile.
If you wish to add these games to your profile readme then clone the repositories and open it in VSCode. There you can search for codemaker2015 and replace it with your GitHub username. Also, replace the repository name (in the connect four game the repository name is connect4) with your GitHub username.
For example, if the URL is https://raw.githubusercontent.com/codemaker2015/chess/master/chess_images/blank.png
then you have to change it to something like this https://raw.githubusercontent.com/your-github-username/your-github-username/master/chess_images/blank.png for adding the code in your profile readme.
Thanks for reading this article.
If you enjoyed this article, please click on the clap button 👏 and share to help others find it!
Check out my profile README if you’re interested at github.com/codemaker2015