https://github.com/skullzarmy/digital-business-cards
Web Component to display a digital business card.
https://github.com/skullzarmy/digital-business-cards
businesscard component hacktoberfest webcomponent webcomponents
Last synced: 2 months ago
JSON representation
Web Component to display a digital business card.
- Host: GitHub
- URL: https://github.com/skullzarmy/digital-business-cards
- Owner: skullzarmy
- License: mit
- Created: 2023-10-08T00:48:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-11T17:50:50.000Z (over 1 year ago)
- Last Synced: 2025-01-26T17:46:36.628Z (4 months ago)
- Topics: businesscard, component, hacktoberfest, webcomponent, webcomponents
- Language: HTML
- Homepage: https://socaltechlab.com/utils/digital-business-card-generator/
- Size: 276 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Digital Business Card Web Component
[](https://opensource.org/licenses/MIT) [](https://github.com/skullzarmy)
A customizable web component for generating digital business cards. Easily embed a business card into your web page with various themes and font variants. This component is lightweight, easy to use, and fully customizable.
## Table of Contents
- [Features](#features)
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Generator](#generator)
- [Attributes](#attributes)
- [Theming](#theming)
- [Examples](https://skullzarmy.github.io/digital-business-cards/example.html)
- [QR Code](#qr-code)
- [Roadmap](#roadmap)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
- [Acknowledgments](#acknowledgments)
## Features
- Customizable: Easily change the card's appearance with attributes.
- Themes: Light and dark themes available.
- Font Variants: Choose from a variety of font styles.
- QR Code: Automatically generates a QR code for contact information.
- Self-contained: No need for external image files; supports Base64 encoded images.
## Getting Started
To get started, include the following script tag in your HTML file:
```html
```
## Prerequisites
No prerequisites are required. The component dynamically loads all necessary resources.
## Installation
Simply include the script in your HTML file, and you're good to go!
```html
```
## Usage
Here's a simple example to embed a digital business card into your web page:
```html
```
_View all variants on the [examples page](https://skullzarmy.github.io/digital-business-cards/example.html)_
### Generator
You can utilize my generator tool to setup this Web Component with your information. It will automatically encode your image in base64 for portability! Check it out on my blog, [https://SoCalTechLab.com/utils/digital-business-card-generator/](https://socaltechlab.com/utils/digital-business-card-generator/)
## Attributes
- `name`: The name to display on the card.
- `email`: The email address. Builds `mailto` link.
- `phone`: The phone number. Builds `tel` link.
- `website`: The website URL. Builds standard `href` link.
- `address`: The physical address. Builds link to Google Maps.
- `socialMedia`: An array of objects, each containing a `platform` and a `url`. The `platform` should match one of the supported social media platforms, and `url` should be the full URL to your profile on that platform.
- `theme`: The theme of the card (light or dark).
- `fontVariant`: The font variant (sans, serif, handwritten, gothic).
- `imageSrc`: The source for the profile image (supports Base64 and image URLs).
- `imageShape`: The shape of the image (circle or square).
## Theming
### Themes
- `light`: Light background with dark text.
- `dark`: Dark background with light text.
### Font Variants
- `sans`: Sans-serif font.
- `serif`: Serif font.
- `script`: Handwritten-style font.
- `display`: Display-style font.
### Social Media Platforms
The following platforms are supported (icons are predefined):
_icons are from [simpleicons.org](https://simpleicons.org)_
- Facebook
- Twitter
- LinkedIn
- Mastodon
- GitHub
- GitLab
- Bitbucket
- Stack Overflow
- YouTube
- Instagram
- Pinterest
- Snapchat
- Reddit
- Tumblr
- Twitch
- Discord
**I will accept requests for new icons. Just open an issue on Github. Please provide a link to the icon on simpleicons.org or provide a source for an SVG file with an open license. If it fits the aesthetic of the rest of the icons I will include.**
To specify social media links, use the socialMedia attribute with an array of objects. Each object should have a platform and a url. For example:
```json
[
{ "platform": "facebook", "url": "https://facebook.com/johndoe" },
{ "platform": "twitter", "url": "https://twitter.com/johndoe" },
{ "platform": "mastodon", "url": "https://mastodon.social/johndoe" }
]
```
## QR Code
The component automatically generates a QR code based on the provided contact information. Users can scan OR click the QR code to save the contact information to their device via standard vCard v3.0 formatting.
## Roadmap
1. ~~Add support for all standard social media links with logos from simple-icons~~
1. Add support for any Google font by name
- Progress made on refactoring the font loading to load only needed font.
1. Add custom theme color support
1. Add custom base font size support
1. Create component generator
## Contributing
Contributions are welcome! Please read the contributing guidelines first.
## License
This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
## Contact
- **Author**: Joe Peterson
- **Email**: [email protected]
- **Website**: https://joepeterson.work
## Acknowledgments
- Google Fonts for providing the font styles.
- QRCode.js for generating QR codes.
- SimpleIcons.org for providing free and open SVG icons