Top 23 github-readme Open-Source Projects

awesome-github-profile-readme

24 22,323 0.0 Vue

😎 A curated list of awesome GitHub Profile READMEs 📝

Project mention: How to Make Your Awesome GitHub Profile | dev.to | 2024-01-07

</code></li> <li><code><style></code></li> <li><code><xmp></code></li> <li><code><iframe></code></li> <li><code><noembed></code></li> <li><code><noframes></code></li> <li><code><script></code></li> <li><code><plaintext></code></li> </ul> <blockquote> 💡: To learn more, here's the <a href="https://github.github.com/gfm/#html-blocks">GitHub Flavored Markdown Spec</a> related to HTML blocks. </blockquote> <h3> <a name="finding-inspiration" href="#finding-inspiration"> </a> Finding Inspiration </h3> To help you get started, I suggest looking at other awesome GitHub profiles for ideas. You can go to <a href="https://github.com/abhisheknaiidu/awesome-github-profile-readme">awesome-github-profile-readme</a>, where I've found inspiration when making my profile. Since the profiles are open-source, you can use some of the good ideas for your awesome profile! You can also check out <a href="https://github.com/kshyun28">my profile</a> for some ideas. 😉 <h3> <a name="adding-badges" href="#adding-badges"> </a> Adding Badges </h3> For adding badges to your profile, you can check out <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a>. The repository has a wide selection to choose from, ranging from programming languages to streaming platforms like Netflix. If you can't find what you're looking for or want to create custom badges, you can go to <a href="https://shields.io/">shields.io</a>, which is what <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> use. Here's an example where I used <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> on my profile. <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" alt="Markdown badges example" loading="lazy" width="800" height="127"></a> <h3> <a name="adding-icons" href="#adding-icons"> </a> Adding Icons </h3> For adding a <code>skills</code> or <code>tech stack</code> section to your profile, I recommend using <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> which provide beautiful icons. If your icon is not supported, you can go to <a href="https://simpleicons.org/">simpleicons</a>, which has over 2900 SVG icons for popular brands. Here's an example where I used <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> for my profile's tech stack section. <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" alt="Icons example" loading="lazy" width="800" height="182"></a> <h3> <a name="using-emojis" href="#using-emojis"> </a> Using Emojis </h3> In GitHub Flavored Markdown, you can use emojis. To see the full list of supported emojis, you can go to this <a href="https://github.com/ikatyang/emoji-cheat-sheet">emoji-cheat-sheet</a>. If you want to get the list of supported emojis yourself, you can use <a href="https://docs.github.com/en/rest/emojis/emojis#get-emojis">GitHub's Emoji API</a>. Going to <a href="https://api.github.com/emojis">https://api.github.com/emojis</a> on your browser should show a JSON response of all supported emojis. <div class="highlight js-code-highlight"> <pre class="highlight json"><code>{ "+1": "https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8", "-1": "https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png?v8", "100": "https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8", "1234": "https://github.githubassets.com/images/icons/emoji/unicode/1f522.png?v8", "1st_place_medal": "https://github.githubassets.com/images/icons/emoji/unicode/1f947.png?v8", "2nd_place_medal": "https://github.githubassets.com/images/icons/emoji/unicode/1f948.png?v8", "3rd_place_medal": "https://github.githubassets.com/images/icons/emoji/unicode/1f949.png?v8", "8ball": "https://github.githubassets.com/images/icons/emoji/unicode/1f3b1.png?v8", ... </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode Exit fullscreen mode Here's an example where I used emojis for my profile. Adding GitHub Stats For adding cards and stats for your GitHub activity, I recommend using github-readme-stats. You can customize your stat cards with different layouts and themes. Here's an example where I added GitHub stats to my profile. Adding Quotes Adding random quotes to your profile can add a nice touch for visitors. I found github-readme-quotes to be useful for doing just that. Here's what it looks like on my profile. I personally like to add quotes to provide some value to my profile visitors. More Ideas For adding more infographics to your profile, I recommend checking out metrics. This is one of the most starred repositories on GitHub with the github-profile topic, so I couldn't leave this out. Then I found this beautiful resource beautify-github-profile, where you can find more ways to customize your profile. If you're also feeling adventurous, you can explore the github-profile topic here. The repositories are sorted by the number of stars by default. Feel free to explore repositories with the github-profile topic. You might even find ones that aren't used as much but are just what you need. GitHub Profile Achievements While this is not related to customizing your GitHub profile's README.md, I feel the need to include it. If you go to your GitHub profile, you'll notice an Achievements section on the left sidebar. These achievements are fun to collect and can improve your overall GitHub profile. To learn more about what achievements are available and how to get them, check out the list of GitHub profile achievements. Conclusion To recap, we walked through how to create your GitHub profile. Then I showed how to format your profile with GitHub Flavored Markdown and HTML. After that, I shared where you can get inspiration for your own profile. Finally, I gave tips and resources on ways to customize your profile. I hope this can help you in making your awesome GitHub profile. I'd love to see what you can come up with! Thank you for reading and feel free to comment or connect with me here. Resources Managing your GitHub profile README GitHub Basic Writing and Formatting Syntax awesome-github-profile-readme repository markdown-badges repository shields.io skill-icons repository simpleicons.org emoji-cheat-sheet GitHub's Emoji API github-readme-stats repository github-readme-quotes repository metrics repository beautify-github-profile repository repositories with "github-profile" topic github-profile-achievements list
skill-icons

