DEV Community

Cover image for IMPORTANCE OF GITHUB PROFILE README
Vivek Thakur
Vivek Thakur

Posted on

IMPORTANCE OF GITHUB PROFILE README

Crafting an Impressive GitHub Profile README

In this article, we'll explore how to create an impressive GitHub Profile README to stand out in the developer community.

Getting Started

  1. Creating a New Repository for Your Profile README

IMG 1

Start by creating a new repository with the same name as your GitHub username. This repository will be your profile README repository. For example, if my GitHub username is "vivek09thakur" then the repository should be named "vivek09thakur/vivek09thakur"

  1. Add a README file

While creating this repo you must check "Initialize this repository with: README box"

IMG 2

And make sure that the repo is public

IMG 3

And now you are all set just go to that repo and start editing README.md file of the repo and after you edited and wrote everything about you , just save and commit changes and done.

This will show as a cover page of your github profile.

Just Like this

My github

Some tips from me :D

There are few things which you can do to make your profile readme looks awesome.

  1. Expressing yourself, your passion, your hobbies, things you like, what are you learning and how peoples can reach to you

IMG 4

  1. Describing your languages and tools

IMG 5

For this I just did this in my README file :


**Languages and Tools**

<p align="left">
    <p align="left">
        <!-- Github Stats -->
        <img width="450px" height="auto" align="right" src="https://github-readme-stats.vercel.app/api?username=vivek09thakur&hide_border=True&theme=tokyonight">
        <!-- HTML5 -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/HTML5_Badge.svg/768px-HTML5_Badge.svg.png?20110131171049' width='38px' height='auto'/>
        <!-- CSS3 -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CSS3_logo.svg/638px-CSS3_logo.svg.png' width='38px' height='auto'/>
        <!-- Javascript -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/900px-JavaScript-logo.png' width='38px' height='auto'/>
        <!-- Bootstrap -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/638px-Bootstrap_logo.svg.png' width='42px' height='auto'height="auto" style="margin-bottom:5px"/>
        <!-- ReactJs -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/638px-React-icon.svg.png' width='38px' height='auto' style="margin-bottom:7px"/>
        <!-- C++ -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/638px-ISO_C%2B%2B_Logo.svg.png' width='36px' height='auto'/>
        <!-- Python3 -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/638px-Python-logo-notext.svg.png' width='38px' height='auto' style="margin-bottom:-5px"/>
        <br/>
        <!-- Jupyter Notebook -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Jupyter_logo.svg/638px-Jupyter_logo.svg.png' width='38px' height='auto'/>
        <!-- Pandas -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Pandas_mark.svg/638px-Pandas_mark.svg.png' width='38px' height='auto'/>
         <!-- colab -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Google_Colaboratory_SVG_Logo.svg/638px-Google_Colaboratory_SVG_Logo.svg.png' width='60px' height='auto' style="margin-left:-10px"/>
        <!-- Tensorflow -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Tensorflow-svgrepo-com.svg/638px-Tensorflow-svgrepo-com.svg.png' width='38px' height='auto'/>
        <!-- Pytorch -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Pytorch-svgrepo-com.svg/638px-Pytorch-svgrepo-com.svg.png' width='38px' height='auto'/>
        <!-- Django -->
        <img src='https://cdn.worldvectorlogo.com/logos/django.svg' width='30px' height='auto' style="margin-bottom:-5px"/>
        <!-- Flutter -->
        <img src='https://www.svgrepo.com/show/353751/flutter.svg' width='38px' height='auto'/>
        <br/>
        <!-- git -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Git_icon.svg/146px-Git_icon.svg.png?20220905010122' width='38px' height='auto'/>
        <!-- VS code -->
        <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/768px-Visual_Studio_Code_1.35_icon.svg.png' width='38px' height='auto'/>
        <!-- andriod studio -->
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Android_Studio_Icon_3.6.svg/768px-Android_Studio_Icon_3.6.svg.png?20210301045217" width="36px" /> 
        <!-- google idx -->
        <img src='https://idx.dev/images/code-chevron.svg' width='38px' height='auto'/>
        <!-- google cloud -->
        <img src='https://www.svgrepo.com/show/448223/gcp.svg' width='38px' height='auto'/>
        <!-- Firebase -->
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/46/Touchicon-180.png?20200723100028" width="38px" height="38px">
        <!-- Figma -->
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Figma-1-logo.png/638px-Figma-1-logo.png" width="40px"> 
        <br/>
</p>
Enter fullscreen mode Exit fullscreen mode
  1. Adding a stat card to your github

IMG 7

This will not only for visitors but also for yourself to get to know how far you are going. To add a stats card you can visit this link and a stats card to your profile.

Still there are many things like your social account links , github trophies but these are some important things from my POV.

Don't forget to checkout my github.

Thanks for reading :D

Logging out !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Top comments (2)

Collapse
 
mehmoodulhaq570 profile image
Mehmood-Ul-Haq

Thanks for the procedure

Collapse
 
vivek09thakur profile image
Vivek Thakur

Welcome:D