@fajarkim/github-readme-profile
v1.1.2
Published
🙀 Generate your Stats GitHub Profile in SVG
Downloads
53
Maintainers
Readme
📌 Features
🎴 Getting Started
Copy-paste this into your markdown content, and that is it. Simple!
Change the ?username=
value to your GitHub username.
[](https://github.com/FajarKim/github-readme-profile)
🎨 Themes
With inbuilt themes, you can customize the look of the card without doing any manual customization.
Use &theme=THEME_NAME
parameter like so:

All inbuilt themes
GitHub Readme Profile comes with several built-in themes (e.g. transparent
, dark
, highcontarst
).
| Themes | Preview |
| :------------------: | :-------------------------: |
| default
| |
|
transparent
| |
|
dark
| |
|
highcontrast
| |
You can look at a preview for all available themes. You can also contribute new themes if you like, contributing guidelines can be found here.
✏️ Customization
You can customize the appearance of all your cards however you wish with URL parameters.
Options
Use the transparent theme
We have included a transparent
theme that has a transparent background. This theme is optimized to look good on GitHub's dark and light default themes. You can enable this theme using the &theme=transparent
parameter like so:

Add transparent alpha channel to a themes bg_color
You can use the bg_color
parameter to make any of the available themes transparent. This is done by setting the bg_color
to a color with a transparent alpha channel (i.e. bg_color=00000000
):

Use GitHub's theme context tag
You can use GitHub's theme context tags to switch the theme based on the user GitHub theme automatically. This is done by appending #gh-dark-mode-only
or #gh-light-mode-only
to the end of an image URL. This tag will define whether the image specified in the markdown is only shown to viewers using a light or a dark GitHub theme:
[](https://github.com/FajarKim/github-readme-profile#gh-dark-mode-only)
[](https://github.com/FajarKim/github-readme-profile#gh-light-mode-only)
Use gradient color
You can use the bg_color
parameter to make gradient color. This is done by setting the bg_color
with format angle,start,end (comma-separated value).

Hiding individual stats
You can pass a query parameter &hide=
to hide any specific stats with comma-separated values.
Options:
&hide=repos,stars,forks,commits,prs,prs_merged,issues, contributed

Showing additional individual stats
You can pass a query parameter &show=
to show any specific additional stats with comma-separated values
Options:
&show=reviews,issues_closed,discussions_started,discussions_answered

Available locales
See more available locale. The locale code added to file should be a 2-letter abbreviation from ISO 639-1 or a 4-letter code with a language and country code (eg. id
or pt-BR
). Anything appearing in the list should be fine. You can also contribute new translations if you like, contributing guidelines can be found here.

📑 License
GitHub Readme Profile is released under the MIT license, which grants the following permissions:
- Commercial use
- Modification
- Distribution
- Private use
For more convoluted language, see the LICENSE.
Deploy on ▲ Vercel
Step-by-step guide on setting up your own Vercel instance.
- Go to vercel.com.
- Click on
Log In
. - Sign in with GitHub by pressing
Continue with GitHub
. - Sign in to GitHub and allow access to all repositories if prompted.
- Fork this repository.
- Go back to your Vercel dashboard.
- To import a project, click the
Add New...
or+
button and select theProject
option. - Click the Continue with GitHub button, search for the required Git Repository and import it by clicking the
Import
button. Alternatively, you can import a Third-Party Git Repository using theImport Third-Party Git Repository
link at the bottom of the page. - Create a personal access token (PAT) here and enable the
repo
anduser
permissions (this allows access to see private repo and user stats). - Add the PAT as an environment variable named
GH_TOKEN_1
. - Repeat step number 9 and add PAT up to the
GH_TOKEN_3
environment variable. - In build and output settings, you set install command toggle and add command
npm install typescript
. - Click deploy, and you're good to go. See your domains to use the API!
💳 Credits
This repository contains forked from tuhinpal/readme-stats-github and inspired from anuraghazra/github-readme-stats.
💰 Donate
Love the project? Please consider donating to help it improve!
Are you considering supporting the project by donating to me? Please DO NOT!!
Please visit this link and make a small donation to help the people in need. A small donation goes a long way. ❤️
👥 Contributions
Contributions are welcome!
Specially thanks ❤️ for contributors bellow:
Want to contribute? Please note our contribution guidelines here.