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..
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!
Top comments (3)
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!
Thank you! I’m glad my post can help!
Awesome step by step!