1 5,445 6.2 SVG

Showcase your skills on your Github readme or resumé with ease ✨

Project mention: How to Make Your Awesome GitHub Profile | dev.to | 2024-01-07

</code></li> <li><code><style></code></li> <li><code><xmp></code></li> <li><code><iframe></code></li> <li><code><noembed></code></li> <li><code><noframes></code></li> <li><code><script></code></li> <li><code><plaintext></code></li> </ul> <blockquote> 💡: To learn more, here's the <a href="https://github.github.com/gfm/#html-blocks">GitHub Flavored Markdown Spec</a> related to HTML blocks. </blockquote> <h3> <a name="finding-inspiration" href="#finding-inspiration"> </a> Finding Inspiration </h3> To help you get started, I suggest looking at other awesome GitHub profiles for ideas. You can go to <a href="https://github.com/abhisheknaiidu/awesome-github-profile-readme">awesome-github-profile-readme</a>, where I've found inspiration when making my profile. Since the profiles are open-source, you can use some of the good ideas for your awesome profile! You can also check out <a href="https://github.com/kshyun28">my profile</a> for some ideas. 😉 <h3> <a name="adding-badges" href="#adding-badges"> </a> Adding Badges </h3> For adding badges to your profile, you can check out <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a>. The repository has a wide selection to choose from, ranging from programming languages to streaming platforms like Netflix. If you can't find what you're looking for or want to create custom badges, you can go to <a href="https://shields.io/">shields.io</a>, which is what <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> use. Here's an example where I used <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> on my profile. <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" alt="Markdown badges example" loading="lazy" width="800" height="127"></a> <h3> <a name="adding-icons" href="#adding-icons"> </a> Adding Icons </h3> For adding a <code>skills</code> or <code>tech stack</code> section to your profile, I recommend using <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> which provide beautiful icons. If your icon is not supported, you can go to <a href="https://simpleicons.org/">simpleicons</a>, which has over 2900 SVG icons for popular brands. Here's an example where I used <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> for my profile's tech stack section. <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" alt="Icons example" loading="lazy" width="800" height="182"></a> <h3> <a name="using-emojis" href="#using-emojis"> </a> Using Emojis </h3> In GitHub Flavored Markdown, you can use emojis. To see the full list of supported emojis, you can go to this <a href="https://github.com/ikatyang/emoji-cheat-sheet">emoji-cheat-sheet</a>. If you want to get the list of supported emojis yourself, you can use <a href="https://docs.github.com/en/rest/emojis/emojis#get-emojis">GitHub's Emoji API</a>. Going to <a href="https://api.github.com/emojis">https://api.github.com/emojis</a> on your browser should show a JSON response of all supported emojis. <div class="highlight js-code-highlight"> <pre class="highlight json"><code>{ "+1": "https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8", "-1": "https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png?v8", "100": "https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8", "1234": "https://github.githubassets.com/images/icons/emoji/unicode/1f522.png?v8", "1st_place_medal": "https://github.githubassets.com/images/icons/emoji/unicode/1f947.png?v8", "2nd_place_medal": "https://github.githubassets.com/images/icons/emoji/unicode/1f948.png?v8", "3rd_place_medal": "https://github.githubassets.com/images/icons/emoji/unicode/1f949.png?v8", "8ball": "https://github.githubassets.com/images/icons/emoji/unicode/1f3b1.png?v8", ... </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode Exit fullscreen mode Here's an example where I used emojis for my profile. Adding GitHub Stats For adding cards and stats for your GitHub activity, I recommend using github-readme-stats. You can customize your stat cards with different layouts and themes. Here's an example where I added GitHub stats to my profile. Adding Quotes Adding random quotes to your profile can add a nice touch for visitors. I found github-readme-quotes to be useful for doing just that. Here's what it looks like on my profile. I personally like to add quotes to provide some value to my profile visitors. More Ideas For adding more infographics to your profile, I recommend checking out metrics. This is one of the most starred repositories on GitHub with the github-profile topic, so I couldn't leave this out. Then I found this beautiful resource beautify-github-profile, where you can find more ways to customize your profile. If you're also feeling adventurous, you can explore the github-profile topic here. The repositories are sorted by the number of stars by default. Feel free to explore repositories with the github-profile topic. You might even find ones that aren't used as much but are just what you need. GitHub Profile Achievements While this is not related to customizing your GitHub profile's README.md, I feel the need to include it. If you go to your GitHub profile, you'll notice an Achievements section on the left sidebar. These achievements are fun to collect and can improve your overall GitHub profile. To learn more about what achievements are available and how to get them, check out the list of GitHub profile achievements. Conclusion To recap, we walked through how to create your GitHub profile. Then I showed how to format your profile with GitHub Flavored Markdown and HTML. After that, I shared where you can get inspiration for your own profile. Finally, I gave tips and resources on ways to customize your profile. I hope this can help you in making your awesome GitHub profile. I'd love to see what you can come up with! Thank you for reading and feel free to comment or connect with me here. Resources Managing your GitHub profile README GitHub Basic Writing and Formatting Syntax awesome-github-profile-readme repository markdown-badges repository shields.io skill-icons repository simpleicons.org emoji-cheat-sheet GitHub's Emoji API github-readme-stats repository github-readme-quotes repository metrics repository beautify-github-profile repository repositories with "github-profile" topic github-profile-achievements list
SurveyJS

