Parth Johri

Posted on Jun 29 • Edited on Jun 30

🚀 Create An Attractive GitHub Profile README 📝

#github #100daysofcode #tutorial #beginners

Enhancing Your GitHub README with my custom Profile README Template.

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 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.

Create a New Repository by clicking on the New Button.

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

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.

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, 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

<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.

## <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

<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

<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.

<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.

<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
  <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

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

<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

<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 or Quotes.

Using GitHub Actions

Merged PR GitHub Action

This is a simple project which I have made to automate my recent Merged PRs, you can follow this blog to set up the merged PR GitHub Action.

### ✅ 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, you can automate your recent activity and showcase on profile.

### <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 automates and creates an animation svg of snake eating your contribution cells.

Additional Cards

Real Time Spotify Music this would play real time spotify music on your GitHub Profile.

Waka Time Stats this action would set up the waka time stats, to showcase on your GitHub Profile.

GitHub Trophy will dynamically generate stats based on your GitHub Profile.

ReadME Terminal this generates a unique terminal based gif for your GitHub Profile.

Metrics this will generate a detailed stats infographic based on your GitHub Profile.

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

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.

Top comments (29)

Leví Arista • Jun 30

Nice guide Parth! Very complete and detailed.
I'd like to also share this tool in case you want to generate a profile header to add to your profile 😉

Parth Johri • Jun 30

Thank you @leviarista for your kind words, and the tool is great to quickly generate customisable headers, would add it to the blog as well, thank you.

Rishabh Verma • Jun 30

Your GitHub profile looks awesome, dude! I'm going to customize my Git profile just like yours. Also, I checked out your LinkedIn profile and saw your post about your achievement of solving 1000 LC problems. It's not just a small achievement—it's something big. Be proud of yourself!