feat: add BusinessCard component and related subcomponents for displaying business card information
- Implemented BusinessCard component to aggregate various card sections. - Created CardHeader, CardProfile, CardBio, CardContactInfo, CardFooter components for structured layout. - Added styles for each component to ensure responsive design. - Introduced SaveContactButton for downloading vCard and QRCodeDisplay for generating QR codes. - Configured context for managing business card data with BusinessCardProvider and BusinessCardContext. - Added local configuration files for easy customization of business card data. - Established types for business card and social links to ensure type safety. - Set up TypeScript configuration for the project. - Integrated Vite for development and build processes.
This commit is contained in:
Sascha
commit
629da34064
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
# Git Setup Guide
|
||||||
|
|
||||||
|
## Pushing Your Project to Git
|
||||||
|
|
||||||
|
### Initial Setup
|
||||||
|
|
||||||
|
1. **Initialize Git** (if not already done):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git init
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Add a Remote** (replace with your repository URL):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git remote add origin https://github.com/yourusername/yourrepo.git
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Create Initial Commit**:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "Initial commit: Virtual Business Card"
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Push to Remote**:
|
||||||
|
```bash
|
||||||
|
git push -u origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
## Local Configuration Safety
|
||||||
|
|
||||||
|
✅ **What Gets Pushed to Git:**
|
||||||
|
|
||||||
|
- Default business card config: `src/config/businessCard.config.ts`
|
||||||
|
- All source code and components
|
||||||
|
- Configuration and build files
|
||||||
|
- Documentation
|
||||||
|
|
||||||
|
❌ **What Stays Local (Never Pushed):**
|
||||||
|
|
||||||
|
- Your personal business card config: `src/config/businessCard.config.local.ts`
|
||||||
|
- Node modules: `node_modules/`
|
||||||
|
- Build output: `dist/`
|
||||||
|
- Other files matching `*.local` pattern
|
||||||
|
|
||||||
|
### How `.gitignore` Protects Your Data
|
||||||
|
|
||||||
|
The `.gitignore` file already includes:
|
||||||
|
|
||||||
|
```
|
||||||
|
*.local
|
||||||
|
```
|
||||||
|
|
||||||
|
This means any file ending with `.local` is automatically excluded from git. Your personal business card configuration in `businessCard.config.local.ts` will never be tracked or pushed.
|
||||||
|
|
||||||
|
## Workflow for Sharing the Project
|
||||||
|
|
||||||
|
### For You (Developer)
|
||||||
|
|
||||||
|
1. Create `src/config/businessCard.config.local.ts` with your personal info
|
||||||
|
2. Make changes to your local config as needed
|
||||||
|
3. Push code changes to git (your personal config stays local)
|
||||||
|
|
||||||
|
### For Others Using Your Repository
|
||||||
|
|
||||||
|
1. Clone the repository
|
||||||
|
2. Copy `src/config/businessCard.config.local.example.ts` to `src/config/businessCard.config.local.ts`
|
||||||
|
3. Edit the local config with their own information
|
||||||
|
4. Run `npm install --legacy-peer-deps && npm run dev`
|
||||||
|
5. Their changes to `businessCard.config.local.ts` stay local
|
||||||
|
|
||||||
|
## Checking Git Status
|
||||||
|
|
||||||
|
To verify your personal config is being ignored:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git status
|
||||||
|
```
|
||||||
|
|
||||||
|
You should NOT see `src/config/businessCard.config.local.ts` in the output. If you do, your `.gitignore` may need adjustment.
|
||||||
|
|
||||||
|
To also check git tracking:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git check-ignore src/config/businessCard.config.local.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
This should print the file path if it's properly ignored.
|
||||||
|
|
||||||
|
## Example Git Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Check what will be committed
|
||||||
|
git status
|
||||||
|
|
||||||
|
# Add all non-ignored files
|
||||||
|
git add .
|
||||||
|
|
||||||
|
# Commit changes
|
||||||
|
git commit -m "Update business card styles"
|
||||||
|
|
||||||
|
# Push to remote
|
||||||
|
git push
|
||||||
|
|
||||||
|
# View git history
|
||||||
|
git log
|
||||||
|
|
||||||
|
# See what files are being tracked
|
||||||
|
git ls-files
|
||||||
|
```
|
||||||
|
|
||||||
|
## Important Notes
|
||||||
|
|
||||||
|
- Always ensure `businessCard.config.local.ts` is in `.gitignore` before pushing
|
||||||
|
- Never commit personal business card data
|
||||||
|
- The example file `businessCard.config.local.example.ts` CAN be committed to help others
|
||||||
|
- Each user/clone should have their own local config file
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
# Local Configuration Setup
|
||||||
|
|
||||||
|
This project supports local configuration for your business card data without committing it to git.
|
||||||
|
|
||||||
|
## How to Use Local Configuration
|
||||||
|
|
||||||
|
### 1. Copy the Example File
|
||||||
|
|
||||||
|
Copy `src/config/businessCard.config.local.example.ts` and rename it to `src/config/businessCard.config.local.ts`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp src/config/businessCard.config.local.example.ts src/config/businessCard.config.local.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Edit Your Local Config
|
||||||
|
|
||||||
|
Open `src/config/businessCard.config.local.ts` and update all the fields with your information:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export const localBusinessCard: BusinessCard = {
|
||||||
|
name: 'Your Name',
|
||||||
|
title: 'Your Job Title',
|
||||||
|
company: 'Your Company Name',
|
||||||
|
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 goes here.',
|
||||||
|
socialLinks: [
|
||||||
|
{
|
||||||
|
platform: 'LinkedIn',
|
||||||
|
url: 'https://linkedin.com/in/yourprofile',
|
||||||
|
icon: 'Linkedin',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
platform: 'Twitter',
|
||||||
|
url: 'https://twitter.com/yourhandle',
|
||||||
|
icon: 'Twitter',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
platform: 'GitHub',
|
||||||
|
url: 'https://github.com/yourprofile',
|
||||||
|
icon: 'Github',
|
||||||
|
},
|
||||||
|
{ platform: 'Portfolio', url: 'https://yourwebsite.com', icon: 'Globe' },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. No Additional Configuration Needed
|
||||||
|
|
||||||
|
The app will automatically detect and load your local config when it starts. No need to modify any other files!
|
||||||
|
|
||||||
|
## How It Works
|
||||||
|
|
||||||
|
- **Default Config**: `src/config/businessCard.config.ts` contains default demo data and **IS tracked by git**
|
||||||
|
- **Local Config**: `src/config/businessCard.config.local.ts` is created by you and **is NOT tracked by git** (added to `.gitignore`)
|
||||||
|
- **On Startup**: The app tries to load your local config; if not found, it falls back to the default
|
||||||
|
- **Your Data is Safe**: All your personal information stays local and never gets pushed to git
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/config/
|
||||||
|
├── businessCard.config.ts # Default config (git-tracked)
|
||||||
|
├── businessCard.config.local.example.ts # Template for you to copy
|
||||||
|
└── businessCard.config.local.ts # Your local config (git-ignored) ← Create this!
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tips
|
||||||
|
|
||||||
|
- **Image URLs**: Use absolute URLs (https://...) for profile images
|
||||||
|
- **Phone Format**: Any format works - the phone number becomes a clickable tel: link
|
||||||
|
- **Social Icons**: Use the icon names from lucide-react:
|
||||||
|
- `Linkedin`, `Twitter`, `Github`, `Globe`, `Mail`, `Phone`
|
||||||
|
- **Testing Locally**: `npm run dev` will load your local config automatically
|
||||||
|
|
||||||
|
## Git Safety
|
||||||
|
|
||||||
|
The `.gitignore` file already includes `*.local` entries, so:
|
||||||
|
|
||||||
|
- ✅ Your `businessCard.config.local.ts` will NEVER be committed
|
||||||
|
- ✅ Only `businessCard.config.ts` (with demo data) is tracked by git
|
||||||
|
- ✅ You can safely add personal/sensitive information to your local config
|
||||||
|
|
@ -0,0 +1,186 @@
|
||||||
|
# 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...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>virtualbusinesscard</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,34 @@
|
||||||
|
{
|
||||||
|
"name": "virtualbusinesscard",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lucide-react": "^0.408.0",
|
||||||
|
"qrcode.react": "^1.0.1",
|
||||||
|
"react": "^19.2.0",
|
||||||
|
"react-dom": "^19.2.0",
|
||||||
|
"react-router-dom": "^6.22.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.39.1",
|
||||||
|
"@types/node": "^24.10.1",
|
||||||
|
"@types/react": "^19.2.7",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "^5.1.1",
|
||||||
|
"babel-plugin-react-compiler": "^1.0.0",
|
||||||
|
"eslint": "^9.39.1",
|
||||||
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.24",
|
||||||
|
"globals": "^16.5.0",
|
||||||
|
"typescript": "~5.9.3",
|
||||||
|
"typescript-eslint": "^8.48.0",
|
||||||
|
"vite": "^7.3.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
#root {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background: linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra Small Screens (320px - 479px) */
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.content-wrapper {
|
||||||
|
padding: 12px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Screens (480px - 767px) */
|
||||||
|
@media (min-width: 480px) and (max-width: 767px) {
|
||||||
|
.content-wrapper {
|
||||||
|
padding: 16px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium Screens (768px - 1023px) */
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
.content-wrapper {
|
||||||
|
padding: 24px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large Screens (1024px+) */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.content-wrapper {
|
||||||
|
padding: 40px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { BusinessCard } from './components/BusinessCard';
|
||||||
|
import './App.css';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="app-container">
|
||||||
|
<div className="content-wrapper">
|
||||||
|
<BusinessCard />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
|
|
@ -0,0 +1,132 @@
|
||||||
|
.cardContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
|
overflow: hidden;
|
||||||
|
transition:
|
||||||
|
transform 0.3s ease,
|
||||||
|
box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialSection {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionSection {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1px;
|
||||||
|
background: #e2e8f0;
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra Small Screens (320px - 479px) */
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.cardContainer {
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialSection {
|
||||||
|
padding: 0 16px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionSection {
|
||||||
|
padding: 0 16px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Screens (480px - 767px) */
|
||||||
|
@media (min-width: 480px) and (max-width: 767px) {
|
||||||
|
.cardContainer {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
max-width: 360px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialSection {
|
||||||
|
padding: 0 18px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionSection {
|
||||||
|
padding: 0 18px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 0 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium Screens (768px - 1023px) */
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
.cardContainer {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
max-width: 390px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialSection {
|
||||||
|
padding: 0 22px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionSection {
|
||||||
|
padding: 0 22px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 0 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large Screens (1024px+) */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.cardContainer {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
max-width: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialSection {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionSection {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
import { useBusinessCard } from '../store/BusinessCardContext';
|
||||||
|
import { CardHeader } from './Card/CardHeader';
|
||||||
|
import { CardProfile } from './Card/CardProfile';
|
||||||
|
import { CardBio } from './Card/CardBio';
|
||||||
|
import { CardContactInfo } from './Card/CardContactInfo';
|
||||||
|
import { SocialLinks } from './SocialLinks';
|
||||||
|
import { SaveContactButton } from './SaveContactButton';
|
||||||
|
import { CardFooter } from './Card/CardFooter';
|
||||||
|
import styles from './BusinessCard.module.css';
|
||||||
|
|
||||||
|
export function BusinessCard() {
|
||||||
|
const { businessCard } = useBusinessCard();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.cardContainer}>
|
||||||
|
<div className={styles.card}>
|
||||||
|
<CardHeader />
|
||||||
|
<CardProfile businessCard={businessCard} />
|
||||||
|
<CardBio bio={businessCard.bio} />
|
||||||
|
<CardContactInfo businessCard={businessCard} />
|
||||||
|
|
||||||
|
{businessCard.socialLinks.length > 0 && (
|
||||||
|
<div className={styles.socialSection}>
|
||||||
|
<SocialLinks links={businessCard.socialLinks} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={styles.actionSection}>
|
||||||
|
<SaveContactButton businessCard={businessCard} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.divider} />
|
||||||
|
<CardFooter companyName={businessCard.company} personName={businessCard.name} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
.bio {
|
||||||
|
padding: 0 20px;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #4a5568;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra Small Screens (320px - 479px) */
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.bio {
|
||||||
|
padding: 0 16px;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Screens (480px - 767px) */
|
||||||
|
@media (min-width: 480px) and (max-width: 767px) {
|
||||||
|
.bio {
|
||||||
|
padding: 0 18px;
|
||||||
|
margin: 0 0 18px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium Screens (768px - 1023px) */
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
.bio {
|
||||||
|
padding: 0 22px;
|
||||||
|
margin: 0 0 22px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large Screens (1024px+) */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.bio {
|
||||||
|
padding: 0 20px;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import styles from './CardBio.module.css';
|
||||||
|
|
||||||
|
interface CardBioProps {
|
||||||
|
bio: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CardBio({ bio }: CardBioProps) {
|
||||||
|
if (!bio) return null;
|
||||||
|
|
||||||
|
return <p className={styles.bio}>{bio}</p>;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
.contactSection {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #f7fafc;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactItem:hover {
|
||||||
|
background: #edf2f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
color: #667eea;
|
||||||
|
flex-shrink: 0;
|
||||||
|
min-width: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
color: #2d3748;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 13px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
color: #667eea;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra Small Screens (320px - 479px) */
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.contactSection {
|
||||||
|
padding: 0 16px 16px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactItem {
|
||||||
|
padding: 8px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Screens (480px - 767px) */
|
||||||
|
@media (min-width: 480px) and (max-width: 767px) {
|
||||||
|
.contactSection {
|
||||||
|
padding: 0 18px 18px;
|
||||||
|
gap: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactItem {
|
||||||
|
padding: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium Screens (768px - 1023px) */
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
.contactSection {
|
||||||
|
padding: 0 22px 22px;
|
||||||
|
gap: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactItem {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large Screens (1024px+) */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.contactSection {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactItem {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { Mail, Phone, Globe } from 'lucide-react';
|
||||||
|
import type { BusinessCard } from '../../store/types';
|
||||||
|
import styles from './CardContactInfo.module.css';
|
||||||
|
|
||||||
|
interface CardContactInfoProps {
|
||||||
|
businessCard: BusinessCard;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CardContactInfo({ businessCard }: CardContactInfoProps) {
|
||||||
|
return (
|
||||||
|
<div className={styles.contactSection}>
|
||||||
|
<div className={styles.contactItem}>
|
||||||
|
<Mail size={18} className={styles.icon} />
|
||||||
|
<a href={`mailto:${businessCard.email}`} className={styles.link}>
|
||||||
|
{businessCard.email}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className={styles.contactItem}>
|
||||||
|
<Phone size={18} className={styles.icon} />
|
||||||
|
<a href={`tel:${businessCard.phone}`} className={styles.link}>
|
||||||
|
{businessCard.phone}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{businessCard.website && (
|
||||||
|
<div className={styles.contactItem}>
|
||||||
|
<Globe size={18} className={styles.icon} />
|
||||||
|
<a
|
||||||
|
href={businessCard.website}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={styles.link}
|
||||||
|
>
|
||||||
|
{businessCard.website.replace('https://', '').replace('http://', '')}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
.footer {
|
||||||
|
padding: 15px 20px;
|
||||||
|
text-align: center;
|
||||||
|
background: #f7fafc;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #a0aec0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra Small Screens (320px - 479px) */
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.footer {
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Screens (480px - 767px) */
|
||||||
|
@media (min-width: 480px) and (max-width: 767px) {
|
||||||
|
.footer {
|
||||||
|
padding: 13px 18px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium Screens (768px - 1023px) */
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
.footer {
|
||||||
|
padding: 14px 22px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large Screens (1024px+) */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.footer {
|
||||||
|
padding: 15px 20px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import styles from './CardFooter.module.css';
|
||||||
|
|
||||||
|
interface CardFooterProps {
|
||||||
|
companyName: string;
|
||||||
|
personName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CardFooter({ personName }: Readonly<CardFooterProps>) {
|
||||||
|
return (
|
||||||
|
<div className={styles.footer}>
|
||||||
|
<p>© 2026 {personName}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
.header {
|
||||||
|
height: 120px;
|
||||||
|
background: linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra Small Screens (320px - 479px) */
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.header {
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Screens (480px - 767px) */
|
||||||
|
@media (min-width: 480px) and (max-width: 767px) {
|
||||||
|
.header {
|
||||||
|
height: 105px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium Screens (768px - 1023px) */
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
.header {
|
||||||
|
height: 115px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large Screens (1024px+) */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.header {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import styles from './CardHeader.module.css';
|
||||||
|
|
||||||
|
export function CardHeader() {
|
||||||
|
return <div className={styles.header} />;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
.profileSection {
|
||||||
|
padding: 40px 20px 20px;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileImage {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 5px solid white;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-top: -70px;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileImage:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a202c;
|
||||||
|
margin: 15px 0 5px;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #667eea;
|
||||||
|
margin: 5px 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #718096;
|
||||||
|
margin: 5px 0 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra Small Screens (320px - 479px) */
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.profileSection {
|
||||||
|
padding: 35px 16px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileImage {
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
|
border-width: 4px;
|
||||||
|
margin-top: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 12px 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 3px 0;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 3px 0 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Screens (480px - 767px) */
|
||||||
|
@media (min-width: 480px) and (max-width: 767px) {
|
||||||
|
.profileSection {
|
||||||
|
padding: 37px 18px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileImage {
|
||||||
|
width: 85px;
|
||||||
|
height: 85px;
|
||||||
|
border-width: 4px;
|
||||||
|
margin-top: -58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 13px 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 3px 0 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium Screens (768px - 1023px) */
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
.profileSection {
|
||||||
|
padding: 39px 22px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileImage {
|
||||||
|
width: 95px;
|
||||||
|
height: 95px;
|
||||||
|
border-width: 5px;
|
||||||
|
margin-top: -65px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 22px;
|
||||||
|
margin: 14px 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 4px 0 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large Screens (1024px+) */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.profileSection {
|
||||||
|
padding: 40px 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profileImage {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-width: 5px;
|
||||||
|
margin-top: -70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 15px 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company {
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 5px 0 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import type { BusinessCard } from '../../store/types';
|
||||||
|
import styles from './CardProfile.module.css';
|
||||||
|
|
||||||
|
interface CardProfileProps {
|
||||||
|
businessCard: BusinessCard;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CardProfile({ businessCard }: Readonly<CardProfileProps>) {
|
||||||
|
return (
|
||||||
|
<div className={styles.profileSection}>
|
||||||
|
<img
|
||||||
|
src={businessCard.image}
|
||||||
|
alt={businessCard.name}
|
||||||
|
className={styles.profileImage}
|
||||||
|
/>
|
||||||
|
<h1 className={styles.name}>{businessCard.name}</h1>
|
||||||
|
<p className={styles.title}>{businessCard.title}</p>
|
||||||
|
<p className={styles.company}>{businessCard.company}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 40px 30px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
|
max-width: 350px;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a202c;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qrWrapper {
|
||||||
|
padding: 15px;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid #e2e8f0;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition:
|
||||||
|
border-color 0.3s ease,
|
||||||
|
box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qrWrapper:hover {
|
||||||
|
border-color: #667eea;
|
||||||
|
box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qrWrapper canvas {
|
||||||
|
width: 256px !important;
|
||||||
|
height: 256px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #718096;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downloadBtn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 20px;
|
||||||
|
background: linear-gradient(135deg, #3f51b5 0%, #5b2c83 100%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downloadBtn:hover {
|
||||||
|
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.downloadBtn:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 30px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qrWrapper canvas {
|
||||||
|
width: 200px !important;
|
||||||
|
height: 200px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
import { useRef } from 'react';
|
||||||
|
// @ts-expect-error - qrcode.react doesn't have official TS types
|
||||||
|
import QRCode from 'qrcode.react';
|
||||||
|
import { Download } from 'lucide-react';
|
||||||
|
import { useBusinessCard } from '../store/BusinessCardContext';
|
||||||
|
import styles from './QRCodeDisplay.module.css';
|
||||||
|
import type { BusinessCard } from '../store/types';
|
||||||
|
|
||||||
|
function generateVCard(businessCard: BusinessCard): string {
|
||||||
|
const lines = [
|
||||||
|
'BEGIN:VCARD',
|
||||||
|
'VERSION:3.0',
|
||||||
|
`FN:${businessCard.name}`,
|
||||||
|
`N:${businessCard.name.split(' ').reverse().join(';')}`,
|
||||||
|
`TITLE:${businessCard.title}`,
|
||||||
|
`ORG:${businessCard.company}`,
|
||||||
|
`EMAIL:${businessCard.email}`,
|
||||||
|
`TEL:${businessCard.phone}`,
|
||||||
|
businessCard.website ? `URL:${businessCard.website}` : null,
|
||||||
|
businessCard.image ? `PHOTO;VALUE=URL:${businessCard.image}` : null,
|
||||||
|
'END:VCARD',
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('\r\n');
|
||||||
|
|
||||||
|
return lines;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function QRCodeDisplay() {
|
||||||
|
const { businessCard } = useBusinessCard();
|
||||||
|
const qrRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const vCard = generateVCard(businessCard);
|
||||||
|
|
||||||
|
const handleDownload = () => {
|
||||||
|
const canvas = qrRef.current?.querySelector('canvas');
|
||||||
|
if (canvas) {
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = canvas.toDataURL('image/png');
|
||||||
|
link.download = `${businessCard.name}-contact.png`;
|
||||||
|
link.click();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<h2 className={styles.title}>Scan to Add Contact</h2>
|
||||||
|
<div className={styles.qrWrapper} ref={qrRef}>
|
||||||
|
<QRCode
|
||||||
|
value={vCard}
|
||||||
|
size={256}
|
||||||
|
level="H"
|
||||||
|
includeMargin
|
||||||
|
fgColor="#000000"
|
||||||
|
bgColor="#ffffff"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className={styles.subtitle}>Scan with any smartphone camera</p>
|
||||||
|
<button onClick={handleDownload} className={styles.downloadBtn} aria-label="Download QR code">
|
||||||
|
<Download size={20} />
|
||||||
|
<span>Download QR Code</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
.saveButton {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
background: linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%);
|
||||||
|
color: black;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.saveButton:hover {
|
||||||
|
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.saveButton:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra Small Screens (320px - 479px) */
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.saveButton {
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
gap: 8px;
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Screens (480px - 767px) */
|
||||||
|
@media (min-width: 480px) and (max-width: 767px) {
|
||||||
|
.saveButton {
|
||||||
|
padding: 11px 18px;
|
||||||
|
font-size: 13px;
|
||||||
|
min-height: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium Screens (768px - 1023px) */
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
.saveButton {
|
||||||
|
padding: 12px 22px;
|
||||||
|
font-size: 14px;
|
||||||
|
min-height: 43px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large Screens (1024px+) */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.saveButton {
|
||||||
|
padding: 12px 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { Download } from 'lucide-react';
|
||||||
|
import type { BusinessCard } from '../store/types';
|
||||||
|
import styles from './SaveContactButton.module.css';
|
||||||
|
|
||||||
|
interface SaveContactButtonProps {
|
||||||
|
businessCard: BusinessCard;
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateVCard(businessCard: BusinessCard): string {
|
||||||
|
const lines = [
|
||||||
|
'BEGIN:VCARD',
|
||||||
|
'VERSION:3.0',
|
||||||
|
`FN:${businessCard.name}`,
|
||||||
|
`N:${businessCard.name.split(' ').reverse().join(';')}`,
|
||||||
|
`TITLE:${businessCard.title}`,
|
||||||
|
`ORG:${businessCard.company}`,
|
||||||
|
`EMAIL:${businessCard.email}`,
|
||||||
|
`TEL:${businessCard.phone}`,
|
||||||
|
businessCard.website ? `URL:${businessCard.website}` : null,
|
||||||
|
businessCard.image ? `PHOTO;VALUE=URL:${businessCard.image}` : null,
|
||||||
|
'END:VCARD',
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join('\r\n');
|
||||||
|
|
||||||
|
return lines;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SaveContactButton({ businessCard }: Readonly<SaveContactButtonProps>) {
|
||||||
|
const handleSaveContact = () => {
|
||||||
|
const vCard = generateVCard(businessCard);
|
||||||
|
const blob = new Blob([vCard], { type: 'text/vcard;charset=utf-8' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = `${businessCard.name}.vcf`;
|
||||||
|
link.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button onClick={handleSaveContact} className={styles.saveButton} aria-label="Save contact">
|
||||||
|
<Download size={20} />
|
||||||
|
<span>Save Contact</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f7fafc;
|
||||||
|
color: #3b4cca;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
min-width: 40px;
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
background: #3b4cca;
|
||||||
|
color: white;
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:active {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra Small Screens (320px - 479px) */
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.container {
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
min-width: 36px;
|
||||||
|
min-height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Screens (480px - 767px) */
|
||||||
|
@media (min-width: 480px) and (max-width: 767px) {
|
||||||
|
.container {
|
||||||
|
gap: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
min-width: 38px;
|
||||||
|
min-height: 38px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium Screens (768px - 1023px) */
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
.container {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
width: 39px;
|
||||||
|
height: 39px;
|
||||||
|
min-width: 39px;
|
||||||
|
min-height: 39px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large Screens (1024px+) */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.container {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
min-width: 40px;
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { Github, Linkedin, Twitter, Globe, Mail, Phone } from 'lucide-react';
|
||||||
|
import type { SocialLink } from '../store/types';
|
||||||
|
import styles from './SocialLinks.module.css';
|
||||||
|
|
||||||
|
interface SocialLinksProps {
|
||||||
|
links: SocialLink[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const iconMap: Record<string, React.ReactNode> = {
|
||||||
|
Github: <Github size={20} />,
|
||||||
|
Linkedin: <Linkedin size={20} />,
|
||||||
|
Twitter: <Twitter size={20} />,
|
||||||
|
Globe: <Globe size={20} />,
|
||||||
|
Mail: <Mail size={20} />,
|
||||||
|
Phone: <Phone size={20} />,
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SocialLinks({ links }: Readonly<SocialLinksProps>) {
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
{links.map((link) => (
|
||||||
|
<a
|
||||||
|
key={link.platform}
|
||||||
|
href={link.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={styles.link}
|
||||||
|
title={link.platform}
|
||||||
|
aria-label={`Visit ${link.platform}`}
|
||||||
|
>
|
||||||
|
{iconMap[link.icon] || <Globe size={20} />}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import type { BusinessCard } from '../store/types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* LOCAL CONFIGURATION FILE
|
||||||
|
*
|
||||||
|
* To use this file:
|
||||||
|
* 1. Copy this file and rename it to: businessCard.config.local.ts
|
||||||
|
* 2. Update the values below with your information
|
||||||
|
* 3. The local config will be loaded automatically (this file is git-ignored)
|
||||||
|
* 4. Your changes will NOT be pushed to git
|
||||||
|
*
|
||||||
|
* This file is in .gitignore, so it's safe to add personal/sensitive information here.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const localBusinessCard: BusinessCard = {
|
||||||
|
name: 'Your Name',
|
||||||
|
title: 'Your Job Title',
|
||||||
|
company: 'Your Company Name',
|
||||||
|
email: 'your.email@example.com',
|
||||||
|
phone: '+1 (555) 000-0000',
|
||||||
|
website: 'https://yourwebsite.com',
|
||||||
|
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
|
||||||
|
bio: 'Your professional bio goes here.',
|
||||||
|
socialLinks: [
|
||||||
|
{ platform: 'LinkedIn', url: 'https://linkedin.com/in/yourprofile', icon: 'Linkedin' },
|
||||||
|
{ platform: 'Twitter', url: 'https://twitter.com/yourhandle', icon: 'Twitter' },
|
||||||
|
{ platform: 'GitHub', url: 'https://github.com/yourprofile', icon: 'Github' },
|
||||||
|
{ platform: 'Portfolio', url: 'https://yourwebsite.com', icon: 'Globe' },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
import type { BusinessCard } from '../store/types';
|
||||||
|
import businessCardImage from '../assets/sascha.png';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* LOCAL STUB FILE
|
||||||
|
*
|
||||||
|
* This file serves as a stub for local configuration.
|
||||||
|
* To use your own configuration:
|
||||||
|
*
|
||||||
|
* 1. Copy businessCard.config.local.example.ts
|
||||||
|
* 2. Rename the copy to businessCard.config.local.ts (replace this file)
|
||||||
|
* 3. Edit it with your personal information
|
||||||
|
* 4. This file is git-ignored, so your data stays local!
|
||||||
|
*
|
||||||
|
* For now, it just exports the default config.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const localBusinessCard: BusinessCard = {
|
||||||
|
name: 'Sascha Bach',
|
||||||
|
title: 'Web Engineer',
|
||||||
|
company: 'Freelancer',
|
||||||
|
email: 'freelancer@sascha-bach.de',
|
||||||
|
phone: '+49 179 9364867',
|
||||||
|
website: 'https://sascha-bach.de',
|
||||||
|
image: businessCardImage,
|
||||||
|
bio: 'Passionate about Webapps and Accessibility',
|
||||||
|
socialLinks: [
|
||||||
|
{ platform: 'LinkedIn', url: 'https://linkedin.com/in/saschabach', icon: 'Linkedin' },
|
||||||
|
{ platform: 'GitHub', url: 'https://codeberg.org/saschab', icon: 'Github' },
|
||||||
|
{ platform: 'Portfolio', url: 'https://sascha-bach.de', icon: 'Globe' },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import type { BusinessCard } from '../store/types';
|
||||||
|
|
||||||
|
// Default business card configuration
|
||||||
|
// To customize locally without pushing to git, copy businessCard.config.local.example.ts
|
||||||
|
// to businessCard.config.local.ts and modify it
|
||||||
|
|
||||||
|
export const defaultBusinessCard: BusinessCard = {
|
||||||
|
name: 'John sas',
|
||||||
|
title: 'Senior Product Designer',
|
||||||
|
company: 'Tech Innovations Inc.',
|
||||||
|
email: 'john.d@techinnovations.com',
|
||||||
|
phone: '+1 (555) 123-4567',
|
||||||
|
website: 'https://johndoe.design',
|
||||||
|
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
|
||||||
|
bio: 'Passionate about creating beautiful and functional digital experiences.',
|
||||||
|
socialLinks: [
|
||||||
|
{ platform: 'LinkedIn', url: 'https://linkedin.com/in/johndoe', icon: 'Linkedin' },
|
||||||
|
{ platform: 'Twitter', url: 'https://twitter.com/johndoe', icon: 'Twitter' },
|
||||||
|
{ platform: 'GitHub', url: 'https://github.com/johndoe', icon: 'Github' },
|
||||||
|
{ platform: 'Portfolio', url: 'https://johndoe.design', icon: 'Globe' },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { defaultBusinessCard } from './businessCard.config';
|
||||||
|
import { localBusinessCard } from './businessCard.config.local';
|
||||||
|
import type { BusinessCard } from '../store/types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loads the business card configuration.
|
||||||
|
*
|
||||||
|
* How it works:
|
||||||
|
* - businessCard.config.ts: Contains demo/default data (git-tracked)
|
||||||
|
* - businessCard.config.local.ts: Your personal config (git-ignored)
|
||||||
|
*
|
||||||
|
* To customize with your own data:
|
||||||
|
* 1. Edit src/config/businessCard.config.local.ts
|
||||||
|
* 2. Replace the stub content with your information
|
||||||
|
* 3. The app will automatically load your config
|
||||||
|
* 4. Your changes are safe - this file is git-ignored!
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function getBusinessCardConfig(): BusinessCard {
|
||||||
|
// If local config has been customized (not just the default stub), use it
|
||||||
|
// Otherwise, use the default config
|
||||||
|
// We can detect if it's been customized by checking if any values differ
|
||||||
|
if (isLocalConfigCustomized()) {
|
||||||
|
return localBusinessCard;
|
||||||
|
}
|
||||||
|
return defaultBusinessCard;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks if the local config has been customized
|
||||||
|
* A config is considered customized if it differs from the default
|
||||||
|
*/
|
||||||
|
function isLocalConfigCustomized(): boolean {
|
||||||
|
return JSON.stringify(localBusinessCard) !== JSON.stringify(defaultBusinessCard);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Synchronous version for initialization
|
||||||
|
*/
|
||||||
|
export function getDefaultBusinessCard(): BusinessCard {
|
||||||
|
return { ...defaultBusinessCard };
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
:root {
|
||||||
|
font-family:
|
||||||
|
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||||
|
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color: #1a202c;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #667eea;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-family: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 2px solid #667eea;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App.tsx';
|
||||||
|
import { BusinessCardProvider } from './store/BusinessCardProvider.tsx';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<BusinessCardProvider>
|
||||||
|
<App />
|
||||||
|
</BusinessCardProvider>
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { createContext, useContext } from 'react';
|
||||||
|
import type { BusinessCardContextType } from './types';
|
||||||
|
|
||||||
|
export const BusinessCardContext = createContext<BusinessCardContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
export function useBusinessCard() {
|
||||||
|
const context = useContext(BusinessCardContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error('useBusinessCard must be used within BusinessCardProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { useState } from 'react';
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
import type { BusinessCard } from './types';
|
||||||
|
import { BusinessCardContext } from './BusinessCardContext';
|
||||||
|
import { getBusinessCardConfig } from '../config/configLoader';
|
||||||
|
|
||||||
|
interface BusinessCardProviderProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BusinessCardProvider({ children }: Readonly<BusinessCardProviderProps>) {
|
||||||
|
// Load config on initialization
|
||||||
|
const [businessCard] = useState<BusinessCard>(getBusinessCardConfig());
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const updateBusinessCard = (_card: Partial<BusinessCard>) => {
|
||||||
|
// Note: Runtime updates disabled to prevent accidental data loss
|
||||||
|
// To customize your business card, edit src/config/businessCard.config.local.ts
|
||||||
|
console.warn(
|
||||||
|
'To update your business card, edit src/config/businessCard.config.local.ts'
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BusinessCardContext.Provider value={{ businessCard, updateBusinessCard }}>
|
||||||
|
{children}
|
||||||
|
</BusinessCardContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
export interface SocialLink {
|
||||||
|
platform: string;
|
||||||
|
url: string;
|
||||||
|
icon: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BusinessCard {
|
||||||
|
name: string;
|
||||||
|
title: string;
|
||||||
|
company: string;
|
||||||
|
email: string;
|
||||||
|
phone: string;
|
||||||
|
website: string;
|
||||||
|
image: string;
|
||||||
|
bio: string;
|
||||||
|
socialLinks: SocialLink[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BusinessCardContextType {
|
||||||
|
businessCard: BusinessCard;
|
||||||
|
updateBusinessCard: (card: Partial<BusinessCard>) => void;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
react({
|
||||||
|
babel: {
|
||||||
|
plugins: [['babel-plugin-react-compiler']],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue