Snappy Cards is for sharing your contact information with others. This card works with data only beeing stored in the URL. To make sharing easier a QR code is also generated.
This site is hosted on GitHub Pages under snappy.cards/#... and can be modified by using several parameters.
Important: The parameters coming after the
#will never be sent to the server. So everything stays on your client! More details about this can be found on Wikipedia.
Here is a live example: snappy.cards/#...
https://snappy.cards/#name=Max Mustermann&phone=+49 123 4567890&[email protected]&web=blog.undefined.de&sub=Mustermann&avatar=snappy:018.jpeg&background=snappy:028.jpeg
All parameters are optional if you do not want to use them. There is no specific order for them.
https://snappy.cards/#name={name}&phone={phone}&mail={mail}&web={web}&sub={subtitle}&avatar={Snappy image id | URL to image}&background={Snappy image id | URL to image}
Your name or headline.
Your position in your company or job title.
A phone number. This line is prefixed with a phone symbol.
A mail address. This line is prefixed with a mail symbol.
A web address. This line is prefixed with a globe symbol.
A water mark showed on the bottom of the card. Can be any sort of text.
This is the avatar image on the card. There are the following options:
snappy:<000>.jpeg: Images provided by snappy cards. Example: snappy:001.jpeg
Image URL: You can provide an URL to your own image.
empty: Leave the parameter empty or omit it completely and no avatar will be shown.
random: Random image from unsplash. Unsplash is not supported anymore. See #84 for reasons
Unsplash Image: Unsplash is not supported anymore. See #84 for reasons
This is the background image of the card. There are the following options:
snappy:<000>.jpeg: Images provided by snappy cards. Example: snappy:001.jpeg
Image URL: You can provide an URL to your own image.
empty: Leave the parameter empty or omit it completely and the background will be blank.
random: Random image from unsplash. Unsplash is not supported anymore. See #84 for reasons
Unsplash Image: Unsplash is not supported anymore. See #84 for reasons
Your handle on twitter.
Your handle on x, formerly known as twitter.
Your handle on Facebook.
Your handle on Youtube.
Your handle on Instagram.
Your handle on Twitch.
Your handle on Github.
Your handle on LinkedIn.
Your handle on Xing.
Your handle for Paypal.me
Your handle on Patreon.
Your handle on Pinterest.
Your handle on npmjs.com
Your handle on Soundcloud.
Your handle on Snapchat.
Your handle on Steam.
Your handle on metacpan.
Configuration option to determine, how many detail lines are going te be shown. If the number of detail lines exceeds this configuration option, a button for toggling the visibility of the remaining detail lines will be shown.
Default is to display all detail lines.
- Kirsten Kluge - Initial work - kirkone
- Thomas Müller - fanzy functional programming, vcard download - tmueller
See also the list of contributors who participated in this project.
The design and layout is inspired by this YouTube video: Html CSS Glassmorphism Business Card Design by Online Tutorials
For the QR codes, code is used from: Joe Grinstead GitHub: grinstead / makeQrCode
The code base has been slightly modified to work with TypeScript and some unused code has been removed.
More information about the used uri fragment to store the information on the client side: Wikipedia - URI fragment