surveyjs.io
sponsored

Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
github-profile-trophy

14 4,614 7.1 TypeScript

🏆 Add dynamically generated GitHub Stat Trophies on your readme

Project mention: GitHub Profile Achievements | news.ycombinator.com | 2023-07-11
MartinHeinz

1 396 5.9

My GitHub Profile README. Don't just fork, star it, so others can find it too! 👀
github-profile-header-generator

2 389 0.0 JavaScript

A header image generator for your Github profile Readme
github-readme-quotes

1 375 4.4 TypeScript

🔥 Add Programming Quotes To Your GitHub Readme
githubProfileReadmeGenerator

12 202 0.0 Python

Generate a cool README/About me page for your Github Profile
WorkOS

workos.com
sponsored

The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
Cool-Readme-ideas

1 141 0.0

:tada::tada::tada: Some cool ideas for your readme profile, enjoy :)
todoist-readme

1 135 2.8 JavaScript

🚧 Updates README with Todoist Stats of a user
Awesome-Repo-Template

14 133 0.0 HTML

An awesome repo template packed with tons of tools & more to kick-start your next project / repo!

Project mention: The Perfect Repo Template: A repo template packed with tons of tools & more to kick-start your next project / repo! | /r/github | 2023-05-03
github-readme-medium

1 93 0.0 JavaScript

