Make GitHub Readme Like Pro
Tags: github, beginners, githubactions, readme
Published: 2023-03-18 04:22:32

I bet that after reading this, you will be able to create a profile better than 80% of GitHub users.

> Part 1 covered basic concepts like markdown, GitHub actions, and terminologies that are helpful to understand some of the sections explained in this article. I recommend reviewing these resources before diving into the following sections.

Sit tight & explore!

---

## Badges

These can be easily added to your profile using standardized [badges/shields](https://github.com/badges/shields)
These can be used for various reasons like showing your expertise, and the overall stats.
While not compulsory, they are a huge bonus and can even be used to show the activity of a repository with commits per month, the number of maintainers, or skills.

&nbsp;

### 1. [Badges 4 README](https://github.com/alexandresanlim/Badges4-README.md-Profile)

With over 700 badges across 35+ categories, Badges 4 README is a great resource for adding badges to your profile. It's easy to use with just one line of code.

Check out the [guidelines](https://github.com/alexandresanlim/Badges4-README.md-Profile#how-to-use) to start using these badges.

Preview:
![Image of sample badges](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpstgk1195xtbpqzwkps.png)

&nbsp;

### 2. [Forthebadge](https://forthebadge.com/)

Forthebadge is another great resource for pre-defined badges that are ready to use. With over 40 awesome badges to choose from, you can easily add them to your profile with just one click of a button.

Preview:
![Image of sample forthebadge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4ylto4beyx6p6fmgh3s.png)

&nbsp;

### 3. [Custom Badges](https://custom-icon-badges.demolab.com/)

If you need custom badges with your custom icons, then Custom Badges is the perfect resource for you. 

Check out the [guidelines](https://github.com/DenverCoder1/custom-icon-badges/blob/main/README.md#-how-to-use) to start using these badges.

&nbsp;

### 4. [shields.io](https://github.com/badges/shields) 
Shields.io is a comprehensive resource that offers an API for creating your badges, and an [npm](https://www.npmjs.com/package/badge-maker) package for easy use.

---

## Icons

When it comes to icons, different developers have different preferences. While some may prefer traditional icons, others find animated ones more appealing. 
Check out these different types of icons to add a touch of personality and professionalism to your profile.

&nbsp;

### 1. [TechStack Generator](https://techstack-generator.vercel.app/)

✔ Includes animated Tech stack icons
✔ Compatible with HTML & Markdown
✔ Currently includes 28 Icons

![TechStack Animated Icons image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lq7n4xxhoh0rjlpadfd.png)

&nbsp;

### 2. [Profile Technology Icons](https://github.com/marwin1991/profile-technology-icons)

✔ Offers 25+ categories
✔ Provides over 140 Icons

Preview:
![Image of git icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gw6tqzycpp48wfu2g3c.png)

&nbsp;

### 3. [Skill Icons](https://skillicons.dev/)

Icons with more customization and better browser capability

✔ Offers Icons with more customization and better browser capability
✔ Includes 100+ Technology Icons
✔ Features several icons with just 1 line of code
✔ Option to control icons per line
✔ Available in both Dark & Light mode

Preview:
![Skill Icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggnzf1xbueaxr33616vr.png)

&nbsp;

### 4. [Animated Icons by Microsoft](https://animated-fluent-emoji.vercel.app/)

The collection has a unique style that features Extra Clean animated & non-animated icons, adding an element of excitement and sophistication to your profile.

✔ Includes Extra Clean animated icons
✔ Blend of animated and non-animated icons
✔ Over 200 icons across 9 categories

Preview:
![Animated Emojis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gva0hn1pjkow1gyqs3rw.png)

&nbsp;

### 5. [Simple Icons](https://simpleicons.org/)

✔ Features over 2440 SVG icons for popular brands
✔ Offers pixel-perfect brand icons
✔ Available in both dark and light modes
✔ Also includes brand guidelines and brand colors
✔ Allows easy one-click copying/downloading of SVG files

---

## [Cool GIFs for GitHub](https://github.com/Anmol-Baranwal/Cool-GIFs-For-GitHub/blob/main/README.md)

Using the right GIFs can add significant value to your profile, capturing the attention of viewers and making it more engaging.

✔ Over 60 GIFs across 2 categories
✔ Includes additional profile ideas
✔ Featuring dancing development logos

Preview:
![JavaScript is the Boss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqmnmkj83x4ectq4vxy3.png)

---

## [Metrics](https://github.com/lowlighter/metrics)

This repository is a must-have for anyone looking to generate useful metrics for their user profile or organization.

✔ More than 300 options available
✔ Includes 4+ styles for overall stats
✔ Deep customization is possible with 44 plugins

What kind of metrics can you generate?

✔ Track your coding habits and activity
✔ Measure lines of code changed
✔ Discover your most-used programming languages
✔ Showcase notable contributions and featured repositories
✔ View sponsorships, discussions, and leetcode stats, among others.

> Check out my [profile](https://github.com/Anmol-Baranwal/Anmol-Baranwal/tree/main/.github/workflows) where I've used several metrics through workflows.

Highly recommended: Use metrics through workflows to enhance your profile's basic stats and quickly customize it for any changes.

---

## [Typing SVG](https://readme-typing-svg.demolab.com/demo/)

Add a dynamic touch to your profile with the Typing SVG feature, which simulates the appearance of typing and deleting sentences.

Preview:
![Typing SVG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6fnonhnxiz8lhvqirfa.png)

✔ Easy to use (requires only one line of code)
✔ Offers more than 12 different options
✔ Supports multiple sentences

---

## Readme Stats

By including these stats in your profile readme, you can provide potential employers, collaborators, and visitors with a clear picture of your coding activity and the nature of your projects.

&nbsp;

### 1. [GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats)

It provides:
✔ GitHub statistics card
✔ Most Languages Used Card
✔ Extra Pins with Wakatime
✔ Customization options

Preview:
![Stats Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7akpubnhqp6iwlf2lve4.png)

&nbsp;

### 2. [Direct URL Stats](https://github.com/Anmol-Baranwal/Hack-Your-Growth#readme-stats-)

If you directly want to check by the URL without going through everything. This is for you.

✔ Stats sufficient for those new to GitHub profile stats
✔ Includes link to helpful repositories
✔ Includes trophy achievements
✔ Includes daily commit graph

&nbsp;

### 3. [Profile Summary Stats](https://profile-summary-for-github.com/)

✔ Repositories grouped by language
✔ Stars per language
✔ Commits per Language
✔ Stars per repository
✔ Commits per repository

Preview:
![Profile Summary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ta4lokjb84a9s6g2ix4.png)

&nbsp;

### 4. [Trophy Achievements](https://github.com/ryo-ma/github-profile-trophy)

```javascript
Replace "your_username" with your GitHub username:
https://github-profile-trophy.vercel.app/?username=your_username
```

Preview:
![Trophy Achievements of Anmol-Baranwal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcubriam949ktusvd8lm.png)

&nbsp;

### 5. [Wakatime Readme Stats](https://github.com/anmol098/waka-readme-stats)

Wakatime is a time-tracking tool that helps developers monitor and analyze the time spent on different programming languages and projects.
This tool can provide valuable insights for potential employers, collaborators, and visitors, giving them a clear understanding of your coding activity and skillset.

Preview:
![Wakatime statistics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7hz2ezdd2ikd03gxn5w.png)

---

## [Blog Posts](https://github.com/marketplace/actions/blog-post-workflow)

Using a GitHub action, you can easily display your latest posts from platforms like YouTube, Stack Overflow, Dev.to, Hashnode, and Medium, many more. 
This feature is fully automated and provides over 25 customization options.

✔ Easy to use
✔ 25+ Customization options

Preview:
![Blog Post Workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj8v9ne163g06mpnrhcb.png)

---

## [Snake Contribution Graph](https://github.com/marketplace/actions/generate-snake-game-from-github-contribution-grid)

You can follow the steps mentioned on the website to generate your graph.

Alternatively, you can check [here](https://github.com/Anmol-Baranwal/Anmol-Baranwal) to see how I have done the same through a [workflow](https://github.com/Anmol-Baranwal/Anmol-Baranwal/blob/main/.github/workflows/main.yml).

> Check out the live preview [here](https://platane.github.io/snk/)

Preview:
![Snake eating contribution graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f6y3rlorm5mrcgpsujz.png)

&nbsp;

---

It took me months of searching to discover these valuable resources that contain almost everything you need to make your GitHub profile stand out.

I'd love to hear from you! Share your opinions, ideas, and questions with us in the comments section.

Let's connect! If you have any questions or would like to continue the discussion, feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/Anmol-Baranwal/)