---
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-medium tracking-[-2px] lowercase sm:tracking-[-4px]"
  >
    <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
    <Link href="/projects/camouflage-store" class="underline underline-offset-2"
      >family run business</Link
    >.
  </div>
  <div class="text-tertiary text-lg font-medium">
    Want to chat?
    <Link
      href="mailto:hello@troylusty.com"
      class="lowercase underline underline-offset-2"
    >
      Send me a message
    </Link>
  </div>
  <div id="social-links" class="flex flex-row gap-4">
    {
      SITE.LINKS.map((i) => (
        <Link
          href={i.href}
          class="text-tertiary hover:text-accent text-lg font-medium lowercase underline-offset-2 hover:underline"
        >
          {i.name}
        </Link>
      ))
    }
  </div>
</section>