🚀 Create An Attractive GitHub Profile README 📝

Parth Johri — Sat, 29 Jun 2024 06:21:54 +0000

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.

🚀 Elevate Your GitHub Profile with the Merged PRs GitHub Action

Parth Johri — Fri, 28 Jun 2024 08:36:06 +0000

Introduction

I am excited to share my newest project, Merged PRs GitHub Action, in the spirit of developing solid coding habits.

This project is designed to automatically track and display the number of merged pull requests in your GitHub repository, providing you with a visual representation of your contributions.

The project idea is inspired by github-activity-readme. However, there was a catch: the activity showed all closed, opened, commented, merged PRs/issues, and comments, without the option to specify which activities to showcase on the profile. This led me to create this simple project which makes use of a python script and GitHub Action to only update the Merged PRs on your profile.

By integrating this GitHub Action, you'll not only streamline your workflow but also gain valuable insights into your merged project's activity.

You can watch it in action on my GitHub Profile

Happy coding! 🚀

Step-by-Step Guide to Set Up GitHub Action for Merging PRs

How to Use?

Go to your Profile README repository and create the .github/workflows/action.yml file using the configuration provided in the GitHub Repository.
Add the main.py file from the GitHub Repository to your Profile README repository. Make sure to replace ParthJohri with your username in the following line:

   url = "https://api.github.com/search/issues?q=is:pr+author:ParthJohri+is:merged"

Add the requirements.txt file from the GitHub Repository to your Profile README repository.
Ensure your Profile README.md contains the below comments, to show your merged PRs in your Profile ReadME:

<!--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)
2. 🎉 Merged PR [11](https://github.com/monacodelisa/LGBTQ-definitions/pull/11) - [monacodelisa/LGBTQ-definitions](https://github.com/monacodelisa/LGBTQ-definitions)
3. 🎊 Merged PR [876](https://github.com/glasskube/glasskube/pull/876) - [glasskube/glasskube](https://github.com/glasskube/glasskube)
4. 🥂 Merged PR [7](https://github.com/monacodelisa/LGBTQ-definitions/pull/7) - [monacodelisa/LGBTQ-definitions](https://github.com/monacodelisa/LGBTQ-definitions)
5. 🙌🏼 Merged PR [5](https://github.com/monacodelisa/LGBTQ-definitions/pull/5) - [monacodelisa/LGBTQ-definitions](https://github.com/monacodelisa/LGBTQ-definitions)
<!--Finish Merged PRs-->

By default the cron jobs runs every 6 hours or you can also manually start it. You can also make use of Cron Tab to change the cron job time as per your requirement.

Acknowledgements

Inspired by jamesgeorge007/github-activity-readme

Please star ⭐️ the repository if you liked this simple project and let me know of any suggestions to improve it.

DEV Community: Parth Johri

🚀 Create An Attractive GitHub Profile README 📝

Create Your Special README Repository

Introduction

About Me Section

Detailed Sections

Resume and Experience

Coding Handles and Tech Stack

Projects

Stats and Activity

Social Links and Contact

Adding Jokes/ Songs/ Quotes

Using GitHub Actions

Merged PR GitHub Action

Recent Activity

Contribution Graph Snake Game

Additional Cards

Acknowledgements

🚀 Elevate Your GitHub Profile with the Merged PRs GitHub Action

Introduction

Step-by-Step Guide to Set Up GitHub Action for Merging PRs

How to Use?

Acknowledgements