65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
import Image from "next/image";
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="flex flex-col sm:flex-row items-center sm:items-start gap-8 mb-20">
|
|
<div className="shrink-0">
|
|
<Image
|
|
src="/images/headshot-tyler_koenig.png"
|
|
alt="Tyler Koenig"
|
|
width={120}
|
|
height={120}
|
|
className="rounded-full border-2 border-[var(--color-green-darker)]"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4 text-center sm:text-left">
|
|
<div>
|
|
<h1 className="font-mono text-2xl font-bold text-[var(--color-text-light)] tracking-wide">
|
|
Tyler Koenig
|
|
</h1>
|
|
<p className="font-mono text-sm text-[var(--color-green)] tracking-widest uppercase mt-1">
|
|
SOC Helpdesk I by day, building beyond the title
|
|
</p>
|
|
</div>
|
|
|
|
<p className="text-[var(--color-grey-3)] text-sm leading-relaxed max-w-lg">
|
|
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.
|
|
</p>
|
|
|
|
<div className="flex items-center gap-5 justify-center sm:justify-start">
|
|
<a
|
|
href="https://github.com/lerko96"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="GitHub"
|
|
className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
|
|
>
|
|
<i className="fab fa-github text-xl" aria-hidden="true" />
|
|
</a>
|
|
<a
|
|
href="https://www.linkedin.com/in/tyler-koenig"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="LinkedIn"
|
|
className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
|
|
>
|
|
<i className="fab fa-linkedin text-xl" aria-hidden="true" />
|
|
</a>
|
|
<a
|
|
href="mailto:tylerkoenig96@gmail.com"
|
|
aria-label="Email"
|
|
className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
|
|
>
|
|
<i className="fas fa-envelope text-xl" aria-hidden="true" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|