Files
portfolio/src/components/Hero.tsx
lerko96 6d0b4e29d8 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
2026-04-16 18:01:19 -04:00

57 lines
2.1 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
export default function Hero() {
return (
<section className="mb-16">
<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>
<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>
);
}