363 lines
12 KiB
Text
363 lines
12 KiB
Text
---
|
||
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 "./me.jpg";
|
||
import camoicon from "./camouflage-store.png";
|
||
import nisaicon from "./nisa.png";
|
||
import pphicon from "./paigntonpicturehouse.png";
|
||
import webbossicon from "./webboss.png";
|
||
|
||
import uopicon from "./uop.png";
|
||
import ucsdicon from "./ucsd.png";
|
||
import sdcicon from "./sdc.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",
|
||
done: false,
|
||
},
|
||
{
|
||
id: 2,
|
||
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",
|
||
done: true,
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "Artwork",
|
||
description:
|
||
"A collection of digital artwork created with a variety of tools.",
|
||
tags: ["Blender", "Cinema 4D", "DaVinci Resolve"],
|
||
link: "/projects",
|
||
done: true,
|
||
},
|
||
{
|
||
id: 4,
|
||
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",
|
||
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",
|
||
link: "https://www.nisalocally.co.uk",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "WebBoss",
|
||
image: webbossicon,
|
||
role: "Website mock-up templates (Work experience)",
|
||
date: "2019",
|
||
link: "https://webboss.io",
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "Paignton Picture House Trust",
|
||
image: pphicon,
|
||
role: "Photogrammetrist (Volunteering)",
|
||
date: "2023",
|
||
link: "https://paigntonpicturehouse.org",
|
||
},
|
||
];
|
||
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 - Now",
|
||
},
|
||
{
|
||
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",
|
||
},
|
||
];
|
||
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="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline"
|
||
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="/"
|
||
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:link-variant" title="Website" class="h-4 w-4" />
|
||
</Link>
|
||
<Link
|
||
href={`mailto:${SITE.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" title="Email" class="h-4 w-4" />
|
||
</Link>
|
||
<Link
|
||
href="https://code.threepop.com"
|
||
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" title="Git" class="h-4 w-4" />
|
||
</Link>
|
||
<Link
|
||
href="https://store.steampowered.com/developer/troy"
|
||
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" title="Steamworks" class="h-4 w-4" />
|
||
</Link>
|
||
</div>
|
||
<p
|
||
class="text-secondary/70 hidden max-w-md items-center text-sm text-pretty print:flex"
|
||
>
|
||
<Link
|
||
class="inline-flex 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="Troy Lusty"
|
||
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 <a
|
||
href="#education"
|
||
class="text-secondary underline decoration-2 underline-offset-2 hover:no-underline"
|
||
>Game Arts and Design</a
|
||
> degree student 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 and Unreal Engine. In addition to this
|
||
I also have an interest in web development, graphic design, and cyber security
|
||
which make up a large part of my hobbies ...oh and motorbikes. If you're reading
|
||
this offline, my portfolio of work can be found on my website at <a
|
||
href="/projects"
|
||
class="text-secondary underline decoration-2 underline-offset-2 hover:no-underline"
|
||
>troylusty.com/projects</a
|
||
>.
|
||
</p>
|
||
</section>
|
||
|
||
<section class="animate-reveal opacity-0 [animation-delay:0.2s]">
|
||
<div
|
||
class="flex justify-between gap-5 rounded-sm bg-orange-200/20 p-6 transition-transform duration-300 hover:scale-101 dark:bg-orange-900/20"
|
||
>
|
||
<div class="flex w-3/4 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:hello@troylusty.com"
|
||
class="underline decoration-2 underline-offset-2 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-orange-200/70 p-1 text-orange-600 dark:bg-orange-900/70 dark:text-orange-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/20 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-12 w-auto rounded-sm"
|
||
loading="eager"
|
||
/>
|
||
<p class="font-medium">
|
||
{education.course},
|
||
<span class="text-secondary/70">{education.name}</span>
|
||
</p>
|
||
</div>
|
||
<p class="font-mono text-sm font-light text-nowrap">
|
||
{education.date}
|
||
</p>
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
<div
|
||
class="mt-3 flex w-fit items-center gap-2 rounded-full bg-green-200/20 px-3 py-1.5 dark:bg-green-900/20"
|
||
>
|
||
<Icon
|
||
name="mdi:check-decagram-outline"
|
||
class="h-auto w-6 rounded-full bg-green-200/70 p-0.5 text-green-600 dark:bg-green-900/70 dark:text-green-400"
|
||
/>
|
||
<p class="text-sm">Full drivers licence (A & B)</p>
|
||
</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/20 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">
|
||
<Link href={experience.link}>
|
||
<Image
|
||
src={experience.image}
|
||
alt={experience.name}
|
||
class="h-12 w-auto rounded-sm"
|
||
loading="eager"
|
||
/>
|
||
</Link>
|
||
<p class="font-medium">
|
||
{experience.role},
|
||
<Link
|
||
href={experience.link}
|
||
class="text-secondary/70 underline hover:no-underline"
|
||
>
|
||
{experience.name}
|
||
</Link>
|
||
</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/20 flex flex-col overflow-hidden rounded-sm p-3">
|
||
<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="inline-flex items-center gap-1 font-medium underline hover:no-underline"
|
||
>
|
||
{project.done ? (
|
||
<span class="mr-1 h-1 w-1 rounded-full bg-green-500" />
|
||
) : (
|
||
<span class="mr-1 h-1 w-1 rounded-full bg-amber-500" />
|
||
)}
|
||
{project.name}
|
||
</Link>
|
||
</h3>
|
||
<p class="text-secondary/70 text-sm">{project.description}</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 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>
|