3 Ways to Spice up your GitHub Profile README 🔥
Tags: github, markdown, statistics, branding
Published: 2020-07-12 04:25:15

[GitHub](https://github.com) recently released a feature which allows you to add a README to your profile page. This is a great way to **introduce** yourself to the GitHub community as you highlight your skills and projects. In this post, we'll be looking at ways on how you can improve your README! 💯

## What's a Github Profile README?

Since release about two weeks ago, there have been a ton of articles on [dev.to](http://dev.to) about what the GitHub Profile README is about and how you can set up your own. Here's an informative article by [Monica Powell](http://dev.to/m0nica) to get you started:

{% post m0nica/how-to-create-a-github-profile-readme-1paj %}

This tweet by [Caneco](https://twitter.com/Caneco) contains a summary of what it's all about:

{% twitter 1279434881253154817 %}

*Do note that as of writing, this feature is not yet available to all GitHub users.*

## What to add to your README?

While sometimes simplicity is best, I do think that the README is a way to make a **lasting first impression** to others (this includes potential employers!). Let's break down some of the elements you can add to your own page.

_I'll be using the README I created for my GitHub Profile as an example._

### 1. 📸 Add Images and Icons

 Make your page memorable by uploading some images to your repository.

You can add a hero image, which is basically a large banner at the top of your page. This is the first thing that people will see when they visit, so make it enticing! 

![Hero Image](https://dev-to-uploads.s3.amazonaws.com/i/t80glcbv95425xvcdppl.png)

*You'll notice that your eyes gravitate to the huge header image!*

Want to link to external sites? Add some icons which redirect to your social networks or projects. I used the free and open source [RemixIcon](https://remixicon.com/) library for mine and just changed the color to suit the color scheme.

![Icons](https://dev-to-uploads.s3.amazonaws.com/i/3oetc6nzkqwgx44z4012.png)

One thing to note: Make sure your images are of **great quality.** We wouldn't want images to show up pixelated. If you are using vector images, upload them using SVG instead of JPG or PNG.

### 2. 📈 Include Statistics

If you are using GitHub for your projects or use it to contribute to open source, you probably have a lot of commits and Pull Requests. [Anurag Hazra](https://dev.to/anuraghazra) created this amazing widget which compiles all those stats into one!

![Github Stats](https://dev-to-uploads.s3.amazonaws.com/i/nz8nb4q8aochv3ghniao.png)

Here's the blog post if you want to learn more:

{% post anuraghazra/dynamically-generated-github-stats-for-your-profile-readme-o4g %}

You can also add a widget that counts the number of page visits in your page. This widget created by [Jiang Wenjian](https://dev.to/jwenjian) does the job, and it's very easy to setup. The docs for the visitor badge is available in this [site](https://visitor-badge.glitch.me/)!

![Visitors Badge](https://dev-to-uploads.s3.amazonaws.com/i/g0nbbto9dqsfgwfiux3a.png)

### 3. 🛠 Use HTML

You are not limited to Markdown when it comes to editing your README. [GitHub's Flavored Markdown](https://github.github.com/gfm) allows using some of the HTML tags. 

Here's some of the basic things you can do:

- Center a section using `<center>`

  ![Centered section](https://dev-to-uploads.s3.amazonaws.com/i/xkx4w35gbmt3vvnt5ic4.png)

- Create a widget that opens and closes using `<details>`
 
  ![Details widget](https://dev-to-uploads.s3.amazonaws.com/i/v6acazh7d0uldislhx3i.gif)
   
For advanced use, you'll want to read up on the [HTML blocks section](https://github.github.com/gfm/#html-blocks) to see the other tags that are available for use.

---

Hope this helps you in creating your own README! You can see the source code for mine over at my [GitHub profile](https://github.com/jayehernandez). Leave a ⭐️ if you found it useful!

{% github jayehernandez/jayehernandez no-readme %}

I'd love to know what you came up with for yours! Add your README's down below, or tweet them over at [@jayehernandez_](https://twitter.com/jayehernandez_).