Giter Site home page Giter Site logo

wahyuhjr / cardivo Goto Github PK

View Code? Open in Web Editor NEW

This project forked from satyawikananda/cardivo

0.0 0.0 0.0 760 KB

Get your card name and put it in your magic readme ๐Ÿ“‡

Home Page: cardivo.vercel.app

License: MIT License

JavaScript 1.46% TypeScript 98.54%

cardivo's Introduction

Cardivo card name

Get your card name dynamically ๐Ÿ˜Ž

License: MIT Issue Forks Stars

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:

![Satya Wikananda's card name](https://cardivo.vercel.app/api?name=[name]&description=[description]&image=[image_url])

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]
Instagram Your Instagram username String satyawikananda ?instagram=[value]
Linkedin Your Linkedin username String Satya Wikananda ?linkedin=[value]
GitHub Your GitHub username String satyawikananda ?github=[value]
Twitter Your Twitter username String satya_wikananda ?twitter=[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:

![Satya wikananda's card name](https://cardivo.vercel.app/api?name=Satya%20Wikananda&description=Hi,%20i%27m%20a%20front%20end%20web%20developer%20and%20i%27m%2020%20y.o.%20Nice%20to%20meet%20you%20%F0%9F%91%8B&image=https://avatars.githubusercontent.com/u/33148052?v=4&backgroundColor=%23ecf0f1&instagram=satyawikananda&linkedin=I%20Gusti%20Ngurah%20Satya%20%20Wikananda&github=satyawikananda&twitter=satya_wikananda&pattern=leaf&colorPattern=%23eaeaea)

Result:

Satya wikananda's card name

Contribution

Want to make this project better? You can contribute this project, I am very open if there are contributions to this project.


forthebadge forthebadge

Powered by Typescript and vercel. Code licensed under MIT License.

cardivo's People

Contributors

satyawikananda avatar dependabot[bot] avatar hiiruki avatar fzn0x avatar edent avatar grammer23 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.