📖 Dynamically generated your latest Medium article on your GitHub readmes!
hits

3 87 3.6 Java

:chart_with_upwards_trend: Hit Counter for Your GitHub or Any Kind of Websites You Want.

Project mention: Create and Elevate Your GitHub Profile README | dev.to | 2023-08-13

🎨 Hit.sh: https://hits.sh/ 🐙 GitHub Repo: https://github.com/silentsoft/hits
github-contribution-graph

9 52 0.0 Go

Add beautiful GitHub contribution/commit graph to your profile README!
github-readme-learn-section-notion

2 36 0.0 TypeScript

Update your github README with data fetched from a notion database
github-readme-steam-status

1 8 6.9 TypeScript

:video_game: A dynamically generated steam status card for your github readme
Quote-Placeholders

4 6 10.0

Automatically updated quote images for your GitHub Profile or website.
vstatus

2 5 7.5 TypeScript

Transform your workspace into a dynamic visual snapshot—capture filenames, workspace names, and time elapsed in an SVG image served right to your GitHub Readme.

Project mention: Discord like rich precence in github readme. (Shows vscode's workspace info, file being edited and timelaps) | /r/github | 2023-05-28
TOC-Generator-Action

3 5 0.0 Dockerfile

A Github Action to generate a table of contents in your README
Github-Readme-Riddle

4 5 0.0 JavaScript

GitHub Readme Riddles : Display Random riddles 🤔 on your github profile 🤓
kawarimidoll

1 3 9.9 TypeScript

whoami
osu-score-embed

1 3 0.0 JavaScript

Embed osu! stats in Github Readme Profile
Goodreads-Random-Quotes-Badge

3 2 0.0 Jinja

Show a random quote from your Goodreads Account on your GitHub readme
ravgeetdhillon

1 1 9.5 Python

Github Profile Readme automated using Python
InfluxDB

www.influxdata.com
sponsored

Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2024-01-07.

github-readme related posts

GitHub Profile Achievements
5 projects | news.ycombinator.com | 11 Jul 2023
Newsletters on Portfolio
2 projects | dev.to | 3 Jun 2023
Discord like rich precence in github readme. (Shows vscode's workspace info, file being edited and timelaps)
1 project | /r/github | 28 May 2023
The Perfect Repo Template: A repo template packed with tons of tools & more to kick-start your next project / repo!
1 project | /r/github | 3 May 2023
More than 20+ automatically updated quote images for your GitHub Profile or website!
1 project | /r/github | 19 Feb 2023
WOW! Make your own personalised github profile readme😎
1 project | dev.to | 2 Feb 2023
Awesome-Repo-Template: A free awesome template packed with tons of tools & more to kick-start your next project / repo!
1 project | /r/github | 27 Jan 2023
A note from our sponsor - InfluxDB
www.influxdata.com | 19 Apr 2024

Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →

Index

What are some of the best open-source github-readme projects? This list will help you:

	Project	Stars
1	awesome-github-profile-readme	22,323
2	skill-icons	5,445
3	github-profile-trophy	4,614
4	MartinHeinz	396
5	github-profile-header-generator	389
6	github-readme-quotes	375
7	githubProfileReadmeGenerator	202
8	Cool-Readme-ideas	141
9	todoist-readme	135
10	Awesome-Repo-Template	133
11	github-readme-medium	93
12	hits	87
13	github-contribution-graph	52
14	github-readme-learn-section-notion	36
15	github-readme-steam-status	8
16	Quote-Placeholders	6
17	vstatus	5
18	TOC-Generator-Action	5
19	Github-Readme-Riddle	5
20	kawarimidoll	3
21	osu-score-embed	3
22	Goodreads-Random-Quotes-Badge	2
23	ravgeetdhillon	1