Show your style on your Github Readme!

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 displa…

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

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>

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!


Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language: