rebuild portfolio: Next.js 16, React 19, Tailwind v4, homelab page, CI/CD

src/components/Hero.tsx

@@ -0,0 +1,64 @@
+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>
+  );
+}