feat: match cv style to new site theming
This commit is contained in:
parent
907747cd8e
commit
817c3be13c
GPG key ID:
DFC06C02ED3B4711
12 changed files with 8921 additions and 1726 deletions
12
.github/workflows/test.yml
vendored
12
.github/workflows/test.yml
vendored
|
|
@ -13,11 +13,11 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout repository
|
- name: Checkout repository
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
- name: Setup Bun
|
- name: Setup Node
|
||||||
uses: oven-sh/setup-bun@v2
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
bun-version: "latest"
|
node-version: "latest"
|
||||||
- name: Run Bun install and build
|
- name: Run npm clean install and build
|
||||||
run: |
|
run: |
|
||||||
bun install --frozen-lockfile
|
npm ci
|
||||||
bun run build
|
npm run build
|
||||||
|
|
|
||||||
10
Dockerfile
10
Dockerfile
|
|
@ -1,12 +1,12 @@
|
||||||
FROM oven/bun:latest as bun
|
FROM node:latest as node
|
||||||
USER bun
|
USER node
|
||||||
WORKDIR /usr/src/app
|
WORKDIR /usr/src/app
|
||||||
|
|
||||||
COPY . .
|
COPY . .
|
||||||
|
|
||||||
RUN ["bun", "install", "--frozen-lockfile"]
|
RUN ["npm", "ci"]
|
||||||
RUN ["bunx", "--bun", "astro", "build"]
|
RUN ["npx", "astro", "build"]
|
||||||
|
|
||||||
FROM ghcr.io/static-web-server/static-web-server:latest
|
FROM ghcr.io/static-web-server/static-web-server:latest
|
||||||
WORKDIR /
|
WORKDIR /
|
||||||
COPY --from=bun /usr/src/app/dist /public
|
COPY --from=node /usr/src/app/dist /public
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { defineConfig, passthroughImageService } from "astro/config";
|
import { defineConfig } from "astro/config";
|
||||||
import sitemap from "@astrojs/sitemap";
|
import sitemap from "@astrojs/sitemap";
|
||||||
import rehypeExternalLinks from "rehype-external-links";
|
import rehypeExternalLinks from "rehype-external-links";
|
||||||
import mdx from "@astrojs/mdx";
|
import mdx from "@astrojs/mdx";
|
||||||
|
|
@ -30,7 +30,7 @@ export default defineConfig({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
image: {
|
experimental: {
|
||||||
service: passthroughImageService(),
|
responsiveImages: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
8554
package-lock.json
generated
Normal file
8554
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
26
package.json
26
package.json
|
|
@ -3,31 +3,33 @@
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "bunx --bun astro dev",
|
"dev": "npx astro dev",
|
||||||
"build": "bunx --bun astro check && bunx --bun astro build",
|
"build": "npx astro check && npx astro build",
|
||||||
"preview": "bunx --bun astro preview",
|
"preview": "npx astro preview",
|
||||||
"astro": "astro",
|
"astro": "astro",
|
||||||
"format:check": "prettier --check .",
|
"format:check": "prettier --check .",
|
||||||
"format:write": "prettier --write ."
|
"format:write": "prettier --write .",
|
||||||
|
"update": "npx npm-check-updates"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/check": "0.9.4",
|
"@astrojs/check": "0.9.4",
|
||||||
"@astrojs/mdx": "^4.0.8",
|
"@astrojs/mdx": "^4.1.0",
|
||||||
"@astrojs/rss": "^4.0.11",
|
"@astrojs/rss": "^4.0.11",
|
||||||
"@astrojs/sitemap": "3.2.1",
|
"@astrojs/sitemap": "3.2.1",
|
||||||
"@fontsource-variable/outfit": "^5.1.1",
|
"@fontsource-variable/outfit": "^5.2.5",
|
||||||
"@fontsource-variable/red-hat-mono": "^5.1.1",
|
"@fontsource-variable/red-hat-mono": "^5.2.5",
|
||||||
"@tailwindcss/vite": "^4.0.8",
|
"@tailwindcss/vite": "^4.0.9",
|
||||||
"astro": "^5.3.1",
|
"astro": "^5.4.1",
|
||||||
"astro-icon": "^1.1.5",
|
"astro-icon": "^1.1.5",
|
||||||
|
"npm-check-updates": "^17.1.15",
|
||||||
"rehype-external-links": "^3.0.0",
|
"rehype-external-links": "^3.0.0",
|
||||||
"tailwindcss": "^4.0.8",
|
"tailwindcss": "^4.0.9",
|
||||||
"typescript": "^5.7.3"
|
"typescript": "^5.8.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify-json/mdi": "^1.2.3",
|
"@iconify-json/mdi": "^1.2.3",
|
||||||
"@tailwindcss/typography": "^0.5.16",
|
"@tailwindcss/typography": "^0.5.16",
|
||||||
"@types/bun": "^1.2.3",
|
"@types/node": "^22.13.8",
|
||||||
"prettier": "^3.5.2",
|
"prettier": "^3.5.2",
|
||||||
"prettier-plugin-astro": "^0.14.1",
|
"prettier-plugin-astro": "^0.14.1",
|
||||||
"prettier-plugin-tailwindcss": "^0.6.11"
|
"prettier-plugin-tailwindcss": "^0.6.11"
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{pkgs ? import <nixpkgs> {}}:
|
{pkgs ? import <nixpkgs> {}}:
|
||||||
pkgs.mkShell {
|
pkgs.mkShell {
|
||||||
nativeBuildInputs = with pkgs.buildPackages; [
|
nativeBuildInputs = with pkgs.buildPackages; [
|
||||||
bun
|
nodejs
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,15 +9,13 @@ const currentPath = pathname.replace(/\/$/, "");
|
||||||
|
|
||||||
<header class="mx-auto w-full">
|
<header class="mx-auto w-full">
|
||||||
<nav class="flex w-full justify-between">
|
<nav class="flex w-full justify-between">
|
||||||
<div class="flex w-fit items-center justify-between">
|
<a href="/" aria-label={SITE.TITLE} title={SITE.TITLE}>
|
||||||
<a href="/" aria-label={SITE.TITLE} title={SITE.TITLE} class="group">
|
<Icon
|
||||||
<Icon
|
name="icon"
|
||||||
name="icon"
|
title={SITE.TITLE}
|
||||||
title={SITE.TITLE}
|
class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
|
||||||
class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
|
/>
|
||||||
/>
|
</a>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<ul class="flex w-fit flex-row items-center gap-4">
|
<ul class="flex w-fit flex-row items-center gap-4">
|
||||||
{
|
{
|
||||||
SITE.NAVLINKS.map((link) => {
|
SITE.NAVLINKS.map((link) => {
|
||||||
|
|
@ -27,7 +25,11 @@ const currentPath = pathname.replace(/\/$/, "");
|
||||||
<li class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden">
|
<li class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden">
|
||||||
<a
|
<a
|
||||||
href={link.href}
|
href={link.href}
|
||||||
class:list={[isActive ? "text-secondary" : null]}
|
class:list={[
|
||||||
|
isActive
|
||||||
|
? "text-secondary hover:text-tertiary transition-colors duration-300"
|
||||||
|
: null,
|
||||||
|
]}
|
||||||
>
|
>
|
||||||
{link.name}
|
{link.name}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
and on the side I manage online operations for a family run
|
and on the side I manage online operations for a family run
|
||||||
<a
|
<a
|
||||||
href="/projects/camouflage-store"
|
href="/projects/camouflage-store"
|
||||||
class="hover:text-secondary underline decoration-wavy underline-offset-2 transition-colors duration-300"
|
class="underline decoration-2 underline-offset-2 hover:no-underline"
|
||||||
>outdoor apparel business</a
|
>outdoor apparel business</a
|
||||||
>.
|
>.
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div
|
<div
|
||||||
class="prose prose-neutral dark:prose-invert prose-lg prose-img:max-h-[90svh] prose-img:rounded-sm prose-img:w-auto prose-img:max-w-full prose-video:max-h-[90svh] prose-video:rounded-sm prose-video:w-auto prose-video::max-w-full prose-a:decoration-wavy"
|
class="prose prose-neutral dark:prose-invert prose-lg prose-img:max-h-[90svh] prose-img:rounded-sm prose-img:w-auto prose-img:max-w-full prose-video:max-h-[90svh] prose-video:rounded-sm prose-video:w-auto prose-video::max-w-full prose-a:hover:no-underline"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -39,11 +39,6 @@ export const SITE: Site = {
|
||||||
href: "mailto:hello@troylusty.com",
|
href: "mailto:hello@troylusty.com",
|
||||||
icon: "mdi:email",
|
icon: "mdi:email",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: "CV",
|
|
||||||
href: "/cv",
|
|
||||||
icon: "mdi:certificate",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "GitHub",
|
name: "GitHub",
|
||||||
href: "https://github.com/troylusty",
|
href: "https://github.com/troylusty",
|
||||||
|
|
@ -64,6 +59,10 @@ export const SITE: Site = {
|
||||||
name: "posts",
|
name: "posts",
|
||||||
href: "/posts",
|
href: "/posts",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "cv",
|
||||||
|
href: "/cv",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,393 +1,328 @@
|
||||||
---
|
---
|
||||||
import "@styles/global.css";
|
import Layout from "@layouts/Layout.astro";
|
||||||
import { SITE, CV } from "@consts";
|
import { SITE, HOME } from "@consts";
|
||||||
import { Icon } from "astro-icon/components";
|
|
||||||
import Head from "@components/Head.astro";
|
|
||||||
import Link from "@components/Link.astro";
|
|
||||||
import { Image } from "astro:assets";
|
import { Image } from "astro:assets";
|
||||||
|
import { Icon } from "astro-icon/components";
|
||||||
|
import Link from "@components/Link.astro";
|
||||||
import icon from "public/assets/icon.png";
|
import icon from "public/assets/icon.png";
|
||||||
|
|
||||||
|
const skills = [
|
||||||
|
{ id: 1, name: "Python" },
|
||||||
|
{ id: 2, name: "Rust" },
|
||||||
|
{ id: 3, name: "TypeScript" },
|
||||||
|
{ id: 4, name: "Git" },
|
||||||
|
{ id: 5, name: "Docker" },
|
||||||
|
{ id: 6, name: "Linux" },
|
||||||
|
{ id: 7, name: "Shopify" },
|
||||||
|
{ id: 8, name: "Astro" },
|
||||||
|
{ id: 9, name: "Steamworks" },
|
||||||
|
{ id: 10, name: "Blender" },
|
||||||
|
{ id: 11, name: "Godot" },
|
||||||
|
{ id: 12, name: "Unreal Engine" },
|
||||||
|
{ id: 13, name: "Adobe Photoshop" },
|
||||||
|
{ id: 14, name: "GIMP" },
|
||||||
|
{ id: 15, name: "Inkscape" },
|
||||||
|
{ id: 16, name: "DaVinci Resolve" },
|
||||||
|
{ id: 17, name: "Pixelmator Pro" },
|
||||||
|
{ id: 99, name: "Full drivers licence (A & B)" },
|
||||||
|
];
|
||||||
|
const sortedSkills = [...skills].sort((a, b) => a.id - b.id);
|
||||||
|
|
||||||
|
const projects = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "troylusty.com",
|
||||||
|
description: "My personal portfolio website made using Astro.",
|
||||||
|
tags: ["Astro", "Tailwind CSS", "TypeScript", "GitHub Actions", "Docker"],
|
||||||
|
link: "https://github.com/troylusty/troylusty.com/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "Artwork",
|
||||||
|
description:
|
||||||
|
"A collection of digital artwork created with a variety of tools.",
|
||||||
|
tags: ["Blender"],
|
||||||
|
link: "/projects",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Packard",
|
||||||
|
description: "Terminal based feed checker.",
|
||||||
|
tags: ["Rust", "Tokio", "Clap", "NixOS Flake"],
|
||||||
|
link: "https://github.com/troylusty/packard/",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const sortedProjects = [...projects].sort((a, b) => a.id - b.id);
|
||||||
|
|
||||||
|
const education = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
school: "University of Plymouth",
|
||||||
|
course: "BA (Hons) Game Arts and Design",
|
||||||
|
dates: "2024 - 2025",
|
||||||
|
description: ["1st year: Estimated completion May 2025"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
school: "University Centre South Devon",
|
||||||
|
course: "FdA Games and Interactive Design",
|
||||||
|
dates: "2022 - 2024",
|
||||||
|
description: [
|
||||||
|
"2nd year: 70.25% State Aggregate Mark",
|
||||||
|
"1st year: 69.43% State Aggregate Mark",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
school: "South Devon College",
|
||||||
|
course:
|
||||||
|
"UAL Level 3 Extended Diploma in Creative Media Production and Technology",
|
||||||
|
dates: "2020 - 2022",
|
||||||
|
description: [
|
||||||
|
"2nd year: Extended Diploma - Distinction",
|
||||||
|
"1st year: Diploma - Distinction",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
school: "Kennicott Sixth Form",
|
||||||
|
course: "BTEC & A-level",
|
||||||
|
dates: "2018 - 2020",
|
||||||
|
description: [
|
||||||
|
"Pearson BTEC Level 3 National Extended Diploma in Art and Design - Distinction Merit Merit",
|
||||||
|
"AQA GCE/A Computer Science ADV (Python) - C",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
school: "King Edward VI Community College",
|
||||||
|
course: "GCSEs & Cambridge Nationals qualification",
|
||||||
|
dates: "2014 - 2018",
|
||||||
|
description: [
|
||||||
|
"10 GCSEs including Maths and English",
|
||||||
|
"OCR Cambridge Nationals Creative iMedia Level 1/2 Award/Certificate - Merit at Level 2",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const sortedEducation = [...education].sort((a, b) => a.id - b.id);
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
|
||||||
<html lang="en" class="scroll-smooth antialiased" transition:animate="none">
|
<div class="animate-reveal flex items-center justify-between opacity-0">
|
||||||
<Head title={CV.TITLE} description={CV.DESCRIPTION} />
|
<div class="flex-1 space-y-1.5">
|
||||||
<body class="w-full font-sans antialiased">
|
<h1 class="text-2xl font-bold">{SITE.AUTHOR}</h1><p
|
||||||
<div class="mx-auto max-w-screen-xl">
|
class="text-secondary/70 max-w-md font-mono text-sm text-pretty"
|
||||||
<main class="flex flex-col sm:m-12">
|
>
|
||||||
<div
|
Digital designer.
|
||||||
class="flex flex-col items-center justify-between p-4 sm:flex-row-reverse sm:items-start sm:p-8"
|
</p><p
|
||||||
|
class="text-secondary/70 max-w-md items-center font-mono text-xs text-pretty"
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
class="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
|
||||||
|
href="https://www.google.com/maps/place/Devon"
|
||||||
>
|
>
|
||||||
<div>
|
<Icon name="mdi:earth" class="h-3 w-3" />
|
||||||
<Image
|
Devon, United Kingdom, GMT
|
||||||
src={icon}
|
</Link>
|
||||||
alt="Troy Lusty"
|
</p><div
|
||||||
class="mx-auto mb-2 w-32 rounded-full"
|
class="text-secondary/70 flex gap-x-1 pt-1 font-mono text-sm print:hidden"
|
||||||
loading="eager"
|
>
|
||||||
/>
|
<a
|
||||||
</div>
|
href={`mailto:${SITE.EMAIL}`}
|
||||||
<div>
|
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"
|
||||||
<h1 class="mb-2 text-5xl font-bold">{SITE.AUTHOR}</h1>
|
>
|
||||||
<h2 class="mb-2 text-center text-xl italic sm:text-left">
|
<Icon name="mdi:email" title="Email" class="h-4 w-4" />
|
||||||
Digital Designer
|
</a>
|
||||||
</h2>
|
<Link
|
||||||
<div
|
href="/"
|
||||||
class="social-links grid grid-cols-1 gap-1 py-4 font-medium md:grid-cols-2"
|
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"
|
||||||
>
|
>
|
||||||
<div class="flex items-center">
|
<Icon name="mdi:link-variant" title="Website" class="h-4 w-4" />
|
||||||
<Icon name="mdi:house" class="mr-2 inline w-6" />
|
</Link>
|
||||||
Devon, United Kingdom
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<Icon name="mdi:globe" class="mr-2 inline w-6" />
|
|
||||||
<a href="/">troylusty.com</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<Icon name="mdi:email" class="mr-2 inline w-6" />
|
|
||||||
<a href={`mailto:${SITE.EMAIL}`}>hello@troylusty.com</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<Icon name="mdi:house" class="mr-2 inline w-6" />
|
|
||||||
<Link href="https://github.com/troylusty"
|
|
||||||
>github.com/troylusty</Link
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col sm:flex-row-reverse">
|
|
||||||
<div class="w-full p-4 sm:max-w-sm sm:p-8">
|
|
||||||
<div class="mb-12 px-2 text-lg font-light">
|
|
||||||
<div class="mb-4 flex items-center">
|
|
||||||
<Icon name="mdi:cogs" class="mr-2" />
|
|
||||||
<h2 class="text-xl font-semibold">Skills & Tools</h2>
|
|
||||||
</div>
|
|
||||||
<h3>Programming</h3>
|
|
||||||
<p class="leading-8">
|
|
||||||
<span class="box">Python</span>
|
|
||||||
<span class="box">Rust</span>
|
|
||||||
<span class="box">TypeScript</span>
|
|
||||||
</p>
|
|
||||||
<h3>Development</h3>
|
|
||||||
<p class="leading-8">
|
|
||||||
<span class="box">Git</span>
|
|
||||||
<span class="box">Docker</span>
|
|
||||||
<span class="box">Linux</span>
|
|
||||||
<span class="box">Shopify</span>
|
|
||||||
<span class="box">Astro</span>
|
|
||||||
<span class="box">Steamworks</span>
|
|
||||||
</p>
|
|
||||||
<h3>3D</h3>
|
|
||||||
<p class="leading-8">
|
|
||||||
<span class="box">Blender</span>
|
|
||||||
<span class="box">Godot</span>
|
|
||||||
<span class="box">Unreal Engine</span>
|
|
||||||
</p>
|
|
||||||
<h3>2D</h3>
|
|
||||||
<p class="leading-8">
|
|
||||||
<span class="box">Adobe Photoshop</span>
|
|
||||||
<span class="box">GIMP</span>
|
|
||||||
<span class="box">Inkscape</span>
|
|
||||||
<span class="box">DaVinci Resolve</span>
|
|
||||||
<span class="box">Pixelmator Pro</span>
|
|
||||||
</p>
|
|
||||||
<h3>Other</h3>
|
|
||||||
<p class="leading-8">
|
|
||||||
<span class="box">Full drivers licence (A & B)</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="mb-12 px-2 text-lg font-light">
|
|
||||||
<div class="mb-4 flex items-center">
|
|
||||||
<Icon name="mdi:chart-timeline-variant-shimmer" class="mr-2" />
|
|
||||||
<h2 class="text-xl font-semibold">Education</h2>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold">BA (Hons) Game Arts and Design</h3>
|
|
||||||
<p>2024 - 2025 University of Plymouth</p>
|
|
||||||
<ol class="list-inside list-disc">
|
|
||||||
<li><small>1st year: Estimated completion May 2025</small></li>
|
|
||||||
</ol>
|
|
||||||
<h3 class="font-semibold">FdA Games and Interactive Design</h3>
|
|
||||||
<p>2022 - 2024 University Centre South Devon</p>
|
|
||||||
<ol class="list-inside list-disc">
|
|
||||||
<li><small>2nd year: 70.25% State Aggregate Mark</small></li>
|
|
||||||
<li><small>1st year: 69.43% State Aggregate Mark</small></li>
|
|
||||||
</ol>
|
|
||||||
<h3 class="font-semibold">
|
|
||||||
UAL Level 3 Extended Diploma in Creative Media Production and
|
|
||||||
Technology
|
|
||||||
</h3>
|
|
||||||
<p>2020 - 2022 South Devon College</p>
|
|
||||||
<ol class="list-inside list-disc">
|
|
||||||
<li><small>2nd year: Extended Diploma - Distinction</small></li>
|
|
||||||
<li><small>1st year: Diploma - Distinction</small></li>
|
|
||||||
</ol>
|
|
||||||
<h3 class="font-semibold">BTEC & A-level</h3>
|
|
||||||
<p>2018 - 2020 Kennicott Sixth Form</p>
|
|
||||||
<ol class="list-inside list-disc">
|
|
||||||
<li>
|
|
||||||
<small
|
|
||||||
>Pearson BTEC Level 3 National Extended Diploma in Art and
|
|
||||||
Design - Distinction Merit Merit</small
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<small>AQA GCE/A Computer Science ADV (Python) - C</small>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
<h3 class="font-semibold">
|
|
||||||
GCSEs & Cambridge Nationals qualification
|
|
||||||
</h3>
|
|
||||||
<p>2014 - 2018 King Edward VI Community College</p>
|
|
||||||
<ol class="list-inside list-disc">
|
|
||||||
<li><small>10 GCSEs including Maths and English</small></li>
|
|
||||||
<li>
|
|
||||||
<small
|
|
||||||
>OCR Cambridge Nationals Creative iMedia Level 1/2
|
|
||||||
Award/Certificate - Merit at Level 2</small
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
<div class="mb-12 px-2 text-lg font-light">
|
|
||||||
<div class="mb-4 flex items-center">
|
|
||||||
<Icon name="mdi:wrench" class="mr-2" />
|
|
||||||
<h2 class="text-xl font-semibold">Other</h2>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold">Production Assistant</h3>
|
|
||||||
<p>2024 SDC Radiant Rumble</p>
|
|
||||||
<h3 class="font-semibold">Photogrammetrist</h3>
|
|
||||||
<p>2023 Paignton Picture House</p>
|
|
||||||
</div>
|
|
||||||
<div class="mb-12 px-2 text-lg font-light">
|
|
||||||
<div class="mb-4 flex items-center">
|
|
||||||
<Icon name="mdi:plane-train" class="mr-2" />
|
|
||||||
<h2 class="text-xl font-semibold">Languages</h2>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold">English</h3>
|
|
||||||
<p>Native</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content w-full p-4 sm:p-8">
|
|
||||||
<div class="prose">
|
|
||||||
<h2>Summary</h2>
|
|
||||||
<p>
|
|
||||||
My specific chosen area of focus is design, lighting, and
|
|
||||||
rendering focusing on 3D environments within software such as
|
|
||||||
Blender and Unreal Engine. Using either real-time or offline
|
|
||||||
rendering techniques. In addition to this I also have interests
|
|
||||||
in web development and cyber security.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
My portfolio of work can be found on my website at <a
|
|
||||||
href="/projects">troylusty.com/projects</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<hr class="mt-8 mb-12" />
|
|
||||||
<div class="prose">
|
|
||||||
<h2>Experience</h2>
|
|
||||||
<div>
|
|
||||||
<h3>Camouflage Store</h3>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
2020 - Current:
|
|
||||||
</p>
|
|
||||||
<p class="w-full lg:inline-block lg:w-8/12">
|
|
||||||
E-commerce Business Management
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
Task:
|
|
||||||
</p>
|
|
||||||
<p class="w-full lg:inline-block lg:w-8/12">
|
|
||||||
<Link href="/projects/camouflage-store"
|
|
||||||
>CMS Migration and Rebrand</Link
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
Description:
|
|
||||||
</p>
|
|
||||||
<div class="w-full lg:inline-block lg:w-8/12">
|
|
||||||
<p>
|
|
||||||
My role has me in charge of managing an online e-commerce
|
|
||||||
store in addition to creating, editing, and publishing
|
|
||||||
informational YouTube and social media content for a
|
|
||||||
family run outdoors store. This includes the recent
|
|
||||||
redesign and also any maintenance and general upkeep of
|
|
||||||
the site with all its related systems.
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li>Migration of content to Shopify</li>
|
|
||||||
<li>Branding refresh and site redesign</li>
|
|
||||||
<li>VPS setup and self-hosted analytics platform</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="mb-6">
|
|
||||||
<div
|
|
||||||
class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top"
|
|
||||||
>
|
|
||||||
Tools:
|
|
||||||
</div>
|
|
||||||
<div class="w-full lg:inline-block lg:w-8/12">
|
|
||||||
<span class="box">Shopify</span>
|
|
||||||
<span class="box">Docker</span>
|
|
||||||
<span class="box">DaVinci Resolve</span>
|
|
||||||
<span class="box">Pixelmator Pro</span>
|
|
||||||
<span class="box">YouTube Creator Studio</span>
|
|
||||||
<span class="box">GitHub</span>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr class="mt-8 mb-12" />
|
|
||||||
<div class="prose">
|
|
||||||
<h2>Projects</h2>
|
|
||||||
<div class="mb-16">
|
|
||||||
<h3>troylusty.com</h3>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
Personal blog:
|
|
||||||
</p>
|
|
||||||
<p class="w-full lg:inline-block lg:w-8/12">
|
|
||||||
My personal portfolio website made using Astro. A place for
|
|
||||||
me to share my portfolio of work and anything else I've
|
|
||||||
learnt.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
Deployed to:
|
|
||||||
</p>
|
|
||||||
<p class="w-full lg:inline-block lg:w-8/12">
|
|
||||||
<Link href="/">troylusty.com</Link>
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
Code on:
|
|
||||||
</p>
|
|
||||||
<p class="w-full lg:inline-block lg:w-8/12">
|
|
||||||
<Link href="https://github.com/troylusty/troylusty.com"
|
|
||||||
>github.com/troylusty/troylusty.com</Link
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
Features:
|
|
||||||
</p>
|
|
||||||
<div class="w-full lg:inline-block lg:w-8/12">
|
|
||||||
<ul>
|
|
||||||
<li>Static generation</li>
|
|
||||||
<li>Blog and project articles written in Markdown/MDX</li>
|
|
||||||
<li>SEO</li>
|
|
||||||
<li>RSS feed</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
Built with:
|
|
||||||
</p>
|
|
||||||
<div class="mt-5 w-full lg:inline-block lg:w-8/12">
|
|
||||||
<span class="box">Astro</span>
|
|
||||||
<span class="box">Tailwind CSS</span>
|
|
||||||
<span class="box">TypeScript</span>
|
|
||||||
<span class="box">GitHub Actions</span>
|
|
||||||
<span class="box">Docker</span>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<div class="mb-16">
|
|
||||||
<h3>Packard</h3>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
Terminal based feed checker:
|
|
||||||
</p>
|
|
||||||
<p class="w-full lg:inline-block lg:w-8/12">
|
|
||||||
Packard is a simple RSS aggregator meant to allow you to
|
|
||||||
take a quick glance at what's occurring in topics you care
|
|
||||||
about.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
Code on:
|
|
||||||
</p>
|
|
||||||
<p class="w-full lg:inline-block lg:w-8/12">
|
|
||||||
<Link href="https://github.com/troylusty/packard"
|
|
||||||
>github.com/troylusty/packard</Link
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
Features:
|
|
||||||
</p>
|
|
||||||
<div class="w-full lg:inline-block lg:w-8/12">
|
|
||||||
<ul>
|
|
||||||
<li>Fast feed fetching with visual progress updates</li>
|
|
||||||
<li>Feed lists configurable via TOML</li>
|
|
||||||
<li>
|
|
||||||
Command line configuration of selected list and more
|
|
||||||
</li>
|
|
||||||
<li>Quickly open feed items as links</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="mb-6">
|
|
||||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
|
||||||
Built with:
|
|
||||||
</p>
|
|
||||||
<div class="mt-5 w-full lg:inline-block lg:w-8/12">
|
|
||||||
<span class="box">Rust</span>
|
|
||||||
<span class="box">Tokio</span>
|
|
||||||
<span class="box">Clap</span>
|
|
||||||
<span class="box">NixOS Flake</span>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
<style>
|
<Link
|
||||||
body {
|
href="https://github.com/troylusty"
|
||||||
color: #3c3c42;
|
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"
|
||||||
background: #f3f1ea;
|
>
|
||||||
}
|
<Icon name="mdi:github" title="GitHub" class="h-4 w-4" />
|
||||||
p,
|
</Link>
|
||||||
li,
|
<Link
|
||||||
h1,
|
href="https://store.steampowered.com/developer/troy"
|
||||||
h2,
|
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"
|
||||||
h3 {
|
>
|
||||||
color: #3c3c42;
|
<Icon name="mdi:steam" title="Steamworks" class="h-4 w-4" />
|
||||||
a {
|
</Link>
|
||||||
color: #3c3c42;
|
</div><div
|
||||||
|
class="text-secondary/70 hidden flex-col gap-x-1 font-mono text-sm print:flex"
|
||||||
|
>
|
||||||
|
<a href={`mailto:${SITE.EMAIL}`}
|
||||||
|
><span class="underline">{`mailto:${SITE.EMAIL}`}</span></a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div><span
|
||||||
|
class="relative flex h-28 w-28 shrink-0 overflow-hidden rounded-xl"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={icon}
|
||||||
|
alt="Troy Lusty"
|
||||||
|
class="aspect-square h-full w-full"
|
||||||
|
loading="eager"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section
|
||||||
|
class="animate-reveal flex min-h-0 flex-col gap-y-3 opacity-0 [animation-delay:0.1s]"
|
||||||
|
>
|
||||||
|
<h2 class="text-xl font-bold">About</h2><p
|
||||||
|
class="text-secondary/70 font-mono text-sm text-pretty"
|
||||||
|
>
|
||||||
|
My specific chosen area of focus is design, lighting, and rendering
|
||||||
|
focusing on 3D environments within software such as Blender and Unreal
|
||||||
|
Engine. Using either real-time or offline rendering techniques. In
|
||||||
|
addition to this I also have interests in web development and cyber
|
||||||
|
security. My portfolio of work can be found on my website at <a
|
||||||
|
href="/projects"
|
||||||
|
class="underline hover:no-underline">troylusty.com/projects</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section
|
||||||
|
class="animate-reveal flex min-h-0 flex-col gap-y-3 opacity-0 [animation-delay:0.2s]"
|
||||||
|
>
|
||||||
|
<h2 class="text-xl font-bold">Experience</h2>
|
||||||
|
<div>
|
||||||
|
<div class="flex flex-col space-y-1.5">
|
||||||
|
<div class="flex items-center justify-between gap-x-2 text-base">
|
||||||
|
<h3
|
||||||
|
class="inline-flex items-center justify-center gap-x-1 leading-none font-semibold"
|
||||||
|
>
|
||||||
|
<Link class="hover:underline" href="https://camouflagestore.uk/"
|
||||||
|
>Camouflage Store</Link
|
||||||
|
>
|
||||||
|
</h3><div class="text-tertiary text-sm tabular-nums">
|
||||||
|
2020 - Current
|
||||||
|
</div>
|
||||||
|
</div><h4 class="font-mono text-sm leading-none">
|
||||||
|
E-commerce Business Management
|
||||||
|
</h4>
|
||||||
|
</div><div class="text-secondary/70 mt-2 font-mono text-xs text-pretty">
|
||||||
|
My role has me in charge of managing an online e-commerce store in
|
||||||
|
addition to creating, editing, and publishing informational YouTube and
|
||||||
|
social media content for a family run outdoors store. This includes the
|
||||||
|
recent redesign and also any maintenance and general upkeep of the site
|
||||||
|
with all its related systems.
|
||||||
|
<ul class="mt-2 list-inside list-disc">
|
||||||
|
<li>Migration of content to Shopify</li>
|
||||||
|
<li>Branding refresh and site redesign</li>
|
||||||
|
<li>VPS setup and self-hosted analytics platform</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex flex-col space-y-1.5">
|
||||||
|
<div class="flex items-center justify-between gap-x-2 text-base">
|
||||||
|
<h3
|
||||||
|
class="inline-flex items-center justify-center gap-x-1 leading-none font-semibold"
|
||||||
|
>
|
||||||
|
Smaller Roles
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-mono text-sm leading-none">Production Assistant</h4>
|
||||||
|
</div><div class="text-secondary/70 mt-2 font-mono text-xs text-pretty">
|
||||||
|
SDC Radiant Rumble (2024)
|
||||||
|
</div>
|
||||||
|
<h4 class="mt-2 font-mono text-sm leading-none">Photogrammetrist</h4>
|
||||||
|
<div class="text-secondary/70 mt-2 font-mono text-xs text-pretty">
|
||||||
|
Paignton Picture House (2023)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section
|
||||||
|
class="animate-reveal flex min-h-0 flex-col gap-y-3 opacity-0 [animation-delay:0.3s]"
|
||||||
|
>
|
||||||
|
<h2 class="text-xl font-bold">Education</h2>
|
||||||
|
{
|
||||||
|
sortedEducation.map((education) => (
|
||||||
|
<div>
|
||||||
|
<div class="flex flex-col space-y-1.5">
|
||||||
|
<div class="flex items-center justify-between gap-x-2 text-base">
|
||||||
|
<h3 class="leading-none font-semibold">{education.school}</h3>
|
||||||
|
<div class="text-tertiary text-sm tabular-nums">
|
||||||
|
{education.dates}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-secondary mt-2 font-mono text-sm text-pretty">
|
||||||
|
{education.course}
|
||||||
|
<ul class="text-secondary/70 mt-2 list-inside list-disc text-xs">
|
||||||
|
{education.description.map((line) => (
|
||||||
|
<li>{line}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
}
|
}
|
||||||
}
|
</section>
|
||||||
a {
|
<section
|
||||||
text-decoration-style: wavy;
|
class="animate-reveal flex min-h-0 flex-col gap-y-3 opacity-0 [animation-delay:0.4s]"
|
||||||
text-decoration-color: #3c3c42;
|
>
|
||||||
}
|
<h2 class="text-xl font-bold">Skills & Tools</h2><div
|
||||||
hr {
|
class="flex flex-wrap gap-1"
|
||||||
color: #d4d2cc;
|
>
|
||||||
}
|
{
|
||||||
.social-links {
|
sortedSkills.map((skill) => (
|
||||||
color: #78787e;
|
<li class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full px-2 py-1 text-center text-xs text-nowrap capitalize transition-colors duration-300">
|
||||||
}
|
{skill.name}
|
||||||
.box {
|
</li>
|
||||||
border-radius: var(--radius-md);
|
))
|
||||||
background: #d4d2cc;
|
}
|
||||||
color: #3c3c42;
|
</div>
|
||||||
padding-inline: calc(var(--spacing) * 2);
|
</section>
|
||||||
font-weight: var(--font-weight-medium);
|
<section
|
||||||
}
|
class="animate-reveal flex min-h-0 scroll-mb-16 flex-col gap-y-3 opacity-0 [animation-delay:0.5s]"
|
||||||
</style>
|
>
|
||||||
|
<h2 class="text-xl font-bold">Projects</h2>
|
||||||
|
<ol
|
||||||
|
class="-mx-3 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 print:grid-cols-3 print:gap-2"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
sortedProjects.map((project) => (
|
||||||
|
<li class="flex flex-col overflow-hidden rounded-lg p-3">
|
||||||
|
<div class="flex flex-col space-y-1.5">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<>
|
||||||
|
<h3 class="text-base font-semibold tracking-tight">
|
||||||
|
<Link
|
||||||
|
href={project.link}
|
||||||
|
class="text-secondary inline-flex items-center gap-1 hover:underline"
|
||||||
|
>
|
||||||
|
<span class="mr-1 h-1 w-1 rounded-full bg-green-500" />
|
||||||
|
{project.name}
|
||||||
|
</Link>
|
||||||
|
</h3>
|
||||||
|
<div class="hidden font-mono text-xs underline print:visible">
|
||||||
|
{project.name}
|
||||||
|
</div>
|
||||||
|
<p class="text-secondary/70 font-mono text-xs">
|
||||||
|
{project.description}
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto flex font-mono text-sm text-pretty">
|
||||||
|
<div class="mt-2 flex flex-wrap gap-1">
|
||||||
|
{project.tags.map((tag) => (
|
||||||
|
<div class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full px-2 py-1 text-center font-sans text-[10px] font-light text-nowrap capitalize transition-colors duration-300">
|
||||||
|
{tag}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
</Layout>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue