Add your skills with skill level to your github readme
Add the following code to your readme to load one skill.
[](https://github.com/stummk/github-profile-skills)
You will probably want to load multiple skills. You ca define a json file with your desired skills and levels and than request this list directly instead of loading every skill. Your json file should look something like:
[
{
"skill": "github",
"level": "S"
},
...
]To load the list add the following code to your readme.
[](https://github.com/stummk/github-profile-skills)
Skills will be laoded from the Simple Icons project. Currently all available icons in version 6.6.0 of the simple icons are supported.
Skills can be requested as single skill by the query parameter id= or in a json file with the "skill" object key. The value must be the slug of the icon provided by the simple icons project. Not supported skills will be ignored.
If you specify a list of skills the idrequest parameter is optional.
Available levels for your skill are UNKNOWN D C B A S
| Level-Key | Description |
|---|---|
| S | I am a pro in this technology. Level at 100% |
| A | I have very good knwolegde in this technology. Level at 75% |
| B | I have good knowledge. Level at 50% |
| C | I have worked a long time ago. So I understand something, Level at 25%. |
| D | I have heard about it or used it once. Level at 0%. |
| UNKNOWN | No level for that skill will be displayed. Use this or leave level empty if you do not want to show your level for one certain skill |
With &level=<levelkey> you can set one level for a skill in the request. If you want to load a list of skills you can set the leven in the json file. For example:
[
{
"skill": "github",
"level": "S"
}
]Add optional parameter of the theme.
[](https://github.com/stummk/github-profile-skills)
Available themes are flat, onedark, gruvbox, dracula, monokai, chalk, nord, alduin, darkhub, juicyfresh, oldie, radical, onestar, discord, algolia, gitdimmed, tokyonight, matrix, apprentice and dark_dimmed.
You can specify the maximum row and column size. The skills, whuich exceed the range of both row and column will be hidden.
Default: column=10 row=10
Restrict only row
https://github-profile-skills-one.vercel.app/skill?id=github&level=S&row=2
Restrict only column
https://github-profile-skills-one.vercel.app/skill?id=github&level=S&column=2
Restrict row & column
https://github-profile-skills-one.vercel.app/skill?id=github&level=S&row=2&column=3
You can put a margins in the width and height between skill cards.
Default: margin-w=0
Default: margin-h=0
Specify only margin width
https://github-profile-skills-one.vercel.app/skill?id=github&margin-w=15
Specify only margin height
https://github-profile-skills-one.vercel.app/skill?id=github&level=Smargin-h=15
Specify both margins
https://github-profile-skills-one.vercel.app/skill?id=github&level=Smargin-h=15&margin-w=15
You can set the background of the skill cardss to transparent.
Default: no-bg=false
https://github-profile-skills-one.vercel.app/skill?id=github&no-bg=true
You can hide the frames around the skill cards.
Default: no-frame=false
https://github-profile-skills-one.vercel.app/skill?id=github&no-frame=true
You can either run the project locally with nodemon or use your vercel account to run a local vercel dev server to build the server while programming.
To run with nodemon just run the command npm run dev in the root folder of the project. To run the code with a local vercel server run npm run start_vercel. If you don't have installed vercel install it with npm i -g vercel.
Open localhost from your browser. http://localhost:3000/skill?id=github&level=S