diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 76e2765..8a1b0f1 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -7,8 +7,8 @@ const navItems = [ { label: 'projects', href: '/projects' }, { label: 'about', href: '/about' }, { label: 'certifications', href: '/certifications' }, - { label: 'gallery', href: '/gallery' }, { label: 'contact', href: '/contact' }, + { label: 'gallery', href: '/gallery' }, ]; interface NavbarProps { diff --git a/src/pages/links.astro b/src/pages/links.astro index 198e724..510fc48 100644 --- a/src/pages/links.astro +++ b/src/pages/links.astro @@ -1,6 +1,8 @@ --- import Layout from '../layouts/Layout.astro'; import { getSiteSettings, getSocialLinks } from '../lib/data'; +import ppDay from '../assets/pp-day.webp'; +import ppNight from '../assets/pp-night.webp'; const settings = await getSiteSettings(); const allLinks = await getSocialLinks(); @@ -10,13 +12,14 @@ const links = allLinks.length > 0 ? allLinks.filter(l => l.showInLinksPage !== false) : [ { platform: 'GitHub', url: 'https://github.com/ssbg04', icon: 'github', order: 1 }, - { platform: 'Email', url: 'mailto:crischarlesgarcia345@gmail.com', icon: 'mail', order: 2 }, - { platform: 'LinkedIn', url: 'https://linkedin.com', icon: 'linkedin', order: 3 }, - { platform: 'TikTok', url: 'https://tiktok.com', icon: 'tiktok', order: 4 }, - { platform: 'Facebook', url: 'https://facebook.com', icon: 'facebook', order: 5 }, + { platform: 'LinkedIn', url: 'https://www.linkedin.com/in/cris-charles-garcia/', icon: 'linkedin', order: 2 }, + { platform: 'Email', url: 'mailto:crischarlesgarcia345@gmail.com', icon: 'mail', order: 3 }, + { platform: 'Facebook', url: 'https://www.facebook.com/kristyarls345/', icon: 'facebook', order: 4 }, + { platform: 'TikTok', url: 'https://www.tiktok.com/@sisibigi', icon: 'tiktok', order: 5 }, ]; -const profileAvatar = settings.heroImage || settings.logoImage || '/logo.png'; +const dayAvatar = settings.heroImage || (ppDay as any).src || ppDay; +const nightAvatar = settings.heroImageNight || (ppNight as any).src || ppNight || dayAvatar; const formatDisplayUrl = (url: string) => { try { @@ -30,26 +33,26 @@ const formatDisplayUrl = (url: string) => { const getIconSvg = (platform: string) => { const p = platform.toLowerCase(); if (p.includes('github')) { - return ''; + return ''; } if (p.includes('linkedin')) { - return ''; + return ''; } if (p.includes('facebook')) { - return ''; + return ''; } if (p.includes('tiktok')) { - return ''; + return ''; } if (p.includes('mail') || p.includes('email')) { - return ''; + return ''; } - return ''; + return ''; }; --- @@ -57,92 +60,206 @@ const getIconSvg = (platform: string) => { body { padding-top: 0 !important; } - /* Reset Layout.astro defaults on links page since there is no navbar */ #magnify-content { padding-top: 0 !important; padding-left: 0 !important; } - @media (orientation: landscape) and (max-height: 500px) { - .links-main-container { - padding-top: 0.75rem !important; - padding-bottom: 2.5rem !important; - } - .links-profile-card { - padding: 0.875rem !important; - } - .links-avatar { - width: 3.25rem !important; - height: 3.25rem !important; - margin-bottom: 0.35rem !important; - } - .links-header-pills { - margin-bottom: 0.625rem !important; - } - } - {/* True Linktree Style: No Header Nav and No Footer */} -
+ {/* Auto-Detect Theme Script for Links Page */} + + + {/* Main Container — narrow measure (34rem) per bryl-minimal specification */} +
- {/* Return to Main Portfolio Pill & Status */} -
- - ← - portfolio - +
- {settings.isAvailable !== false && ( - - - {settings.availabilityStatus || 'available for work'} - - )} -
+ {/* Top Header Navigation: Back Link, Live Status, and Auto Theme Pill */} +
+ + ← + portfolio + - {/* Content Container */} -
- - {/* Profile Header Card */} -
-
- {settings.fullName} +
+ {/* Live Availability Status */} + {settings.isAvailable !== false && ( + + + + available + + )} + + {/* Interactive Auto-Detect Theme Pill */} +
- -

- {settings.fullName} -

- -

- {settings.title} // {settings.location} -

- -

- {settings.valueProposition || 'Direct links to my official profiles, repositories, and credentials.'} -

- {/* Social Links List */} -
+ {/* Profile Header Card */} +
+ {/* Subtle halftone corner garnish */} +
+ + {/* Natural Color Avatar (16px outer radius, 12px inner) */} +
+
+ {settings.fullName} + +
+
+ + {/* Name — Geist Pixel Square with clean kerning */} +

+ {settings.fullName.toLowerCase()} +

+ + {/* Micro-label Role & Location */} +

+ {settings.title ? settings.title.split('|')[0].trim() : 'Software Developer'} // {settings.location} +

+ + {/* Editorial Value Proposition Body */} +

+ {settings.valueProposition || 'Direct links to my official profiles, repositories, and credentials.'} +

+ + {/* Primary Inverted Action Chip */} + + download cv + + +
+ + {/* Directory Section Header */} +
+
+ 01 — + official links +
+ + {links.length} verified channels + +
+ + {/* Social Links List — Hairline bryl-cards with micro-interaction hover */} + - {/* Minimal Footer Stamp */} -

+ {/* Minimal Footer Stamp */} +

+