🚀 Create An Attractive GitHub Profile README 📝
Tags: github, 100daysofcode, tutorial, beginners
Published: 2024-06-29 06:21:54

Enhancing Your GitHub README with my custom Profile README Template.

<img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHVrZ2xhMHNqdjFwNzFzdGp0dW4wbXFjZjYzNG9pemViOThld2wzcCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/U3UP4fTE6QfuoooLaC/giphy.gif" width="480" height="360"/>

Welcome to this journey of elevating your GitHub profile with a standout README! 

Your GitHub README is the first impression for potential employers, collaborators, and fellow developers. An engaging, well-structured README not only highlights your skills and projects but also showcases your personality and professionalism. Here, I'll guide you on how to enhance your GitHub README using my custom comprehensive template. 

You can visit my [GitHub Profile](https://github.com/ParthJohri) to see what the finished readme would look like!

### Create Your Special README Repository

Before that, let me walk you through the creation phase of your special README repository.

- Create a GitHub account and log into your GitHub.
- Go to your GitHub User Profile.
- Besides the `Overview` tab, you could see the `Repositories` tab, switch to your `Repositories` tab. This contains all your created repositories.

![Repositories Tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqxtjpwoehf4nw9kdj1i.png)

- Create a New Repository by clicking on the `New` Button.

![New Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgstbuve59hl89d13gsp.png)

- Here comes the important part, make sure you name your repository the exact same as your username.

![GitHub Repository Name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn5p9rhqz29tl2nhm5ou.png)

- Check if your GitHub repository is `Public`. You can also change your repository visibility settings by opening the specific repository and moving to the bottom of the `Settings` tab.

![Repository Visibility](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btq6dy5s5mixt9b4rz2t.png)

- Select the option for `Add a README file`, which will add an empty Markdown file.

- Click on the `Create Repository` button to finally create your account.

### Introduction 

We will be writing our README in [Markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax), the same language on which this article is written. 
Start your README with a warm greeting and a brief introduction. You can make use of an eye-catching header or an animated GIF to add some personal touch. 

**Ensure that your `/icons` folder which would contains your `icons` used for the GitHub Profile, to be pushed it onto your main branch of your GitHub Profile Special Repository.**

```
https://github.com/YourUsername/YourUsername/blob/main/icons/activity.gif
```

```html
<h1 align="center">Hi <img src="https://github.com/YourUsername/YourUsername/blob/main/icons/Hi.gif" width="28px"/>, I'm [Your Name]</h1>
<h2 align="center">
  <img src="https://komarev.com/ghpvc/?username=[YourUsername]&color=dc143c&style=for-the-badge" alt="Profile Views" style="height:21px;">
  Fullstack Developer
  <a href="https://[your-portfolio-link]">
    <img src="https://img.shields.io/badge/Portfolio-543DE0?style=for-the-badge&logo=About.me&logoColor=white" alt="Portfolio" style="height:22px;">
  </a>
</h2>
<div align="center">
 <img alt="GIF" src="https://media4.giphy.com/media/11KzOet1ElBDz2/giphy.gif?cid=6c09b952ufa3xxbbm0mpuadm2zaik3wjp4m9luz2ly0lyz8d&ep=v1_internal_gif_by_id&rid=giphy.gif&ct=g" />
</div>
```

### About Me Section

Provide a brief overview of who you are, your specialties, and what drives you. Use bullet points or a concise paragraph to maintain readability.

```markdown
## <img align ='center' src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExdjh2dDM4bDhyYzM5NmppaHJ6dG56Mmh3bTkyanFkdWRvZ3R1cGoycSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9ZQ/LOnt6uqjD9OexmQJRB/giphy.gif" width="37" /> About Me

I am a passionate Fullstack Developer with a strong foundation in both frontend and backend technologies. A versatile developer specializing in **MERN, Android Development, and Chatbot Development** with a passion for continuous learning. My expertise lies in integration, improving user interfaces, and enhancing overall user experiences. I thrive on solving challenging problems and creating innovative solutions.
```

### Detailed Sections

Utilize collapsible sections to organize your README effectively. This keeps the document clean and navigable. Here’s how you can structure sections for your resume, experience, coding handles, tech stack, and projects:

#### Resume and Experience

```html
<details>
 <summary>
    <h2> 
      <img align="center" src="https://github.com/[YourUsername]/[YourUsername]/blob/main/icons/about.png" width="37" /> 
    Resume
    </h2>
</summary>

 <details>
  <summary><h4> <img align="center" src="https://github.com/[YourUsername]/[YourUsername]/blob/main/icons/academics.gif" width="29"/> Academics</h4></summary>
  <span><img src="https://img.shields.io/badge/BTECH-[YourUniversity]-1877F2?style=for-the-badge"></span>
  <span><img src="https://img.shields.io/badge/GPA-[YourGPA]-EFEEE9?style=for-the-badge"></span>
 </details>
 
 <details>
  <summary><h4> <img align="center" src="https://github.com/[YourUsername]/[YourUsername]/blob/main/icons/experience.gif" width="29"/> Experience</h4></summary>
  - **[Your Role] ** at [Company] | [Duration]
    - [Work Description]
 </details>
</details>
```

#### Coding Handles and Tech Stack

```html
<details>
  <summary><h4> <img align="center" src="https://user-images.githubusercontent.com/74038190/216122041-518ac897-8d92-4c6b-9b3f-ca01dcaf38ee.png" width="29"/> Coding Handles</h4></summary>
  [![LeetCode](https://img.shields.io/badge/LeetCode-000000?style=for-the-badge&logo=LeetCode&logoColor=#d16c06)](https://www.leetcode.com/[your-handle])
  [![Codeforces](https://img.shields.io/badge/Codeforces-445f9d?style=for-the-badge&logo=Codeforces&logoColor=white)](https://codeforces.com/profile/[your-handle])
  [![GeeksForGeeks](https://img.shields.io/badge/GeeksforGeeks-gray?style=for-the-badge&logo=geeksforgeeks&logoColor=35914c)](https://auth.geeksforgeeks.org/user/[your-handle]/practice)
</details>

<details>
  <summary><h4> <img align="center" src="https://github.com/[YourUsername]/[YourUsername]/blob/main/icons/techstack.gif" width="29"/> Tech Stack</h4></summary>
  ![C++](https://img.shields.io/badge/c++-%2300599C.svg?style=for-the-badge&logo=c%2B%2B&logoColor=white)  
  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 
  ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) 
</details>
```

### Projects

Highlight your key projects with descriptions and their impacts. Use icons and badges to visually represent the technologies used.

```html
<details>
  <summary><h4> <img align="center" src="https://github.com/[YourUsername]/[YourUsername]/blob/main/icons/projects.gif" width="29"/> Projects</h4></summary>

  #### <a href="https://github.com/[YourUsername]/[Project-Name]">[Project Name]</a>
  <span><img src="https://img.shields.io/badge/Node.js-%2343853D.svg?style=for-the-badge&logo=node.js&logoColor=white"> <img src="https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white"></span>
  - Implemented features to notify users about new opportunities.
  - Achieved a user base of X, surpassing initial projections.
</details>
```

### Stats and Activity

Showcase your coding activity and contributions using GitHub stats and activity graphs.

![GitHub ReadMe Stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xucstf7l5akkhf4fwbaj.png)

![GitHub Contribution Statd](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttcsc1wyg5b5ao6bxu5z.png)

```html
<details>
  <summary><h2> <img align="center" src="https://github.com/[YourUsername]/[YourUsername]/blob/main/icons/stats.gif" width="32"/> Stats</h2></summary>
  <div align="center">
    ![](https://github-readme-stats.vercel.app/api?username=[YourUsername]&theme=tokyonight&hide_border=false&include_all_commits=true&count_private=false)<br/>
    ![](https://github-readme-streak-stats.herokuapp.com/?user=[YourUsername]&theme=tokyonight&hide_border=false)<br/>
    ![](https://github-readme-stats.vercel.app/api/top-langs/?username=[YourUsername]&theme=tokyonight&hide_border=false&include_all_commits=true&count_private=false&layout=compact)<br/>
    ![](https://github-readme-activity-graph.vercel.app/graph?username=[YourUsername]&theme=tokyo-night)
  </div>
</details>
```
Apart from GitHub Stats, you can also showcase your LeetCode Stats/ Codeforces Stats like this:-

![Leetcode Stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxbg6hu9ri7tsj527zsn.png)

![GitHub Stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9erxszttsk7gfultagp.png)

```html
  ### Leetcode
  <div align="center">
 
  ![LeetCode Stats](https://leetcode.card.workers.dev/YourUsername?theme=auto&font=baloo&extension=null)
 
  </div>

  ### Codeforces
  <div align="center">
 
  ![Codeforces Stats](https://codeforces-readme-stats.vercel.app/api/card?username=YourUsername)
 
  </div>
  
```
### Social Links and Contact

![Contact](https://media.giphy.com/media/L8K62iTDkzGX6/giphy.gif)

End your README with your social links and contact information to make it easy for others to connect with you.

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

```html
<details>
  <summary><h2> <img align="center" src="https://github.com/[YourUsername]/[YourUsername]/blob/main/icons/Contact.gif" width="37"/> Contact Me</h2></summary>
  <p>
    <i>You can reach out to me via</i>
    <a href="mailto:[your-email]">
      <img align="center" src="https://github.com/[YourUsername]/[YourUsername]/blob/main/icons/Gmail.gif" width="100"/>
    </a>
  </p>
</details>
```

### Adding Jokes/ Songs/ Quotes 

![Random Joke](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43xeu5q3gv5koi4pg5pe.png)
```html
<details>
  <summary>Click to see a random joke</summary>
  <div align="center">
  
  ![Jokes Card](https://readme-jokes.vercel.app/api?theme=halloween)
  
  </div>
</details>
```
Similarly you can utilise for [Spotify](https://github.com/JeffreyCA/spotify-recently-played-readme) or [Quotes](https://github.com/PiyushSuthar/github-readme-quotes).

![Spotify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ip22sjt873j9ufuhjom.png)

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

### Using GitHub Actions

#### Merged PR GitHub Action

![Merged PR GitHub Action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfybxp0tvg55okeu60ur.png)

This is a simple project which I have made to automate my recent Merged PRs, you can follow this [blog](https://dev.to/parth_johri/elevate-your-github-profile-with-the-merged-prs-github-action-31ek) to set up the merged PR GitHub Action.

```html
### ✅ Merged PRs
<!--Start Count Merged PRs-->
  <span><img src="https://img.shields.io/badge/Total_Merged_PRs-34-1877F2?style=for-the-badge"></span>
<!--Finish Count Merged PRs-->

<!--Start Merged PRs-->
1. 🥳 Merged PR [379](https://github.com/pymc-labs/CausalPy/pull/379) - [pymc-labs/CausalPy](https://github.com/pymc-labs/CausalPy)
<!--Finish Merged PRs-->
```

#### Recent Activity

With this [Recent Activity GitHub Action](https://github.com/jamesgeorge007/github-activity-readme), you can automate your recent activity and showcase on profile.

![Recent Activity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/152yc2o9besv0fyj9h00.png)
```html
### <img align="center" src="https://github.com/YourUsername/YourUsername/blob/main/icons/activity.gif"  width="25"/> Recent Activity
<!--START_SECTION:activity-->
1. 🗣 Commented on [#2944](https://github.com/actualbudget/actual/issues/2944#issuecomment-2197605111) in [actualbudget/actual](https://github.com/actualbudget/actual)
<!--END_SECTION:activity-->
```

#### Contribution Graph Snake Game 

This [Contribution Graph GitHub Action](https://github.com/Platane/snk) automates and creates an animation svg of snake eating your contribution cells.
 
![GitHub Snake Animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65nhlbhnhdp9npmw3u47.png)

### Additional Cards

[Real Time Spotify Music](https://github.com/novatorem/novatorem) this would play real time spotify music on your GitHub Profile.

[Waka Time Stats](https://github.com/athul/waka-readme) this action would set up the waka time stats, to showcase on your GitHub Profile.

[GitHub Trophy](https://github.com/ryo-ma/github-profile-trophy) will dynamically generate stats based on your GitHub Profile.

[ReadME Terminal](https://github.com/x0rzavi/github-readme-terminal) this generates a unique terminal based gif for your GitHub Profile.
 
[Metrics] (https://github.com/lowlighter/metrics) this will generate a detailed stats infographic based on your GitHub Profile.

[Profile Header Generator](https://leviarista.github.io/github-profile-header-generator/) - this tool by @leviarista will help you generate a custom GitHub Profile Header with different backgrounds and themes.

By following this template, you can create your own comprehensive, visually appealing README that effectively showcases your skills, projects, and personality. Remember, the key is to keep it organized, engaging, and reflective of your unique style and contributions.

### Acknowledgements

1. https://github.com/antonkomarev/github-profile-views-counter
2. https://github.com/Ileriayo/markdown-badges
3. https://github.com/anuraghazra/github-readme-stats
4. https://github.com/Ashutosh00710/github-readme-activity-graph
5. https://github.com/JacobLinCool/LeetCode-Stats-Card
6. https://github.com/RedHeadphone/codeforces-readme-stats
7. https://github.com/ABSphreak/readme-jokes
8. https://github.com/JeffreyCA/spotify-recently-played-readme
9. https://github.com/PiyushSuthar/github-readme-quotes
10. https://github.com/ParthJohri/github-mergedpr-readme
11. https://github.com/jamesgeorge007/github-activity-readme
12. https://github.com/Platane/snk
13. https://github.com/novatorem/novatorem
14. https://github.com/athul/waka-readme
15. https://github.com/ryo-ma/github-profile-trophy
16. https://github.com/x0rzavi/github-readme-terminal
17. https://github.com/lowlighter/metrics
18. https://github.com/leviarista/github-profile-header-generator

![Envelope](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExeGFwams4Z25ocm13emlhYnBianV3bTN5ejd3MHBncnNmYTJzYmJtdSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/BPJmthQ3YRwD6QqcVD/giphy.gif)

Give yourself an applause 👏, finally your customized GitHub Profile README is done and dusted! Share your GitHub Profile README in the comments and let me know if I missed anything, I'd be happy to add it.