How To Beautifully Organize Your GitHub Profile.
Tags: github, git, javascript, tutorial
Published: 2022-03-12 00:47:06


Have you ever come across GitHub profiles looking like this :point_down::point_down:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1mh6njoco5isob8ov37.png)
And you are like wow! How do they do that? You will be making your GitHub profile look beautiful and outstanding by using the steps in this article. One of the benefits of organizing your GitHub profile in this manner is that it helps show off your skills and projects to the general audience faster. You will be using the GitHub Profile README hidden feature to do this. 
###Step One:
Log in to your GitHub account, click on your repository and click on the new button to add a new repository. The repository name will be the same as your profile name as seen below. Make your repository public.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmuw4738u5edx456y2gu.png)
Tick on the ‘Add a README file’  to initialize the repo. You can now click on the ‘ Create repository’ button to create your repository.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xf5ujvsnz0cfjml6ipf.png)
###Step Two
With one click of the 'Create repository' button, you will see the page below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5z5qzoi3k5udnwrq9efa.png)
 Click on the edit icon on the right-hand side, this will take you to the README page showing some GitHub markdown template as seen.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9kszgdkpwcutttmuu0p.png)
You can start editing the markdown template to whatever you wish and how you will want it to look like.

To add a badge to your profile as seen.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zn8rm95kqmkvjje0qv3c.png)
Go to [shields.io](https://shields.io) and use the following syntax to add your badge.

```html
![<Badge Name>](https://img.shields.io/badge/<Badge Text>-<Background Color>?style=for-the-badge&logo=<Icon Name>&logoColor=<Logo Color>)
```
Below is a Linkedin badge created  using the above syntax.

```html
![linkedin](https://img.shields.io/badge/Linkedin-0e76a8?style=for-the-badge&logo=Linkedin&logoColor=white)]
```
You can use this same procedure to add your skills/tech stack  badge to your profile.
###Step Three
 There are a lot of open-source resources that will help you in beautifying your profile. Below are three resources you can use in adding your git stats, streak, top languages, and profile view.
####GitHub Streak
{% github DenverCoder1/github-readme-streak-stats %}
####Top Languages and Stats
{% github anuraghazra/github-readme-stats %}
####Profile View
{% github antonkomarev/github-profile-views-counter %}

Other features you can add are:
- Trophy 
- Cover picture
- Floating image or gif
- Spotify playing
- README typing SVG
- Blog post workflow
- Markdown icons
- README quotes.

The list goes on, you could browse about these features and see how to add them to your profile.

###Final Note:
 There is also an easy way of beautifying your Github profile by using a profile README generator [profile-readme-generator](https://rahuldkjain.github.io/gh-profile-readme-generator/). This contains all the features, all you need to do is fill in the features you want on your profile and click the ‘Generate Readme’ button, copy the code and paste it on your special repository. It's that simple. I will love to get feedback on how you created your profile and the method you used.