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&mail=no@mail.de&web=blog.undefined.de&sub=Mustermann&avatar=random&background=random
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={unsplash image id | random | URL to image}&background={Unsplash image id | random | 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:
Unsplash Image: Use an ID from unsplash.com. You could copy it easily from the URL of a specific image.
random: A image of a person will randomly taken from unsplash.com
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.
This is the background image of the card. There are the following options:
Unsplash Image: Use an ID from unsplash.com. You could copy it easily from the URL of a specific image.
random: A somewhat blurry image will randomly taken from unsplash.com
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.
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