Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fajarkim/github-readme-profile
🙀 Generate your Stats GitHub Profile in SVG
https://github.com/fajarkim/github-readme-profile
github github-card github-cards github-profile-card github-profile-readme github-profile-readme-generator github-profile-stats github-readme-profile github-readme-stats github-social github-stats github-stats-generator hacktoberfest hacktoberfest-accepted hacktoberfest-indonesia hacktoberfest2024 indonesia palestine profile standwithpalestine
Last synced: 16 days ago
JSON representation
🙀 Generate your Stats GitHub Profile in SVG
- Host: GitHub
- URL: https://github.com/fajarkim/github-readme-profile
- Owner: FajarKim
- License: mit
- Created: 2023-10-09T03:16:37.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-29T21:15:02.000Z (about 2 months ago)
- Last Synced: 2024-10-29T23:37:59.017Z (about 2 months ago)
- Topics: github, github-card, github-cards, github-profile-card, github-profile-readme, github-profile-readme-generator, github-profile-stats, github-readme-profile, github-readme-stats, github-social, github-stats, github-stats-generator, hacktoberfest, hacktoberfest-accepted, hacktoberfest-indonesia, hacktoberfest2024, indonesia, palestine, profile, standwithpalestine
- Language: TypeScript
- Homepage: https://gh-readme-profile.vercel.app
- Size: 1.11 MB
- Stars: 35
- Watchers: 2
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
GitHub Readme Profile
🙀 Generate your Stats GitHub Profile in SVG
Report Bugs · Request Feature · Ask Question
# 📌 Features
- [🎴 Getting Started](#-getting-started)
- [🎨 Themes](#-themes)
- [✏️ Customization](#%EF%B8%8F-customization)
- [📑 License](#-license)
- [Deploy on ▲ Vercel](#deploy-on--vercel)
- [💳 Credits](#-credits)
- [💰 Donate](#-donate)
- [👥 Contributions](#-contributions)
# 🎴 Getting Started
Copy-paste this into your markdown content, and that is it. Simple!
Change the `?username=` value to your GitHub username.
```markdown
[](https://github.com/FajarKim/github-readme-profile)
```
[](https://github.com/FajarKim/github-readme-profile)
## 🎨 Themes
With inbuilt themes, you can customize the look of the card without doing any [manual customization](#%EF%B8%8F-customization).
Use `&theme=THEME_NAME` parameter like so:
```markdown
```
Show Example
#### All inbuilt themes
GitHub Readme Profile comes with several built-in themes (e.g. `transparent`, `dark`, `highcontarst`).
| Themes | Preview |
| :------------------: | :-------------------------: |
| `default` | ![image][default] |
| `transparent` | ![image][transparent] |
| `dark` | ![image][dark] |
| `highcontrast` | ![image][highcontrast] |
You can look at a preview for [all available themes](./themes/README.md). You can also contribute new themes if you like, contributing guidelines can be found [here](./CONTRIBUTING.md#-themes-contribution).
[default]: https://github-readme-profile-theta.vercel.app/api?username=FajarKim&theme=default
[transparent]: https://github-readme-profile-theta.vercel.app/api?username=FajarKim&theme=transparent
[dark]: https://github-readme-profile-theta.vercel.app/api?username=FajarKim&theme=dark
[highcontrast]: https://github-readme-profile-theta.vercel.app/api?username=FajarKim&theme=highcontrast
## ✏️ Customization
You can customize the appearance of all your cards however you wish with URL parameters.
#### Options
Name
Description
Type
Default value
title_color
Card's title color.
string(hex color)
2f80ed
text_color
Body text color.
string(hex color)
434d58
icon_color
Icons color.
string(hex color)
4c71f2
border_color
Card's border color. Does not apply when hide_border is enabled.
string(hex color)
e4e2e2
bg_color
Card's background color.
string(hex color or a gradient in the form of angle,start,end)
fffefe
stroke_color
Profile image border color. Does not apply when hide_stroke is enabled.
string(hex color)
e4e2e2 or border_color query
username_color
Username text color.
string(hex color)
434d58 or text_color query
theme
Name of the theme, choose from all available themes.
enum
default
title
Custom title text for the card. Before use, encode the text to URL format using a tool like URL Encoder.
string
null
locale
Sets the language in the card, you can check full list of available locales here.
enum
en
border_width
Sets the border's width manually.
number
1
border_radius
Corner rounding on the card.
number
4.5
hide
Hides the specified items from stats.
string(comma-separated values)
null
show
Shows additional items on stats card.
string(comma-separated values)
null
format
Output format card option (i.e. svg, png, json, or xml).
enum
svg
disabled_animations
Disables all animations in the card.
boolean
false
hide_border
Hides the card's border.
boolean
false
hide_stroke
Hides the image's profile stroke in the card.
boolean
false
revert
Inverts the display order, positioning stats to the left and the image to the right.
boolean
false
photo_quality
Quality of the profile image, represented as a percentage (1-100).
number(percentage)
15
photo_resize
Resize the profile image to a specific width, in pixels. Minimum allowed value is 10px.
number(pixels)
150
#### 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:
```markdown
```
Show Example
#### 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`):
```markdown
```
Show Example
#### Use GitHub's theme context tag
You can use [GitHub's theme context](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) 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:
```markdown
[](https://github.com/FajarKim/github-readme-profile#gh-dark-mode-only)
[](https://github.com/FajarKim/github-readme-profile#gh-light-mode-only)
```
Show Example
#### 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).
```markdown
```
Show Example
#### 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`
```markdown
```
Show Example
#### 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`
```markdown
```
Show Example
#### Available locales
Code
Locale
en
English
ar
Arabic (العربية)
fr
French (Français)
id
Indonesian (Bahasa Indonesia)
ja
Japanese (日本語)
ko
Korean (한국어)
See [more](/i18n/README.md) available locale. The locale code added to file should be a 2-letter abbreviation from [ISO 639-1](https://www.andiamo.co.uk/resources/iso-language-codes/) or a 4-letter code with a language and country code (eg. `id` or `pt-BR`). Anything appearing in [the list](https://gist.github.com/FajarKim/91516c2aecbfc8bf65f584d528d5f2b1) should be fine. You can also contribute new translations if you like, contributing guidelines can be found [here](/CONTRIBUTING.md#%EF%B8%8F-translations-contribution).
```markdown
```
Show Example
## 📑 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](/LICENSE).
## Deploy on ▲ Vercel
Step-by-step guide on setting up your own Vercel instance.
1. Go to [vercel.com](https://vercel.com).
2. Click on `Log In`.
3. Sign in with GitHub by pressing `Continue with GitHub`.
4. Sign in to GitHub and allow access to all repositories if prompted.
5. Fork this repository.
6. Go back to your [Vercel dashboard](https://vercel.com/dashboard).
7. To import a project, click the `Add New...` or `+` button and select the `Project` option.
8. 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 the `Import Third-Party Git Repository` link at the bottom of the page.
9. Create a personal access token (PAT) [here](https://github.com/settings/tokens/new) and enable the `repo` and `user` permissions (this allows access to see private repo and user stats).
10. Add the PAT as an environment variable named `GH_TOKEN`.
11. In build and output settings, you set install command toggle and add command `npm install typescript`.
12. Click deploy, and you're good to go. See your domains to use the API!
[](https://vercel.com/import/project?template=https://github.com/FajarKim/github-readme-profile)
## 💳 Credits
This repository contains forked from [tuhinpal/readme-stats-github](https://github.com/tuhinpal/readme-stats-github) and inspired from [anuraghazra/github-readme-stats](https://github.com/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](https://fajarkim.github.io/donate) 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](/CONTRIBUTING.md).
[](https://techforpalestine.org/learn-more)
Made with ❤️ and TypeScript
Copyright © 2023-present Rangga Fajar Oktariansyah
