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

refactor(ui): enforce terminal metaphor, unify secondary opacity

Browse Source 
- drop headshot photo (coherence break vs. full terminal aesthetic)
- replace FA icons with plain-text brackets ([github], [linkedin], [email])
- remove Font Awesome CDN dependency
- nav logo tk → ~/; theme toggle fa-sun/fa-moon → [light]/[dark]
- reorder home sections: projects before skills/journey
- add font-mono + opacity-70 to timeline descriptions (#2 bug + #8 polish)
- uniform opacity-70 across hero bio, project desc, timeline desc
- add hover:bg-surface-raised to ProjectCard article
- drop journey badge count (noise)
- change status ● online → ● available
This commit is contained in:
lerko96
2026-04-16 18:01:19 -04:00
parent 7d9b300d84
commit 6d0b4e29d8
7 changed files with 183 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/layout.tsx
View File

@@ -27,12 +27,6 @@ export default function RootLayout({
<html lang="en" className="dark"> <html lang="en" className="dark">
<head> <head>
<ThemeScript /> <ThemeScript />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
crossOrigin="anonymous"
referrerPolicy="no-referrer"
/>
</head> </head>
<body <body
className={`${sourceCodePro.variable} bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen`} className={`${sourceCodePro.variable} bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen`}

6
src/app/page.tsx
View File

@@ -1,6 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import Hero from "@/components/Hero"; import Hero from "@/components/Hero";
import Skills from "@/components/Skills"; import Skills from "@/components/Skills";
import Timeline from "@/components/Timeline";
import ProjectCard from "@/components/ProjectCard"; import ProjectCard from "@/components/ProjectCard";
import Widget from "@/components/Widget"; import Widget from "@/components/Widget";
import { featuredProjects } from "@/data/projects"; import { featuredProjects } from "@/data/projects";
@@ -15,14 +16,15 @@ export default function Home() {
return ( return (
<> <>
<Hero /> <Hero />
<Skills /> <Widget title="tyler/projects" badge={featuredProjects.length}>
<Widget title="projects" badge={featuredProjects.length}>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{featuredProjects.map((project) => ( {featuredProjects.map((project) => (
<ProjectCard key={project.slug} project={project} /> <ProjectCard key={project.slug} project={project} />
))} ))}
</div> </div>
</Widget> </Widget>
<Skills />
<Timeline />
</> </>
); );
} }

12
src/components/Footer.tsx
View File

@@ -2,7 +2,7 @@ export default function Footer() {
return ( return (
<footer className="border-t border-[var(--color-border)] py-5 mt-8"> <footer className="border-t border-[var(--color-border)] py-5 mt-8">
<div className="px-8 flex items-center justify-between"> <div className="px-8 flex items-center justify-between">
<span className="font-mono text-xs text-[var(--color-text-dim)]"> <span className="font-mono text-sm text-[var(--color-text-dim)]">
&copy; {new Date().getFullYear()} Tyler Koenig &copy; {new Date().getFullYear()} Tyler Koenig
</span> </span>
<div className="flex items-center gap-5"> <div className="flex items-center gap-5">
@@ -11,20 +11,18 @@ export default function Footer() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label="GitHub" aria-label="GitHub"
className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]" className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
> >
<i className="fab fa-github mr-1.5" aria-hidden="true" /> [github]
github
</a> </a>
<a <a
href="https://www.linkedin.com/in/tyler-koenig" href="https://www.linkedin.com/in/tyler-koenig"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label="LinkedIn" aria-label="LinkedIn"
className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]" className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
> >
<i className="fab fa-linkedin mr-1.5" aria-hidden="true" /> [linkedin]
linkedin
</a> </a>
</div> </div>
</div> </div>

49
src/components/Hero.tsx
View File

@@ -1,77 +1,56 @@
import Image from "next/image";
export default function Hero() { export default function Hero() {
return ( return (
<section className="mb-16"> <section className="mb-16">
{/* Section header */}
<div className="flex items-center gap-3 mb-6">
<span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
identity
</span>
<div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
</div>
<div className="flex items-start gap-5">
<Image
src="/images/headshot-tyler_koenig.png"
alt="Tyler Koenig"
width={56}
height={56}
className="shrink-0 object-cover"
priority
/>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div> <div>
<p className="font-mono text-base font-bold text-[var(--color-text)]"> <p className="font-mono text-base font-bold text-[var(--color-text)]">
Tyler Koenig <span className="text-[var(--color-accent-green)] select-none mr-2" aria-hidden="true">❯</span>
tyler koenig
</p> </p>
<p className="font-mono text-xs text-[var(--color-text-label)] mt-0.5"> <p className="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
SOC Helpdesk I · Homelab Operator SOC Helpdesk I · Homelab Operator
</p> </p>
</div> </div>
<p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-lg opacity-80"> <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-lg opacity-70">
I write software and run infrastructure that goes well past what my I write software and run infrastructure that goes well past what my
job title implies. Games, AI tooling, mobile apps, and a homelab job title implies. Games, AI tooling, mobile apps, and a homelab
running 20+ self-hosted services on segmented VLANs. Continuously running 20+ self-hosted services on segmented VLANs. Continuously
learning by building things that actually work. learning by building things that actually work.{' '}
<span className="animate-cursor text-[var(--color-accent-green)]" aria-hidden="true">█</span>
</p> </p>
<div className="flex flex-wrap items-center gap-x-5 gap-y-1"> <div className="flex flex-wrap items-center gap-x-5 gap-y-1">
<span className="font-mono text-xs text-[var(--color-accent-green)]"> <span className="font-mono text-sm text-[var(--color-accent-green)]">
● online ● available
</span> </span>
<a <a
href="https://github.com/lerko96" href="https://github.com/lerko96"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label="GitHub" aria-label="GitHub"
className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]" className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
> >
<i className="fab fa-github mr-1.5" aria-hidden="true" /> [github]
github
</a> </a>
<a <a
href="https://www.linkedin.com/in/tyler-koenig" href="https://www.linkedin.com/in/tyler-koenig"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label="LinkedIn" aria-label="LinkedIn"
className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]" className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
> >
<i className="fab fa-linkedin mr-1.5" aria-hidden="true" /> [linkedin]
linkedin
</a> </a>
<a <a
href="mailto:tylerkoenig96@gmail.com" href="mailto:tylerkoenig96@gmail.com"
aria-label="Email" aria-label="Email"
className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]" className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
> >
@ email [email]
</a> </a>
</div> </div>
</div> </div>
</div>
</section> </section>
); );
} }

