Show your style on your Github Readme!
Tags: github, codenewbie, markdown
Published: 2021-04-11 21:45:35

#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! 
<img src="https://media.giphy.com/media/xTiTngBQncyTMceuXK/giphy.gif" />

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](https://github.com/tolentinoel))

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pczsrkdjb93skzlzjz4p.png)

##Add Icons & Stats

[Anurag Hazra's Github](https://github.com/anuraghazra/github-readme-stats) - 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](https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md).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.**
![day mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhvzfmnej9iam2256lam.png)

**And in dark mode..**
![dark mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytjnvrewbkg9ogyuziry.png)

##Add Emojis & Badges
[Emoji Github](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md) - Great resource for a ton of emojis you can put on your markdowns!

[Badges or Shields](https://github.com/Ileriayo/markdown-badges) - You can definitely use this reference to display your social media & top languages used or your tech stack. See these example badges below!
<a href="https://github.com/tolentinoel" target="blank"><img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=violet"/></a>
<a href="https://www.linkedin.com/in/ellainet/" target="blank"><img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white"/></a>


##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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fzluwbbqjyaj7u86o7q.png)

**Closer look at the banner**
![Banner made from Canva](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb12dvutumkrl18jjw15.png)

I made the banner design using [Canva!](https://www.canva.com/) 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"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8poooh7vsctzgstw6ent.gif)

[Hnet video to gif](https://hnet.com/video-to-gif/) - also a good way to convert your video clips into a gif!

[Giphy](https://giphy.com/) - 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!