DEV Community

3 Ways to Spice up your GitHub Profile README 🔥

Jaye Hernandez on July 12, 2020

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

Read full post

Julian Pufler • Jul 12 '20 • 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?

Robert • Jul 13 '20

svg + styling is the way to go

Jaye Hernandez • Jul 12 '20

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?

Julian Pufler • Jul 12 '20 • 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 😁

Jaye Hernandez • Jul 13 '20

Awesome!!

khushbu_C • Jul 13 '20

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">

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. :)

Jaye Hernandez • Jul 14 '20

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!

khushbu_C • Jul 14 '20

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

Rahul Jain • Jul 16 '20

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

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

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

View on GitHub

Jaye Hernandez • Jul 17 '20

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

Rahul Jain • Jul 17 '20

😊

Vaibhav Khulbe • Jul 12 '20 • 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:

Add Right to Left Text To Your GitHub Profile README

Ben Greenberg ・ Jul 12 ・ 2 min read

#github #tips

Jaye Hernandez • Jul 12 '20

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

Anurag Hazra • Jul 12 '20

Nice article jaye 😃 and thanks for including my repo too! I'm glad you liked it.

Jaye Hernandez • Jul 13 '20

Thanks Anurag! It's great, thanks for making it 🥳

Dylan J. Sather • Jul 12 '20

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!

Jaye Hernandez • Jul 13 '20

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

Dylan J. Sather • Jul 13 '20

Yeah there’s a lot to experiment with!

1Link.Fun • Jul 12 '20

I'm here! 😄

Jaye Hernandez • Jul 12 '20

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

1Link.Fun • Jul 12 '20

happy it helps :-)

Robert • Jul 13 '20

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

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!

Jaye Hernandez • Jul 14 '20

This brings me back!

Arturs Smirnovs • Jul 28 '20

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

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.

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.

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

Used

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

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

github.com/simple-icons/simple-icons

Vue JS :)

View on GitHub

Elango Sundar • Jul 15 '20

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.