feat(links): remove NFC badge, redesign cards to minimalist glass bento, and display destination URLs
This commit is contained in:
ssbg04 committed
1 parent
c369b7dde2
commit
cf0cbd9a1f
2 files changed
+149
-104
No files matched your search
@@ -1,4 +1,5 @@
|
||||
just redesign all pages dont use Fluent UI and Material UI for all screen size and orientation, nav, header, footer, body, content, add certifications page and section,, use Bento Box Grid layout styled with a Minimalist / Glassmorphism Hybrid aesthetic for UI design style, make the design optimize for all devices low end, mid range, high end, remove the loading replace something unique
|
||||
just redesign all pages dont use Fluent UI and Material UI for all screen size and orientation, nav, header, footer, body, content, add certifications page and section,,
|
||||
aesthetic for UI design style, make the design optimize for all devices low end, mid range, high end, remove the loading replace something unique
|
||||
|
||||
# Some certifications add these and can add manually with other like NC2 or like these but for a while use these credly badges
|
||||
https://www.credly.com/badges/d2f0c176-2e45-4b99-88e2-fa9fb9ff34c6/public_url
|
||||
|
||||
+147
-103
@@ -1,119 +1,163 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Navbar from '../components/Navbar';
|
||||
import Footer from '../components/Footer';
|
||||
import { getSiteSettings, getSocialLinks } from '../lib/data';
|
||||
|
||||
const settings = await getSiteSettings();
|
||||
const links = await getSocialLinks();
|
||||
|
||||
// Helper to match platform to SVG icons
|
||||
const formatDisplayUrl = (url: string) => {
|
||||
try {
|
||||
if (url.startsWith('mailto:')) return url.replace('mailto:', '');
|
||||
return url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
|
||||
} catch {
|
||||
return url;
|
||||
}
|
||||
};
|
||||
|
||||
const getIconSvg = (platform: string) => {
|
||||
const p = platform.toLowerCase();
|
||||
if (p.includes('github')) {
|
||||
return `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>`;
|
||||
}
|
||||
if (p.includes('linkedin')) {
|
||||
return `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.779-1.75-1.75s.784-1.75 1.75-1.75 1.75.779 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>`;
|
||||
}
|
||||
if (p.includes('twitter') || p.includes('x.com')) {
|
||||
return `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>`;
|
||||
}
|
||||
if (p.includes('facebook') && !p.includes('messenger')) {
|
||||
return `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>`;
|
||||
}
|
||||
if (p.includes('messenger')) {
|
||||
return `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 11.984c0 2.11.554 4.095 1.524 5.823L.61 24l6.452-3.388a11.58 11.58 0 0 0 4.938 1.077c6.627 0 12-5.373 12-11.984C24 5.373 18.627 0 12 0zm1.75 14.96l-3.316-3.535-6.46 3.535 7.106-7.55 3.328 3.535 6.44-3.535-7.106 7.55z"/></svg>`;
|
||||
}
|
||||
if (p.includes('viber')) {
|
||||
return `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M11.398 0c-1.925.028-6.065.344-8.378 2.467C1.294 4.177.693 6.698.623 9.82c-.06 3.11-.13 8.95 5.5 10.541v2.42s-.038.97.602 1.17c.79.25 1.24-.499 1.99-1.299l1.4-1.58c3.85.32 6.8-.419 7.14-.529.78-.25 5.181-.811 5.901-6.652.74-6.031-.36-9.831-2.34-11.551l-.01-.002c-.6-.55-3-2.3-8.37-2.32zm.067 1.697c.545-.003.88.02.88.02 4.54.01 6.711 1.38 7.221 1.84 1.67 1.429 2.528 4.856 1.9 9.892-.6 4.88-4.17 5.19-4.83 5.4-.28.09-2.88.73-6.152.52 0 0-2.439 2.941-3.199 3.701-.12.13-.26.17-.35.15-.13-.03-.17-.19-.16-.41l.02-4.019c-4.771-1.32-4.491-6.302-4.441-8.902.06-2.6.55-4.732 2-6.172 1.957-1.77 5.475-2.01 7.11-2.02zm.36 2.6a.3.3 0 0 0-.3.3 5.631 5.631 0 0 1 4.03 1.59c1.09 1.06 1.621 2.48 1.641 4.34a.3.3 0 0 0 .3.3v-.009a.3.3 0 0 0 .3-.3 6.451 6.451 0 0 0-1.81-4.76c-1.19-1.16-2.692-1.76-4.462-1.76zm-3.954.69a.955.955 0 0 0-.615.12h-.012c-.41.24-.788.54-1.148.94-.27.32-.421.639-.461.949a1.24 1.24 0 0 0 .05.541l.02.01a13.722 13.722 0 0 0 1.2 2.6 15.383 15.383 0 0 0 2.32 3.171l.03.04.04.03.03.03.03.03a15.603 15.603 0 0 0 3.18 2.33c1.32.72 2.122 1.06 2.602 1.2v.01c.14.04.268.06.398.06a1.84 1.84 0 0 0 1.102-.472c.39-.35.7-.738.93-1.148v-.01c.23-.43.15-.841-.18-1.121a13.632 13.632 0 0 0-2.15-1.54c-.51-.28-1.03-.11-1.24.17l-.45.569c-.23.28-.65.24-.65.24l-.012.01c-3.12-.8-3.95-3.959-3.95-3.959s-.04-.43.25-.65l.56-.45c.27-.22.46-.74.17-1.25a13.522 13.522 0 0 0-1.54-2.15.843.843 0 0 0-.504-.3z"/></svg>`;
|
||||
}
|
||||
if (p.includes('instagram')) {
|
||||
return `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>`;
|
||||
}
|
||||
if (p.includes('tiktok')) {
|
||||
return `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.09-1.03-1.87-1.09-2.93-3.16-2.61-5.25.38-2.52 2.5-4.46 5.04-4.46.73 0 1.43.16 2.07.46.06.03.11.05.16.08v4.18c-1.38-.24-2.81-.19-4.16.14-1.12.28-2.12 1.05-2.67 2.06-.55 1.01-.58 2.22-.09 3.25.48 1.01 1.41 1.72 2.49 2.03 1.1.32 2.27.32 3.37.01.69-.2 1.34-.55 1.87-.99.53-.44.97-.99 1.25-1.61.28-.62.43-1.28.46-1.95.06-2.69.02-5.38.02-8.07z"/></svg>`;
|
||||
}
|
||||
if (p.includes('youtube') || p.includes('yt')) {
|
||||
return `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.377.505 9.377.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>`;
|
||||
}
|
||||
if (p.includes('whatsapp')) {
|
||||
return `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.501-.669-.51l-.57-.01-.297.001c-.149.001-.39.056-.594.278-.204.223-.777.758-.777 1.848 0 1.09.794 2.144.904 2.293.111.148 1.55 2.368 3.75 3.322.525.225.935.36 1.253.462.527.166 1.007.143 1.387.087.422-.062 1.306-.534 1.489-1.049.182-.515.182-.956.127-1.049-.055-.093-.203-.149-.5-.297zM12 0C5.373 0 0 5.373 0 12c0 2.115.549 4.197 1.597 6.012L0 24l6.155-1.615A11.966 11.966 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22.046c-1.905 0-3.766-.512-5.385-1.477l-.386-.229-3.999 1.048 1.067-3.896-.251-.398C2.553 15.655 2 13.856 2 12c0-5.514 4.486-10 10-10s10 4.486 10 10-4.486 10-10 10z"/></svg>`;
|
||||
}
|
||||
if (p.includes('telegram')) {
|
||||
return `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.91 3.79l-3.49 16.48c-.26 1.18-1.01 1.46-1.86 1.13l-5.13-3.79-2.47 2.38c-.28.28-.51.52-.96.52l.34-5.06 9.21-8.31c.4-.36-.08-.56-.63-.2l-11.4 7.18-4.93-1.54c-1.07-.34-1.09-1.1.22-1.62L22.16 2.3c.72-.32 1.35.21 1.75 1.49z"/></svg>`;
|
||||
}
|
||||
if (p.includes('mail')) {
|
||||
return `<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>`;
|
||||
}
|
||||
return `<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" /></svg>`;
|
||||
const p = platform.toLowerCase();
|
||||
if (p.includes('github')) {
|
||||
return '<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>';
|
||||
}
|
||||
if (p.includes('linkedin')) {
|
||||
return '<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.779-1.75-1.75s.784-1.75 1.75-1.75 1.75.779 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>';
|
||||
}
|
||||
if (p.includes('twitter') || p.includes('x.com')) {
|
||||
return '<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>';
|
||||
}
|
||||
if (p.includes('facebook') && !p.includes('messenger')) {
|
||||
return '<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>';
|
||||
}
|
||||
if (p.includes('messenger')) {
|
||||
return '<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 11.984c0 2.11.554 4.095 1.524 5.823L.61 24l6.452-3.388a11.58 11.58 0 0 0 4.938 1.077c6.627 0 12-5.373 12-11.984C24 5.373 18.627 0 12 0zm1.75 14.96l-3.316-3.535-6.46 3.535 7.106-7.55 3.328 3.535 6.44-3.535-7.106 7.55z"/></svg>';
|
||||
}
|
||||
if (p.includes('tiktok')) {
|
||||
return '<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.09-1.03-1.87-1.09-2.93-3.16-2.61-5.25.38-2.52 2.5-4.46 5.04-4.46.73 0 1.43.16 2.07.46.06.03.11.05.16.08v4.18c-1.38-.24-2.81-.19-4.16.14-1.12.28-2.12 1.05-2.67 2.06-.55 1.01-.58 2.22-.09 3.25.48 1.01 1.41 1.72 2.49 2.03 1.1.32 2.27.32 3.37.01.69-.2 1.34-.55 1.87-.99.53-.44.97-.99 1.25-1.61.28-.62.43-1.28.46-1.95.06-2.69.02-5.38.02-8.07z"/></svg>';
|
||||
}
|
||||
if (p.includes('mail') || p.includes('email')) {
|
||||
return '<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>';
|
||||
}
|
||||
return '<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" /></svg>';
|
||||
};
|
||||
---
|
||||
|
||||
<Layout title={`Social Directory | ${settings.fullName}`} description="Mobile-optimized NFC links and contact options directory for Cris Charles Garcia.">
|
||||
<main class="min-h-screen py-16 px-4 flex flex-col items-center justify-center relative overflow-hidden bg-gradient-mesh">
|
||||
<!-- Dynamic background mesh blobs -->
|
||||
<div class="absolute inset-0 z-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute -top-20 left-1/3 w-80 h-80 rounded-full bg-primary-custom/10 blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-10 right-1/4 w-72 h-72 rounded-full bg-secondary-custom/10 blur-3xl animate-pulse-slow"></div>
|
||||
</div>
|
||||
<Layout
|
||||
title={`Links & Socials | ${settings.fullName}`}
|
||||
description="Official social links, contact options, and developer directory for Cris Charles Garcia."
|
||||
>
|
||||
<Navbar client:load />
|
||||
|
||||
<div class="w-full max-w-sm flex flex-col items-center relative z-10">
|
||||
<!-- Profile Card header -->
|
||||
<div class="w-24 h-24 rounded-full bg-gradient-to-tr from-primary-custom to-secondary-custom p-[3px] shadow-xl mb-6 scale-100 hover:scale-105 transition-transform duration-300">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt={settings.fullName}
|
||||
class="w-full h-full rounded-full object-cover shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
<main class="min-h-screen py-20 px-4 sm:px-6 flex flex-col items-center justify-center relative">
|
||||
<div class="w-full max-w-md flex flex-col items-center relative z-10 bento-enter">
|
||||
|
||||
{/* Profile Header Bento Card */}
|
||||
<div class="w-full bento-card p-6 sm:p-7 text-center flex flex-col items-center mb-5">
|
||||
<div class="w-20 h-20 rounded-full overflow-hidden border border-border-custom shadow-xs mb-4">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt={settings.fullName}
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-extrabold font-heading text-foreground-custom mb-1.5 text-center text-glow">
|
||||
{settings.fullName}
|
||||
</h1>
|
||||
|
||||
<p class="text-xs font-semibold text-primary-custom mb-2 text-center uppercase tracking-widest font-heading">
|
||||
{settings.title}
|
||||
</p>
|
||||
|
||||
<p class="text-xs text-muted-foreground-custom/90 max-w-[280px] text-center mb-8 leading-relaxed">
|
||||
Tap any of the options below to connect or view my works.
|
||||
</p>
|
||||
<h1 class="text-2xl font-bold font-heading text-foreground-custom tracking-tight">
|
||||
{settings.fullName}
|
||||
</h1>
|
||||
|
||||
<p class="text-xs font-mono text-primary-custom mt-1 font-medium">
|
||||
{settings.title} • {settings.location}
|
||||
</p>
|
||||
|
||||
<!-- Mobile NFC Action Target Capsule List -->
|
||||
<div class="w-full flex flex-col gap-4">
|
||||
{links.map((link) => (
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="glass-card flex items-center gap-4 px-5 py-4.5 rounded-[20px] text-foreground-custom font-semibold text-sm border border-border/20 shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all hover:bg-primary-custom/5 group cursor-pointer"
|
||||
>
|
||||
<span class="p-2.5 rounded-xl bg-primary-custom/10 text-primary-custom group-hover:scale-110 transition-transform" set:html={getIconSvg(link.platform)}></span>
|
||||
<span>{link.platform}</span>
|
||||
<span class="ml-auto text-muted-foreground-custom/55 group-hover:text-primary-custom transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
<p class="text-xs text-muted-foreground-custom max-w-xs mt-2.5 leading-relaxed">
|
||||
Direct links to all my profiles, portfolios, and repositories.
|
||||
</p>
|
||||
|
||||
{/* Home site link */}
|
||||
<a
|
||||
href="/"
|
||||
class="mt-4 flex items-center justify-center gap-2 px-5 py-4.5 rounded-[20px] bg-primary-custom text-primary-foreground font-semibold text-sm shadow-lg hover:scale-[1.02] active:scale-[0.98] transition-transform text-center cursor-pointer"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
Visit Main Website
|
||||
</a>
|
||||
</div>
|
||||
{/* Quick CV Action */}
|
||||
<div class="w-full grid grid-cols-2 gap-2 mt-5 pt-4 border-t border-border-custom">
|
||||
<a
|
||||
href="/CV-Cris-Charles-Garcia.pdf"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-xl bg-primary-custom text-white text-xs font-medium hover:bg-primary-custom/90 transition-all text-center"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
View CV ↗
|
||||
</a>
|
||||
|
||||
<!-- NFC Tag scanning status badge -->
|
||||
<div class="mt-12 flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/25 text-[10px] font-bold text-emerald-500 uppercase tracking-widest animate-pulse-slow">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||
NFC Tag Target Active
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<a
|
||||
href="/CV-Cris-Charles-Garcia.pdf"
|
||||
download="CV-Cris-Charles-Garcia.pdf"
|
||||
class="inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-xl border border-border-custom hover:border-primary-custom/40 text-foreground-custom text-xs font-medium hover:bg-primary-custom/5 transition-all text-center"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
||||
</svg>
|
||||
Download PDF
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links Bento Matrix */}
|
||||
<div class="w-full flex flex-col gap-3">
|
||||
{links.map((link) => (
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="bento-card p-4 flex items-center justify-between group hover:border-primary-custom/40 transition-all cursor-pointer"
|
||||
>
|
||||
<div class="flex items-center gap-3.5 min-w-0">
|
||||
<div class="w-10 h-10 rounded-xl bg-muted-custom/40 border border-border-custom flex items-center justify-center text-primary-custom shrink-0 group-hover:scale-105 transition-transform" set:html={getIconSvg(link.platform)}></div>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<span class="text-sm font-bold font-heading text-foreground-custom group-hover:text-primary-custom transition-colors leading-tight">
|
||||
{link.platform}
|
||||
</span>
|
||||
<span class="text-[11px] font-mono text-muted-foreground-custom truncate leading-tight mt-0.5" title={link.url}>
|
||||
{formatDisplayUrl(link.url)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="text-xs text-muted-foreground-custom group-hover:text-primary-custom group-hover:translate-x-0.5 transition-all shrink-0 ml-3">
|
||||
↗
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Home site link */}
|
||||
<a
|
||||
href="/"
|
||||
class="bento-card p-4 flex items-center justify-between group hover:border-primary-custom/40 transition-all mt-2"
|
||||
>
|
||||
<div class="flex items-center gap-3.5">
|
||||
<div class="w-10 h-10 rounded-xl bg-primary-custom/10 text-primary-custom flex items-center justify-center shrink-0">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold font-heading text-foreground-custom group-hover:text-primary-custom transition-colors">
|
||||
Main Portfolio
|
||||
</span>
|
||||
<span class="text-[11px] font-mono text-muted-foreground-custom">
|
||||
Explore full projects & skills
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="text-xs text-muted-foreground-custom group-hover:text-primary-custom group-hover:translate-x-0.5 transition-all">
|
||||
→
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer fullName={settings.fullName} client:load />
|
||||
</Layout>
|
||||
Reference in new issue
Block a user