DEV Community

loading...
Cover image for 3 Ways to Spice up your GitHub Profile README πŸ”₯

3 Ways to Spice up your GitHub Profile README πŸ”₯

jayehernandez profile image Jaye Hernandez ・Updated on ・3 min read

GitHub 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 about what the GitHub Profile README is about and how you can set up your own. Here's an informative article by Monica Powell to get you started:

This tweet by Caneco contains a summary of what it's all about:

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

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 library for mine and just changed the color to suit the color scheme.

Icons

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 created this amazing widget which compiles all those stats into one!

Github Stats

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

You can also add a widget that counts the number of page visits in your page. This widget created by Jiang Wenjian does the job, and it's very easy to setup. The docs for the visitor badge is available in this site!

Visitors Badge

3. πŸ›  Use HTML

You are not limited to Markdown when it comes to editing your README. GitHub's Flavored Markdown allows using some of the HTML tags.

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

  • Center a section using <center>

Centered section

  • Create a widget that opens and closes using <details>

Details widget

For advanced use, you'll want to read up on the HTML blocks section 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. Leave a ⭐️ if you found it useful!

GitHub logo jayehernandez / jayehernandez

Profile README + Site made with 11ty and TailwindCSS

I'd love to know what you came up with for yours! Add your README's down below, or tweet them over at @jayehernandez_.

Discussion (36)

pic
Editor guide
Collapse
puf17640 profile image
Julian Pufler • Edited

Awesome! I wrote an article directly after finding out about this myself but did not have the time to get creative on mine since then, I plan on doing some interactive stuff with html canvas, if that's even possible, but I guess it is, have you tried using advanced javascript in the README?

Collapse
jayehernandez profile image
Jaye Hernandez Author

Cool!! I haven't tried advanced javascript yet. The widgets above do though, they just link to an external site to get the data, maybe you can try something like that?

Collapse
puf17640 profile image
Julian Pufler • Edited

Yeah I realised right after my comment that GitHub doesnt support javascript in Markdown. But your idea should work! Thanks!

Edit: I just realised they also block iframes so I need to do some CSS magic 😁

Thread Thread
jayehernandez profile image
Collapse
wobsoriano profile image
Robert

svg + styling is the way to go

Collapse
choukseykhushbu profile image
khushbu_C

Hey, Jaye Hernandez!
Thank you for this article. I am trying to add these elements to my readme. But I am troubling in the image element.
I checked your repository, I found this image tag in the readme -

<img src="https://raw.githubusercontent.com/jayehernandez/jayehernandez/3f5402efef9a0ae89211a6e04609558e862ca616/readme/twitter-fill.svg">
Enter fullscreen mode Exit fullscreen mode

In this, I changed your name to my GitHub username, but still, the image is not showing up, I think it's because of the big ID /3f5402efef9a0ae89211a6e04609558e862ca616/ in the path. Can you tell me what's that Id is so that I can fix it for me?

PS: I have also created a readme folder, so the rest of the path is same for me.

Thank you. :)

Collapse
jayehernandez profile image
Jaye Hernandez Author

You’ll have to right click on the actual image itself and select β€œCopy image URL”. The URL you should be given is the one that starts with raw.githubusercontent.com/.

Let me know how it goes!

Collapse
choukseykhushbu profile image
khushbu_C

Yup! It worked. Thank you for replying. 😊❀️

Collapse
dylburger profile image
Dylan J. Sather

Love this, Jaye!

Check out mine: I used Pipedream to update my README every time I publish a new DEV post, so my profile always shows my most recent post: dev.to/dylburger/show-your-most-re... .

This could be extended to ideas like:

  • Every new tweet -> update README with new tweet
  • Update to an Airtable table -> update README with custom data
  • Any event from any API -> update README

Interested to hear what you think!

Collapse
jayehernandez profile image
Jaye Hernandez Author

I've never heard of Pipedream before, but this is interesting! With all the available integrations, the possibilities are endless.

Collapse
dylburger profile image
Dylan J. Sather

Yeah there’s a lot to experiment with!

Collapse
rahuldkjain profile image
Rahul Jain

Very useful tips. For those who are tired of editing Github Profile README with new features again and again?

If yes, then I came up with an amazing github profile readme generator tool
This tool provides an easy way to create github profile readme with latest addons like visitors count, github stats etc.

πŸš€ Try it out: Live demo

Github Project

GitHub logo rahuldkjain / github-profile-readme-generator

πŸš€ Generate github profile README easily with latest add-ons like visitors count, github stats, etc using minimal UI.

Github Profile Readme Generator

Github Profile Readme Generator

github-profile-readme-generator licence

github-profile-readme-generator gif

Tired of editing Github Profile README with new features?

This tool provides an easy way to create github profile readme with latest addons like visitors count, github stats etc.

πŸš€ Try it out: Live demo

🧐 Features

Just fill the details like Name, Tagline, Dev Platforms Username, Current Work, Portfolio, Blog etc. with a minimal UI.

Click on Generate README to get your README in markdown. You can preview the README too.

You can add latest addons like visitors count, shields, dev icons, github stats etc to your README in just one click.

