---
import Layout from "@layouts/Layout.astro";
import { SITE, ABOUT } from "@consts";
import { Icon } from "astro-icon/components";
import Link from "@components/Link.astro";
import AboutList from "@components/AboutList.astro";

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 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, and without beans the day just won’t be started off right. This game is very early in development but there is a public playtest available on Steam.",
    tags: [
      "Godot",
      "Blender",
      "GIMP",
      "Steamworks",
      "Git version control",
      "Performance optimisation",
      "GDScript",
    ],
    link: "/projects/must-find-beans",
    print_link: "https://troylusty.com/projects/must-find-beans",
    done: false,
  },
  {
    id: 2,
    name: "Sinkie Soldiers",
    description:
      "Sinkie Soldiers is a local co-op versus game in which you battle against your friends for control of the castle! This started off as a game jam submission but is being polished up and published onto Steam.",
    tags: [
      "Unreal Engine",
      "Blender",
      "GIMP",
      "FL Studio",
      "Inkscape",
      "Asset creation",
      "Team collaboration",
      "Time management",
      "Branding design",
    ],
    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, display blog posts, and host my CV.",
    tags: [
      "Astro",
      "Tailwind CSS",
      "TypeScript",
      "Self-hosted Forgejo Actions",
      "Docker",
      "CI/CD",
      "Open source",
    ],
    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 to showcase software proficiency and develop skills.",
    tags: [
      "Blender",
      "Cinema 4D",
      "Houdini",
      "DaVinci Resolve",
      "Image manipulation",
      "Environment design",
      "Lighting",
      "Cycles",
      "EEVEE",
    ],
    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", "NixOS Flake", "Command-line interaction"],
    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,
    location: "Camouflage Store",
    image: camoicon,
    main: "E-commerce management",
    date: "2020 - Now",
    link: "/projects/camouflage-store",
  },
  {
    id: 2,
    location: "Paignton Picture House Trust",
    image: pphicon,
    main: "Photogrammetrist (Volunteer)",
    date: "2023",
  },
  {
    id: 3,
    location: "Nisa",
    image: nisaicon,
    main: "Promotional graphic design",
    date: "2022",
  },
  {
    id: 4,
    location: "WebBoss",
    image: webbossicon,
    main: "Website template design (Work experience)",
    date: "2019",
  },
];
const sortedExperience = [...experience].sort((a, b) => a.id - b.id);

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

const links = [
  {
    id: 1,
    label: "Website",
    icon: "mdi:web",
    href: "/",
  },
  {
    id: 2,
    label: "Email",
    icon: "mdi:email",
    href: `mailto:${SITE.EMAIL}`,
  },
  {
    id: 3,
    label: "Git",
    icon: "mdi:git",
    href: "https://code.threepop.com/explore",
  },
  {
    id: 4,
    label: "Steam",
    icon: "mdi:steam",
    href: "https://store.steampowered.com/developer/troy",
  },
  {
    id: 5,
    label: "LinkedIn",
    icon: "mdi:linkedin",
    href: "https://linkedin.com/in/troylusty",
  },
];
const sortedLinks = [...links].sort((a, b) => a.id - b.id);
---

<Layout title={SITE.TITLE} description={ABOUT.DESCRIPTION}>
  <section
    class="animate-reveal items-center justify-between space-y-1.5 opacity-0"
  >
    <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-5 w-auto" />
        Devon, United Kingdom, GMT
      </Link>
    </p>
    <div class="text-secondary/70 flex gap-x-2 text-sm print:hidden">
      {
        sortedLinks.map((link) => (
          <Link
            href={link.href}
            aria-label={link.label}
            class="text-tertiary hover:text-secondary items-center transition-colors duration-300"
          >
            <Icon name={link.icon} class="h-5 w-auto" />
          </Link>
        ))
      }
    </div>
    <p
      class="text-secondary/70 hidden max-w-md items-center text-pretty print:inline-flex"
    >
      <Link
        class="decoration-tertiary inline-flex items-center gap-x-1.5 align-baseline leading-none"
        href={`mailto:${SITE.EMAIL}`}
      >
        <Icon name="mdi:email" class="h-5 w-auto" />
        {SITE.EMAIL}
      </Link>
    </p>
  </section>

  <section class="animate-reveal space-y-3 opacity-0 [animation-delay:0.1s]">
    <p class="text-secondary/70 text-lg font-medium">
      As a recent <a
        href="#education"
        class="text-secondary decoration-tertiary underline hover:no-underline"
        >Game Arts and Design</a
      > graduate with a specialization in 3D environment design, I'm passionate about
      crafting compelling visuals which make use of dynamic lighting in order to
      enhance the storytelling and memorability of such a space. I have experience
      designing within Blender, Unreal Engine, and Godot, and as such possess a thorough
      understanding of both real-time and offline rendering techniques.
    </p>
    <p class="text-secondary/70 text-lg font-medium">
      My skillset extends beyond just 3D art as I'm also proficient in
      programming, leveraging Godot's GDScript for example to develop robust
      game logic and systems that complement my visual assets whilst still
      achieving high performance on the end-user's hardware.
    </p>
    <p class="text-secondary/70 text-lg font-medium">
      You can view my portfolio at <a
        href="/projects"
        class="rounded-sm border border-sky-500 bg-sky-50/20 px-1 py-0.5 text-sky-800 transition-colors duration-300 ease-in-out hover:border-sky-700 hover:bg-sky-50/80 hover:text-sky-900 dark:bg-sky-950/20 dark:text-sky-200 dark:hover:border-sky-300 dark:hover:bg-sky-950/80 dark:hover:text-sky-100"
        >troylusty.com/projects</a
      >.
    </p>
  </section>

  <section
    id="education"
    class="animate-reveal space-y-3 opacity-0 [animation-delay:0.3s]"
  >
    <h2 class="text-2xl font-semibold">Education</h2>
    <ol class="flex flex-col gap-3">
      <AboutList information={sortedEducation} />
    </ol>
  </section>

  <section
    id="experience"
    class="animate-reveal space-y-3 opacity-0 [animation-delay:0.4s]"
  >
    <h2 class="text-2xl font-semibold">Experience</h2>
    <ol class="flex flex-col gap-3">
      <AboutList information={sortedExperience} />
    </ol>
  </section>

  <section
    id="projects"
    class="animate-reveal space-y-3 opacity-0 [animation-delay:0.5s]"
  >
    <h2 class="text-2xl font-semibold">Projects</h2>
    <ol class="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">
              <h3 class="text-secondary mt-0 font-medium 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 class="flex flex-wrap gap-1 text-sm text-pretty">
              {project.tags.map((tag) => (
                <p class="bg-button text-secondary flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center text-xs font-light text-nowrap">
                  {tag}
                </p>
              ))}
            </div>
          </li>
        ))
      }
    </ol>
  </section>
</Layout>
