Back to blog
GitHubMarkdown

How I Built My GitHub Profile README

Feb 20264 min read

If you've ever visited someone's GitHub profile and noticed a custom block of text, images, and badges right at the top — that's a profile README. It's one of the simplest yet most impactful things you can do to stand out as a developer.

The Hidden Repo Trick

GitHub has a special feature: if you create a public repository with the exact same name as your username, the README.md in that repo gets rendered at the top of your profile. In my case, that means creating github.com/Shavrka/Shavrka.

GitHub even hints at this when you create the repo — you'll see a small message saying "Shavrka/Shavrka is a special repository."

Structure of My README

I kept the structure clean and purposeful. Here's what mine includes:

  • Header with animated greeting — a simple <h1> with a wave emoji that sets the tone
  • Short bio — who I am, what I do, where I'm based
  • Tech stack badges — using shields.io for the iconic flat-style badges
  • GitHub stats — auto-generated cards via github-readme-stats
  • Links — portfolio, Upwork, LinkedIn

Adding Animated Badges with shields.io

Shields.io lets you generate badges with a simple URL pattern. For example, a TypeScript badge looks like this:

![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white)

The style=flat gives the clean look. You can switch to for-the-badge for a bigger, bolder style. I used flat-square to match the minimal aesthetic of my profile.

GitHub Stats Cards

The github-readme-stats project by Anurag Hazra generates dynamic SVG cards from your GitHub data. You just embed an image tag pointing to their API:

![GitHub Stats](https://github-readme-stats.vercel.app/api?username=Shavrka&show_icons=true&theme=tokyonight&hide_border=true)

I went with the tokyonight theme to match my dark purple aesthetic and set hide_border=true for a cleaner look.

Tips I Wish I Knew Earlier

  • Use HTML inside Markdown — GitHub renders basic HTML in READMEs. I used <div align='center'> to centre everything.
  • Keep it brief — visitors scan, they don't read. Headers and badges over paragraphs.
  • Update it — a README with outdated tech or links looks worse than no README at all.
  • Use GitHub Profile README Generator to get a starter template fast.

Final Result

You can see the live result at github.com/Shavrka. It took about two hours to put together and has made my profile look significantly more professional. 100% worth doing.

If this helped you, leave a ❤️

Comments

Comments coming soon

Configuring Giscus — powered by GitHub Discussions

Have thoughts on this? Reach out — I'd love to chat.

Get in Touch