AFAIK there is no legit people-led and voted ranking awards for Github ReadMe. But you'll be the judge if it really is the best github you've ever seen.
Here's how you can do it, too:
Intro PNG
I made the PNG from carbon, where you can generate screenshots of your code. You could also export it as SVG if you want to add animation or other customizations to the file.
After exporting the PNG, I edited the file in Figma to add custom text and a bot model.
Snake Contribution Graph
The graph is from my actual github graph. And snake eats them like that classic snake game from our good old Nokia phones.
I used this github action to make it.
Animated SVG
Click the animation for the source code. Yes! It's not a GIF and yes you can animate SVGs and it can be used for your ReadMe.
The typing SVG is generated from here. Adjust the parameters as you like.
Lighthouse Stats
I got the image generated from here. Then, I just customized the text in Figma.
Tables
Here are the best practices for markdown. Here, you'll see the many ways to create tables and format your Github ReadMe.
Support Button
It was generated from Ko-fi's site. I got it from their widgets tab. From there you can customize your button however you like. I chose Ko-Fi because they don't take fees from the sponsorships you get and you can use Paypal or Stripe. Of course, you can also replace this button with your preferred platform.
Shields or Badges for Social Sites
I used shields.io. They offer many ways to customize the look of your badges.
Live Spotify Stream
It shows my recent stream or what I'm listening to real-time. I used this. You'll have to authenticate with your Spotify account. You can also customize the theme.
Auto-updated Workflow for Feeds and Blog
This workflow lists scraped RSS or feed from any of my blogs from different platforms. I used this Github Action.
Github Stats
I used this to generate them.
Just replace GithubUsername with your username and you're good to go.
Visitor Count Badge
Here's the exact code used to generate these badges:
Just replace GithubUsername with your username and you're good to go.
Here's another way to do it. Look in here for style options.
Check out other Github ReadMe
Here's a site to look up other people's profiles.
You can also find a list of tools to help you build the best possible Github ReadMe. There are plenty of profile generators out there to make your life easier.
Lastly, I privated my github for the less cluttered look of my github page. Also, it helps not spam my friends whenever I'm on a starring rampage or commiting and making too many pull requests.
It's a beta feature. Try it for yourself. It's in settings.
milkshakegum (Milk) · GitHub
Too obsessed with making tools to make everyday life easier. #cope Fueled with caffeine, ADHD and OCD. - milkshakegum
github.com
Time to unleash your creativity. Good luck! -Milk
Change-log:
Thank you so much for appreciating my work!
I took into consideration all the feedback you guys gave me.
- Added proper ALT tags.
- Made as much HTML into Markdown, if it won't work in Markdown I at least added whitespaces to make it still readable.
- Corrected misspelled words.
- Changed the previous theme to a much accessible one.
Top comments (12)
Hello, I don't want to be a dick, your README is certainly nice looking, but to be actualy good it would be nice to fix two issues:
code,technologies, .. fine but I have to make an effort to read"JavaScript", "TypeScript", ...The first issue can be fixed with a more readable theme The second by having a text-equivalent below or something
Omg thank you so much!!! I'll look into it and fix it. 🤍
Well, markdown was created to be readable in plain text (ref)
So on one side, you made the best Github README ever, but on the other side you probably made the worst markdown file ever 🤣
True lol 🤣 Well I tried doing some of them in markdown, but they won't render as well if I did it with HTML. Thanks for the feedback!
It's technically awesome, but I get strong MySpace vibes from this recent overengineered GitHub README trend :D
There really is nothing new under the sun at this point lol. The 80's are coming back hard too.
lolol Yes it is over engineered T_T I had an incessant urge to showcase my CSS skills!! jkjk I had to make up for not having real projects to contribute to the open-source community lol
I like the minimalism on the first page. Like others said, adding a text variant and maybe styling it with colors will create the same effect. Once you click the expand key, it becomes quite excessive. No many people will be interested in seeing what you listen to and or what your ranks in x, y, z are.
Focus on telling more about who you are; what is your passion? why do you code? etc.
I think this nails most aspects mentioned, here, but I use actual code blocks in my READMEs, for accessibility, and, also, users can easily copy + paste, from the READMEs, even on mobile. Also, there's a Table Of Contents :
github.com/antonio-malcolm/interre...
Yes, I agree! The one from the link you sent is definitely ideal for a project's README.
Btw, if u ever need to add stats for contributors, etc of the project(well there is one in the analytics tab but it doesnt have a contributions graph), I found repobeats.axiom.co/. You might wanna check them out.
Absolute lovely. Love your work and would like to connect.
thank you!!! 🤍 ok lets do it