https://github.com/alexrogalskiy/cards
The cards
https://github.com/alexrogalskiy/cards
Last synced: 3 months ago
JSON representation
The cards
- Host: GitHub
- URL: https://github.com/alexrogalskiy/cards
- Owner: AlexRogalskiy
- License: mit
- Created: 2020-12-07T00:18:11.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-11T21:24:34.000Z (7 months ago)
- Last Synced: 2025-03-11T22:26:50.932Z (7 months ago)
- Language: TypeScript
- Homepage: cardivo.alexrogalskiy.vercel.app
- Size: 1.01 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
Cards
Get your card name dynamically 😎
[](https://raw.githubusercontent.com/alexrogalskiy/cards/main/LICENSE?token=AH44ZFH7IF2KSEDK7LSIW3C7YOFYC)
[](https://img.shields.io/github/issues/alexrogalskiy/cards)
[](https://img.shields.io/github/forks/alexrogalskiy/cards)
[](https://img.shields.io/github/stars/alexrogalskiy/cards)
# 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.
Cards 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, Cards 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 |
|---------- | ---------- | ------- | ----------- | ------------ |
| 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://alexrogalskiy.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 | | ```?instagram=[value]``` |
| linkedin | Your Linkedin username | String | | ```?linkedin=[value]``` |
| Github | Your Github username | String | | ```?github=[value]``` |
| Twitter | Your Twitter username | String | | ```?twitter=[value]``` |
> NB: Remove the square bracket
Pattern in Cards, i'm used the [Hero Pattern](https://github.com/lowmess/hero-patterns) package which is developed by [Lowmess](https://github.com/lowmess/), and here the list:
| Pattern | Value |
| -------- | ---- |
| Plus | plus |
| Topography | topography |
| Texture | texture |
| Hideout | hideout |
| FallingTriangles | falllingTriangles |
| 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 *cards*:
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.