Cardivo card name
Get your card name dynamically
Description
A few months ago, GitHub launched a new feature call Magic Readme which is that file readme will be appear in your GitHub profile and you can set your skills, portfolio, etc in that file readme.
Cardivo is a serverless dynamically card name based on SVG (Scalable Vector Graphics) which is you can make your own card name and set in your magic readme. For the tech stack, Cardivo using Typescript and serverless function from Vercel and also this project had been deployed on Vercel.
How to use this?
It's simple, you can copy paste this markdown content, like this one:
There are several options you can use, and the options is:
| Options | Description | Type | Example | Query Params |
|---|---|---|---|---|
| Name | Mandatory Your name | String | Satya Wikananda | ?name=[value] |
| Description | Mandatory Some text about you | String | I am a coder | ?description=[value] |
| Image | Mandatory An avatar image of you | URL | https://example.com/image.jpg |
?image=[value] |
| Background Color | Background color for the card name | Hex color code | %23ffffff |
?backgroundColor=[value] |
| Icon Color | Colorize the icons in card name | Hex color code | %23e64a19 |
?iconColor=[value] |
| Font Color | Font color for the card name | Hex color code | %23000000 |
?fontColor=[value] |
| Site | If you have a site, you can fill this one | String | https://satyawikananda.tech |
?site=[value] |
| Pattern | You can use a pattern for the background. You can see the list below | String | plus | ?pattern=[value] |
| Color Pattern | Fill the color pattern | Hex color code | %231abc9c |
?colorPattern=[value] |
| Opacity Pattern | Opacity of the pattern background | Float | 0 - 1 |
?opacity=[value] |
| Your Instagram username | String | satyawikananda | ?instagram=[value] |
|
| Your Linkedin username | String | Satya Wikananda | ?linkedin=[value] |
|
| GitHub | Your GitHub username | String | satyawikananda | ?github=[value] |
| Your Twitter username | String | satya_wikananda | ?twitter=[value] |
|
| Disable Animation | Disable animation transition | Boolean | true |
?disableAnimation=[value] |
NB: Remove the square bracket
Pattern in Cardivo, i'm used the Hero Pattern package which is developed by Lowmess, and here the list:
| Pattern | Value |
|---|---|
| Plus | plus |
| Topography | topography |
| Texture | texture |
| Hideout | hideout |
| FallingTriangles | fallingTriangles |
| I Like Food | iLikeFood |
| Four point stars | fourPointStars |
| Brick wall | brickWall |
| Wiggle | wiggle |
| Bubbles | bubbles |
| Floating Cogs | floatingCogs |
| Leaf | leaf |
| Rain | rain |
| Polkadots | polkadots |
| Tic Tac Toe | ticTacToe |
Example
This is example of using cardivo:
Markdown content:
Result:
Contribution
Want to make this project better? You can contribute this project, I am very open if there are contributions to this project.
Powered by Typescript and vercel. Code licensed under MIT License.