Designed with πŸ’« by Rahul




Collapse
jayehernandez profile image
Jaye Hernandez Author

This is such a cool idea! Thank you for sharing :)

Collapse
rahuldkjain profile image
Rahul Jain

😊

Collapse
wobsoriano profile image
Robert

Because I miss friendster... here's mine.

sorxrob github prof

Repo: github.com/sorxrob/sorxrob

It uses GitHub actions to randomly select 8 users from my followers every hour and updates the README file. I'll try to make a write up of this!

Collapse
jayehernandez profile image
Jaye Hernandez Author

This brings me back!

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe • Edited

Super useful tips! 🀩

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

Yes, that's important πŸ’―

Also, this article has been featured here:

Collapse
jayehernandez profile image
Jaye Hernandez Author

Thank you Vaibhav!! 🀩 That's a great article you linked as well 😁

Collapse
anuraghazra profile image
Anurag Hazra

Nice article jaye πŸ˜ƒ and thanks for including my repo too! I'm glad you liked it.

Collapse
jayehernandez profile image
Jaye Hernandez Author

Thanks Anurag! It's great, thanks for making it πŸ₯³

Collapse
jwenjian profile image
Jiang Wenjian

I'm here! πŸ˜„

Collapse
jayehernandez profile image
Jaye Hernandez Author

OH YAY, I'll update the link above to reflect your dev.to account instead, thanks for creating the visitor badge! πŸ₯³

Collapse
jwenjian profile image
Jiang Wenjian

happy it helps :-)

Collapse
10secondsofcode profile image
Elango Sundar

I have created a repository for awesome github profile aims to collect the all awesome beautiful READMEs profile and make your Profile look good & Inspire other's.

Collapse
ben profile image
Collapse
jayehernandez profile image
Jaye Hernandez Author

Yay sana makatulong sa paggawa ng iyo!! πŸ™ŒπŸ»

Collapse
arturssmirnovs profile image
Arturs Smirnovs

Here is a tool that could help you to get started with github readme :)
Add description / social media / badges and other stuff with just few clicks..

GitHub logo arturssmirnovs / github-profile-readme-generator

⭐⭐⭐ Github profile readme generator allows you to create nice and simple github profile readme files that will be included in your profile previews.

Github readme generator

Hi there πŸ‘‹.

⭐⭐⭐ Check out this tool here.

Github readme generator

This project allows you to create nice and simple github profile readme files that will be included in your profile previews.

You can include multiple things: Headers, subtitles, skills, banner, additional information, social media links and statistics badges.

website

Usage

  • Go to: arturssmirnovs.github.io/github-pr...
  • Fill inputs
  • Copy code from textarea
  • Create repository with name that equals your github username
  • Add readme.md
  • Paste copied code and save
  • Enjoy

Preview

Github readme generator

Used

github.com/anuraghazra/github-read...

github.com/arturssmirnovs/github-p...

github.com/simple-icons/simple-icons

Vue JS :)




Collapse
vatsal2210 profile image
Vatsal Shah

Thanks for sharing. Great work and appreciate for collecting top README profile in a repo. πŸ”₯

Collapse
raphaeldasilva profile image
Raphael da Silva • Edited

Thank you for the article. I update my github profile after read.

Collapse
warengonzaga profile image
Waren Gonzaga

This is so cool.... what do you think on my github profile? github.com/warengonzaga

Collapse
hemant profile image
Hemant Joshi 😼

Have a look at mine😁

GitHub logo 8bithemant / 8bithemant

Github README.md. Consists of Lot of Badges, git, png, and a lot of Love, Live Github Stats. Add this to your profile and help me with contributing to this stuff. Github Profile README.md

Hi there, I'm Hemant! πŸ‘‹.


Hemant Joshi| Twitter Linkedin Telegram Instagram  Reddit Leetcode  Codechef


GIF


Hi πŸ™‹β€β™‚οΈ,

I'm 18 years old Self-taught Full-Stack developer from India.

- πŸ₯€ Learning GraphQl ,NextJs &Typescript .

- πŸ”­ SpaceX FanBoi,

- πŸ›Έ Into High Energy Physics and Astrophysics

- πŸ’¬ Connect? Here πŸ‘‰πŸΌ


I am Into , πŸ™

Machine Learning, Web Development, SEO, Micro Services, System Design, Competetive Programming & Physics and Physics 😼

Github Stats By Anurag



- Languages and Tools...

html csharpjspythonreactvuechromeclouddatascienceawsnpmgcpbashvscode

- Blogs 🌱

- Podcast ⚑️


Thank You-πŸ™πŸΌ






Collapse
khalby786 profile image
Khaleel Gibran

I built a header image generator which you can also use in your profile READMEs, more info at dev.to/khalby786/reheader-github-p....

Collapse
salmandabbakuti profile image
Salman Dabbakuti

How did you get a banner like that. Any online tool. Please let me know.

Collapse
jayehernandez profile image
Jaye Hernandez Author

I used Figma to create my banner, but you can use any other online photo editor. I recommend Canva as they have a library of great templates.