diff --git a/index.php b/index.php index 8a18a74..74b1fe2 100644 --- a/index.php +++ b/index.php @@ -32,6 +32,34 @@ if (preg_match('/mailto:([^@]+)/', $mailto_link, $m)) { $extra_contact_links = $cvData['contact_links'] ?? []; +/** + * Icon SVGs for link pills + */ +$pill_icons = [ + 'Website' => '', + 'Email' => '', + 'GitLab' => '', + 'GitHub' => '', + 'CV' => '', + 'PDF' => '', + 'Blog' => '', + 'Projects' => '', + 'Code' => '', +]; + +/** + * Extract a readable URL from a href (strip protocol, trailing slash) + */ +function pillUrl(string $href): string { + $url = $href; + if (preg_match('/^[a-z]+:\/\//i', $url)) { + $url = preg_replace('/^[a-z]+:\/\//i', '', $url); + } + $url = rtrim($url, '/'); + return strlen($url) > 30 ? mb_substr($url, 0, 27) . '…' : $url; +} + + /** * CV Data */ @@ -140,14 +168,22 @@ $cv_skills = $cvData['skills'] ?? [];
- $url): ?> - + $href): ?> + + + + +
- $url): ?> - + $href): ?> + + + + +
diff --git a/style.css b/style.css index ef2e381..4d236a1 100644 --- a/style.css +++ b/style.css @@ -203,35 +203,89 @@ body { margin: 0; line-height: 1.5; } +/** + * Link pills – shared base + */ +.pill { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 12px 6px 10px; + text-decoration: none; + font-size: 0.82rem; + line-height: 1.3; + border-radius: 6px; + border: 1px solid transparent; + transition: all 0.2s ease; + white-space: nowrap; +} + +.pill-icon { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +.pill-label { + font-weight: 600; +} + +.pill-url { + font-size: 0.72rem; + opacity: 0.5; + margin-left: 2px; +} + +/** + * Contact pills – gold accent + */ .hero-contacts { display: flex; flex-wrap: wrap; - gap: 12px; + gap: 10px; } -.hero-contacts a { + +.contact-pill { color: var(--link-color); - text-decoration: none; - font-size: 0.9rem; + background: rgba(255, 215, 0, 0.06); + border-color: rgba(255, 215, 0, 0.2); } -.hero-contacts a:hover { - text-decoration: underline; + +.contact-pill:hover { + background: rgba(255, 215, 0, 0.12); + border-color: rgba(255, 215, 0, 0.5); + box-shadow: 0 0 12px rgba(255, 215, 0, 0.15); } + +.contact-pill .pill-url { + color: var(--link-color); +} + +/** + * Nav pills – cyan accent + */ .hero-nav { display: flex; flex-wrap: wrap; - gap: 12px; - padding-top: 8px; - border-top: 1px solid rgba(0, 243, 255, 0.15); + gap: 10px; + padding-top: 12px; + border-top: 1px solid rgba(0, 243, 255, 0.12); } -.hero-nav a { + +.nav-pill { color: var(--text-color); - text-decoration: none; - font-size: 0.85rem; - opacity: 0.8; + background: rgba(0, 243, 255, 0.04); + border-color: rgba(0, 243, 255, 0.15); } -.hero-nav a:hover { - opacity: 1; - text-decoration: underline; + +.nav-pill:hover { + background: rgba(0, 243, 255, 0.1); + border-color: rgba(0, 243, 255, 0.4); + box-shadow: 0 0 12px rgba(0, 243, 255, 0.15); +} + +.nav-pill .pill-url { + color: var(--text-color); } .hiring-toggle { @@ -539,6 +593,9 @@ a { color: var(--link-color); text-decoration: none; } .profile { flex-direction: column; text-align: center; } .hero { flex-direction: column; text-align: center; } .hero-identity { flex-direction: column; text-align: center; } + .hero-contacts, .hero-nav { justify-content: center; } + .pill { white-space: normal; gap: 4px 6px; padding: 5px 10px; } + .pill-url { display: inline; } } /* Print mode */ @@ -629,6 +686,33 @@ a { color: var(--link-color); text-decoration: none; } grid-column: span 3 !important; } /* Removed duplicate flex layout for .contact .link-grid */ + + /* Pill links in print – show label + URL clearly */ + .hero-contacts, .hero-nav { + display: flex !important; + flex-wrap: wrap !important; + gap: 6px !important; + } + .pill { + display: inline-flex !important; + align-items: center !important; + gap: 4px !important; + padding: 3px 8px !important; + border: 1px solid #bbb !important; + border-radius: 3px !important; + background: #f7f7f7 !important; + color: #000 !important; + text-decoration: none !important; + font-size: 0.75rem !important; + } + .pill .pill-icon { + display: none !important; + } + .pill .pill-url { + opacity: 1 !important; + color: #333 !important; + font-size: 0.7rem !important; + } /* CV Container – hidden unless CV mode */