DEV Community

loading...
Cover image for Show your style on your Github Readme!

Show your style on your Github Readme!

tolentinoel profile image Ellaine Tolentino 惻Updated on 惻3 min read

Hey y'all!

If you came across this blog it maybe is a sign to update your GitHub repo and put more of your own coolness to it!

Something I discovered recently is that you can style your repo using many things on a markdown file and display it like a landing page on your Github! I love personalizing things I own and this is a great way to show some character on your repo!

So let's go and I'll show you what elements I used to make mine!

First up..

Create your repo

  • Go to your Github account and create a new repository.
  • Name the new repo under your username. (It comes out something like username/username.)
  • A note will pop up just like in the photo below that'll let you know you had it right! (In my case, I had a warning since I already made mines.) Create your repo under your Github username

Add Icons & Stats

Anurag Hazra's Github - definitely a good source if you want to apply some Github stats and display your top languages used to any visitor of your page. You can customize size, color and also offers a compact version of each.

I chose to display my top languages and Github stats in Merko theme.
There are a lot of themes to choose from! You can take a peek here.The line of code I added looks like this..

![Ellaine's github stats](https://github-readme-stats.vercel.app/api?username=tolentinoel&theme=merko&layout=compact)
Enter fullscreen mode Exit fullscreen mode

Here's what it looks like in day mode.
Alt Text

And in dark mode..
Alt Text

Add Emojis & Badges

Emoji Github - Great resource for a ton of emojis you can put on your markdowns!

Badges or Shields - You can definitely use this reference to display your social media & top languages used or your tech stack. See these example badges below!

Photos

I haven't really attached a photo on a markdown until recently doing it to my Github repo! Just like on HTML, your code in attaching a photo can look like this;

<img src='images/Github_banner.png' alt="banner"></img>
Enter fullscreen mode Exit fullscreen mode

The result would look like this;
Ellaine's Github page

Closer look at the banner
Banner made from Canva

I made the banner design using Canva! with a LinkedIn banner template.

Last but not least, and probably my favorite..

Gif banners

YES!! I actually just tried if putting a gif would work, and it did! Just refer it to your code like an image! I also used Canva to design the animation on this gif.

In code:

<img src='[relative path]' alt=""></img>
Enter fullscreen mode Exit fullscreen mode

Closer look at the gif
Gif that says Mabuhay welcome to my page"

Hnet video to gif - also a good way to convert your video clips into a gif!

Giphy - Another great resource for gifs or creating your own!

So that's about all the things I used to upgrade my Github readme profile! I hope it helped you guys put more of your own style on your Github profile and also find ways to vamp up your markdowns!

Cheers!

Discussion (3)

pic
Editor guide
Collapse
lelepg profile image
Leticia Pegoraro Garcez

OMG! I was thinking about these landing pages repos that I saw, and your post helped me a lot. I'm not much of a design person, but I hope to make something nice with your tips!

Collapse
tolentinoel profile image
Ellaine Tolentino Author

Thank you! Iā€™m glad my post can help!

Collapse
gamil91 profile image
Alexa Gamil

Awesome step by step!