casl/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(card): add Business Card page

Browse Source 
adds a page with print functionality
This commit is contained in:
m-tartari
2025-07-03 10:32:14 +02:00
parent 76575ead15
commit 8ba9e78a16
7 changed files with 596 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.example
+6
View File
@@ -1 +1,7 @@
VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX
VITE_BC_NAME=XXX XXXXXXX
VITE_BC_POSITION=XXXXXXXXXX
VITE_BC_VAT=ITXXXXXXXXXX
VITE_BC_PHONE=+39XXXXXXXXXX
VITE_BC_EMAIL=XXXX@XXXX.XX
VITE_BC_LINKEDIN=XXXXXXXXXX
public/images/qr.svg
+351
View File
@@ -0,0 +1,351 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="792" height="792" viewBox="0 0 792 792">
<style>
#body { fill: #e44c65; }
#bg { fill: #292323; }
#eye { fill: #292323; }
#opaque_bg { opacity: 1; fill: #9c9999; }
#opaque_body { opacity: 1; fill: #71706e; }
#qr { fill: #000000; }
@media (prefers-color-scheme: dark) {
#bg { fill: #ffffff; }
#eye { fill: #ffffff; }
#opaque_bg { opacity: 0.15; fill: #ffffff; }
#opaque_body { opacity: 0.3; fill: #ffffff; }
#qr { fill: #ffffff; }
}
</style>
<g id="qr">
<circle cx="3" cy="3" r="3" transform="translate(240,48) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,48) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,48) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(384,48) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(432,48) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,48) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,48) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,72) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(312,72) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,72) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(432,72) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(456,72) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,72) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,96) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,96) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(384,96) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,96) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,96) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(288,120) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,120) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,120) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,120) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(432,120) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(456,120) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(480,120) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,120) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(312,144) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,144) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,144) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(384,144) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,144) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(432,144) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(480,144) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,144) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,144) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,168) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,168) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,168) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,168) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(432,168) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,168) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,192) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(288,192) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,192) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(384,192) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(432,192) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(480,192) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,192) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,216) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,216) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(384,216) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,216) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(432,216) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,216) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,216) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(96,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(120,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(144,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(192,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(288,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(312,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(480,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(600,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(672,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(720,240) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(120,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(216,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(480,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(600,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(672,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(720,264) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(72,288) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(96,288) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(144,288) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(192,288) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(216,288) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,288) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,288) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,288) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,288) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,288) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,288) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(48,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(72,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(120,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(600,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,312) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(120,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(144,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(168,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(192,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(216,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(600,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(672,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(720,336) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(96,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(144,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(216,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(720,360) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(72,384) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(144,384) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(192,384) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(216,384) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,384) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,384) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,384) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,384) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(600,384) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,384) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(72,408) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(120,408) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(144,408) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(216,408) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,408) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,408) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,408) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,408) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,408) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(48,432) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(120,432) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(144,432) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(192,432) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(216,432) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(600,432) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,432) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(672,432) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(720,432) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(48,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(72,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(120,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(600,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(720,456) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(48,480) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(96,480) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(144,480) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(168,480) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(192,480) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(216,480) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,480) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,480) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,480) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(48,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(96,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(120,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(144,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(168,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(312,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(384,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(432,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(480,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,504) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(48,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(120,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(144,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(192,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(312,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(480,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(600,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(672,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(720,528) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(312,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(384,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(480,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(720,552) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,576) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(312,576) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,576) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,576) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(384,576) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,576) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,576) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,576) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,576) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,576) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,600) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(312,600) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,600) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(384,600) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,600) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,600) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,600) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,600) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,600) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,600) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(720,600) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(288,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(456,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(480,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(600,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(672,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(720,624) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,648) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,648) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,648) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,648) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(480,648) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,648) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,648) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,648) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(600,648) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(240,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(456,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(600,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,672) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(288,696) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,696) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,696) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(456,696) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(480,696) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(528,696) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,696) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,696) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,696) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(696,696) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(264,720) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(288,720) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(336,720) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(360,720) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(384,720) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(408,720) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(504,720) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(552,720) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(576,720) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(624,720) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(648,720) scale(4.12)"/>
<circle cx="3" cy="3" r="3" transform="translate(672,720) scale(4.12)"/>
<path d="M4.5,14h5.1C12,14,14,12,14,9.6V4.5C14,2,12,0,9.5,0H4.4C2,0,0,2,0,4.4v5.1C0,12,2,14,4.5,14z M12,4.8v4.4 c0,1.5-1.3,2.8-2.8,2.8H4.8C3.2,12,2,10.8,2,9.2V4.8C2,3.3,3.3,2,4.8,2h4.4C10.8,2,12,3.2,12,4.8z" transform="translate(48,48) scale(12)"/>
<path d="M4.5,14h5.1C12,14,14,12,14,9.6V4.5C14,2,12,0,9.5,0H4.4C2,0,0,2,0,4.4v5.1C0,12,2,14,4.5,14z M12,4.8v4.4 c0,1.5-1.3,2.8-2.8,2.8H4.8C3.2,12,2,10.8,2,9.2V4.8C2,3.3,3.3,2,4.8,2h4.4C10.8,2,12,3.2,12,4.8z" transform="translate(576,48) scale(12)"/>
<path d="M4.5,14h5.1C12,14,14,12,14,9.6V4.5C14,2,12,0,9.5,0H4.4C2,0,0,2,0,4.4v5.1C0,12,2,14,4.5,14z M12,4.8v4.4 c0,1.5-1.3,2.8-2.8,2.8H4.8C3.2,12,2,10.8,2,9.2V4.8C2,3.3,3.3,2,4.8,2h4.4C10.8,2,12,3.2,12,4.8z" transform="translate(48,576) scale(12)"/>
<rect width="6" height="6" transform="translate(96,96) scale(12)"/>
<rect width="6" height="6" transform="translate(624,96) scale(12)"/>
<rect width="6" height="6" transform="translate(96,624) scale(12)"/>
</g>
<g id="logo" display="inline" transform="matrix(14,0,0,13.5,640,802)">
<path id="body" stroke-width="0.139944" fill-rule="evenodd"
d="m -17.780346,-23.927296 c -0.740502,-0.204654 -1.19858,-0.50646 -1.708866,-0.912419 -0.195581,-0.155595 -1.180741,-0.921079 -1.587656,-0.186959 -1.282534,-1.269981 -0.904624,-3.38856 -0.223378,-4.775114 0.302528,-0.380694 0.649272,-0.729003 0.96505,-1.091677 -0.228696,-0.825519 -0.351618,-3.291542 1.987329,-3.895113 0.972192,0.0552 1.717975,1.013344 1.712946,2.177118 -0.0086,1.994014 -3.185616,2.50384 -3.338799,5.024277 -0.124698,2.051749 0.780153,3.095667 2.64463,3.740202 0,0 -0.278155,-0.03246 -0.451256,-0.0803 z" />
<path id="opaque_bg" stroke-width="0.139944"
d="m -16.525233,-25.802896 c -0.431571,-0.155018 -0.651471,-0.401725 -0.807251,-0.620025 -0.936017,1.334687 -3.339164,-1.536579 0.55272,-2.4916 -1.12997,0.424632 -0.813709,1.899893 -0.738003,1.996262 0.04362,-0.672993 0.763138,-1.09084 1.517398,-1.059535 0.21776,-0.0046 0.344574,0.03097 0.535276,0.123046 0.175909,0.101143 0.338175,0.225574 0.447391,0.376562 -0.653075,-0.542532 -1.44499,0.429431 -0.991579,0.870799 0.414816,0.434889 0.131767,0.811205 -0.0068,0.843304 -0.177973,0.0645 -0.331948,0.0028 -0.509175,-0.03881 z m 1.507219,-1.675067 c 0.24031,-0.425117 0.456162,-0.777983 1.455832,-0.921665 0.126769,-0.904263 0.619657,-1.16869 1.367029,-1.300232 -0.466802,1.263568 -1.425461,2.318603 -2.747131,2.489602 -0.140204,-1.5e-5 -0.147425,-0.148586 -0.07573,-0.267705 z m -7.812181,-1.920908 c 0.310588,0.01968 0.800422,0.21683 0.902047,0.318455 l -0.177713,0.294168 c -0.08445,-0.336394 -0.444015,-0.466598 -0.724334,-0.612623 z m 0.364831,-0.550187 c -0.119723,-0.286303 -0.161624,-0.50318 -0.612134,-0.641661 l -0.07274,-0.394547 c 1.059661,-0.06702 1.540798,0.430742 1.805881,1.19285 -0.172096,0.180593 -0.335411,0.362047 -0.488409,0.565322 -0.156151,-0.263454 -0.277954,-0.541222 -0.632608,-0.721964 z m 8.452337,-3.056927 -0.498571,0.100443 -0.174332,-0.482029 0.537781,-0.08845 0.217689,-0.247478 0.285717,-0.48926 -0.271865,-0.260991 -0.152046,0.04815 -0.116219,-0.07262 -0.114406,-0.04673 -0.518151,-0.102346 c -0.08553,0.197486 -0.165289,0.399386 -0.26161,0.588614 -0.106002,-0.1626 -0.226174,-0.300579 -0.394125,-0.433313 l 0.06694,-0.06811 0.216195,-0.523535 0.117247,-0.06813 0.943714,0.316629 0.315949,-0.04145 0.04256,0.109617 0.641359,0.494004 0.155872,-0.05923 c 0.155937,-0.04127 0.305005,-0.04907 0.454811,-0.06045 0.08197,0.123963 0.150547,0.250758 0.212858,0.378877 l -0.267391,0.01312 -0.401582,0.09235 -0.283086,0.19474 -0.286495,0.445961 0.05465,0.0746 0.112217,0.02108 0.139213,0.01356 0.05593,0.161827 0.03338,0.002 0.0054,0.113294 -0.05456,0.02166 c -0.150894,-0.04082 -0.198671,-0.03397 -0.310541,-0.01966 l -0.04879,0.07945 -0.14554,4.2e-4 z m -0.1817,-3.910579 c -18.3142,-12.855079 -18.3142,-12.855079 0,0 z m -1.386806,0.559437 -0.06544,-0.635205 -0.05468,-0.430235 -0.110769,-0.224401 v -0.05738 -0.05738 l 0.04628,0.0013 0.04628,0.0013 0.11108,0.0953 0.111081,0.0953 0.09785,0.232557 0.07423,0.171476 0.07423,0.171474 0.07035,0.119051 -0.0053,0.255837 0.05775,0.136356 0.429522,-0.104527 0.03372,-0.05754 0.113067,-0.101677 0.159348,0.139552 0.09473,0.0353 0.145295,0.173067 -0.116613,0.07124 -0.329849,0.04556 -0.530147,0.154936 -0.520678,0.528666 -0.122723,0.368287 -0.0016,0.557746 c -0.232462,-0.140161 -0.472491,-0.250597 -0.729758,-0.313503 l 0.02666,-0.03033 0.306126,-0.688346 0.0351,-0.443729 0.357901,0.05307 z" />
<path id="opaque_body" stroke-width="0.0370268"
d="m -21.300795,-29.801442 -0.05705,0.02232 c -0.140072,0.147509 -0.325447,0.352966 -0.472774,0.548961 -0.0805,0.131068 -0.183127,0.280436 -0.274805,0.444323 -0.219791,0.392905 -0.37501,0.892737 -0.409556,1.261252 0.04055,2.092768 1.064959,2.671403 1.364081,2.769177 l 0.07391,-0.271495 c -1.044292,-1.02787 -1.107279,-2.821337 -0.223803,-4.774537 z" />
<path id="bg" stroke-width="0.139944"
d="m -24.00005,-28.198155 c 0.540066,-0.206305 1.208639,0.07327 1.486003,0.673362 0.205627,1.102615 0.225643,2.227548 1.363032,2.76993 0.138024,-1.020193 1.282004,-0.476272 1.713084,-0.0611 0.534767,0.463498 1.179757,0.767742 1.866736,0.92638 1.368373,0.310783 4.967204,-0.235146 4.929394,-2.967739 0.387504,-0.303388 0.263813,-0.573515 0.3116,-0.976043 0.08838,-0.74445 0.81786,-0.856106 1.371884,-0.823218 -0.05805,7.015113 -12.334646,7.955045 -13.041733,0.458431 z m 9.241584,2.072657 c 0.145408,0.01363 0.277649,0.0075 0.410757,0.0048 -0.236519,0.426152 -0.611821,0.514387 -0.83621,0.42115 0.177779,-0.08335 0.310055,-0.257038 0.425453,-0.425887 z m -2.288667,-2.69431 c 1.4131,-0.496237 3.099837,-1.639898 2.534422,-4.085356 0.172719,-0.03853 0.338184,-0.0654 0.501048,-0.104119 0.09799,0.0769 0.203151,0.142718 0.308292,0.20909 h 0.145209 l 0.04894,-0.07918 c 0.12455,-0.02144 0.223126,-0.0087 0.310206,0.01908 l 0.05531,-0.02046 -0.0056,-0.113795 -0.03283,-0.0017 -0.056,-0.1619 -0.140933,-0.0138 -0.110407,-0.02109 -0.05485,-0.07572 c 0.08495,-0.162161 0.192391,-0.297126 0.28599,-0.446762 l 0.282196,-0.193858 0.404567,-0.08728 0.265134,-0.01578 c 0.646961,1.400723 0.665782,2.929648 0.111935,4.360422 -0.753547,0.03106 -1.338809,0.51509 -1.315785,1.258657 -0.480916,0.06166 -0.702315,0.09418 -0.866398,0.477373 -0.30325,0.05951 -0.456368,0.239528 -0.641838,0.458972 -0.822412,-0.913337 -2.375228,-0.507085 -2.502888,0.53881 -0.336543,-0.781733 -0.08326,-1.51134 0.474284,-1.901619 z m -6.088533,-2.157259 c -0.539058,-4.408364 3.611971,-7.390752 7.481325,-6.067722 l 0.07276,0.68782 -0.199,0.26325 -0.355579,-0.04717 -0.03491,0.434089 -0.302477,0.69199 -0.01597,0.01597 -0.01597,0.01597 c -2.77893,-0.220435 -4.406959,1.610741 -3.816223,4.117026 -0.348573,0.335047 -0.66657,0.695942 -0.977997,1.064826 l -0.07886,0.03053 c -0.33194,-1.049822 -0.814293,-1.165861 -1.757096,-1.206577 z m 8.056285,-3.080196 c 0.09707,-0.191174 0.179226,-0.388539 0.259856,-0.58697 l 0.519682,0.09902 0.114844,0.04595 0.116541,0.0737 0.151818,-0.04819 c 0.09857,0.06769 0.195057,0.172097 0.272691,0.261321 -0.09342,0.164788 -0.190446,0.32753 -0.286229,0.490961 l -0.216367,0.246427 c -0.181907,0.02133 -0.362188,0.05029 -0.541827,0.08539 -0.09464,-0.241763 -0.250696,-0.450895 -0.391009,-0.667616 z m 1.611498,-0.463995 -0.301659,-0.245321 -0.02144,-0.05587 -0.02144,-0.05587 -0.15764,0.02317 -0.15764,0.02317 -0.333241,-0.115178 -0.333242,-0.115179 -0.140429,-0.04334 -0.140431,-0.04334 -0.05631,0.03584 -0.05631,0.03584 -0.108156,0.256765 -0.108157,0.256765 -0.03083,0.03083 -0.03847,0.04152 c -0.09574,-0.06777 -0.198667,-0.122732 -0.301498,-0.178577 l -2.8e-4,-0.280362 -2.8e-4,-0.280362 0.0621,-0.182473 0.0621,-0.182473 0.261884,-0.265179 0.261884,-0.265178 0.263097,-0.07729 0.263097,-0.07729 0.166011,-0.02276 0.166011,-0.02275 c 0.571618,0.329796 1.362626,1.116576 1.743422,1.939135 -0.151971,-9.66e-4 -0.297574,0.02821 -0.445347,0.05846 l -0.160683,0.06398 z m -0.456181,-1.015239 c -10.824586,-2.370009 -10.824586,-2.370009 0,0 z m -1.258899,-1.083518 v -0.253131 l -0.03282,-0.05983 c 0.150432,0.06825 0.40955,0.206592 0.549691,0.291502 l -0.03426,0.05543 c -0.140835,0.05311 -0.287215,0.06142 -0.427026,0.107752 m 0.424578,0.858015 c 0,0.533333 0.8,0.533333 0.8,0 0,-0.533333 -0.8,-0.533333 -0.8,0 m 0.157809,-0.05896 c 0,0.266667 0.4,0.266667 0.4,0 0,-0.266667 -0.4,-0.266667 -0.4,0 z" />
<circle id="eye" fill="#292323" stroke-width="0.0370268" fill-opacity="1" cx="-18.741674" cy="-32.929714"
r="0.69050175" />
</g>
<image xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDI0IDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgo8L3N2Zz4K" width="216" height="216" x="288" y="288"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

