Making your GitHub profile stand out can be difficult if you're not the creator of something popular, but this doesn't mean you can't have an attractive profile anyways.

Using the profile README to create an attractive profile
On Github, you have the possibility of creating a profile README that will show up on your profile's front page. This is an awesome way to highlight your strengths and what technologies you're working with, but finding things to show is just one step of the process. We also have to think about how we're going to present it and make it eye-catching for the viewer.

More info

Step 1

Gathering your profiles information
When gathering the information you'd like to show, it's important to categorize and prioritize what's most important. Categorization can help the reader find what they are looking for and make your profile more user-friendly. One way to categorize could be by what area a skill set is a part of, for example, you could have a frontend, backend, and a DevOps category. Prioritization can help you decide in what order your information should be laid out.

Want to include stats or Repositories?
If you're looking to include stats like commits and stars, you can check out the github-readme-stats repository by anuraghazra. This lets you create cards for showing your stats and repositories.

anuraghazra / github-readme-stats

⚡ Dynamically generated stats for your github readmes

GitHub Readme Stats

Get dynamically generated GitHub stats on your READMEs!

View Demo · Report Bug · Request Feature · FAQ · Ask Question

Français · 简体中文 · Español · Deutsch · 日本語 · Português Brasileiro · Italiano · 한국어 · Nederlands · नेपाली · Türkçe

Please note that documentation translations may be outdated; try to use English documentation if possible.

Love the project? Please consider donating to help it improve!

Are you considering supporting the project by donating to me? Please DO NOT!!!

India has recently suffered one of the most devastating train accidents, and your help will be immensely valuable for the people who were affected by this tragedy.

Please visit this link and make a small donation to help the people in need. A small donation goes a long way. ❤️

Features

• GitHub Stats Card
  • Hiding individual stats
  • Showing additional individual stats
  • Showing icons
  • Themes
  • Customization
• GitHub…

View on GitHub

Step 2

Layout your profile information
To make an eye-catching profile, you want to layout your information in an easy-to-read yet interesting manner. One way of doing this is to create an image with your information. For this, a tool like Figma allows you to easily create a simple design and export it to an SVG.

One way of laying out your information is with the help of shapes of different colors.

To do this, I've used a Figma plugin called Blobs which lets you create random blobs with ease. For the icons, I've mainly used Iconify which lets you insert a variety of different icons.

Step 3

Creating your README
When you have created a visual representation of the information, you'd like to show the time has come to create the README file. This is done by creating a repository with the same name as your user name. For example, my username is nikcio, so I created a repository named nikcio. Here we create a file named README.md.

We can now either use classic markdown or some basic HTML to place the image and other links on our GitHub profile.

<div align="center">
  <img src="./Github-body-content.svg" alt="Content">
</div>

<br />

<div align="center">
  <img src="https://github-readme-stats.vercel.app/api?username=nikcio&count_private=true&show_icons=true&hide=prs,stars&custom_title=Stats:&disable_animations=true&hide_border=true" alt="stats" />
</div>

<br />

<div align="center">
  <a href="https://nikcio.com/" target="_blank">
    <img src="./website-link.svg" alt="Website" height="32" width="114"/>
  </a>
  <a href="https://www.linkedin.com/in/nikcio/" target="_blank">
    <img src="https://static-exp1.licdn.com/sc/h/al2o9zrvru7aqj8e1x2rzsrca" alt="LinkedIn" height="32" width="32"/>
  </a>
  <a href="https://dev.to/nikcio/" target="_blank">
    <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" alt="dev.to" height="32" />
  </a>
</div>

Then commit the file/files and see your GitHub profile shine with your new README.

View on GitHub