From a0907d11a54310936ace1bdeba52a66aed6e4052 Mon Sep 17 00:00:00 2001 From: Sascha Date: Sun, 8 Mar 2026 13:49:34 +0100 Subject: [PATCH] feat: enhance BusinessCard component with imprint URL and update styles for better readability --- src/components/BusinessCard.tsx | 2 +- src/components/Card/CardFooter.module.css | 24 +++++++++++++------ src/components/Card/CardFooter.tsx | 10 +++++++- src/components/Card/CardProfile.module.css | 3 +-- src/components/QRCodeDisplay.module.css | 2 -- src/components/SaveContactButton.module.css | 1 - .../businessCard.config.local.example.ts | 1 + src/config/businessCard.config.local.ts | 22 +++++++++++++++++ src/config/businessCard.config.ts | 1 + src/store/types.ts | 1 + 10 files changed, 53 insertions(+), 14 deletions(-) create mode 100644 src/config/businessCard.config.local.ts diff --git a/src/components/BusinessCard.tsx b/src/components/BusinessCard.tsx index d27ffd9..fa61c28 100644 --- a/src/components/BusinessCard.tsx +++ b/src/components/BusinessCard.tsx @@ -30,7 +30,7 @@ export function BusinessCard() {
- +
); diff --git a/src/components/Card/CardFooter.module.css b/src/components/Card/CardFooter.module.css index 071e005..32d1f85 100644 --- a/src/components/Card/CardFooter.module.css +++ b/src/components/Card/CardFooter.module.css @@ -2,17 +2,27 @@ padding: 15px 20px; text-align: center; background: #f7fafc; - font-size: 11px; - color: #a0aec0; - text-transform: uppercase; + font-size: 12px; + color: #4a5568; letter-spacing: 0.5px; } +.legalLink { + color: #2d3748; + text-decoration: underline; + transition: color 0.2s; +} + +.legalLink:hover { + color: #000; + text-decoration: underline; +} + /* Extra Small Screens (320px - 479px) */ @media (max-width: 479px) { .footer { padding: 12px 16px; - font-size: 10px; + font-size: 12px; } } @@ -20,7 +30,7 @@ @media (min-width: 480px) and (max-width: 767px) { .footer { padding: 13px 18px; - font-size: 10px; + font-size: 12px; } } @@ -28,7 +38,7 @@ @media (min-width: 768px) and (max-width: 1023px) { .footer { padding: 14px 22px; - font-size: 11px; + font-size: 12px; } } @@ -36,6 +46,6 @@ @media (min-width: 1024px) { .footer { padding: 15px 20px; - font-size: 11px; + font-size: 12px; } } diff --git a/src/components/Card/CardFooter.tsx b/src/components/Card/CardFooter.tsx index 2b83d67..8442865 100644 --- a/src/components/Card/CardFooter.tsx +++ b/src/components/Card/CardFooter.tsx @@ -3,12 +3,20 @@ import styles from './CardFooter.module.css'; interface CardFooterProps { companyName: string; personName: string; + imprintUrl?: string; } -export function CardFooter({ personName }: Readonly) { +export function CardFooter({ personName, imprintUrl }: Readonly) { return (

© 2026 {personName}

+ {imprintUrl && ( +

+ + Imprint & Privacy + +

+ )}
); } diff --git a/src/components/Card/CardProfile.module.css b/src/components/Card/CardProfile.module.css index 7001750..16d07b6 100644 --- a/src/components/Card/CardProfile.module.css +++ b/src/components/Card/CardProfile.module.css @@ -33,8 +33,7 @@ font-weight: 600; color: #667eea; margin: 5px 0; - text-transform: uppercase; - letter-spacing: 1px; + letter-spacing: 0.5px; word-break: break-word; } diff --git a/src/components/QRCodeDisplay.module.css b/src/components/QRCodeDisplay.module.css index 78bb8fd..6d3a59b 100644 --- a/src/components/QRCodeDisplay.module.css +++ b/src/components/QRCodeDisplay.module.css @@ -47,7 +47,6 @@ color: #718096; margin: 0; text-align: center; - text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } @@ -67,7 +66,6 @@ font-weight: 600; cursor: pointer; transition: all 0.3s ease; - text-transform: uppercase; letter-spacing: 0.5px; } diff --git a/src/components/SaveContactButton.module.css b/src/components/SaveContactButton.module.css index cb30445..0e8f564 100644 --- a/src/components/SaveContactButton.module.css +++ b/src/components/SaveContactButton.module.css @@ -13,7 +13,6 @@ font-weight: 600; cursor: pointer; transition: all 0.3s ease; - text-transform: uppercase; letter-spacing: 0.5px; min-height: 44px; } diff --git a/src/config/businessCard.config.local.example.ts b/src/config/businessCard.config.local.example.ts index 803de20..64353e2 100644 --- a/src/config/businessCard.config.local.example.ts +++ b/src/config/businessCard.config.local.example.ts @@ -27,4 +27,5 @@ export const localBusinessCard: BusinessCard = { { platform: 'GitHub', url: 'https://github.com/yourprofile', icon: 'Github' }, { platform: 'Portfolio', url: 'https://yourwebsite.com', icon: 'Globe' }, ], + // imprintUrl: 'https://yourwebsite.com/imprint', }; diff --git a/src/config/businessCard.config.local.ts b/src/config/businessCard.config.local.ts new file mode 100644 index 0000000..257d14b --- /dev/null +++ b/src/config/businessCard.config.local.ts @@ -0,0 +1,22 @@ +import type { BusinessCard } from '../store/types'; +import businessCardImage from '../assets/sascha.png'; + +// 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 localBusinessCard: BusinessCard = { + name: 'Sascha Bach', + title: 'Web-Developer | Accessibility Advocate', + company: '', + email: 'freelancer@sascha-bach.de', + phone: '+49 179 9364867', + website: 'https://sascha-bach.de', + image: businessCardImage, + bio: 'Passionate about creating accessible and user-friendly web experiences.', + socialLinks: [ + { platform: 'LinkedIn', url: 'https://linkedin.com/in/saschabach', icon: 'Linkedin' }, + { platform: 'Codeberg', url: 'https://codeberg.org/saschab', icon: 'Github' }, + ], + imprintUrl: 'https://sascha-bach.de/imprint', +}; diff --git a/src/config/businessCard.config.ts b/src/config/businessCard.config.ts index 3abad8f..0b2053d 100644 --- a/src/config/businessCard.config.ts +++ b/src/config/businessCard.config.ts @@ -19,4 +19,5 @@ export const defaultBusinessCard: BusinessCard = { { platform: 'GitHub', url: 'https://github.com/johndoe', icon: 'Github' }, { platform: 'Portfolio', url: 'https://johndoe.design', icon: 'Globe' }, ], + // imprintUrl: 'https://yourwebsite.com/imprint', }; diff --git a/src/store/types.ts b/src/store/types.ts index 04dd051..3cfe127 100644 --- a/src/store/types.ts +++ b/src/store/types.ts @@ -14,6 +14,7 @@ export interface BusinessCard { image: string; bio: string; socialLinks: SocialLink[]; + imprintUrl?: string; } export interface BusinessCardContextType {