Do you want to make your GitHub profile stand out? If you do, then you are in the right place. It’s good to have a stunning GitHub profile. Especially for people who want to present themselves online. It’ll be like LinkedIn where you can show off your work and skills. In this article, I’m going to show you how to take your GitHub profile to the next level. I am going to use my own GitHub profile as an example. I’ve attached my GitHub profile link and screenshot below.
In this article, you’ll get to see the following things:
- Creating a README.md file
- How to add images
- How to add badges
- How to add GitHub Status Card
- How to add social media icons
- How to add link to the text
Creating a README.md File
In order to show the content in your GitHub profile page, you have to create a README.md file.
- Create a new repository with your GitHub username.
- Check the “Add a README file” box.
- After you create the README.md file, GitHub will show you with the option to edit the file.
- Git clone the README.md repository you just created.
- Open the README.md file in Visual Studio Code or other text editor you are using.
- It’s time to add cool content to the README.md file.
How to Add Images
For the banner, I am using Photoshop to create my own banner. You can also use Canva to create a beautiful banner.
- If you are using an image from your desktop file, you need to drag the image to your repository issues input box to get the url. (example below)
2. After you drag the image to the repository issues input box, it will generate the image url for you.
3. Copy and paste the image url to the code below.
<img src=”https://userimages.githubusercontent.com/75753187/123358567-aac7b900-d539-11eb-8275-0b380264bb4c.png" alt=”my banner”>
4. Put this code into your README.md file.
5. Something to note here is, you can’t use the CSS file for the code in the README.md. You have to style inside the HTML element if you want to align or size the image. (example below)
<p align=”center”>
<img width=”200" height=”200" src=”https://user-images.githubusercontent.com/75753187/123358567-aac7b900-d539-11eb-8275-0b380264bb4c.png" alt=”my banner”>
</p>
How to Add Badges
- To add the badges in the README.md file, please check out the following resources:
2. You can use all the resources above to get or create your own badges.
3. You can use the following code to show your badges.
<img alt=”React” src=”https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB"/>
Or
How to add GitHub Status Card
You can also add a cool GitHub status card to your GitHub profile. It will show you real time stats for your GitHub account.
- Check out the github-readme-stats below, created by Anurag Hazra.
2. If you want to use the one I am using, then copy and paste the code below.
[](https://github.com/yushi1007)
[](https://github.com/yushi1007)
3. Make sure change my GitHub username yushi1007 to your GitHub username.
4. Only change the username, don’t change anything else.
How to Add Social Media Icons
For the social media icons, I am using the flaticon website. You can also use the badges for the social media icons. Feel free to create your own icons. You don’t have to follow my style. I believe you can create a profile even more beautiful than my GitHub profile.
- Create an images folder for the icons. (I’ve attached my images folder link below)
2. Import all the icons to the images folder.
3. Use the code below.
<a href=”https://www.linkedin.com/in/yushi95/"><img align=”left” src=”https://raw.githubusercontent.com/username/reponame/branch/foldername/icon.svg" alt=”icon | LinkedIn” width=”21px”/></a>
4. Enter your username, repo name, branch, folder name, and file name. (example below)
<a href=”https://www.linkedin.com/in/yushi95/"><img align=”left” src=”https://raw.githubusercontent.com/yushi1007/yushi1007/main/images/linkedin.svg" alt=”Yu Shi | LinkedIn” width=”21px”/></a>
5. Make sure change the LinkedIn link to your own link.
How to Add Link to the Text
There is another way to link the text in the README.md file without using <a href=“”></a>.
- Without the <a href=“”></a>
Hi there, I am [Yu](https://www.yushi.dev/)
2. With the <a href=“”></>
Hi there, I’m <a href=”https://www.yushi.dev/" target=”_blank” rel=”noreferrer”>Yu</a> 👋
3. I am using <a href=“”></a> because I need to align the text to center
<h3 align=”center”>
Hi there, I’m <a href=”https://www.yushi.dev/" target=”_blank” rel=”noreferrer”>Yu</a> 👋
</h3>
Conclusion
Please check out the following GitHub profiles for more inspiration:
Hope this article gave you enough inspiration to create your own GitHub profile. Try to get your own unique design ideas by looking at other GitHub profile.
I’ve attached my README.md markdown code below for reference.
It’s time to start designing your own GitHub profile. I’d love to see it. Feel free to share with me after you are done. I look forward to hearing from you. Please let me know if something is still confusing or I miss something. Thank you so much for reading my blog.
