refactor(ui): enforce terminal metaphor, unify secondary opacity
- 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
@@ -1,75 +1,54 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<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>
|
||||
<p className="font-mono text-base font-bold text-[var(--color-text)]">
|
||||
Tyler Koenig
|
||||
</p>
|
||||
<p className="font-mono text-xs text-[var(--color-text-label)] mt-0.5">
|
||||
SOC Helpdesk I · Homelab Operator
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-lg opacity-80">
|
||||
I write software and run infrastructure that goes well past what my
|
||||
job title implies. Games, AI tooling, mobile apps, and a homelab
|
||||
running 20+ self-hosted services on segmented VLANs. Continuously
|
||||
learning by building things that actually work.
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<p className="font-mono text-base font-bold text-[var(--color-text)]">
|
||||
<span className="text-[var(--color-accent-green)] select-none mr-2" aria-hidden="true">❯</span>
|
||||
tyler koenig
|
||||
</p>
|
||||
<p className="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
|
||||
SOC Helpdesk I · Homelab Operator
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-5 gap-y-1">
|
||||
<span className="font-mono text-xs text-[var(--color-accent-green)]">
|
||||
● online
|
||||
</span>
|
||||
<a
|
||||
href="https://github.com/lerko96"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub"
|
||||
className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
<i className="fab fa-github mr-1.5" aria-hidden="true" />
|
||||
github
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/tyler-koenig"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
<i className="fab fa-linkedin mr-1.5" aria-hidden="true" />
|
||||
linkedin
|
||||
</a>
|
||||
<a
|
||||
href="mailto:tylerkoenig96@gmail.com"
|
||||
aria-label="Email"
|
||||
className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
@ email
|
||||
</a>
|
||||
</div>
|
||||
<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
|
||||
job title implies. Games, AI tooling, mobile apps, and a homelab
|
||||
running 20+ self-hosted services on segmented VLANs. Continuously
|
||||
learning by building things that actually work.{' '}
|
||||
<span className="animate-cursor text-[var(--color-accent-green)]" aria-hidden="true">█</span>
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-5 gap-y-1">
|
||||
<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://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:tylerkoenig96@gmail.com"
|
||||
aria-label="Email"
|
||||
className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
[email]
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user