viniCard Generator

A visually stunning, mobile-responsive web application to generate, view, download, and edit Digital Business Cards (vCards) as QR Codes. Built using Vanilla JavaScript, HTML, CSS, and Vite.

Features

• Rich UI & Glassmorphism Design: Beautiful dark-mode aesthetic with modern typography and sleek interactive elements.
• Generate vCards (v3.0): Type your contact details (Name, Organization, Phone, Email, URL, Notes) to instantly build a standard vCard.
• Dynamic QR Code: Render a highly scannable QR code of your vCard in real-time.
• Download as Image: Easily save your QR code directly as a .png file.
• Upload & Edit Existing QR Codes: Already have a QR card image? Upload it into the app to instantly decode the data back into the text fields so you can update or edit your details!
• View Raw Data: Click the toggle to debug and see the exact raw text string being generated by the app.

Project Structure

• index.html - Base HTML structure and app layout
• style.css - Global styles, glassmorphism UI logic, and CSS variables
• main.js - Client-side app logic combining form state, generation routing (qrcode), and scanning logic (jsQR)
• vite.config.js - Build configuration mapping internal files to GitHub Pages subpaths.
• .github/workflows/deploy.yml - Reusable automated deployment blueprint for GitHub Pages.

Local Development

Make sure you have Node (>=18) installed on your machine.

1. Install dependencies:

   npm install

2. Start the dev server:

   npm run dev

3. Open the outputted local url (usually http://localhost:5173) in your browser.

Deployment to GitHub Pages

This repository is already configured to automatically deploy to GitHub Pages immediately upon pushing to the main branch.

To deploy future updates:

1. Stage and commit your final changes:

   git add .
   git commit -m "Make an awesome update"

2. Push your changes to main:

   git push origin main

3. GitHub automatically handles the rest. Because a .github/workflows/deploy.yml exists, pushing triggers an Action that builds the static Vite bundle into dist/ and hosts it at https://[github_username].github.io/qrcard/.

Enjoy your new seamless and fully-customizable digital business card experience!