Antares/com.gregkilmer.www
1
0
Fork 0
mirror of https://github.com/Patiun/com.gregkilmer.www.git synced 2026-11-08 04:08:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

header pass

Browse Source
This commit is contained in:
Greg Kilmer
2026-07-04 16:40:02 -04:00
parent db6ff9f213
commit 1e8f5f1f01
13 changed files with 250 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/professional/SectionNav.astro
+23 -16
View File
@@ -6,29 +6,33 @@
* six anchor sections (Summary, Experience, Skills, Projects, Education,
* Contact) via smooth scroll. Hidden on small screens where the page reads as a
* simple scroll. Active state is computed client-side via IntersectionObserver.
*
* Sits BELOW the hero and is OPAQUE (a solid dark nebula surface) so it remains
* readable while scrolling over content. Sticky so it tracks the viewport once
* the user scrolls past it.
*/
import Icon from '@components/Icon.astro';
import Icon from "@components/Icon.astro";
const sections = [
{ id: 'summary', label: 'Summary', icon: 'format-list-text' },
{ id: 'experience', label: 'Experience', icon: 'timeline-text' },
{ id: 'skills', label: 'Skills', icon: 'chart-bar' },
{ id: 'projects', label: 'Projects', icon: 'view-grid' },
{ id: 'education', label: 'Education', icon: 'school' },
{ id: 'contact', label: 'Contact', icon: 'email' },
{ id: "summary", label: "Summary", icon: "format-list-text" },
{ id: "experience", label: "Experience", icon: "timeline-text" },
{ id: "skills", label: "Skills", icon: "chart-bar" },
{ id: "projects", label: "Projects", icon: "view-grid" },
{ id: "education", label: "Education", icon: "school" },
{ id: "contact", label: "Contact", icon: "email" },
];
---
<nav aria-label="Professional sections" class="hidden lg:block">
<div
class="sticky top-24 flex flex-wrap gap-1 rounded-xl border p-1.5"
style="border-color: var(--color-border); background: color-mix(in srgb, var(--color-surface-raised) 60%, transparent); backdrop-filter: blur(6px);"
class="sticky top-20 z-30 flex flex-wrap gap-1 rounded-xl border p-1.5 shadow-lg"
style="border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border)); background: linear-gradient(180deg, rgba(12, 14, 40, 0.96), rgba(8, 10, 32, 0.96)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);"
>
{sections.map((s) => (
<a
href={`#${s.id}`}
data-section-link={s.id}
class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 font-sans text-sm font-medium transition-colors"
style="color: var(--color-text-muted);"
style="color: var(--color-cream); opacity: 0.7;"
>
<Icon name={s.icon} class="h-4 w-4" />
{s.label}
@@ -41,7 +45,7 @@ const sections = [
// Highlight the link for whichever section is currently in view.
function setupSectionSpy() {
const links = Array.from(
document.querySelectorAll<HTMLAnchorElement>('[data-section-link]'),
document.querySelectorAll<HTMLAnchorElement>("[data-section-link]"),
);
if (!links.length) return;
const sections = links
@@ -51,10 +55,13 @@ const sections = [
const setActive = (id: string) => {
for (const l of links) {
const active = l.dataset.sectionLink === id;
l.style.color = active ? 'var(--color-accent)' : 'var(--color-text-muted)';
l.style.color = active
? "var(--color-accent)"
: "var(--color-cream)";
l.style.opacity = active ? "1" : "0.7";
l.style.background = active
? 'color-mix(in srgb, var(--color-accent) 14%, transparent)'
: 'transparent';
? "color-mix(in srgb, var(--color-accent) 16%, transparent)"
: "transparent";
}
};
@@ -65,10 +72,10 @@ const sections = [
.sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
if (visible) setActive(visible.target.id);
},
{ rootMargin: '-30% 0px -55% 0px', threshold: [0, 0.25, 0.5] },
{ rootMargin: "-30% 0px -55% 0px", threshold: [0, 0.25, 0.5] },
);
sections.forEach((s) => io.observe(s));
}
setupSectionSpy();
document.addEventListener('astro:page-load', setupSectionSpy);
document.addEventListener("astro:page-load", setupSectionSpy);
</script>