Give your GitHub profile a new avatar
A few weeks ago, GitHub released a new feature that helps to make our GitHub profile more visually appealing. They call it GitHub profile READMEs. In this article, I will walk you through steps that show how to give a new avatar to your GitHub, and this will change the traditional look and feel of your profile. Next time you share your profile link, make sure you brag about the cool stuff you build.
Before README profile
After README profile
A few of many reasons to have a README profile
- Stand out from the crowd; change the traditional appearance of the profile
- Make the best use of Git Flavored Markdown
- Show what you build with your GitHub, get the attention of your visitors
- May make use of this new feature to show your profile as a quick portfolio
Tools used
- Markdown editor, I have used Visual Studio Code
- Simple Image editors (Optional), I have used MS PowerPoint
- GitHub; the love of developers
Let’s get started with the makeover
Step 1. Go to https://github.com/ Sign In to your account if you haven’t already
Step 2. Create a new repository with the name same as your GitHub username. For example, my GitHub username is ‘BharathKumarS’ I created a new repository with the same username. The new repository path should look like the image below
Once you have created the new repository with the name same as your GitHub username, you will see a note to the right side of the repository. It should look something like this image.
Step 3. Upload the README.md file to the newly created repository. If you have created an image, make sure the README.md file and the image file should reside in the same repository
Shown below is my Marrkdown file code
If you wish to add more features to your Markdown file, here is a Markdown guide by GitLab
Step 3. Commit the files uploaded to the repository, add a commit message as a best practice. And, that is it. Your GitHub profile should look different from what it was before
Note: GitHub supports relative links in markup documents; if you wish to add a banner image to your README profile, make sure you specify the relative path of the image or media. A Markdown syntax example to add a GIF with relative path on GitHub repository looks like
If you use a <script> tag in your README.md file, make sure you enclose it within a HTML syntax or the script tag will be displayed as a text in the Markdown preview. The code sample shown below works good.
<! — <script async src=”file.js" charset=”utf-8"></script> — >
Here is my GitHub, feel free to explore my repositories. Follow me on GitHub!
