Virtual Business Card 🎴

A modern, responsive digital business card application built with React, TypeScript, and Vite. Perfect for sharing your professional information with a clean, professional design.

Features

✨ Responsive Design - Works beautifully on all screen sizes (mobile, tablet, desktop)
💾 Save Contact - Download contact information as .vcf file (vCard format)
🎨 Modern UI - Clean, professional design with smooth animations
⚙️ Easy Configuration - Simple config system with local overrides
🔒 Privacy-First - Local configuration stays local, never pushed to git
📱 Mobile-Optimized - Touch-friendly buttons and layout

Quick Start

Installation

npm install --legacy-peer-deps

Development

npm run dev

The app will be available at http://localhost:5173/

Build for Production

npm run build

Configuration

Using Default Configuration

The app comes with demo data in src/config/businessCard.config.ts. This is tracked by git and safe to use as a template.

Using Local Configuration (Recommended)

To customize the business card with your own information:

1. Copy the example config:

   cp src/config/businessCard.config.local.example.ts src/config/businessCard.config.local.ts
   

2. Edit src/config/businessCard.config.local.ts with your information

3. The app automatically loads your local config on startup

Important: businessCard.config.local.ts is git-ignored, so your personal data never gets pushed to git!

See LOCAL_CONFIG_SETUP.md for detailed instructions.

Project Structure

src/
├── components/          # UI components
│   ├── BusinessCard.tsx
│   ├── SocialLinks.tsx
│   ├── BusinessCard.module.css
│   └── SocialLinks.module.css
├── config/             # Configuration files
│   ├── businessCard.config.ts              # Default config (git-tracked)
│   ├── businessCard.config.local.example.ts # Template
│   └── configLoader.ts                     # Config loading logic
├── store/              # State management
│   ├── BusinessCardContext.tsx
│   ├── BusinessCardProvider.tsx
│   └── types.ts
├── App.tsx
├── App.css
├── main.tsx
└── index.css

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Technology Stack

• React 19 - UI library
• TypeScript - Type safety
• Vite 7 - Build tool
• Lucide React - Icon library
• CSS Modules - Component styling

Customization

Business Card Data

Edit src/config/businessCard.config.local.ts:

export const localBusinessCard: BusinessCard = {
  name: 'Your Name',
  title: 'Your Title',
  company: 'Your Company',
  email: 'your.email@example.com',
  phone: '+1 (555) 000-0000',
  website: 'https://yourwebsite.com',
  image: 'https://your-image-url.com/photo.jpg',
  bio: 'Your professional bio',
  socialLinks: [
    {
      platform: 'LinkedIn',
      url: 'https://linkedin.com/in/you',
      icon: 'Linkedin',
    },
    { platform: 'Twitter', url: 'https://twitter.com/you', icon: 'Twitter' },
    // ... more links
  ],
}

Styling

All components use CSS Modules. Edit the respective .module.css files:

• src/components/BusinessCard.module.css - Card styling
• src/components/SocialLinks.module.css - Social icons styling
• src/App.css - App-level styling
• src/index.css - Global styles

Responsive Breakpoints

The card adapts to all screen sizes:

• 320px - 479px - Extra small (phones)
• 480px - 767px - Small (large phones, small tablets)
• 768px - 1023px - Medium (tablets)
• 1024px+ - Large (desktops)

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Contributing

Feel free to fork and customize this project for your needs!

// eslint.config.js import reactX from 'eslint-plugin-react-x' import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'], extends: [ // Other configs... // Enable lint rules for React reactX.configs['recommended-typescript'], // Enable lint rules for React DOM reactDom.configs.recommended, ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ])