fix: correct cv mobile layout
This commit is contained in:
parent
2a8bffcb8b
commit
3d6da4d63b
GPG key ID:
DFC06C02ED3B4711
6 changed files with 234 additions and 360 deletions
2
bun.lock
2
bun.lock
|
|
@ -15,7 +15,7 @@
|
|||
"@tailwindcss/vite": "^4.0.6",
|
||||
"@types/alpinejs": "^3.13.11",
|
||||
"alpinejs": "^3.14.8",
|
||||
"astro": "^5.2.5",
|
||||
"astro": "^5.2.6",
|
||||
"astro-icon": "^1.1.5",
|
||||
"rehype-external-links": "^3.0.0",
|
||||
"tailwindcss": "^4.0.6",
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import { dateRange } from "@lib/utils";
|
||||
import Accordion from "@components/Accordion.astro";
|
||||
|
||||
const collection = (await getCollection("education")).sort(
|
||||
(a, b) =>
|
||||
new Date(b.data.dateStart).valueOf() - new Date(a.data.dateStart).valueOf(),
|
||||
);
|
||||
|
||||
const education = await Promise.all(
|
||||
collection.map(async (item) => {
|
||||
const { Content } = await item.render();
|
||||
return { ...item, Content };
|
||||
}),
|
||||
);
|
||||
---
|
||||
|
||||
<div>
|
||||
{
|
||||
education.map((entry) => (
|
||||
<Accordion
|
||||
institution={`${entry.data.institution} (${dateRange(entry.data.dateStart, entry.data.dateEnd)})`}
|
||||
qualification={entry.data.qualification}
|
||||
grades={entry.data.grades}
|
||||
isOpen={entry.data.isOpen}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
const collection = await getCollection("skills");
|
||||
|
||||
const skills = await Promise.all(
|
||||
collection.map(async (item) => {
|
||||
const { Content } = await item.render();
|
||||
return { ...item, Content };
|
||||
}),
|
||||
);
|
||||
---
|
||||
|
||||
<ul class="flex max-w-full list-none flex-wrap gap-4 px-0">
|
||||
{
|
||||
skills.map((entry) => (
|
||||
<li class="group border-tertiary text-tertiary hover:border-accent hover:text-accent flex items-center gap-2 rounded border p-2 transition-colors">
|
||||
<Icon
|
||||
name={entry.data.icon}
|
||||
class="text-tertiary group-hover:text-accent h-5 w-auto transition-colors"
|
||||
/>
|
||||
<p class="m-0 cursor-default">{entry.data.title}</p>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import { dateRange } from "@lib/utils";
|
||||
import Button from "./Button.astro";
|
||||
|
||||
const collection = (await getCollection("work")).sort(
|
||||
(a, b) =>
|
||||
new Date(b.data.dateStart).valueOf() - new Date(a.data.dateStart).valueOf(),
|
||||
);
|
||||
|
||||
const work = await Promise.all(
|
||||
collection.map(async (item) => {
|
||||
const { Content } = await item.render();
|
||||
return { ...item, Content };
|
||||
}),
|
||||
);
|
||||
---
|
||||
|
||||
<ul class="list-none pl-0">
|
||||
{
|
||||
work.map((entry) => (
|
||||
<li class="pb-4 pl-0 last:pb-0">
|
||||
<h3 class="text-secondary mt-4 mb-1 font-semibold text-balance">
|
||||
<span class="text-tertiary">{entry.data.role} at</span>
|
||||
{entry.data.company}
|
||||
</h3>
|
||||
<time class="text-accent block">
|
||||
{dateRange(entry.data.dateStart, entry.data.dateEnd)}
|
||||
</time>
|
||||
<article class="text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy mt-2">
|
||||
<entry.Content />
|
||||
</article>
|
||||
{entry.data.article ? (
|
||||
<div class="flex justify-center">
|
||||
<Button href={entry.data.article} link="View more" />
|
||||
</div>
|
||||
) : null}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
|
@ -46,36 +46,4 @@ const projects = defineCollection({
|
|||
.merge(rssSchema),
|
||||
});
|
||||
|
||||
const work = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
company: z.string(),
|
||||
role: z.string(),
|
||||
dateStart: z.coerce.date(),
|
||||
dateEnd: z.union([z.coerce.date(), z.string()]),
|
||||
article: z.string().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
const education = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
institution: z.string(),
|
||||
qualification: z.string(),
|
||||
grades: z.array(z.string()),
|
||||
dateStart: z.coerce.date(),
|
||||
dateEnd: z.union([z.coerce.date(), z.string()]),
|
||||
isOpen: z.boolean().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
const skills = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
type: z.string(),
|
||||
title: z.string(),
|
||||
icon: z.string(),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { posts, projects, work, education, skills };
|
||||
export const collections = { posts, projects };
|
||||
|
|
|
|||
|
|
@ -13,250 +13,254 @@ import icon from "public/assets/icon.png";
|
|||
<Head title={CV.TITLE} description={CV.DESCRIPTION} />
|
||||
<body class="w-full font-sans antialiased">
|
||||
<div class="container mx-auto max-w-screen-xl">
|
||||
<main
|
||||
id="wrapper"
|
||||
class="flex flex-col rounded-md shadow-2xl sm:m-12 sm:flex-row-reverse"
|
||||
>
|
||||
<div id="sidebar" class="w-full rounded-r-md p-8 sm:max-w-sm">
|
||||
<div class="mb-12 px-2">
|
||||
<main class="flex flex-col rounded-md shadow-2xl sm:m-12">
|
||||
<div
|
||||
class="flex flex-col items-center justify-between p-12 sm:flex-row-reverse"
|
||||
>
|
||||
<div>
|
||||
<Image
|
||||
src={icon}
|
||||
alt="Troy Lusty"
|
||||
class="mx-auto mb-2 w-48 rounded-full"
|
||||
class="mx-auto mb-2 w-32 rounded-full"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<h1 class="mb-2 text-5xl font-bold">{SITE.AUTHOR}</h1>
|
||||
<h2 class="mb-2 text-xl italic">Digital Designer</h2>
|
||||
<div
|
||||
class="social-links grid grid-cols-1 gap-1 py-4 font-medium md:grid-cols-2"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<Icon name="mdi:house" class="mr-2 inline w-6" />
|
||||
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>
|
||||
<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>
|
||||
</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-12">
|
||||
<h1 class="mb-2 text-5xl font-bold">{SITE.AUTHOR}</h1>
|
||||
<h2 class="mb-2 text-xl italic">Digital Designer</h2>
|
||||
<div class="social-links grid grid-cols-2 gap-1 py-4 font-medium">
|
||||
<div class="flex items-center">
|
||||
<Icon name="mdi:house" class="mr-2 inline w-6" />
|
||||
Devon, United Kingdom
|
||||
<div class="flex flex-col sm:flex-row-reverse">
|
||||
<div class="w-full rounded-r-md p-8 sm:max-w-sm">
|
||||
<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="flex items-center">
|
||||
<Icon name="mdi:globe" class="mr-2 inline w-6" />
|
||||
<a href="/">troylusty.com</a>
|
||||
<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>
|
||||
</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 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="flex items-center">
|
||||
<Icon name="mdi:house" class="mr-2 inline w-6" />
|
||||
<Link href="https://github.com/troylusty"
|
||||
>github.com/troylusty</Link
|
||||
>
|
||||
<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 id="profile" 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 id="experience" 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">
|
||||
CMS Migration and Rebrand
|
||||
</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.
|
||||
<div class="content w-full p-12">
|
||||
<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>
|
||||
<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 id="projects" 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 blog is the center of my online presence. Here, I share
|
||||
posts about what I've learnt, tutorials and my thoughts on web
|
||||
development in general.
|
||||
</p>
|
||||
</section>
|
||||
<section class="mb-6">
|
||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
||||
Deployed to:
|
||||
</p>
|
||||
<div class="w-full lg:inline-block lg:w-8/12">
|
||||
<Link href="/">troylusty.com</Link>
|
||||
</div>
|
||||
</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 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">
|
||||
CMS Migration and Rebrand
|
||||
</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"
|
||||
>
|
||||
</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>
|
||||
</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="w-full lg:inline-block lg:w-8/12">
|
||||
<span class="box">Astro</span>
|
||||
<span class="box">Tailwind CSS</span>
|
||||
<span class="box">Alpine.js</span>
|
||||
<span class="box">GitHub Actions</span>
|
||||
<span class="box">Docker</span>
|
||||
</div>
|
||||
</section>
|
||||
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 blog is the center of my online presence. Here, I share
|
||||
posts about what I've learnt, tutorials and my thoughts on
|
||||
web development in general.
|
||||
</p>
|
||||
</section>
|
||||
<section class="mb-6">
|
||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
||||
Deployed to:
|
||||
</p>
|
||||
<div class="w-full lg:inline-block lg:w-8/12">
|
||||
<Link href="/">troylusty.com</Link>
|
||||
</div>
|
||||
</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>
|
||||
</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="w-full lg:inline-block lg:w-8/12">
|
||||
<span class="box">Astro</span>
|
||||
<span class="box">Tailwind CSS</span>
|
||||
<span class="box">Alpine.js</span>
|
||||
<span class="box">GitHub Actions</span>
|
||||
<span class="box">Docker</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue