lerko/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(design): external link colors, section dividers, nav scroll-spy #10

Merged
lerko merged 1 commits from feat/polish-reader-view into staging 2026-05-27 18:31:06 +00:00
Conversation 0 Commits 1 Files Changed 6
+88 -13
6 changed files with 88 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.astro
+5 -4
View File
@@ -10,7 +10,7 @@ const year = new Date().getFullYear();
href="https://github.com/lerko96"
target="_blank"
rel="noopener noreferrer"
class="underline hover:text-[var(--color-text)]"
class="underline"
>
GitHub
</a>
@@ -18,7 +18,7 @@ const year = new Date().getFullYear();
href="https://gitea.lerkolabs.com/lerko"
target="_blank"
rel="noopener noreferrer"
class="underline hover:text-[var(--color-text)]"
class="underline"
>
Gitea
</a>
@@ -26,13 +26,14 @@ const year = new Date().getFullYear();
href="https://www.linkedin.com/in/tyler-koenig"
target="_blank"
rel="noopener noreferrer"
class="underline hover:text-[var(--color-text)]"
class="underline"
>
LinkedIn
</a>
<a
href="mailto:tyler@lerkolabs.com"
class="underline hover:text-[var(--color-text)]"
target="_blank"
class="underline"
>
Email
</a>
src/components/Hero.astro
+5 -4
View File
@@ -15,7 +15,7 @@
href="https://github.com/lerko96"
target="_blank"
rel="noopener noreferrer"
class="underline hover:text-[var(--color-text)]"
class="underline"
>
GitHub
</a>
@@ -23,7 +23,7 @@
href="https://gitea.lerkolabs.com/lerko"
target="_blank"
rel="noopener noreferrer"
class="underline hover:text-[var(--color-text)]"
class="underline"
>
Gitea
</a>
@@ -31,13 +31,14 @@
href="https://www.linkedin.com/in/tyler-koenig"
target="_blank"
rel="noopener noreferrer"
class="underline hover:text-[var(--color-text)]"
class="underline"
>
LinkedIn
</a>
<a
href="mailto:tyler@lerkolabs.com"
class="underline hover:text-[var(--color-text)]"
target="_blank"
class="underline"
>
Email
</a>
src/components/Nav.astro
+51 -3
View File
@@ -3,9 +3,9 @@
<a href="/" class="font-semibold">Tyler Koenig</a>
<div class="flex items-center gap-2ch">
<a href="#projects" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">projects</a>
<a href="#journey" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">journey</a>
<a href="#homelab" class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">homelab</a>
<a href="#projects" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">projects</a>
<a href="#journey" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">journey</a>
<a href="#homelab" data-nav-link class="hidden xs:inline text-[var(--color-text-label)] hover:text-[var(--color-text)]">homelab</a>
<button
data-theme-toggle
@@ -38,4 +38,52 @@
});
updateTheme();
const navLinks = document.querySelectorAll<HTMLAnchorElement>("[data-nav-link]");
const sections = Array.from(navLinks).map((link) => ({
link,
section: document.querySelector(link.hash) as HTMLElement,
}));
const atBottom = () =>
window.innerHeight + window.scrollY >= document.body.offsetHeight - 2;
const observer = new IntersectionObserver(
() => {
let active: HTMLAnchorElement | null = null;
if (atBottom()) {
active = sections[sections.length - 1].link;
} else {
for (const { link, section } of sections) {
if (section.getBoundingClientRect().top <= 80) active = link;
}
}
navLinks.forEach((l) => {
l.style.color = l === active ? "var(--color-text)" : "";
});
},
{ rootMargin: "-56px 0px 0px 0px", threshold: 0 },
);
sections.forEach(({ section }) => observer.observe(section));
let ticking = false;
window.addEventListener("scroll", () => {
if (ticking) return;
ticking = true;
requestAnimationFrame(() => {
let active: HTMLAnchorElement | null = null;
if (atBottom()) {
active = sections[sections.length - 1].link;
} else {
for (const { link, section } of sections) {
if (section.getBoundingClientRect().top <= 80) active = link;
}
}
navLinks.forEach((l) => {
l.style.color = l === active ? "var(--color-text)" : "";
});
ticking = false;
});
}, { passive: true });
</script>
src/components/ProjectCard.astro
+1 -1
View File
@@ -15,7 +15,7 @@ const { project } = Astro.props;
href={project.githubUrl}
target="_blank"
rel="noopener noreferrer"
class="font-semibold underline hover:text-[var(--color-text-label)]"
class="font-semibold underline"
>
{project.title}
</a>
src/pages/index.astro
+1 -1
View File
@@ -80,7 +80,7 @@ const glanceStats = [
href="https://gitea.lerkolabs.com/lerko/homelab"
target="_blank"
rel="noopener noreferrer"
class="underline hover:text-[var(--color-text-label)]"
class="underline"
>
gitea.lerkolabs.com/lerko/homelab →
</a>
src/styles/globals.css
+25
View File
@@ -12,6 +12,8 @@
--color-text: #D4D4D8;
--color-text-label: #9CA0AA;
--color-text-dim: #888D9B;
--color-link: #8CAFC8;
--color-link-visited: #9A94AB;
/* Typography */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -63,6 +65,8 @@ html {
--color-text: #2C2C2C;
--color-text-label: #6B6560;
--color-text-dim: #787068;
--color-link: #4A6B8A;
--color-link-visited: #6B6080;
}
/* Link underlines */
@@ -74,6 +78,16 @@ a {
a:hover {
text-decoration-color: currentColor;
}
a[target="_blank"] {
color: var(--color-link);
}
a[target="_blank"]:visited {
color: var(--color-link-visited);
}
a[target="_blank"]:hover {
color: var(--color-link);
text-decoration-color: currentColor;
}
/* Focus states */
a:focus-visible {
@@ -94,6 +108,17 @@ button {
outline-color 120ms linear;
}
/* Section anchors — clear sticky nav, visual rhythm */
section[id] {
scroll-margin-top: 3.5rem;
padding-top: 2lh;
border-top: 1px solid var(--color-border);
}
section[id]:first-of-type {
border-top: none;
padding-top: 0;
}
@media print {
html {
font-family: var(--font-serif);