businessCard/README.md

# 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

```bash
npm install --legacy-peer-deps
```

### Development

```bash
npm run dev
```

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

### Build for Production

```bash
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:

   ```bash
   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](./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`:

```typescript
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...
},
},
])

```

```