Build your GitHub public profile like a pro in 10 steps
Create an amazing READ-ME that stands out
If you call yourself a developer, you have probably heard about GitHub. It is a place where millions of developers shape the future of software together. A few years ago, GitHub introduced the concept of a public profile, a unique repository with a name the same as your username, whose README content shows up on your profile page.
In this article, I’ll show you how I constructed my public profile. I’ll also walk you through the different sections and provide more resources for you to explore.
Oh, by the way, at the time of writing this blog, I have finally hit 100+(103 to be exact) followers on GitHub! 🤩
Why is this important?
Let’s first address why you’d need a decent (if not fancy) public profile on GitHub. These are the most probable reasons in the decreasing order of likelihood —
- You are a nerdy geek. 🤓 Don’t worry, you are not alone!
- You realize that many people, including job recruiters and clients looking for freelancers, visit your GitHub profile to see your work. And you need some monies. 💸
- You wanna learn something new in the process of building your profile.
Anyway, I don’t mind helping you achieve your goal, so here we go! 🚀
A sneak peak
Here is what my profile looks like. If you scroll, there are more components in the README, but no worries, we’ll cover all of that.
1. Greetings fellow life-form
The first component just greets the visitors in a fancy way.
It is a dynamically generated, customizable SVG that gives the appearance of typing and deleting text. You can add this to your profile using a simple generated markdown. For more details, look at the following repository.
2. Quick Introduction — Description and Coffee
In the next section, I describe myself in a few words and attach the Buy me a coffee link as a button.
Here is the HTML for the same. You can paste this in your README file.
<a href="https://www.buymeacoffee.com/absatyaprakash" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>Make sure to change the href on the anchor tag to your URL, or I’ll be getting donations intended for you, which I won’t mind of course! 😂
3. Quick Introduction — Bullets
In this section, you can go creative with emojis and introduce yourself to profile visitors in a more eye-catchy way.
Also, if you are wondering you can make use of
---between your markdown sections to add a horizontal divider.
4. Connect, Follow, Subscribe
This is the section to redirect people to your social handles for them to reach out or follow your work.
You can build one of these badges from shields.io. Here is how my LinkedIn badge looks like in Markdown.
[](https://www.linkedin.com/in/absatyaprakash/)On an entirely unrelated note, you can head to the end of this article to find all the social links to follow me 😇
5. Spotify Playing
I love music. If you share a similar interest, then you might wanna let people know about your music tastes 🎶.
Who knows this might get you a message from your crush 🤷🏻♂️
This is a slightly complex step, you can visit the following links to know how. If you prefer a horizontal card, see the second repository instead. Fair warning though, this might expose your dirty little music secrets, so handle with care.
- https://github.com/novatorem/novatorem
- https://github.com/abhisheknaiidu/awesome-github-profile-readme
6. Languages, Frameworks, Tools
If you are a seasoned developer, you would have experience with a lot of different tech-stack. To show them all in a concise manner, I use this section.
Each of this is actually an image taken from GitHub topics. Here is the HTML.
<p float="left"><img style="padding:5px;" align="center" alt="NodeJS" width="35px" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/nodejs/nodejs.png"/><img style="padding:5px;" align="center" alt="ReactJs" width="35px" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png"/><!-- and more such images with different URLs in src --></p>
7. YouTube Videos
Next up, are the latest 5 videos on my YouTube channel. I have added a link for more videos that directs to my channel.
Doing this is also a little complicated, but bear with me. Here are the steps:
- First, put this in your README at the place where you wish your list of videos to show up.
<!-- YOUTUBE:START -->
<!-- YOUTUBE:END -->- Then create a workflow inside
.github/workflowby the nameyoutube-workflow.ymlwith the following content:
- Finally, run the workflow once to update the README. The workflow fetches videos on an hourly basis using a cron job.
8. Medium Blogs
I write blogs on Medium quite often, so no harm in showing them up here too. Also, you might see a different set of blogs on my actual profile depending on the time of your reading this blog.
For showing this, you can refer to the following repository.
It is as simple as adding a line of markdown in your README.
[](https://medium.com/@absatyaprakash)9. GitHub Stats
This one you might have heard of already. With over 44k stars ⭐️, here is the repository to take a look at. It has many more different cards too for you to take a look at.
10. Pinned Projects
Have some projects of your own that you are proud of? Pin them to your profile and let the world know. Here is my set of pinned repositories.
Last words…
I like to keep things elegant and slightly minimal. Depending on your personality, your might also prefer something flamboyant. This repository
will help you find other awesome profiles for inspiration. There are also a bunch of tools and articles for you to follow.
That’s all for today, I’ll see you again in another article!
Feel free to reach out to me for any questions or suggestions that you might have. You can follow me on these social media platforms — LinkedIn, YouTube, Twitter, Instagram for more updated content!
As always! Happy Hacking! 😇
Join my email list for more awesome tutorials and programming blogs ❤️