21
src/components/Nav.tsx
View File

@@ -2,26 +2,28 @@
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useTheme } from "@/context/ThemeContext";
const links = [ const links = [
{ href: "/", label: "home" }, { href: "/", label: "tyler" },
{ href: "/homelab/", label: "homelab" }, { href: "/homelab/", label: "homelab" },
{ href: "/archive/", label: "archive" }, { href: "/archive/", label: "archive" },
]; ];
export default function Nav() { export default function Nav() {
const pathname = usePathname(); const pathname = usePathname();
const { isDark, toggle } = useTheme();
return ( return (
<header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]"> <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-8 h-11 flex items-center justify-between"> <nav className="max-w-[740px] mx-auto px-8 h-11 flex items-center justify-between">
<Link <Link
href="/" href="/"
className="font-mono text-sm font-bold text-[var(--color-text)] tracking-widest hover:text-[var(--color-text-label)]" className="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
> >
tk ~/
</Link> </Link>
<ul className="flex gap-6"> <ul className="flex items-center gap-6">
{links.map(({ href, label }) => { {links.map(({ href, label }) => {
const active = const active =
pathname === href || pathname === href.replace(/\/$/, ""); pathname === href || pathname === href.replace(/\/$/, "");
@@ -30,7 +32,7 @@ export default function Nav() {
<Link <Link
href={href} href={href}
aria-current={active ? "page" : undefined} aria-current={active ? "page" : undefined}
className={`font-mono text-xs tracking-widest ${ className={`font-mono text-sm ${
active active
? "text-[var(--color-text)]" ? "text-[var(--color-text)]"
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]" : "text-[var(--color-text-label)] hover:text-[var(--color-text)]"
@@ -41,6 +43,15 @@ export default function Nav() {
</li> </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> </ul>
</nav> </nav>
</header> </header>

10
src/components/ProjectCard.tsx
View File

@@ -6,7 +6,7 @@ type Props = {
export default function ProjectCard({ project }: Props) { export default function ProjectCard({ project }: Props) {
return ( return (
<article className="border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-bright)] flex flex-col gap-4 p-5"> <article className="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-4 p-5 hover:bg-[var(--color-surface-raised)]">
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<a <a
href={project.githubUrl} href={project.githubUrl}
@@ -18,7 +18,7 @@ export default function ProjectCard({ project }: Props) {
</a> </a>
<div className="flex items-center gap-3 shrink-0"> <div className="flex items-center gap-3 shrink-0">
{project.stats && ( {project.stats && (
<span className="font-mono text-xs text-[var(--color-text-dim)]"> <span className="font-mono text-sm text-[var(--color-text-dim)]">
{project.stats} {project.stats}
</span> </span>
)} )}
@@ -27,18 +27,18 @@ export default function ProjectCard({ project }: Props) {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label={`View ${project.title} on GitHub`} aria-label={`View ${project.title} on GitHub`}
className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]" className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
> >
↗ ↗
</a> </a>
</div> </div>
</div> </div>
<p className="font-sans text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-75"> <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
{project.description} {project.description}
</p> </p>
<div className="flex flex-wrap gap-x-3 gap-y-1 pt-2 border-t border-[var(--color-border)]"> <div className="flex flex-wrap gap-x-3 gap-y-1 mt-1">
{project.tags.map((tag) => ( {project.tags.map((tag) => (
<span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]"> <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
{tag} {tag}

107
src/components/Timeline.tsx Normal file
View File

@@ -0,0 +1,107 @@
'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-1.5 flex flex-col gap-0">
{timeline.map((entry, i) => (
<li key={i} data-tl-entry className="pl-6 pb-8 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-2 mb-1">
<span className="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
<span
className="font-mono text-[10px] uppercase tracking-wider px-1 rounded-sm 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-1">
{entry.title}
</p>
{/* Description */}
<p className="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-2">
{entry.description}
</p>
{/* Tags */}
{entry.tags && entry.tags.length > 0 && (
<div className="flex flex-wrap gap-x-3 gap-y-1">
{entry.tags.map((tag) => (
<span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
{tag}
</span>
))}
</div>
)}
</li>
))}
</ol>
</Widget>
)
}