Recently Github added a very interesting feature for its users, the possibility to develop a homepage built in markdown for their profile. However, this feature is hidden from everyone, and I will teach you how to unlock it. Here we go?
Discovering the feature
To activate the profile feature, we will create a new repository. The secret is found right here. Create a repository with the name of your nickname from github and you will see a window appear warning you that you have discovered a secret!
Don't forget to check Initialize this repository with a README for the secret to take effect.
Performing the first edit
After creating the repository, we will be redirected to its initial page, in which we have only one Readme.md file.
After opening the file in the github editor, we will see that there is already a template with some topics ready for you to start your profile description.
Readme.md supports markdown and HTML and you can merge both to get your look.
Useful links to help build a profile on your Github
Interesting code blocks to insert in your profile
Github Stats
Social Media
<a target="_blank" href="https://www.linkedin.com/in/aryclenio-barros-060322135/">
<img align="left" alt="LinkdeIN" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/linkedin.svg" />
</a>
<a target="_blank" href="https://api.whatsapp.com/send?phone=5584999828379">
<img align="left" alt="Whatsapp" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/whatsapp.svg" />
</a>
<a target="_blank" href="https://www.instagram.com/ary.clenio/">
<img align="left" alt="Instagram" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/instagram.svg" />
</a>
<a target="_blank" href="https://dev.to/aryclenio/">
<img align="left" alt="Devto" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/dev-dot-to.svg" />
</a>
<a target="_blank" href="mailto:arycleniobarros@gmail.com">
<img align="left" alt="Gmail" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/gmail.svg" />
</a>
<a target="_blank" href="https://fb.com/aryxb">
<img align="left" alt="Facebook" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/facebook.svg" />
</a>
Code languages that you work
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/javascript/javascript.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/typescript/typescript.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/nodejs/nodejs.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/vue/vue.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/cpp/cpp.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/mysql/mysql.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/git/git.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/terminal/terminal.png"></code>
Showing on your profile
After finishing your editing, just commit and go back to your home page. You will see that it now shows all its description and only after that, its repositories.
That's it! Feel free to get inspired by my readme.
THANK YOU FOR READING!
Top comments (3)
Thx, for that cool article. Is it possible to get a list of all supported icons, that can be found under
https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics?raw.githubusercontent.com/codeSTAC...
can you please clarify for "Code languages that you work" how to get icon for some new language ?