---
import Layout from "@layouts/Layout.astro";
import { SITE, ABOUT } from "@consts";
import { Image } from "astro:assets";
import { Icon } from "astro-icon/components";
import Link from "@components/Link.astro";
import { createSlug } from "@lib/utils";

import me from "@assets/me.jpg";
import camoicon from "@assets/camouflage-store.png";
import nisaicon from "@assets/nisa.png";
import pphicon from "@assets/paigntonpicturehouse.png";
import webbossicon from "@assets/webboss.png";

import uopicon from "@assets/uop.png";
import ucsdicon from "@assets/ucsd.png";
import sdcicon from "@assets/sdc.png";
import keviccicon from "@assets/kevicc.png";

const projects = [
  {
    id: 1,
    name: "MUST FIND BEANS",
    description:
      "A fast-paced first person shooter set following the realization that you’re all out of beans. The problem is, you’re nearing the end of cooking all the other items and you can’t just not have them. Without beans, the day just won’t be started off right.",
    tags: ["Godot", "Blender", "GIMP", "Steamworks"],
    link: "/projects/must-find-beans",
    print_link: "https://troylusty.com/projects/must-find-beans",
    done: false,
  },
  {
    id: 2,
    name: "Sinkie Soldiers",
    description:
      "Keep control of the castle, but more importantly: your armour.",
    tags: ["Unreal Engine", "Blender", "GIMP", "FL Studio", "Inkscape"],
    link: "/projects/sinkie-soldiers",
    print_link: "https://troylusty.com/projects/sinkie-soldiers",
    done: true,
  },
  {
    id: 3,
    name: "troylusty.com",
    description:
      "My personal website made using Astro as a way to show off my portfolio of work and display blog posts.",
    tags: [
      "Astro",
      "Tailwind CSS",
      "TypeScript",
      "Self-hosted Forgejo Actions",
      "Docker",
    ],
    link: "https://code.threepop.com/troy/troylusty.com",
    print_link: "https://code.threepop.com/troy/troylusty.com",
    done: true,
  },
  {
    id: 4,
    name: "Artwork",
    description:
      "A collection of digital artwork created with a variety of tools.",
    tags: ["Blender", "Cinema 4D", "DaVinci Resolve"],
    link: "/projects",
    print_link: "https://troylusty.com/projects",
    done: true,
  },
  {
    id: 5,
    name: "Packard",
    description:
      "Packard is a simple terminal based RSS aggregator meant to allow you to take a quick glance at what’s occurring in topics you care about.",
    tags: ["Rust", "Tokio", "Clap", "NixOS Flake"],
    link: "/projects/packard",
    print_link: "https://troylusty.com/projects/packard",
    done: true,
  },
];
const sortedProjects = [...projects].sort((a, b) => a.id - b.id);

const experience = [
  {
    id: 1,
    name: "Camouflage Store",
    image: camoicon,
    role: "E-commerce management",
    date: "2020 - Now",
    link: "/projects/camouflage-store",
  },
  {
    id: 2,
    name: "Nisa",
    image: nisaicon,
    role: "Promotional graphic design",
    date: "2022",
  },
  {
    id: 3,
    name: "Paignton Picture House Trust",
    image: pphicon,
    role: "Photogrammetrist (Volunteering)",
    date: "2023",
  },
  {
    id: 4,
    name: "WebBoss",
    image: webbossicon,
    role: "Website mock-up templates (Work experience)",
    date: "2019",
  },
];
const sortedExperience = [...experience].sort((a, b) => a.id - b.id);

const education = [
  {
    id: 1,
    name: "University of Plymouth",
    image: uopicon,
    course: "BA (Hons) Game Arts and Design",
    date: "2024 - 2025",
    grade: "First Class Honours",
  },
  {
    id: 2,
    name: "University Centre South Devon",
    image: ucsdicon,
    course: "FdA Games and Interactive Design",
    date: "2022 - 2024",
  },
  {
    id: 3,
    name: "South Devon College",
    image: sdcicon,
    course:
      "UAL Level 3 Extended Diploma in Creative Media Production and Technology",
    date: "2020 - 2022",
  },
  {
    id: 4,
    name: "King Edward VI Community College",
    image: keviccicon,
    course:
      "Art & Design BTEC, Computer Science A-level, 10 GCSEs, Creative iMedia Level 2",
    date: "2014 - 2020",
  },
];
const sortedEducation = [...education].sort((a, b) => a.id - b.id);
---

