GitHub Profile ReadMe
Tags: github, beginners, tutorial, discuss
Published: 2022-06-21 12:25:08

# Readme Components
Compilation of different README components from all over the Github. You can use these components to make your Github profile stand out.

# How to use
Change the `YOUR_PROFILE_USERNAME` value to your GitHub's username.
, that's it. Simple!

Example - 


```md
[![ GitHub stats](https://github-readme-stats.vercel.app/api?username=YOUR_PROFILE_USERNAME)](https://github.com/MrKrishnaAgarwal/readme-components-github)
```

# Components

## Profile views
<img src="https://gpvc.arturio.dev/MrKrishnaAgarwal" align="center">

```md
[![Profile views](https://gpvc.arturio.dev/[YOUR_PROFILE_USERNAME])
```

## Github Followers
<img src="https://img.shields.io/github/followers/MrKrishnaAgarwal?label=Followers&logo=GitHub&style=for-the-badge" alt="GitHub Followers" />


```md
[![Github Followers](https://img.shields.io/github/followers/YOUR_PROFILE_USERNAME?label=Followers&logo=GitHub&style=for-the-badge)
```

## Twitter Followers
<img src="https://img.shields.io/twitter/follow/DMKrishnaA?label=Twitter&logo=twitter&style=for-the-badge&color=blue" alt="TWitter Followers"/>

```md
[![Twitter Followers](https://img.shields.io/twitter/follow/YOUR_TWITTER_USERNAME?label=Twitter&logo=twitter&style=for-the-badge&color=blue)
```

## Icons
### Type 1
Change the langname and logoname to generate icons of different languages.

```md
[![](https://img.shields.io/badge/Code-langname-informational?style=flat&logo=logoname&logoColor=white&color=brightgreen)]
```

