As the developer community is growing, developers are connecting and collaboratively contributing to open-source projects. GitHub is a place where these projects are maintained.
With this, GitHub also provides a profile README feature, where you can showcase your work, interests, contributions, and other pieces of information on the GitHub profile page. It allows you to be as creative as you want to be, fun and interactive or keep it minimal, as they say 'sometimes less is more' 🎨.
We are all familiar with the GitHub README markdown files. This file describes or helps in understanding the project. Similarly, we can have one for our profile to share a little bit of information about ourselves with the community.
To get started,
➡️ Create a repository with your GitHub username (assuming you have a GitHub account)
➡️ Don't miss out to initialize a README file and make it a public repository (this file should be placed in the root folder). GitHub renders this README at the top of your profile page.
➡️ Once you create this repository, you have a README.md file ready with a basic template that GitHub provides you to start with. You can now go to your GitHub profile page (https://github.com/[userName]) to see the changes. Congratulations🎉! you just created a GitHub Profile for yourself👏
You can go ahead and start editing the README.md file that you just created and add your contents to it. To format the file, make use of GitHub's Flavored Markdown or use HTML in this Markdown file. You can also add images, emojis, and GIFs, list out recent blogs, gitHub stats, links to connect, interactive UIs and many more to this file. You can preview the changes before committing. Once the commit is made, the changes reflect on your GitHub profile page.
Some useful links,
📝 Markdown syntax and formatting, quick start, basic writing
📈 Commonly used Endpoints for GitHub stats,
- Use
to display your GitHub account overview. - Use
to list the most frequently used languages.
You can modify your stats with various query parameters available, check out this repo by @anuraghazra for more details on customising UI and layouts.
😇 To add emojis, check this emoji-cheat-sheet for all the codes available.
🏞 Find any relatable GIFs from Giphy
📸 You can add images just by dragging and dropping them, or by pasting them directly into the editor which GitHub transforms. You can also use HTML tags to display images and specify width and height to adjust.
🌓 Based on themes you can specify different images for light and dark modes with picture element and prefers-color-scheme media feature.
👩💻 To add social media links or to list the skills, check out this shields website. This allows customisation of badges with styles and logos of your choice.
Example,
<img src="https://img.shields.io/badge/HTML5-red?style=for-the-badge&logo=html5&logoColor=white" alt="html5 Badge"/>, check the image below to see how the list looks like,
🪄 Display Followers counts and other data using Shields with social like https://img.shields.io/github/followers/[userName]?style=social
🗂 You can also add a section to list out recent blog posts from any blogging platform to this file, add interactive sections like games by writing scripts with GitHub Workflow and Actions.
💻 Need more options, check devicon for icons representing programming languages, designing, and development tools.
✨ Customize your profile with any theme of your choice or keep it simple. Check out this repo from @abhisheknaiidu - awesome-github-profile-readme
We cannot add any
CSSorjswith<style>or<script>tags in this Markdown README file.
I would be happy to see some helpful tips or your creative GitHub profiles in the comments below😇, here's mine. Thanks for reading!
Top comments (3)
Thanks for sharing this 👍
Hi there, good article!
Tip to share: This tool may help you to create a github profile header
Thanks for the share Levi! This will surely be a good addon for the profile.