Make your GitHub profile standout
Tags: github, figma, career
Published: 2022-02-20 14:09:57

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](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme)

## 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.

{% github https://github.com/anuraghazra/github-readme-stats %}

## 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](https://www.figma.com/) 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.


![Nikcio - Figma design](https://raw.githubusercontent.com/nikcio/nikcio/master/Github-body-content.svg)


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.

```html
<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](https://github.com/nikcio)