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: ![Screenshot 2022-06-07 145943.jpg](https://project-assets.showwcase.com/24602/1654606792403-Screenshot%25202022-06-07%2520145943.jpg) ![Free-Animated-Discord-Profile-Banner-Maker-Creavite.png](https://project-assets.showwcase.com/24602/1654606871030-Free-Animated-Discord-Profile-Banner-Maker-Creavite.png) ![Comets-Free-Discord-Profile-Banner-Maker-Creavite.png](https://project-assets.showwcase.com/24602/1654606890252-Comets-Free-Discord-Profile-Banner-Maker-Creavite.png) Once it done, it will show two buttons to click on to download the `GIF` File: ![Final-Renders-Creavite.png](https://project-assets.showwcase.com/24602/1654607050673-Final-Renders-Creavite.png) 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: ```md [![Braydon's GitHub Banner](./assets/Header.gif)](https://mohamed-ehab-portfolio.vercel.app) ``` ## About Me You can us the following syntax in About Me: ``` # 🙋‍♂️ About Me - 🌱 I’m currently learning *Popular JavaScript Frameworks like React*. - 👯 I’m looking to collaborate on *OpenSource Projects* - 👨‍💻 All of my projects are available at [My Portfolio](Your Portfolio Link) - 📫 How to reach me [Socials And Blogs](The link to your social networks that you can generate using linktree) - 🤓 Always learning new things ``` ## 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](https://shields.io) or [this repository](https://github.com/alexandresanlim/Badges4-README.md-Profile) 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: ```html

Programming-School-Pro-Coding Gists

``` > 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: ```html [![React Badge](https://img.shields.io/badge/-React-61DBFB?style=for-the-badge&labelColor=black&logo=react&logoColor=61DBFB)](#) [![Javascript Badge](https://img.shields.io/badge/-Javascript-F0DB4F?style=for-the-badge&labelColor=black&logo=javascript&logoColor=F0DB4F)](#) [![Typescript Badge](https://img.shields.io/badge/-Typescript-007acc?style=for-the-badge&labelColor=black&logo=typescript&logoColor=007acc)](#) [![Nodejs Badge](https://img.shields.io/badge/-Nodejs-3C873A?style=for-the-badge&labelColor=black&logo=node.js&logoColor=3C873A)](#) [![GraphQL Badge](https://img.shields.io/badge/-GraphQl-e535ab?style=for-the-badge&labelColor=black&logo=node.js&logoColor=e535ab)](#)

``` ## 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: ``` ## Connect with me ``` 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: ``` ## Connect with me

``` 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: ``` ## :trophy: Git profile Trophies ``` 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](https://hashnode.com/@Programming-School/joinme) ## 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.