DEV Community

Cover image for 🎨 Make Your GitHub Profile README colorful!
Ye-Chan Kang
Ye-Chan Kang

Posted on

🎨 Make Your GitHub Profile README colorful!

As you all know, Github recently enable README on our profile page. So, several developers have made various attempts on this. I think this project can help you decorate profile README colorfully.

Alt Text

The color changes each time the page is refreshed. It can be a random gradient or a fixed color you set. If you can't believe random colors, you can use only the verified random color.

Demo:
Alt Text
It is still being added.

GitHub logo kyechan99 / capsule-render

Decorate GitHub Profile like capsule!

header

Decorate GitHub Profile or any Repo like me!

Types

Any of Idea -> Idea-Issue or PR

How to Use

https://capsule-render.vercel.app/api

Just write query parameter end of this url. Like this

Markdown:

![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)

HTML:

<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90" /&gt

Type

Type data makes to change Background Image.

Write &type= on the URL

![header](https://capsule-render.vercel.app/api?type=slice)

Color

Change Background Image!

  • &color=auto : Proven random color. List are here
  • &color=random : Really random color. I don't know what colors are showing.
  • &color=gradient : Proven random gradient. List are here
  • &color=_hexcode : default(#B897FF)

If you use auto mode. no need to change fontColor auto also change fontColor auto.

![header](https://capsule-render.vercel.app/api?color=auto)

If you use static color. Do not write '#'

Section

Section data makes reverse Background Image.

  • &section=header : (default)
  • &section=footer

Write &section= on the URL

![footer](https://capsule-render.vercel.app/api?section=footer)

Height

Change Image Size. Default value is 200.

Write &height= on the…

It can also be used in repository README or any web project.

How to use

https://capsule-render.vercel.app/api?

Just write query parameter end of this url. Like this

![header](https://capsule-render.vercel.app/api?type=wave&color=gradient&height=300&section=footer&text=capsule%20render&fontSize=90)

Here is the List of core query

color

&color=auto : Proven random color. List are here
&color=random : Really random color. I don't know what colors are showing.
&color=gradient : Proven random gradient. List are here
&color=_hexcode : default(#B897FF)

Type

&type=wave : default
&type=egg
&type=slice
&type=rect

Section

&section=header : (default)
&section=footer : Upside down image

ETC

&height : image size
&text : text over the image
&fontColor : text color
&fontSize : text size
&fontAlign : font pos

Details are written in the capsule-render-README.


I will add more features.
If you have any ideas or opinion, leave an Issue or PR!
It will be very useful to me.

Finally, this is my profile README.
Try to refresh the page once you hear it.

GitHub logo kyechan99 / kyechan99

Hi! I'm Yechan

Thank you for reading !

Top comments (1)

Collapse
 
fabianacampanari profile image
Fabiana Campanari

thanks