README's. You know, those markdown files that get created when you generate a new project or create a GitHub repository. Perhaps you're a developer who updates the README file for each project you work on. Or maybe you're a developer who leaves the boilerplate content inside.

As of July 2020, GitHub now allows developers to create a profile-level repository and use the README to add some personality to their page.

Create Your Profile Repository

Go to GitHub and create a new repository that has the same name as your GitHub username. My username is Programming-School-Pro-Coding, so I created a repository with the name Programming-School-Pro-Coding. If you’ve done this correctly, GitHub will display a secret message. I set the repository access to public to see people my changes.

Once I created the repository, I cloned it down and opened it in my favorite editor(VS Code).

Create a README Template

Although I initialized the repository with a README.md file, I quickly found out that I needed to edit my content in a separate file and use it as a template — a skeleton of static content that will be used to construct the final README.md file. There are several reasons for this, but here are two of the most important:

1. Eventually, the GitHub Actions workflow will trigger files that will use the template, inject the dynamic content and then take the entire template and paste it in the README file.

2. If you're editing the README.md file directly, you're going to have LOTS of merge conflicts after the dynamic injection performs its magic.

Banner Image

I created my banner from a website called Creative and then go to Free Templates and then click on Free Discord Profile Banners and then choose your favourite one and then fill the field with your name and choose the color and then click render:

Once it done, it will show two buttons to click on to download the GIF File:

One of them is not a GIF, Choose the animated one.

Once you done you can create a new folder called assets and move the file to it.

Now go to readme file and paste this code in the top of the file:

About Me

You can us the following syntax in About Me:

Badges

One of my goals with my GitHub profile README is to show users my repositories, gists and etc.

To do that, I made sure I had badges listed at the top of the profile so that it's one of the first things visitors see.

To create these badges, I used shields.io or this repository and edited the badge text, badge color and destination URL.

If you want to the number of your repositories(public only), gists and etc. use these badges from my github profile file:

NOTE: Replace the username of these badges to your github username

GitHub Stats

You can copy my github stats and and paste it in your readme file and then edit the username to your github username.

Skills

Next, I needed a way to show visitors my skills as a full-stack web developer. I didn't want to put my skills in an unordered list; it would take up a lot of space on the page and the unordered list doesn't provide much of a stylish flare.

Instead, I used badges from shield.io and displayed the badges inline on the page, using the same background color as the banner image to keep design consistency throughout the profile.

This is my badges:

Connect with me

One of the goals of my github profile is to share my social networks.

The title of Connect with me section is:

I used this GIF in the title on the Connect with me section and add a width of 50px:

So The title will be like that:

In this section you can use any social icons like facebook, instagram, youtube

❤ Views and Followers Section

You can use badges from shield.io to get followers count on github, twitter and etc.

🏆 Git profile Trophies Section

You can get your profile Trophies by adding a simple title like this:

Then Copy the following code by replacing the username field with your github username:

My Latest Blog Posts 👇 Section

In this section we will put the following code in the first and in the second article i will show you how to get blog posts data from hashnode:

If you don't know what is hashnode, hashnode is a blogging platform for the developer community built using Next.js, was born from the fundamental idea that developers should own the content they publish. A key component of that ownership is publishing articles on a custom domain—a feature the Hashnode team spent hours monitoring and maintaining themselves.

If you want to join this platform click here

Recent Activity

In this section we will put the following code in the first and in the second article i will show you how to get your activity from github:

That's All for now.

Thank you for reading.