Introduction:
In the world of software development, showcasing your skills and projects is essential. One effective way to do this is by creating an impressive GitHub profile README. A GitHub profile README is a Markdown file that allows you to share details about yourself, your skills, interests, and GitHub stats with the GitHub community. This article will guide you through the process of creating a compelling GitHub profile README that will captivate visitors and leave a lasting impression.
Section 1: Understanding the GitHub Profile README
The GitHub Profile README is an influential markdown file that empowers you to present comprehensive details about yourself on your GitHub profile. You can also use it to highlight your contributions to open source projects, share badges or awards, or provide instructions on how to use or contribute to your project.
When you create a README.md file and add it to the root directory of a GitHub repository that matches your username, GitHub automatically displays its contents on your profile page, giving visitors an immediate glimpse of your work and interests.
Section 2: Getting Started
To create your GitHub Profile README, follow these steps:
Log in to your GitHub account.
-
Click on the New button at the top right of the page.
-
On the Create a new repository page, enter your GitHub username as the repository name. After entering your username, you will get the below message at the bottom of it.
Check the Public checkbox to make your profile visible to everyone.
-
Check the Add a README file checkbox to create a README.md file where you’ll add your profile contents.
Click on the Create repository button to create the repository and README.md file.
Section 3: Crafting an Impressive Header
The header section of your GitHub profile README is the first thing visitors will notice. Let’s make it eye-catching:
Choose a captivating GIF that represents your personality or skills. You can get free gifs from Giphy.
We’re using the img tag to add the gif. The gif, I am using is available here.
-
Paste the below code on the README.md:
<div id="header" align="center"> <img src="https://media.giphy.com/media/M9gbBd9nbDrOTu1Mqx/giphy.gif" width="100"/> </div> -
You will get the below output:
To add a social network badges with hyperlinks to your profiles, you can use Shields.io. It can help us to generate customized badges for LinkedIn, Twitter, YouTube, etc.
-
Paste the below code to generate the badge:
<div id="badges"> <a href="your-linkedin-URL"> <img src="https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn Badge"/> </a> <a href="your-twitter-URL"> <img src="https://img.shields.io/badge/Twitter-blue?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter Badge"/> </a> </div>Let’s try to understand the code:
- We are getting the image from the shields.io website, we are passing few query parameters to the URL like style, logo and color to get the badge of our choice.
- We are generating two badges, one for LinkedIn and one for Twitter.
Note: Please replace your-linkedin-URL with your linked profile URL and your-twitter-URL with your twitter profile URL.
-
We will get the below output after adding the below code to our existing README.md file.
-
Let’s add a profile view counter badge. This badge will show how many github profile views we are getting. We will be using an open-source project called Github Profile Views Counter for implementing this. Just pass your github username to the below endpoint to get the profile views.
-
Let’s add the code in the img tag to show as a badge. Paste the below code to the README.md file
<img src="https://komarev.com/ghpvc/?username=your-github-username&style=flat-square&color=blue" alt=""/> -
We will the below output after pasting the code:
-
Let’s add one last thing. Paste the below code to the file:
<h1> hey there <img src="https://media.giphy.com/media/hvRJCLFzcasrR4ia7z/giphy.gif" width="30px"/> </h1> -
In the above code, we are just printing hey there with a wave gif, which has been taken from giphy. We will get the below output:
Section 4: Introduce Yourself and Highlight Your Skills
Add a gif and then in the About Me section, provide a brief introduction and showcase your skills.
-
Paste the below code to add a gif at the center:
<div align="center"> <img src="https://media.giphy.com/media/dWesBcTLavkZuG35MI/giphy.gif" width="600" height="300"/> </div> -
We will get the below output the code:
-
Before adding the About Me section, let’s add a horizontal rule using the — — — . It’s the markdown syntax. Paste the below code to add the horizontal rule and the heading for the About Me:
--- ### :man_technologist: About Me : : man_technologist : is the short code for the emoji. You can get the list of emoji from this GitHub repository.
Write a concise self-introduction and mention your role, expertise, or any unique qualities. Create a bullet-point list of your skills, using emoji to represent each skill.
-
I have written the below code for the introduction:
Welcome to my GitHub profile! I'm a passionate Full Stack Developer <img src="https://media.giphy.com/media/WUlplcMpOCEmTGBtBW/giphy.gif" width="30"> from India, specializing in .NET development. - 💻 Currently, I'm working as a Dotnet Developer, utilizing my expertise in C# and .NET to develop robust web applications. - ✍️ I also enjoy sharing my knowledge through technical blogs, where I write about my experiences, tutorials, and best practices. - ⚡ In my free time, I love exploring the latest tech articles and staying updated with emerging technologies and best practices. - 📫 How to reach me: [](your-linkedIn-Url)Note: I have used the emoji directly, you can also use the emoji form the repo, which I have shared above.
-
We will get the below output:
Section 5: Highlighting Languages and Tools
Display the programming languages and tools you are proficient in using visual icons. Here’s how:
-
Let’s first add a horizontal rule using — — — and a heading for Languages and tools. Paste the below code to create that:
--- ### :hammer_and_wrench: Languages and Tools : Visit the DevIcons GitHub repository, which offers a collection of logos for various languages and tools. Choose the icons that represent your skills and copy their URLs. Embed the icons in your README using img tags and align them in a visually pleasing manner.
-
I have used the below ones:
<div> <img src="https://github.com/devicons/devicon/blob/master/icons/dot-net/dot-net-original.svg" title="Dotnet" alt="Dotnet" width="40" height="40"/> <img src="https://github.com/devicons/devicon/blob/master/icons/dotnetcore/dotnetcore-original.svg" title=".NET Core" alt=".Net Core" width="40" height="40"/> <img src="https://github.com/devicons/devicon/blob/master/icons/html5/html5-original.svg" title="HTML5" alt="HTML" width="40" height="40"/> <img src="https://github.com/devicons/devicon/blob/master/icons/css3/css3-plain-wordmark.svg" title="CSS3" alt="CSS" width="40" height="40"/> <img src="https://github.com/devicons/devicon/blob/master/icons/javascript/javascript-original.svg" title="JavaScript" alt="JavaScript" width="40" height="40"/> <img src="https://github.com/devicons/devicon/blob/master/icons/jquery/jquery-original-wordmark.svg" title="jQuery" alt="jQuery" width="40" height="40"/> <img src="https://github.com/devicons/devicon/blob/master/icons/bootstrap/bootstrap-plain.svg" title="Bootstrap" alt="Bootstrap" width="40" height="40"/> <img src="https://github.com/devicons/devicon/blob/master/icons/mongodb/mongodb-original-wordmark.svg" title="mongoDB" alt="mongoDB" width="40" height="40"/> <img src="https://github.com/devicons/devicon/blob/master/icons/azure/azure-original-wordmark.svg" title="Azure" alt="Azure" width="40" height="40"/> <img src="https://www.vectorlogo.zone/logos/getpostman/getpostman-icon.svg" title="Postman" alt="Postman" width="40" height="40"/> <img src="https://github.com/devicons/devicon/blob/master/icons/git/git-original-wordmark.svg" title="Git" **alt="Git" width="40" height="40"/> </div> -
It will generate the following output:
Section 6: Show GitHub Stats
Let’s showcase some GitHub stats:
-
Add the horizontal rule and the heading by using the below code:
--- ### :fire: My Stats : -
We will be using an open-source project called GitHub Streat Stats to show the following three stats:
- Total number of contributions
- Longest streak
- Current streak
-
Add the below code to generate the stats. Replace the your-GitHub-username with your GitHub username.
[](https://git.io/streak-stats) You can also use the Streak Stats website to generate the URL.
-
It will generate the below for the username ShekharTarare:
-
Let’s use one more open-source project called GitHub Readme Stats. This provides many stats, but for now we will generate the stats for top languages used. Paste the below code to generate the top languages used in the repository. Replace Your-UserName with your GitHub UserName in the below code.
[](https://github.com/anuraghazra/github-readme-stats) -
It generated the below stats for the username ShekharTarare:
Section 7: Showing Recent Blogs
We will be going to use the GitHub workflow for the purpose of collecting the recent blogs. GitHub Workflow refers to a set of automated steps or actions that are triggered in response to specific events within a GitHub repository.
-
We will use the following actions to fetch the blogs:
- Checkout: It checks out the files in your repository to a git workspace where our workflow can access it.
- Blog Post Workflow: helps in fetching blogs posted by user in different websites.
-
Before setting up the workflow, Add the below code to our existing README.md file and commit the changes:
--- ### :writing_hand: Blog Posts : <!-- BLOG-POST-LIST:START --> <!-- BLOG-POST-LIST:END --> -
Let’s setup the workflow now. Click on Add File dropdown and click on Create new file.
-
Name your file as .github/workflows/blog-post-workflows.yml. GitHub workflow files are saved under .github/workflows directory.
-
Add the below code and commit the file:
name: Latest blog post workflow on: schedule: # Runs every hour - cron: '30 5,17 * * *' workflow_dispatch: jobs: update-readme-with-blog: name: Update this repos README with latest blog posts runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: gautamkrishnar/blog-post-workflow@master with: max_post_count: "4" feed_list: "https://medium.com/feed/@shekhartarare"Let’s try to understand the code:
- The code will run on schedule mentioned on cron field. 30 5,17 * * * is a POSIX cron syntax meaning it will run on 5:30 and 17:30.
- · workflow_dispatch: allows you to manually trigger a workflow run
- We have one job under jobs, which will run on Ubuntu environment hosted by GitHub.
- Under Steps, we have 2 actions. The second action is having 2 parameters: max_post_count (post count to get) and feed_list (comma-separated RSS feed pf URLs).
- In this tutorial, we are collecting recent blogs from Medium. Check list of supported platforms from here.
-
To trigger the workflow manually, go to Actions tab, under All workflows, click on Latest blog post workflow. Click the Run workflow dropdown and click on the Run workflow button. The workflow will start executing.
-
Go to the GitHub profile page, you will see the latest blogs.
Section 8: Bonus: Add a Programming Joke
In this section, we will add a programming joke.
We will be using an open-source project called readme-jokes.
-
Add the below code in the README.md file:
--- ### 😉: Programming Joke : <!-- Markdown -->  -
It will produce the below output:
Section 9: Final output
Go here to get the complete code.
Conclusion:
By creating an impressive GitHub Profile README, you can showcase your skills, interests, and achievements to the GitHub community. Remember to regularly update and refine your README as you acquire new skills and accomplishments. Now it’s your turn to unleash your creativity and make your GitHub profile stand out with an amazing README!
Feel free to personalize and enhance the content further according to your own preferences and style.
Top comments (0)