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! (See it live on Github! Click here)

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

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)

Here's what it looks like in day mode.

And in dark mode..

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>

The result would look like this;

Closer look at the banner

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>

Closer look at the gif

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!