The GitHub Profile Trick ![rw-book-cover](https://css-tricks.com/wp-json/social-image-generator/v1/image/317762) ## Metadata - Author: [[Chris Coyier]] - Full Title: The GitHub Profile Trick - Category: #articles - Summary: Monica Powell shared a really cool trick the other day: - URL: https://css-tricks.com/the-github-profile-trick/ Monica Powell [shared a really cool trick](https://www.aboutmonica.com/blog/how-to-create-a-github-profile-readme) 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://github.com/M0nica): ![](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](https://repo.new/) (hey, CodePen has [one of those cool domains](https://blog.codepen.io/2020/07/14/new-url-pen-new/) 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](https://www.aboutmonica.com/blog/how-to-create-a-github-profile-readme) has a bunch of fun examples in it. My favorite is Kaya Thomas’ profile, which I saw Jina Anne share: > Inspired by [@waterproofheart](https://twitter.com/waterproofheart?ref_src=twsrc%5Etfw), I created a README for my [@github](https://twitter.com/github?ref_src=twsrc%5Etfw) profile! Illustrations by the amazing [@yess\_esse](https://twitter.com/yess_esse?ref_src=twsrc%5Etfw) 😃 > > Really like that we can personalize our profiles like this now! [pic.twitter.com/uOTheewnK9](https://t.co/uOTheewnK9) > > — Kaya Thomas (@kthomas901) [July 20, 2020](https://twitter.com/kthomas901/status/1285321238735282176?ref_src=twsrc%5Etfw) 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., The GitHub Profile Trick, Chris Coyier, 01gnmcxdac5edaq8gta4h73daa.