Replace Next.js 16 + React 19 with Astro 5. Same visual design, same deploy pipeline, zero client-side framework. - All components rewritten as .astro files - Dark mode via inline scripts (no React context) - Timeline animation via IntersectionObserver script - Nav active state computed at build time - Self-hosted Source Code Pro woff2 fonts - Drop Font Awesome (icons were never loaded) - Drop unused headshot PNG (1MB, unreferenced) - Fix pfSense hardware refs (Netgate 1100, not N100) - Output: 212KB static HTML vs 2.6MB before - JS shipped: ~700 bytes inline vs ~130KB React runtime
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
---
|
||||
const year = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer class="border-t border-[var(--color-border)] py-1lh mt-2lh">
|
||||
<div class="px-4ch flex items-center justify-between">
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
© {year} Tyler Koenig
|
||||
</span>
|
||||
<div class="flex items-center gap-2ch">
|
||||
<a
|
||||
href="https://github.com/lerko96"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[github]
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Gitea"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[gitea]
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[linkedin]
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tyler@lerkolabs.com"
|
||||
aria-label="Email"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[email]
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -1,47 +0,0 @@
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-[var(--color-border)] py-1lh mt-2lh">
|
||||
<div className="px-4ch flex items-center justify-between">
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
© {new Date().getFullYear()} Tyler Koenig
|
||||
</span>
|
||||
<div className="flex items-center gap-2ch">
|
||||
<a
|
||||
href="https://github.com/lerko96"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[github]
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Gitea"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[gitea]
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[linkedin]
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tyler@lerkolabs.com"
|
||||
aria-label="Email"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[email]
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
<section class="mb-16">
|
||||
<div class="flex flex-col gap-1ch">
|
||||
<div>
|
||||
<p class="font-mono text-sm font-bold text-[var(--color-text)]">
|
||||
<span
|
||||
class="text-[var(--color-accent-green)] select-none mr-1ch"
|
||||
aria-hidden="true"
|
||||
>
|
||||
❯
|
||||
</span>
|
||||
tyler koenig
|
||||
</p>
|
||||
<p class="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
|
||||
Security Operations · Self-Hosted Infrastructure
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70">
|
||||
Homelab runs 30+
|
||||
services across segmented VLANs — pfSense, Authentik SSO, full
|
||||
observability stack. Write software too: mobile apps, Go backends,
|
||||
open protocols. Daily drivers, all of it.{" "}
|
||||
<span
|
||||
class="animate-cursor text-[var(--color-accent-green)]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
█
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-x-1ch gap-y-half-lh">
|
||||
<span class="font-mono text-sm text-[var(--color-accent-green)]">
|
||||
● available
|
||||
</span>
|
||||
<a
|
||||
href="https://github.com/lerko96"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[github]
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Gitea"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[gitea]
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[linkedin]
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tyler@lerkolabs.com"
|
||||
aria-label="Email"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[email]
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,75 +0,0 @@
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex flex-col gap-1ch">
|
||||
<div>
|
||||
<p className="font-mono text-sm font-bold text-[var(--color-text)]">
|
||||
<span
|
||||
className="text-[var(--color-accent-green)] select-none mr-1ch"
|
||||
aria-hidden="true"
|
||||
>
|
||||
❯
|
||||
</span>
|
||||
tyler koenig
|
||||
</p>
|
||||
<p className="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
|
||||
Security Operations · Self-Hosted Infrastructure
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70">
|
||||
Homelab runs 30+
|
||||
services across segmented VLANs — pfSense, Authentik SSO, full
|
||||
observability stack. Write software too: mobile apps, Go backends,
|
||||
open protocols. Daily drivers, all of it.{" "}
|
||||
<span
|
||||
className="animate-cursor text-[var(--color-accent-green)]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
█
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-1ch gap-y-half-lh">
|
||||
<span className="font-mono text-sm text-[var(--color-accent-green)]">
|
||||
● available
|
||||
</span>
|
||||
<a
|
||||
href="https://github.com/lerko96"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[github]
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.lerkolabs.com/lerko"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Gitea"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[gitea]
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[linkedin]
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tyler@lerkolabs.com"
|
||||
aria-label="Email"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[email]
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
const pathname = Astro.url.pathname;
|
||||
|
||||
const links = [
|
||||
{ href: "/", label: "tyler" },
|
||||
{ href: "/homelab/", label: "homelab" },
|
||||
{ href: "/projects/", label: "projects" },
|
||||
];
|
||||
---
|
||||
|
||||
<header class="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
|
||||
<nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
|
||||
<a
|
||||
href="/"
|
||||
class="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
|
||||
>
|
||||
~/
|
||||
</a>
|
||||
|
||||
<ul class="flex items-center gap-2ch">
|
||||
{links.map(({ href, label }) => {
|
||||
const active = pathname === href || pathname === href.replace(/\/$/, "");
|
||||
return (
|
||||
<li>
|
||||
<a
|
||||
href={href}
|
||||
aria-current={active ? "page" : undefined}
|
||||
class:list={[
|
||||
"font-mono text-sm",
|
||||
active
|
||||
? "text-[var(--color-text)]"
|
||||
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]",
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li>
|
||||
<button
|
||||
data-theme-toggle
|
||||
aria-label="Switch to light mode"
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
|
||||
>
|
||||
[light]
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const btn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
|
||||
|
||||
function update() {
|
||||
const isDark = document.documentElement.classList.contains("dark");
|
||||
btn.textContent = isDark ? "[light]" : "[dark]";
|
||||
btn.setAttribute(
|
||||
"aria-label",
|
||||
isDark ? "Switch to light mode" : "Switch to dark mode",
|
||||
);
|
||||
}
|
||||
|
||||
btn.addEventListener("click", () => {
|
||||
const next = !document.documentElement.classList.contains("dark");
|
||||
document.documentElement.classList.toggle("dark", next);
|
||||
localStorage.setItem("lerko96-dark-mode", String(next));
|
||||
update();
|
||||
});
|
||||
|
||||
update();
|
||||
</script>
|
||||
@@ -1,59 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
|
||||
const links = [
|
||||
{ href: "/", label: "tyler" },
|
||||
{ href: "/homelab/", label: "homelab" },
|
||||
{ href: "/projects/", label: "projects" },
|
||||
];
|
||||
|
||||
export default function Nav() {
|
||||
const pathname = usePathname();
|
||||
const { isDark, toggle } = useTheme();
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
|
||||
<nav className="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
|
||||
<Link
|
||||
href="/"
|
||||
className="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
|
||||
>
|
||||
~/
|
||||
</Link>
|
||||
|
||||
<ul className="flex items-center gap-2ch">
|
||||
{links.map(({ href, label }) => {
|
||||
const active =
|
||||
pathname === href || pathname === href.replace(/\/$/, "");
|
||||
return (
|
||||
<li key={href}>
|
||||
<Link
|
||||
href={href}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={`font-mono text-sm ${
|
||||
active
|
||||
? "text-[var(--color-text)]"
|
||||
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li>
|
||||
<button
|
||||
onClick={toggle}
|
||||
aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
|
||||
>
|
||||
{isDark ? "[light]" : "[dark]"}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
import type { Project } from "@/data/projects";
|
||||
|
||||
interface Props {
|
||||
project: Project;
|
||||
}
|
||||
|
||||
const { project } = Astro.props;
|
||||
---
|
||||
|
||||
<article class="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-1lh p-2ch hover:bg-[var(--color-surface-raised)]">
|
||||
<div class="flex items-start justify-between gap-1ch">
|
||||
<a
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="font-mono text-sm font-semibold text-[var(--color-text)] hover:text-[var(--color-accent-green)]"
|
||||
>
|
||||
{project.title}
|
||||
</a>
|
||||
<div class="flex items-center gap-1ch shrink-0">
|
||||
{project.stats && (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{project.stats}
|
||||
</span>
|
||||
)}
|
||||
{project.externalUrl && (
|
||||
<a
|
||||
href={project.externalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={`View ${project.title} externally`}
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
↗
|
||||
</a>
|
||||
)}
|
||||
<a
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={`View ${project.title} on GitHub`}
|
||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{project.statusBadge && (
|
||||
<span class="font-mono text-sm text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1ch py-0.5 w-fit opacity-80">
|
||||
{project.statusBadge}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh">
|
||||
{project.tags.map((tag) => (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
@@ -1,67 +0,0 @@
|
||||
import type { Project } from "@/data/projects";
|
||||
|
||||
type Props = {
|
||||
project: Project;
|
||||
};
|
||||
|
||||
export default function ProjectCard({ project }: Props) {
|
||||
return (
|
||||
<article className="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-1lh p-2ch hover:bg-[var(--color-surface-raised)]">
|
||||
<div className="flex items-start justify-between gap-1ch">
|
||||
<a
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-mono text-sm font-semibold text-[var(--color-text)] hover:text-[var(--color-accent-green)]"
|
||||
>
|
||||
{project.title}
|
||||
</a>
|
||||
<div className="flex items-center gap-1ch shrink-0">
|
||||
{project.stats && (
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{project.stats}
|
||||
</span>
|
||||
)}
|
||||
{project.externalUrl && (
|
||||
<a
|
||||
href={project.externalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={`View ${project.title} externally`}
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
↗
|
||||
</a>
|
||||
)}
|
||||
<a
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={`View ${project.title} on GitHub`}
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{project.statusBadge && (
|
||||
<span className="font-mono text-sm text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1ch py-0.5 w-fit opacity-80">
|
||||
{project.statusBadge}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<p className="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh">
|
||||
{project.tags.map((tag) => (
|
||||
<span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
import Widget from "./Widget.astro";
|
||||
|
||||
const skillGroups = [
|
||||
{
|
||||
label: "Infrastructure",
|
||||
skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
|
||||
},
|
||||
{
|
||||
label: "Desktop & Tools",
|
||||
skills: ["Git", "Docker", "TDD", "Node.js", "REST APIs"],
|
||||
},
|
||||
{
|
||||
label: "Practices",
|
||||
skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
|
||||
},
|
||||
{
|
||||
label: "Languages",
|
||||
skills: ["Go", "JavaScript", "TypeScript", "HTML", "CSS"],
|
||||
},
|
||||
{
|
||||
label: "Frontend",
|
||||
skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
|
||||
},
|
||||
];
|
||||
|
||||
const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
|
||||
---
|
||||
|
||||
<Widget title="tyler/skills" badge={totalCount} as="section">
|
||||
<div class="flex flex-col">
|
||||
{skillGroups.map(({ label, skills }) => (
|
||||
<div class="flex flex-col xs:flex-row gap-1ch xs:gap-2ch py-half-lh">
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
|
||||
{label}
|
||||
</span>
|
||||
<span class="font-mono text-sm text-[var(--color-text)]">
|
||||
{skills.join(" · ")}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
@@ -1,48 +0,0 @@
|
||||
import Widget from "@/components/Widget";
|
||||
|
||||
const skillGroups = [
|
||||
{
|
||||
label: "Infrastructure",
|
||||
skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
|
||||
},
|
||||
{
|
||||
label: "Desktop & Tools",
|
||||
skills: ["Git", "Docker", "TDD", "Node.js", "REST APIs", ],
|
||||
},
|
||||
{
|
||||
label: "Practices",
|
||||
skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
|
||||
},
|
||||
{
|
||||
label: "Languages",
|
||||
skills: ["Go", "JavaScript", "TypeScript", "HTML", "CSS"],
|
||||
},
|
||||
{
|
||||
label: "Frontend",
|
||||
skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
|
||||
},
|
||||
];
|
||||
|
||||
const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
|
||||
|
||||
export default function Skills() {
|
||||
return (
|
||||
<Widget title="tyler/skills" badge={totalCount} as="section">
|
||||
<div className="flex flex-col">
|
||||
{skillGroups.map(({ label, skills }) => (
|
||||
<div
|
||||
key={label}
|
||||
className="flex flex-col xs:flex-row gap-1ch xs:gap-2ch py-half-lh"
|
||||
>
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
|
||||
{label}
|
||||
</span>
|
||||
<span className="font-mono text-sm text-[var(--color-text)]">
|
||||
{skills.join(" · ")}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
// Server component — renders a blocking inline script that sets the dark class
|
||||
// on <html> before React hydrates, preventing flash of wrong theme.
|
||||
export default function ThemeScript() {
|
||||
const script = `
|
||||
(function() {
|
||||
var stored = localStorage.getItem('lerko96-dark-mode');
|
||||
var dark = stored === null ? true : stored === 'true';
|
||||
if (dark) document.documentElement.classList.add('dark');
|
||||
})();
|
||||
`;
|
||||
return <script dangerouslySetInnerHTML={{ __html: script }} />;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
import Widget from "./Widget.astro";
|
||||
import { timeline, type TimelineType } from "@/data/timeline";
|
||||
|
||||
const typeColor: Record<TimelineType, string> = {
|
||||
career: "var(--color-timeline-career)",
|
||||
education: "var(--color-timeline-education)",
|
||||
cert: "var(--color-timeline-cert)",
|
||||
project: "var(--color-timeline-project)",
|
||||
homelab: "var(--color-timeline-homelab)",
|
||||
};
|
||||
|
||||
const typeLabel: Record<TimelineType, string> = {
|
||||
career: "career",
|
||||
education: "education",
|
||||
cert: "cert",
|
||||
project: "project",
|
||||
homelab: "homelab",
|
||||
};
|
||||
---
|
||||
|
||||
<Widget title="tyler/journey">
|
||||
<ol class="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
|
||||
{timeline.map((entry) => (
|
||||
<li data-tl-entry class="pl-[3ch] pb-2lh last:pb-0 relative">
|
||||
<span
|
||||
class="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
|
||||
style={`background-color: ${typeColor[entry.type]}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-1ch mb-half-lh">
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
|
||||
<span
|
||||
class="font-mono text-sm px-1 border"
|
||||
style={`color: ${typeColor[entry.type]}; border-color: ${typeColor[entry.type]}; opacity: 0.7;`}
|
||||
>
|
||||
{typeLabel[entry.type]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="font-mono text-sm font-semibold text-[var(--color-text)] mb-half-lh">
|
||||
{entry.title}
|
||||
</p>
|
||||
|
||||
<p class="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-half-lh">
|
||||
{entry.description}
|
||||
</p>
|
||||
|
||||
{entry.tags && entry.tags.length > 0 && (
|
||||
<div class="flex flex-wrap gap-x-1ch gap-y-half-lh">
|
||||
{entry.tags.map((tag) => (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</Widget>
|
||||
|
||||
<script>
|
||||
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||||
const entries = document.querySelectorAll<HTMLElement>("[data-tl-entry]");
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(observed) => {
|
||||
observed.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
(entry.target as HTMLElement).style.opacity = "1";
|
||||
(entry.target as HTMLElement).style.transform = "translateY(0)";
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.15 },
|
||||
);
|
||||
|
||||
entries.forEach((el) => {
|
||||
el.style.opacity = "0";
|
||||
el.style.transform = "translateY(8px)";
|
||||
el.style.transition = "opacity 240ms linear, transform 240ms linear";
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -1,107 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef } from 'react'
|
||||
import Widget from '@/components/Widget'
|
||||
import { timeline, type TimelineType } from '@/data/timeline'
|
||||
|
||||
const typeColor: Record<TimelineType, string> = {
|
||||
career: 'var(--color-timeline-career)',
|
||||
education: 'var(--color-timeline-education)',
|
||||
cert: 'var(--color-timeline-cert)',
|
||||
project: 'var(--color-timeline-project)',
|
||||
homelab: 'var(--color-timeline-homelab)',
|
||||
}
|
||||
|
||||
const typeLabel: Record<TimelineType, string> = {
|
||||
career: 'career',
|
||||
education: 'education',
|
||||
cert: 'cert',
|
||||
project: 'project',
|
||||
homelab: 'homelab',
|
||||
}
|
||||
|
||||
export default function Timeline() {
|
||||
const listRef = useRef<HTMLOListElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
||||
|
||||
const entries = listRef.current?.querySelectorAll<HTMLLIElement>('[data-tl-entry]')
|
||||
if (!entries) return
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(observed) => {
|
||||
observed.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
;(entry.target as HTMLElement).style.opacity = '1'
|
||||
;(entry.target as HTMLElement).style.transform = 'translateY(0)'
|
||||
observer.unobserve(entry.target)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.15 },
|
||||
)
|
||||
|
||||
entries.forEach((el) => {
|
||||
el.style.opacity = '0'
|
||||
el.style.transform = 'translateY(8px)'
|
||||
el.style.transition = 'opacity 240ms linear, transform 240ms linear'
|
||||
observer.observe(el)
|
||||
})
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Widget title="tyler/journey">
|
||||
<ol ref={listRef} className="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
|
||||
{timeline.map((entry, i) => (
|
||||
<li key={i} data-tl-entry className="pl-[3ch] pb-2lh last:pb-0 relative">
|
||||
{/* Spine dot */}
|
||||
<span
|
||||
className="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
|
||||
style={{ backgroundColor: typeColor[entry.type] }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Date + type badge */}
|
||||
<div className="flex items-center gap-1ch mb-half-lh">
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
|
||||
<span
|
||||
className="font-mono text-sm px-1 border"
|
||||
style={{
|
||||
color: typeColor[entry.type],
|
||||
borderColor: typeColor[entry.type],
|
||||
opacity: 0.7,
|
||||
}}
|
||||
>
|
||||
{typeLabel[entry.type]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<p className="font-mono text-sm font-semibold text-[var(--color-text)] mb-half-lh">
|
||||
{entry.title}
|
||||
</p>
|
||||
|
||||
{/* Description */}
|
||||
<p className="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-half-lh">
|
||||
{entry.description}
|
||||
</p>
|
||||
|
||||
{/* Tags */}
|
||||
{entry.tags && entry.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-x-1ch gap-y-half-lh">
|
||||
{entry.tags.map((tag) => (
|
||||
<span key={tag} className="font-mono text-sm text-[var(--color-text-dim)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</Widget>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
badge?: string | number;
|
||||
meta?: string;
|
||||
as?: "section" | "div" | "article";
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { title, badge, meta, as: Tag = "section", class: className } = Astro.props;
|
||||
const slashIdx = title.lastIndexOf("/");
|
||||
const prefix = slashIdx >= 0 ? title.slice(0, slashIdx + 1) : null;
|
||||
const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;
|
||||
---
|
||||
|
||||
<Tag class:list={["mb-4lh", className]}>
|
||||
<div class="flex items-center gap-1ch mb-2lh">
|
||||
{prefix && (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
|
||||
)}
|
||||
<span class="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
|
||||
{badge !== undefined && (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
|
||||
)}
|
||||
{meta && (
|
||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
|
||||
)}
|
||||
</div>
|
||||
<slot />
|
||||
</Tag>
|
||||
@@ -1,39 +0,0 @@
|
||||
type WidgetProps = {
|
||||
title: string;
|
||||
badge?: string | number;
|
||||
meta?: string;
|
||||
as?: "section" | "div" | "article";
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function Widget({
|
||||
title,
|
||||
badge,
|
||||
meta,
|
||||
as: Tag = "section",
|
||||
className,
|
||||
children,
|
||||
}: WidgetProps) {
|
||||
const slashIdx = title.lastIndexOf("/");
|
||||
const prefix = slashIdx >= 0 ? title.slice(0, slashIdx + 1) : null;
|
||||
const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;
|
||||
|
||||
return (
|
||||
<Tag className={`mb-4lh ${className ?? ""}`}>
|
||||
<div className="flex items-center gap-1ch mb-2lh">
|
||||
{prefix && (
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
|
||||
)}
|
||||
<span className="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
|
||||
{badge !== undefined && (
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
|
||||
)}
|
||||
{meta && (
|
||||
<span className="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user