- # Languages:
  ![](https://img.shields.io/badge/Code-HTML5-informational?style=flat&logo=html5&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Code-CSS3-informational?style=flat&logo=css3&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Code-JavaScript-informational?style=flat&logo=javascript&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Code-TypeScript-informational?style=flat&logo=typescript&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Code-Python-informational?style=flat&logo=python&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Code-C-informational?style=flat&logo=c&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Code-C++-informational?style=flat&logo=cplusplus&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Code-Java-informational?style=flat&logo=java&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Code-Kotlin-informational?style=flat&logo=kotlin&logoColor=white&color=brightgreen)
  
- # Frameworks
  ![](https://img.shields.io/badge/Code-ReactJS-informational?style=flat&logo=react&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Code-SASS-informational?style=flat&logo=sass&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Code-Bootstrap-informational?style=flat&logo=bootstrap&logoColor=white&color=brightgreen)

- # Backend
  ![](https://img.shields.io/badge/Code-NodeJS-informational?style=flat&logo=node.js&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Code-Express-informational?style=flat&logo=express&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Database-MongoDB-informational?style=flat&logo=mongodb&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Database-MySQL-informational?style=flat&logo=mysql&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Tool-Firebase-informational?style=flat&logo=firebase&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Cloud-AWS-informational?style=flat&logo=amazon&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Cloud-Digital_Ocean-informational?style=flat&logo=digitalocean&logoColor=white&color=brightgreen)

- ## IDEs/Code Editors
  ![](https://img.shields.io/badge/Editor-VSCode-informational?style=flat&logo=visualstudiocode&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Editor-Vim-informational?style=flat&logo=vim&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Editor-Atom-informational?style=flat&logo=atom&logoColor=white&color=brightgreen)

- ## OS:

  ![](https://img.shields.io/badge/OS-Linux-informational?style=flat&logo=linux&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/OS-Windows-informational?style=flat&logo=windows&logoColor=white&color=brightgreen)

- ## Tools
  ![](https://img.shields.io/badge/Tools-Git-informational?style=flat&logo=git&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Tools-Docker-informational?style=flat&logo=docker&logoColor=white&color=brightgreen)
  ![](https://img.shields.io/badge/Shell-Bash-informational?style=flat&logo=gnu-bash&logoColor=white&color=brightgreen)

## Type 2
Change the langname and logoname to generate icons of different languages.

```md
[![](https://img.shields.io/badge/langname?style=for-the-badge&logo=logoname&logoColor=F7DF1E)]
```

- ## Languages:
    <code><img height="30" src="https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E"></code>
  <code><img height="30" src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=java&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/json-5E5C5C?style=for-the-badge&logo=json&logoColor=white"></code>
  <br></br>
  <code><img height="30" src="https://img.shields.io/badge/Python-FFD43B?style=for-the-badge&logo=python&logoColor=blue"></code>
  <code><img height="30" src="https://img.shields.io/badge/C-00599C?style=for-the-badge&logo=c&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/Kotlin-0095D5?&style=for-the-badge&logo=kotlin&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/C%2B%2B-00599C?style=for-the-badge&logo=c%2B%2B&logoColor=white"></code>

- ## Frameworks:

  <code><img height="30" src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"></code>
  <code><img height="30" src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/nestjs-E0234E?style=for-the-badge&logo=nestjs&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"></code>
  <code><img height="30" src="https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white"></code>
  <br></br>
  <code><img height="30" src="https://img.shields.io/badge/Redux-593D88?style=for-the-badge&logo=redux&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/Material%20UI-007FFF?style=for-the-badge&logo=mui&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/Socket.io-010101?&style=for-the-badge&logo=Socket.io&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white"></code>

- ## Backend:
  <code><img height="30" src="https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/GraphQl-E10098?style=for-the-badge&logo=graphql&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/Apollo%20GraphQL-311C87?&style=for-the-badge&logo=Apollo%20GraphQL&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express&logoColor=white"></code>
  <br></br>
  <code><img height="30" src="https://img.shields.io/badge/JWT-000000?style=for-the-badge&logo=JSON%20web%20tokens&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/firebase-ffca28?style=for-the-badge&logo=firebase&logoColor=black"></code>
  <code><img height="30" src="https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge&logo=postgresql&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/MySQL-005C84?style=for-the-badge&logo=mysql&logoColor=white"></code>

- ### OS:
<code><img height="30" src="https://img.shields.io/badge/Ubuntu-E95420?style=for-the-badge&logo=ubuntu&logoColor=white"></code>
  <code><img height="30" src="https://img.shields.io/badge/Windows-0078D6?style=for-the-badge&logo=windows&logoColor=white"></code>  
  <br></br>

## Social Media Icons

Change the msg and logoname to generate icons of different social media.

## Type 1
<p>
<img src="https://img.shields.io/static/v1?label=|&message=WEBSITE&color=ff&style=plastic&logo=realm&logo-color=white"/>
<img src="https://img.shields.io/static/v1?label=|&message=LINKED-IN&color=cdf998&style=plastic&logo=linkedin&logo-color=white"/>
<img src="https://img.shields.io/static/v1?label=|&message=TWITTER&color=d18014&style=plastic&logo=twitter&logo-color=white"/>
<img src="https://img.shields.io/static/v1?label=|&message=DEV-TO&color=cde928&style=plastic&logo=dev.to&logo-color=white"/>
<img src="https://img.shields.io/static/v1?label=|&message=RESUME&color=24555f&style=plastic&logo=react&logo-color=white"/>
<img src="https://img.shields.io/static/v1?label=|&message=GMAIL&color=24555f&style=plastic&logo=gmail&logo-color=white"/>
</p>

```md
[![Type 1](https://img.shields.io/static/v1?label=|&message=msg&color=ff&style=plastic&logo=logoname&logo-color=white)]
```

### Type 2
<p>
<img src="https://img.shields.io/static/v1?label=|&message=WEBSITE&color=ff&style=for-the-badge&logo=realm&logo-color=white" />
<img src="https://img.shields.io/static/v1?label=|&message=LINKED-IN&color=cdf998&style=for-the-badge&logo=linkedin&logo-color=white"/>
<img src="https://img.shields.io/static/v1?label=|&message=TWITTER&color=d18014&style=for-the-badge&logo=twitter&logo-color=white"/>
<img src="https://img.shields.io/static/v1?label=|&message=DEV-TO&color=cde928&style=for-the-badge&logo=dev.to&logo-color=white"/>
<img src="https://img.shields.io/static/v1?label=|&message=RESUME&color=24555f&style=for-the-badge&logo=react&logo-color=white"/>
<img src="https://img.shields.io/static/v1?label=|&message=GMAIL&color=24555f&style=for-the-badge&logo=gmail&logo-color=white"/>
</p>

```md
[![Type 2](https://img.shields.io/static/v1?label=|&message=msg&color=ff&style=for-the-badge&logo=logoname&logo-color=white)]
```

## Top Languages
<img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=MrKrishnaAgarwal&hide=less&title_color=d13979&text_color=c9cacc&icon_color=2bbc8a&bg_color=1d1f21&langs_count=5" />

```md
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR_PROFILE_USERNAME)](https://github.com/MrKrishnaAgarwal/readme-components-github)
```

## Github Stats
<img align="center" src="https://github-readme-stats.vercel.app/api?username=MrKrishnaAgarwal&count_private=true&show_icons=true&theme=radical&hide_border=true&custom_title=Krishna%20Agarwal%27s%20Github%20Stats" alt="MrKrishnaAgarwal’s GitHub Stats" />

```md
[![GitHub stats](https://github-readme-stats.vercel.app/api?username=YOUR_PROFILE_USERNAME)](https://github.com/anuraghazra/readme-components)
```

## Github Stats Graph
<img align="center" src="https://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=MrKrishnaAgarwal&theme=radical&hide_border=true)](https://github.com/MrKrishnaAgarwal" alt="MrKrishnaAgarwal’s GitHub Stats Graph"/>

```md
[![ Github Stats Graph](https://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=YOUR_PROFILE_USERNAME&theme=radical&hide_border=true)
```

## Github Streak Stats
 <img align="center" src="https://github-readme-streak-stats.herokuapp.com/?user=MrKrishnaAgarwal&theme=dark" alt="MrKrishnaAgarwal’s GitHub Streak Stats"/>
 
 ```md
 [![Github Streak Stats](https://github-readme-streak-stats.herokuapp.com/?user=YOUR_PROFILE_USERNAME&theme=dark)
 ```
 
## Github Activity Graph
<img align="center" src="https://activity-graph.herokuapp.com/graph?username=MrKrishnaAgarwal&theme=react-dark&hide_border=true&custom_title=Activity%20Graph" alt="MrKrishnaAgarwal’s GitHub Activity Graph"/>

```md
[![Github Activity graph](https://activity-graph.herokuapp.com/graph?username=YOUR_PROFILE_USERNAMEl&theme=react-dark&hide_border=true&custom_title=Activity%20Graph)](https://github.com/MrKrishnaAgarwal/readme-components-github)
```

## Github Repo Extra Pins
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=MrKrishnaAgarwal&repo=readme-components-github" />
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=MrKrishnaAgarwal&repo=MrKrishnaAgarwal" />

```md
[![Github Repo Card](https://github-readme-stats.vercel.app/api/pin/?username=YOUR_PROFILE_USERNAME&repo=YOUR_REPO_NAME)](https://github.com/MrKrishnaAgarwal/readme-components-github)
```
 
## Github Trophies
 <img src="https://github-profile-trophy.vercel.app/?username=MrKrishnaAgarwal&theme=onedark&column=3&margin-w=15&margin-h=15" />
 
 ```md
 [![Github Trophies](https://github-profile-trophy.vercel.app/?username=YOUR_PROFILE_USERNAME&theme=onedark&column=3&margin-w=15&margin-h=15)](https://github.com/MrKrishnaAgarwal/readme-components-github)
 ```
 
## Github Detailed Stats
<img src="https://camo.githubusercontent.com/78b890d16032483830a979f4523d7f66f4e0b158d718a2bea07b7feb4abf62ef/68747470733a2f2f6d6574726963732e6c65636f712e696f2f4d724b726973686e614167617277616c3f74656d706c6174653d636c61737369632661637469766974793d3126666f6c6c6f7775703d31266c616e6775616765733d31266c696e65733d312670656f706c653d312661637469766974792e6c696d69743d352661637469766974792e646179733d31342661637469766974792e66696c7465723d616c6c2661637469766974792e7669736962696c6974793d616c6c2661637469766974792e74696d657374616d70733d66616c7365266c616e6775616765732e636f6c6f72733d676974687562266c616e6775616765732e7468726573686f6c643d302532352670656f706c652e6c696d69743d32382670656f706c652e73697a653d32382670656f706c652e74797065733d666f6c6c6f77657273253243253230666f6c6c6f77696e672670656f706c652e6964656e7469636f6e733d747275652670656f706c652e73687566666c653d7472756526636f6e6669672e74696d657a6f6e653d4173696125324643616c637574746126636f6e6669672e7477656d6f6a693d74727565"/>

```md
[![Github Detailed Stats](https://metrics.lecoq.io/YOUR_PROFILE_USERNAME?template=classic&activity=1&followup=1&languages=1&lines=1&people=1&activity.limit=5&activity.days=14&activity.filter=all&activity.visibility=all&activity.timestamps=false&languages.colors=github&languages.threshold=0%25&people.limit=28&people.size=28&people.types=followers%2C%20following&people.identicons=true&people.shuffle=true&config.timezone=Asia%2FCalcutta&config.twemoji=true)](https://github.com/MrKrishnaAgarwal/readme-components-github)
```

**or**
<br>
<a href="https://metrics.lecoq.io">**Create Customized Version Here**</a>
<br>
<br>
## It's a wrap!

<br>
<br>

Follow me on: [GitHub](https://github.com/MrKrishnaAgarwal) and [DEV.to](https://dev.to/krishnaagarwal)
<br>
<br>

**Stay Tuned**

<br> 
<br>

## 🤗 Thanks

<img src="https://octodex.github.com/images/welcometocat.png" width= 450/>