<Layout title={SITE.TITLE} description={ABOUT.DESCRIPTION}>
  <div class="animate-reveal flex items-center justify-between opacity-0">
    <div class="flex-1 space-y-1.5">
      <h1
        class="animate-reveal flex flex-col text-start text-3xl font-semibold opacity-0 sm:block"
      >
        <span class="text-secondary text-nowrap">{SITE.AUTHOR}</span><span
          class="text-tertiary sm:ml-2">Digital designer.</span
        >
      </h1>
      <p class="text-secondary/70 max-w-md text-pretty">
        <Link
          class="decoration-tertiary inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline hover:decoration-2 hover:underline-offset-2"
          href="https://www.google.com/maps/place/Devon"
        >
          <Icon name="mdi:earth" class="h-3 w-3" />
          Devon, United Kingdom, GMT
        </Link>
      </p><div class="text-secondary/70 flex gap-x-1 pt-1 text-sm print:hidden">
        <Link
          href="/"
          aria-label="Website"
          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
        >
          <Icon name="mdi:web" class="h-4 w-4" />
        </Link>
        <Link
          href={`mailto:${SITE.EMAIL}`}
          aria-label="Email"
          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
        >
          <Icon name="mdi:email" class="h-4 w-4" />
        </Link>
        <Link
          href="https://code.threepop.com/explore"
          aria-label="Git"
          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
        >
          <Icon name="mdi:git" class="h-4 w-4" />
        </Link>
        <Link
          href="https://store.steampowered.com/developer/troy"
          aria-label="Steam"
          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
        >
          <Icon name="mdi:steam" class="h-4 w-4" />
        </Link>
      </div>
      <p
        class="text-secondary/70 hidden max-w-md items-center text-pretty print:flex"
      >
        <Link
          class="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline"
          href={`mailto:${SITE.EMAIL}`}
        >
          <Icon name="mdi:email" class="h-3 w-3" />
          {SITE.EMAIL}
        </Link>
      </p>
    </div><span
      class="relative flex h-28 w-28 shrink-0 overflow-hidden rounded-sm"
    >
      <Image
        src={me}
        alt={SITE.AUTHOR}
        class="aspect-square h-full w-full"
        loading="eager"
      />
    </span>
  </div>

  <section class="animate-reveal opacity-0 [animation-delay:0.1s]">
    <p class="text-secondary/70 text-lg font-medium">
      I’m a recent <a
        href="#education"
        class="text-secondary decoration-tertiary underline hover:no-underline"
        >Game Arts and Design</a
      > graduate with a chosen area of focus on the design, lighting, and rendering
      of 3D environments. Using either real-time or offline rendering techniques
      in software packages such as Blender, Unreal Engine, and more recently: Godot.
      In addition to this I also have interests in web development, graphic design,
      and cyber security in addition to motorbike touring. An up-to-date portfolio
      of my work can be found on my website at <a
        href="/projects"
        class="text-secondary decoration-tertiary underline hover:no-underline"
        >troylusty.com/projects</a
      >.
    </p>
  </section>

  <section class="animate-reveal opacity-0 [animation-delay:0.2s] print:hidden">
    <div
      class="flex flex-col-reverse justify-between gap-5 rounded-sm bg-yellow-200/20 p-6 transition-transform duration-300 hover:scale-102 md:flex-row dark:bg-yellow-900/20"
    >
      <div class="flex flex-col gap-4">
        <h3 class="text-secondary text-3xl font-medium">
          Ready to make something cool?
        </h3>
        <p class="text-secondary/70">
          Do you think I'd be a good fit to help out on a project you're working
          on, or maybe just want to chat? <Link
            href={`mailto:${SITE.EMAIL}`}
            class="decoration-tertiary underline hover:no-underline"
          >
            Send me an email!</Link
          >
        </p>
      </div>
      <div class="flex items-center">
        <Icon
          name="mdi:handshake"
          class="h-26 w-auto rounded-full bg-yellow-200/70 p-1 text-yellow-600 dark:bg-yellow-900/70 dark:text-yellow-400"
        />
      </div>
    </div>
  </section>

  <section
    id="education"
    class="animate-reveal opacity-0 [animation-delay:0.3s]"
  >
    <h2 class="text-2xl font-semibold">Education</h2>
    <div class="mt-3 flex flex-col gap-3">
      {
        sortedEducation.map((education) => (
          <div class="bg-tertiary/10 flex items-center justify-between gap-2 rounded-sm p-3 transition-transform duration-300 hover:-translate-y-1">
            <div class="flex items-center gap-2">
              <Image
                src={education.image}
                alt={education.name}
                class="h-auto max-w-12 rounded-sm"
                loading="eager"
              />
              <p class="font-medium">
                {education.course},
                <span class="text-secondary/70">{education.name}</span>
              </p>
            </div>
            <div class="text-right">
              <p class="font-mono text-sm font-light text-nowrap">
                {education.date}
              </p>
              {education.grade ? (
                <p class="font-mono text-xs font-light">{education.grade}</p>
              ) : null}
            </div>
          </div>
        ))
      }
    </div>
    <div class="flex flex-wrap gap-2">
      <div
        class="mt-3 flex w-fit items-center gap-2 rounded-full bg-green-200/20 p-2 transition-transform duration-300 hover:scale-102 hover:-rotate-2 dark:bg-green-900/20"
      >
        <Icon
          name="mdi:check-decagram-outline"
          class="h-auto w-8 rounded-full bg-green-200/70 p-0.5 text-green-600 dark:bg-green-900/70 dark:text-green-400"
        />
        <p>Full drivers licence (A & B)</p>
      </div>
      <div
        class="mt-3 flex w-fit items-center gap-2 rounded-full bg-cyan-200/20 p-2 transition-transform duration-300 hover:scale-102 hover:-rotate-2 dark:bg-cyan-900/20"
      >
        <Icon
          name="mdi:water"
          class="h-auto w-8 rounded-full bg-cyan-200/70 p-0.5 text-cyan-600 dark:bg-cyan-900/70 dark:text-cyan-400"
        />
        <p>Lifesaving certification</p>
      </div>
    </div>
  </section>

  <section
    id="experience"
    class="animate-reveal opacity-0 [animation-delay:0.4s]"
  >
    <h2 class="text-2xl font-semibold">Experience</h2>
    <div class="mt-3 flex flex-col gap-3">
      {
        sortedExperience.map((experience) => (
          <div class="bg-tertiary/10 flex items-center justify-between gap-2 rounded-sm p-3 transition-transform duration-300 hover:-translate-y-1">
            <div class="flex items-center gap-2">
              <Image
                src={experience.image}
                alt={experience.name}
                class="h-auto max-w-12 rounded-sm"
                loading="eager"
              />
              <p class="font-medium">
                {experience.role},
                {experience.link ? (
                  <Link
                    href={experience.link}
                    class="text-secondary/70 decoration-tertiary underline hover:no-underline"
                  >
                    {experience.name}
                  </Link>
                ) : (
                  <span class="text-secondary/70">{experience.name}</span>
                )}
              </p>
            </div>
            <p class="font-mono text-sm font-light text-nowrap">
              {experience.date}
            </p>
          </div>
        ))
      }
    </div>
  </section>

  <section
    id="projects"
    class="animate-reveal opacity-0 [animation-delay:0.5s]"
  >
    <h2 class="text-2xl font-semibold">Projects</h2>
    <ol class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2 print:grid-cols-2">
      {
        sortedProjects.map((project) => (
          <li class="bg-tertiary/10 flex flex-col overflow-hidden rounded-sm p-3 transition-transform duration-300 hover:scale-102">
            <div class="flex flex-col space-y-1.5">
              <div class="space-y-1">
                <>
                  <h3 class="mt-0 text-base font-semibold tracking-tight">
                    <Link
                      href={project.link}
                      class="decoration-tertiary inline-flex items-center gap-1 font-medium underline hover:no-underline"
                    >
                      {project.done ? (
                        <span class="mr-1 h-1.5 w-1.5 rounded-full bg-green-600 dark:bg-green-400" />
                      ) : (
                        <span class="mr-1 h-1.5 w-1.5 rounded-full bg-amber-600 dark:bg-amber-400" />
                      )}
                      {project.name}
                    </Link>
                  </h3>
                  <p class="text-secondary/70 text-sm">{project.description}</p>
                  <p class="text-secondary/40 hidden text-xs print:block">
                    Available at {project.print_link}.
                  </p>
                </>
              </div>
            </div>
            <div class="mt-auto flex text-sm text-pretty">
              <div class="mt-2 flex flex-wrap gap-1">
                {project.tags.map((tag) => (
                  <a
                    href={`/tags/${createSlug(tag)}`}
                    class="bg-button text-secondary hover:bg-button-active decoration-tertiary flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center font-sans text-xs font-light text-nowrap capitalize no-underline transition-colors duration-300"
                  >
                    {tag}
                  </a>
                ))}
              </div>
            </div>
          </li>
        ))
      }
    </ol>
  </section>
</Layout>
