Monica Powell shared a really cool trick the other day:
The profile README is created by creating a new repository that’s the same name as your username. For example, my GitHub username is m0nica so I created a new repository with the name m0nica.
Now the README.md
from that repo is essentially the homepage of her profile. Above the usual list of popular repos, you can see the rendered version of that README on her profile:
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/07/Screen-Shot-2020-07-23-at-6.48.08-AM.png?resize=1024%2C799&ssl=1)
Lemme do a super simple version for myself real quick just to try it out…
OK, I start like this:
![Screenshot of the default profile page for Chris Coyier.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/07/Screen-Shot-2020-07-23-at-6.50.07-AM.png?resize=1024%2C852&ssl=1)
Then I’ll to go repo.new (hey, CodePen has one of those cool domains too!) and make a repo on my personal account that is exactly the same as my username:
![Screenshot showing the create new repo screen on GitHub. The repository name is set to chriscoyier.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/07/Screen-Shot-2020-07-23-at-6.51.22-AM.png?resize=2480%2C1746&ssl=1)
I chose to initialize the repo with a README file and nothing else. So immediately I get:
![Screenshot of the code section of the chriscoyier repo, which only contains a read me file that says hi there.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/07/Screen-Shot-2020-07-23-at-6.53.00-AM.png?resize=2480%2C1746&ssl=1)
I can edit this directly on the web, and if I do, I see more helpful stuff:
![Screenshot of editing the read me file directly in GitHub.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/07/Screen-Shot-2020-07-23-at-6.53.46-AM.png?resize=2480%2C1746&ssl=1)
Fortunately, my personal website has a Markdown bio ready to use!
![Screenshot of Chris Coyier's personal website homepage. It has a dark background and a large picture of Chris wearing a red CodePen hat next to some text welcoming people to the site.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/07/Screen-Shot-2020-07-23-at-6.54.50-AM.png?resize=2432%2C1696&ssl=1)
I’ll copy and paste that over.
![Screenshot showing the Markdown code from the personal website in the GitHub editor.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/07/Screen-Shot-2020-07-23-at-6.56.39-AM.png?resize=2480%2C1746&ssl=1)
After committing that change, my own profile shows it!
![Screenshot of the updated GitHub profile page, showing the welcome text from the personal website homepage.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/07/Screen-Shot-2020-07-23-at-6.57.07-AM.png?resize=2520%2C1780&ssl=1)
Maybe I’ll get around to doing something more fun with it someday. Monica’s post has a bunch of fun examples in it. My favorite is Kaya Thomas’ profile, which I saw Jina Anne share:
Inspired by @waterproofheart, I created a README for my @github profile! Illustrations by the amazing @yess_esse 😃
— Kaya Thomas (@kthomas901) July 20, 2020
Really like that we can personalize our profiles like this now! pic.twitter.com/uOTheewnK9
You can’t use CSS in there (because GitHub strips it out), so I love the ingenuity of using old school <img align="right">
to pull off the floating image look.
Another tip is you can use HTML/CSS in any Markdown document, even a GitHub README, using SVG and foreignObject
https://twitter.com/dailydevlinks/status/1286553743039881216?s=20
Check out mine! https://github.com/Raymo111/Raymo111
I got tired of updating the github profile README again and again to add new features like visitors-count, github-stats, dynamic blogs github action, etc.
So I developed a tool to make this an easy experience
Try the tool – https://rahuldkjain.github.io/gh-profile-readme-generator
Github Repository – https://github.com/rahuldkjain/github-profile-readme-generator
Really cool, thanks
Cool! I just did this at https://github.com/seezee! Thanks for the article!
Thank you so much for these. Now employers checking out my github can view it like some kind of cover letter on arrival to the profile page
Nice tricks!! Thanks for sharing.
Really cool trick! Thanks!
Cool thing. I just tried it out and implemented it directly (https://github.com/dkeu). Looks good and works.
https://github.com/karkranikhil
Really Cool! I’m gonna immediately go try.
In quarantine this was the awesome piece of writing that I have read. I am just wondering to have a tool on @codepen to create awesome portfolio on @GitHub.
I recently discovered this hidden feature and jusy got crazy! Here’s what I ended up with: https://github.com/itsmiguelrojas. Maybe I will add some extra things later.
Here is mine: https://github.com/sanamhub