How to have an awesome GitHub profile ?
Tags: github, markdown, opensource, git
Published: 2021-06-08 14:21:27



## Get Started! 
Customize your Readme.md on your GitHub profile to make it look attractive by following the steps in this simple walkthrough below. I have also provided some cool elements to spice things up!


![laptop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy2o6nicut63th7nn6dg.jpg)

If your GitHub profile looks something like THIS 👇...
![sampleprofile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dxjcmv8his3y7pxpvoc.png)
 

Turn it to something like THIS 👇 or even cooler!
![niceprofile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c4x98o32sb06exeefdp.png)

_________________________________________________________________


## Follow these steps-
### 1. Create a new Repository 
 * Go to 👉 [repo.new](https://github.com/new)
 * Type the repository name, which should be same as your 
   username. This creates a secret repository.
 * Make the repository Public.
 * Check the box - Add a README file.
 * Then click **Create Repository**.

![step1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz7cxjlpxt4jmk535m7z.png)
 

### 2. Update README file
 * The initial file looks something like this with a simple 
   message.
 * You can edit the file by clicking on the **Edit README** 
   button on the right.

![step2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ovnoimfgyeadjg8r2wm.png)
 
 

 * As you can see, the file is provided with a template made 
   using markdown. You can edit it according to your preference.
 * Click on **Commit changes**.You can also add a commit message.

![img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omxlz25oheb8qs1ezwxn.png)

_________________________________________________________________

 

### 3. ✨Beautify your profile!✨ 
There's a lot of open source elements available to achieve a beautiful Profile page. Here's a list of resources to choose from!

_________________________________________________________________


#### GitHub README Stats
![stats1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqa2eokzf625iloavmga.png)
![stats2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnr71ft08xt5z4eleuv3.png)
    {% github anuraghazra/github-readme-stats %}

_________________________________________________________________


#### GitHub profile Trophy
![trophy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mtpldn642oqzpjv8pxi.png)
    {% github ryo-ma/github-profile-trophy %}

_________________________________________________________________


#### Add a header or cover picture
```
[![MasterHead](your image link)](your GitHub link)
```
  * [Custom HEADER generator](https://reheader.glitch.me/)
  * [Custom BANNER generator](https://liyasthomas.github.io/banner/)
 
_________________________________________________________________

#### Add a floating image or GIF.

  ```
  <img align="right" alt="Coding" width="400" src="add your link 
  here">

  ```
                         

  <img  alt="Coding" width="400" src="https://media1.tenor.com/images/0c34272909ee2a4db5606a014082312b/tenor.gif?itemid=15828752">
  
_________________________________________________________________

#### Social icons section.
```
<h3 align="left">Connect with me:</h3>
<p align="left">
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg" alt="" height="30" width="40" /></a>
</p>
```

_________________________________________________________________


#### Languages and tools section.
```
<h3 align="left">Languages and Tools:</h3>
<p align="left"> <a href="https://www.cprogramming.com/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/c/c-original.svg" alt="c" width="40" height="40"/> </a> <a href="https://www.w3schools.com/cpp/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/cplusplus/cplusplus-original.svg" alt="cplusplus" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://www.figma.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg" alt="figma" width="40" height="40"/> </a> <a href="https://flutter.dev" target="_blank"> <img src="https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg" alt="flutter" width="40" height="40"/> </a> <a href="https://git-scm.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg" alt="git" width="40" height="40"/> </a> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.linux.org/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/linux/linux-original.svg" alt="linux" width="40" height="40"/> </a> <a href="https://www.photoshop.com/en" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/photoshop/photoshop-plain.svg" alt="photoshop" width="40" height="40"/> </a> <a href="https://www.python.org" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/python/python-original.svg" alt="python" width="40" height="40"/> </a> </p>
```
[More Dev icons](https://github.com/devicons/devicon/tree/master/icons)


_________________________________________________________________
                      
#### GitHub streak
![streak](https://github-readme-streak-stats.herokuapp.com/?user=Naereen&theme=blue-green)
   1. Copy-paste the markdown below into your GitHub profile README
   2. Replace the value after ?user= with your GitHub username
```
[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=DenverCoder1)](https://git.io/streak-stats)
```
Customize it here 👉 [Click me!](http://github-readme-streak-stats.herokuapp.com/demo/)

_________________________________________________________________
    
#### Spotify playing
 ![spotify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylgltgcjhv2gz4maqo5k.png)
 {% github JeffreyCA/spotify-recently-played-readme %}

_________________________________________________________________

#### [Badges - Shields](https://shields.io/)
    ![badges1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6n8fc8zw8pawxveffitx.png)

 [Languages,tools and social icons badges](https://github.com/Ileriayo/markdown-badges)

 [More badges](https://naereen.github.io/badges/)
![badges2](https://camo.githubusercontent.com/9c17896262d6454056e49bd7f4b28b068bd2d0bb/68747470733a2f2f692e696d6775722e636f6d2f4e7559613534682e706e67)
_________________________________________________________________

#### Readme Typing SVG ⌨️
   [GitHub repo](https://github.com/denvercoder1/readme-typing-svg)
   [Demo](https://readme-typing-svg.herokuapp.com/demo/)
  
![typing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7k9030u3qqidongxied2.png)

_________________________________________________________________

#### Views counter
 ![views](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3ailoyv2861phjwxpqu.png)
 {% github antonkomarev/github-profile-views-counter %}

_________________________________________________________________


#### Blog Post workflow
![workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10f4nsodpwku59b5my7x.png)
    {% github gautamkrishnar/blog-post-workflow %}

_________________________________________________________________


#### Add emojis - [Markdown Icons](https://gist.github.com/rxaviers/7360908)
![emojis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgp5xm0xjd4595nel2qz.png)


_________________________________________________________________




#### README Jokes 👀 
 {% github ABSphreak/readme-jokes %}

_________________________________________________________________


#### README Quotes ❝
 {% github PiyushSuthar/github-readme-quotes %}

_________________________________________________________________


#### Dev Metrics
 {% github anmol098/waka-readme-stats %}

_________________________________________________________________











 
 

### 4. ALTERNATIVE WAY!
If you found things overwhelming, not to worry! 
#### Here's how to do it (The Easy Way)
   * GitHub profile README generator created by @rahuldkjain

👉(https://rahuldkjain.github.io/gh-profile-readme-generator/) 
![generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpolknuf56fx5b3xkgcg.png)

  * GitHub Profilinator

👉[Try it](https://profilinator.rishav.dev/)
[GitHub Repository](https://github.com/rishavanand/github-profilinator)

_________________________________________________________________


### OR

  
 
  1. You can simply *fork* someone's repository
![fork)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxiny6nsi0vbc3n6p16t.png)

  2. Click the *edit icon* in the README file
![edit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2j12rnpgxiv3rg7kzil3.png)

  3. Copy the code and paste it onto your README file. Of course, you can modify it according to your choice.
![Copy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpvwf9pp2qqyuto0l117.png)
 
  
_________________________________________________________________









### 5. Here's some inspiration and ideas!
{% github abhisheknaiidu/awesome-github-profile-readme %}
{% github EddieHubCommunity/awesome-github-profiles %}



_________________________________________________________________


## Thank you for reading!🙌
Share your amazing GitHub profile in the comments down below for the world to see! :) 
[My GitHub](https://github.com/supzi-del)

Like it and share it for more such articles.

### Like what I do?  
#### Support me by [buying me a coffee ☕](https://www.buymeacoffee.com/suprithaa).