In this tutorial you will learn how to create a beautiful GitHub Profile page. All you need is a basic knowledge of markdown and a pinch of creativity.
Instructions
Go to github.com and sign in to your account.
Create a new repository
1. Select the plus sign (+) in the upper-right corner to create a new repository.
2. Type your GitHub username in the “Repository Name” field. Make sure the names of your new repository and GitHub profile match. For example, my username is sfoteini so I created a repository with the name sfoteini.
3. Select “Public” and “Initialize this repository with a README”.
4. Click Create repository.
A README file with the following template will be created.
Use headings, text and lists in markdown
Use the hash sign (#) to create headings. The number of hash signs determines the heading level.
# Hi there 👋 – Level 1
## Hi there 👋 – Level 2
### Hi there 👋 – Level 3
#### Hi there 👋 – Level 4
##### Hi there 👋 – Level 5
###### Hi there 👋 – Level 6
For plain sentences and paragraphs, you don’t need to use specific markdown syntax.
Hi there. This is my GitHub profile.
For unordered lists, use either an asterisk (*), dash (-) or plus sign (+).
- I’m currently working on ...
- I’m currently learning ...
- I’m looking to collaborate on ...
For ordered lists, use numbers.
1. I’m currently working on ...
2. I’m currently learning ...
3. I’m looking to collaborate on ...
Use images
Upload your images into the same repository as your README.md file and use the following markdown syntax:
where Profile Header Image is the alt text and profile_image.jpg is the image that you want to show on your profile.
Alternatively, you can use the following HTML syntax:
<img src="/profile_image.jpg" alt="Profile Header Image" />
For the profile README file, you need to use the raw image’s URL instead of the relative path. Select the image, then click the download button and copy the image’s URL at the top of the page. The result will look like this:
Create custom social media badges
You can create a more colorful profile page by setting up your own social media badges. We are going to use shields.io and Simple Icons to create them.
<img src="https://img.shields.io/badge/BadgeText-HexColor?style=StyleName&logo=SimpleIconsLogo&logoColor=Color">
where BadgeText is the displayed text, HexColor is the bagde color, StyleName is the selected Shields badge style, SimpleIconsLogo is the logo name from Simple Icons and Color is the color of the logo.
Here is the code I used to create 3 social media badges.
<p align="center">
<a href="https://www.twitter.com/ClairSavvidou" target="_blank"><img src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter"></a>
<a href="https://www.linkedin.com/in/foteini-savvidou" target="_blank"><img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="Linkedin"></a>
<a href="https://www.dev.to/sfoteini" target="_blank"><img src="https://img.shields.io/badge/Dev.to-0A0A0A?style=for-the-badge&logo=dev%2Eto&logoColor=white" alt="Dev.To"></a>
</p>
More articles: foteinisavvidou.codes
Hello, my name is Foteini Savvidou and I am an Electrical and Computer Engineering student who loves writting code and creating beautiful things. I am interested in computer science, AI and especially in applications of technology in healthcare and education. I want to use technology to improve people's everyday life, and create a more sustainable 🌱, accessible and inclusive 🧑🤝🧑 world.
Top comments (0)