DEV Community

Cover image for Update your GitHub profile
Apoorva CG
Apoorva CG

Posted on

Update your GitHub profile

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.

GitHub Profile Page

GitHub profile page after adding README file

To get started,

➡️ Create a repository with your GitHub username (assuming you have a GitHub account)

Repo name should be same as your GitHub username

Name the repository same as your GitHub username



➡️ 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.
Initialize repo with README file

Make a public repository with a README file



➡️ 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 ![Github stats](https://github-readme-stats.vercel.app/api?username=[userName]&theme=gotham) to display your GitHub account overview.
  • Use ![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=[userName]&layout=compact) 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.

github top lang stats
GitHub stats for frequency used languages

😇 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,

Social logos


List of skills added using Shields.io

🪄 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 CSS or js with <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)

Collapse
 
gzamann profile image
Gulshan Zaman Khan

Thanks for sharing this 👍

Collapse
 
leviarista profile image
Leví Arista

Hi there, good article!
Tip to share: This tool may help you to create a github profile header

Collapse
 
apoorvacg profile image
Apoorva CG • Edited

Thanks for the share Levi! This will surely be a good addon for the profile.