troylusty.com/src/components/Hero.astro
2025-02-17 00:14:50 +00:00

43 lines
1.5 KiB
Text

---
import { SITE } from "@consts";
import Link from "@components/Link.astro";
---
<section class="animate-reveal flex flex-col gap-6 opacity-0">
<h1
class="flex w-full flex-col text-start text-7xl leading-[1] font-semibold tracking-[-2px] lowercase"
>
<span class="text-nowrap">Troy Lusty</span>
<span class="text-tertiary text-pretty">Digital Designer</span>
</h1>
<div class="text-secondary/70 text-lg font-medium">
I am in my final year of studying on a Game Arts and Design BA (Hons) degree
and on the side I manage online operations for a family run
<a
href="/projects/camouflage-store"
class="hover:text-gradient-start hover:decoration-gradient-start underline decoration-wavy underline-offset-2 transition-colors duration-300"
>outdoor apparel business</a
>.
</div>
<div class="text-tertiary text-lg font-medium">
Think I could help with a project you're working on?
<Link
href="mailto:hello@troylusty.com"
class="hover:text-secondary lowercase underline decoration-wavy underline-offset-2 transition-colors duration-300"
>
Send me a message
</Link>
</div>
<div class="flex flex-row gap-4">
{
SITE.LINKS.map((i) => (
<Link
href={i.href}
class="text-tertiary hover:text-secondary text-lg font-medium lowercase decoration-wavy underline-offset-2 transition-colors duration-300 hover:underline"
>
{i.name}
</Link>
))
}
</div>
</section>