DEV Community

Cover image for How To Beautifully Organize Your GitHub Profile.
 Faith Pueneh
Faith Pueneh

Posted on • Edited on

How To Beautifully Organize Your GitHub Profile.

Have you ever come across GitHub profiles looking like this 👇👇

Image description
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
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

Step Two

With one click of the 'Create repository' button, you will see the page below.

Image description
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
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
Go to shields.io and use the following syntax to add your badge.



![<Badge Name>](https://img.shields.io/badge/<Badge Text>-<Background Color>?style=for-the-badge&logo=<Icon Name>&logoColor=<Logo Color>)


Enter fullscreen mode Exit fullscreen mode

Below is a Linkedin badge created using the above syntax.



![linkedin](https://img.shields.io/badge/Linkedin-0e76a8?style=for-the-badge&logo=Linkedin&logoColor=white)]


Enter fullscreen mode Exit fullscreen mode

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 logo DenverCoder1 / github-readme-streak-stats

🔥 Stay motivated and show off your contribution streak! 🌟 Display your total contributions, current streak, and longest streak on your GitHub profile README

Github Readme Streak Stats

Display your total contributions, current streak
and longest streak on your GitHub profile README

⚡ Quick setup

  1. Copy-paste the markdown below into your GitHub profile README
  2. Replace the value after ?user= with your GitHub username
[![GitHub Streak](https://streak-stats.demolab.com/?user=DenverCoder1)](https://git.io/streak-stats)
Enter fullscreen mode Exit fullscreen mode
  1. Star the repo 😄

Next Steps

Deploy to Heroku Deploy to Vercel

⚙ Demo Site

Here you can customize your Streak Stats card with a live preview.

https://streak-stats.demolab.com

Demo Site

🔧 Options

The user field is the only required option. All other fields are optional.

If the theme parameter is specified, any color customizations specified will be applied on top of the theme, overriding the theme's values.
















Parameter Details Example
user GitHub username to show stats for DenverCoder1





Top Languages and Stats

GitHub logo anuraghazra / github-readme-stats

⚡ Dynamically generated stats for your github readmes

GitHub Readme Stats

GitHub Readme Stats

Get dynamically generated GitHub stats on your READMEs!

Tests Passing GitHub Contributors Tests Coverage Issues GitHub pull requests OpenSSF Scorecard

View Demo · Report Bug · Request Feature · FAQ · Ask Question

Français · 简体中文 · Español · Deutsch · 日本語 · Português Brasileiro · Italiano · 한국어 · Nederlands · नेपाली · Türkçe

Please note that documentation translations may be outdated; try to use English documentation if possible.

Love the project? Please consider donating to help it improve!

Give india logo

Are you considering supporting the project by donating to me? Please DO NOT!!!

Picture of Coromandel Express train tragedy

India has recently suffered one of the most devastating train accidents, and your help will be immensely valuable for the people who were affected by this tragedy.

Please visit this link and make a small donation to help the people in need. A small donation goes a long way. ❤️

Features

Profile View

GitHub logo antonkomarev / github-profile-views-counter

It counts how many times your GitHub profile has been viewed. Free cloud micro-service.

GitHub Profile Views Counter

GitHub Profile Views Counter

Discord License

Introduction

Try Ÿ HŸPE service as the more robust and feature rich solution.

GHPVС project is proof of concept. This counter designed to be an analytical instrument for you, but not for people who are visiting your profile It could be used to see profile views dynamics as result of development activity, blogging or taking part in a conference.

It counts how many times your GitHub profile has been viewed and displays them in your profile, for free.

antonkomarev-profile-views-counter

Usage

Cloud solution launched as 100% free experience. Help me cut server costs if you like this service.

If you want to see big numbers in your profile, deploy a standalone solution to draw any views count you want without spamming our server. Everybody knows that any counters could be faked.

A billion fake profile views doesn't make you a very popular person, it makes you a person…

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. 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.

Top comments (0)