src/App.tsx
+9
View File
@@ -10,6 +10,7 @@ const ProjectsPage = React.lazy(() => import('components/pages/ProjectsPage/inde
const CurriculumPage = React.lazy(() => import('components/pages/CurriculumPage/index.js')) const CurriculumPage = React.lazy(() => import('components/pages/CurriculumPage/index.js'))
const ContactPage = React.lazy(() => import('components/pages/ContactPage/index.js')) const ContactPage = React.lazy(() => import('components/pages/ContactPage/index.js'))
const PrivacyPage = React.lazy(() => import('components/pages/PrivacyPage/index.js')) const PrivacyPage = React.lazy(() => import('components/pages/PrivacyPage/index.js'))
const BusinessCardPage = React.lazy(() => import('components/pages/BusinessCardPage/index.js'))
const router = createBrowserRouter([ const router = createBrowserRouter([
{ {
@@ -57,6 +58,14 @@ const router = createBrowserRouter([
</React.Suspense> </React.Suspense>
), ),
}, },
{
path: 'card',
element: (
<React.Suspense fallback={<Loading />}>
<BusinessCardPage />
</React.Suspense>
),
},
], ],
}, },
]) ])
src/components/pages/BusinessCardPage/index.css
+31
View File
@@ -0,0 +1,31 @@
/* Print styles for business card */
@media print {
body * {
visibility: hidden;
}
#main,
#page-content {
margin-bottom: 0;
margin-top: 0;
min-height: 0;
}
#footer {
display: none;
}
.print-business-card,
.print-business-card * {
visibility: visible;
}
.print-business-card {
width: 85mm;
height: 55mm;
}
@page {
size: 85mm 55mm;
}
}
src/components/pages/BusinessCardPage/index.tsx
+192
View File
@@ -0,0 +1,192 @@
import React from 'react'
import { Box, Typography, Stack, Button, Paper, Link, TypographyProps, SvgIcon, PaperProps, ThemeProvider, createTheme } from '@mui/material'
import { Email, LinkedIn, Print, PhoneInTalk, Public } from '@mui/icons-material'
import { Page } from 'components/templates/index.js'
import typography from 'style/typography/index.js'
import palette from 'style/palette/index.js'
import './index.css'
const NAME = import.meta.env.VITE_BC_NAME || '[FULL NAME]'
const POSITION = import.meta.env.VITE_BC_POSITION || '[POSITION]'
const VAT = import.meta.env.VITE_BC_VAT || '[VAT NUMBER]'
const PHONE = import.meta.env.VITE_BC_PHONE || '[Redacted for privacy]'
const EMAIL = import.meta.env.VITE_BC_EMAIL || '[Redacted for privacy]'
const LINKEDIN = import.meta.env.VITE_BC_LINKEDIN || '[Redacted for privacy]'
const TypographyLink = ({ icon: Icon, children, ...props }: TypographyProps<typeof Link, { icon: typeof SvgIcon }>) => (
<Box
component={Link}
rel="noopener noreferrer"
target="_blank"
underline="hover"
color="text.secondary"
{...props}
sx={{ display: 'flex', alignItems: 'center', gap: 0.5, ...props.sx }}>
<Icon
sx={{
color: 'text.primary',
fontSize: '0.7rem',
}}
/>
<Typography variant="caption" color="text.secondary" fontSize="0.55rem">
{children}
</Typography>
</Box>
)
const theme = {
light: createTheme({
typography: typography,
palette: palette.light,
}),
dark: createTheme({
typography: typography,
palette: palette.dark,
}),
}
type BusinessCardProps = {
mode?: 'light' | 'dark'
src: string
alt?: string
} & PaperProps
const BusinessCard = ({ mode = 'dark', src, alt, sx, ...props }: BusinessCardProps) => (
<ThemeProvider theme={theme[mode]}>
<Paper
className="print-business-card"
elevation={1}
sx={{
colorScheme: `${mode} !important`,
backgroundColor: 'background.default',
width: '85mm',
height: '55mm',
padding: '6mm',
borderRadius: 2,
borderWidth: 1,
borderStyle: 'solid',
borderColor: mode === 'light' ? 'background.default' : 'white',
display: 'flex',
alignItems: 'center',
gap: 1.5,
'@media print': {
backgroundColor: mode === 'light' ? 'white' : 'background.default',
'-webkit-print-color-adjust': 'exact !important',
'print-color-adjust': 'exact !important',
elevation: 0,
borderRadius: 0,
borderColor: 'transparent',
gap: 1.5,
},
...sx,
}}
{...props}>
<Box
component="img"
src={src}
alt={alt}
sx={{
width: '30%',
height: 'fit-content',
objectFit: 'cover',
// borderRadius: '50%',
}}
/>
{/* Right side with content */}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}>
{props.children}
</Box>
</Paper>
</ThemeProvider>
)
/**
* BusinessCardPage component - A digital business card
* Designed to be printable as a standard business card (3.5 x 2 inches)
*/
const BusinessCardPage = () => {
return (
<Page>
<Stack
sx={{
justifyContent: 'center',
alignItems: 'center',
pt: 4,
gap: 2,
'@media print': {
pt: 0,
gap: 0,
},
}}>
<BusinessCard src="/fav-icon.svg" alt="logo">
<Typography variant="h5" component="h1" fontFamily="Oswald, sans-serif" textTransform="uppercase" fontWeight={700}>
{NAME}
</Typography>
<Typography variant="subtitle2" color="text.secondary" sx={{ fontSize: '0.55rem', mb: 0.5 }}>
{POSITION}
</Typography>
</BusinessCard>
<BusinessCard src="/images/qr.svg" alt="Qr Code" mode="light">
<Stack
sx={{
mt: 0.5,
borderLeft: '1px solid',
borderColor: 'divider',
pl: 2,
}}>
<Typography
variant="subtitle2"
color="text.secondary"
fontSize="0.55rem"
fontFamily="Oswald, sans-serif"
textTransform="uppercase"
fontWeight={700}>
{NAME}
</Typography>
<Typography variant="caption" color="text.secondary" fontSize="0.55rem" mb={0.5}>
{VAT}
</Typography>
<TypographyLink icon={PhoneInTalk} href={`tel:${PHONE.replace(/[^\d+]/g, '').replace(/^\+?/, '+')}`}>
{PHONE}
</TypographyLink>
<TypographyLink icon={Email} href={`mailto:${EMAIL}`}>
{EMAIL}
</TypographyLink>
<TypographyLink icon={Public} href="https://www.m-tartari.eu">
www.m-tartari.eu
</TypographyLink>
<TypographyLink icon={LinkedIn} href={`https://www.linkedin.com/in/${LINKEDIN}/`}>
{LINKEDIN}
</TypographyLink>
</Stack>
</BusinessCard>
</Stack>
<Box
sx={{
ariaLabel: 'Print Business Card',
my: 7,
display: 'flex',
justifyContent: 'center',
'@media print': {
display: 'none',
},
}}>
<Button variant="contained" startIcon={<Print />} onClick={() => window.print()}>
Print Business Card
</Button>
</Box>
</Page>
)
}
export default BusinessCardPage
src/components/pages/index.ts
+1
View File
@@ -2,5 +2,6 @@ export { default as MainPage } from './MainPage'
export { default as ContactPage } from './ContactPage' export { default as ContactPage } from './ContactPage'
export { default as CurriculumPage } from './CurriculumPage' export { default as CurriculumPage } from './CurriculumPage'
export { default as ProjectsPage } from './ProjectsPage' export { default as ProjectsPage } from './ProjectsPage'
export { default as BusinessCardPage } from './BusinessCardPage'
export { default as ErrorPage } from './ErrorPage' export { default as ErrorPage } from './ErrorPage'
src/vite-env.d.ts
Vendored
+6
View File
@@ -2,6 +2,12 @@
interface ImportMetaEnv { interface ImportMetaEnv {
readonly VITE_GA_MEASUREMENT_ID: string readonly VITE_GA_MEASUREMENT_ID: string
readonly VITE_BC_NAME: string
readonly VITE_BC_POSITION: string
readonly VITE_BC_VAT: string
readonly VITE_BC_PHONE: string
readonly VITE_BC_EMAIL: string
readonly VITE_BC_LINKEDIN: string
} }
interface ImportMeta { interface ImportMeta {