From 2d984ce0675292d3b32c73c5f76e0afe6b28d582 Mon Sep 17 00:00:00 2001
From: Troy <hello@troylusty.com>
Date: Fri, 17 Jan 2025 22:09:54 +0000
Subject: [PATCH] max-w-prose entire site
---
src/components/Accordion.astro | 4 +-
src/components/Article.astro | 10 +-
src/components/Button.astro | 16 +++
src/components/Footer.astro | 91 ++++++++-------
src/components/Header.astro | 2 +-
src/components/Hero.astro | 4 +-
src/components/Prose.astro | 2 +-
src/components/RelatedArticles.astro | 4 +-
src/components/ShowcasePost.astro | 6 +-
src/components/ShowcaseProject.astro | 2 +-
src/components/Skills.astro | 2 +-
src/components/SkinnyCenter.astro | 2 +-
src/components/Work.astro | 17 ++-
src/content/projects/packard/index.mdx | 6 +-
src/content/work/camouflage-store.md | 6 +-
src/layouts/Layout.astro | 11 +-
src/pages/404.astro | 18 +--
src/pages/cv.astro | 147 ++++++++++++-------------
src/pages/index.astro | 22 ++--
src/pages/posts/index.astro | 2 +-
src/pages/projects/index.astro | 4 +-
src/styles/global.css | 8 ++
tailwind.config.ts | 6 +-
23 files changed, 184 insertions(+), 208 deletions(-)
create mode 100644 src/components/Button.astro
diff --git a/src/components/Accordion.astro b/src/components/Accordion.astro
index 53de57f..bfee392 100644
--- a/src/components/Accordion.astro
+++ b/src/components/Accordion.astro
@@ -16,7 +16,7 @@ const { institution, qualification, grades, isOpen = false } = Astro.props;
<summary
class="flex cursor-pointer items-center justify-between py-3 font-bold"
>
- <p class="m-0 text-balance text-xl font-semibold text-secondary">
+ <p class="m-0 text-balance font-semibold text-secondary">
{qualification}
</p>
<span class="transition group-open:rotate-180">
@@ -26,7 +26,7 @@ const { institution, qualification, grades, isOpen = false } = Astro.props;
/>
</span>
</summary>
- <div class="p-4 text-lg">
+ <div class="p-4">
<p class="my-0 mb-2 font-semibold text-tertiary">
{institution}
</p>
diff --git a/src/components/Article.astro b/src/components/Article.astro
index c061a4c..6a611b6 100644
--- a/src/components/Article.astro
+++ b/src/components/Article.astro
@@ -28,16 +28,16 @@ const listFormatter = new Intl.ListFormat("en-GB", {
updated={article.data.updated}
tags={article.data.tags}
>
- <div class="mx-auto mb-16 max-w-prose">
+ <div class="mx-auto mb-8">
<h1
- class="animate-reveal break-words text-start text-4xl font-semibold opacity-0"
+ class="animate-reveal break-words text-start text-2xl font-semibold opacity-0"
>
<span class="text-secondary">{article.data.title}</span><span
class="ml-2 text-tertiary">{article.data.description}</span
>
</h1>
<div
- class="mt-4 flex animate-reveal flex-col flex-wrap items-start gap-2 text-lg text-tertiary opacity-0 [animation-delay:0.1s] md:flex-row"
+ class="mt-4 flex animate-reveal flex-col flex-wrap items-start gap-2 text-tertiary opacity-0 [animation-delay:0.1s] md:flex-row"
>
<div class="flex items-center gap-2">
<Icon name="mdi:calendar" />
@@ -79,9 +79,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
}
</div>
</div>
- <div
- class="mx-auto max-w-prose animate-reveal opacity-0 [animation-delay:0.2s]"
- >
+ <div class="mx-auto animate-reveal opacity-0 [animation-delay:0.2s]">
<Prose>
<Content />
</Prose>
diff --git a/src/components/Button.astro b/src/components/Button.astro
new file mode 100644
index 0000000..f020ca7
--- /dev/null
+++ b/src/components/Button.astro
@@ -0,0 +1,16 @@
+---
+type Props = {
+ href: String;
+ link: String;
+};
+
+const { href, link } = Astro.props;
+---
+
+<a href={`${href}`}>
+ <div
+ class="mt-2 flex animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-2 py-1 text-sm font-medium capitalize text-primary opacity-0 transition-colors [animation-delay:0.1s] hover:bg-accent"
+ >
+ {link}
+ </div>
+</a>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index de19638..6ee6102 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -4,59 +4,54 @@ import Link from "@components/Link.astro";
import { Icon } from "astro-icon/components";
---
-<footer class="mt-auto">
- <div class="mx-auto w-full max-w-screen-lg p-4 py-6 lg:py-8">
- <div class="md:flex md:justify-between">
- <div class="mb-6 text-secondary md:mb-0">
- <a class="inline-flex items-center" href="#top" title="Back to top">
- <Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out" />
- <div
- class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block"
- >
- Troy Lusty
- </div>
- </a>
- </div>
- <div class="text-left sm:gap-6 md:text-right">
- <div>
- <ul class="font-medium text-tertiary">
- {
- SITE.NAVLINKS.map((i) => (
- <li class="mb-4 last:mb-0">
- <a
- data-navlink
- href={i.href}
- class="capitalize transition-colors hover:text-secondary"
- >
- {i.name}
- </a>
- </li>
- ))
- }
- </ul>
+<footer class="mx-auto mb-8 mt-auto w-full max-w-prose space-y-6 pt-12">
+ <div class="md:flex md:justify-between">
+ <div class="mb-6 text-secondary md:mb-0">
+ <a class="inline-flex items-center" href="#top" title="Back to top">
+ <Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out" />
+ <div
+ class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block"
+ >
+ Troy Lusty
</div>
- </div>
+ </a>
</div>
- <div class="mt-12 sm:flex sm:items-center sm:justify-between lg:mt-16">
- <span class="text-sm text-tertiary sm:text-center"
- >© {new Date().getFullYear()}
- <a href="/" class="transition-colors hover:text-secondary"
- >{SITE.TITLE}</a
- >. All Rights Reserved.
- </span>
- <div class="mt-4 flex gap-5 sm:mt-0 sm:justify-center">
+ <div class="text-left sm:gap-6 md:text-right">
+ <ul class="font-medium text-tertiary">
{
- SITE.LINKS.map((i) => (
- <Link href={i.href}>
- <Icon
- name={i.icon}
- title={i.name}
- class="h-5 w-5 text-tertiary transition-colors hover:text-secondary"
- />
- </Link>
+ SITE.NAVLINKS.map((i) => (
+ <li class="mb-1 last:mb-0">
+ <a
+ data-navlink
+ href={i.href}
+ class="capitalize transition-colors hover:text-secondary"
+ >
+ {i.name}
+ </a>
+ </li>
))
}
- </div>
+ </ul>
+ </div>
+ </div>
+ <div class="mt-12 sm:flex sm:items-center sm:justify-between lg:mt-16">
+ <span class="text-sm text-tertiary sm:text-center"
+ >© {new Date().getFullYear()}
+ <a href="/" class="transition-colors hover:text-secondary">{SITE.TITLE}</a
+ >. All Rights Reserved.
+ </span>
+ <div class="mt-4 flex gap-2 sm:mt-0 sm:justify-center">
+ {
+ SITE.LINKS.map((i) => (
+ <Link href={i.href}>
+ <Icon
+ name={i.icon}
+ title={i.name}
+ class="h-5 w-5 text-tertiary transition-colors hover:text-secondary"
+ />
+ </Link>
+ ))
+ }
</div>
</div>
</footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index c8c8c9a..5cbc626 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,7 +3,7 @@ import { SITE } from "@consts";
import { Icon } from "astro-icon/components";
---
-<header id="header" class="mx-auto w-full max-w-screen-lg p-4">
+<header class="mx-auto mb-8 w-full max-w-prose space-y-6">
<div
class="flex h-12 items-center justify-between leading-[0px] text-secondary"
>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 7672927..899759a 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -12,10 +12,10 @@ import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
<section class="mb-32 overflow-clip">
<h1
- class="--translate-y-[480px] animate-logo text-pretty text-8xl font-bold md:text-9xl"
+ class="--translate-y-full animate-logo text-pretty text-4xl font-bold md:text-6xl"
>
Digital designer based in the <span
- class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text font-['Borel'] text-7xl font-medium text-transparent md:text-8xl"
+ class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text font-['Borel'] text-3xl font-medium text-transparent md:text-5xl"
>United Kingdom</span
>.
</h1>
diff --git a/src/components/Prose.astro b/src/components/Prose.astro
index 58b6c87..0495a6d 100644
--- a/src/components/Prose.astro
+++ b/src/components/Prose.astro
@@ -1,5 +1,5 @@
<div
- class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-lg prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-pre:w-fit prose-pre:max-w-full prose-pre:border prose-pre:border-tertiary prose-pre:bg-primary prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
+ class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-pre:w-fit prose-pre:max-w-full prose-pre:border-2 prose-pre:border-dashed prose-pre:border-tertiary prose-pre:bg-primary prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
>
<slot />
</div>
diff --git a/src/components/RelatedArticles.astro b/src/components/RelatedArticles.astro
index 2adf9f8..760d5c6 100644
--- a/src/components/RelatedArticles.astro
+++ b/src/components/RelatedArticles.astro
@@ -33,14 +33,14 @@ const next = items[(index + 1) % items.length];
/>
</a>
<a href={`/${prev.collection}/${prev.slug}`}>
- <p class="animate-reveal break-words text-xl font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
+ <p class="animate-reveal break-words font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
{prev.data.title}
</p>
</a>
</div>
<div class="group flex w-fit flex-row items-center justify-between gap-2 self-end">
<a href={`/${next.collection}/${next.slug}`}>
- <p class="animate-reveal break-words text-xl font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
+ <p class="animate-reveal break-words font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
{next.data.title}
</p>
</a>
diff --git a/src/components/ShowcasePost.astro b/src/components/ShowcasePost.astro
index 710f90c..a1b61f2 100644
--- a/src/components/ShowcasePost.astro
+++ b/src/components/ShowcasePost.astro
@@ -14,10 +14,8 @@ const { collection } = Astro.props;
href={`/${collection.collection}/${collection.slug}`}
>
<article class="flex flex-col">
- <h3 class="mb-3 text-balance text-xl font-semibold">
- <span title="Title" class="text-secondary">{collection.data.title}</span
- ><span
- title="Description"
+ <h3 class="mb-1 text-balance font-semibold">
+ <span class="text-secondary">{collection.data.title}</span><span
class="ml-2 text-tertiary transition-colors group-hover:text-accent"
>{collection.data.description}</span
>
diff --git a/src/components/ShowcaseProject.astro b/src/components/ShowcaseProject.astro
index 1e96cdc..4b88db7 100644
--- a/src/components/ShowcaseProject.astro
+++ b/src/components/ShowcaseProject.astro
@@ -27,7 +27,7 @@ const { collection } = Astro.props;
href={`/${collection.collection}/${collection.slug}`}
aria-label={collection.data.title}></a>
<h3
- class="z-10 mt-3 w-fit text-xl font-semibold text-primary opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-secondary"
+ class="z-10 w-fit text-xl font-semibold text-primary opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-secondary"
>
{collection.data.title}
</h3>
diff --git a/src/components/Skills.astro b/src/components/Skills.astro
index 7ff03ce..df352e3 100644
--- a/src/components/Skills.astro
+++ b/src/components/Skills.astro
@@ -19,7 +19,7 @@ const skills = await Promise.all(
<Icon
name={entry.data.icon}
title={entry.data.title}
- class="h-6 w-auto text-tertiary transition-colors group-hover:text-accent"
+ class="h-5 w-auto text-tertiary transition-colors group-hover:text-accent"
/>
<p class="m-0 cursor-default">{entry.data.title}</p>
</li>
diff --git a/src/components/SkinnyCenter.astro b/src/components/SkinnyCenter.astro
index 09b8b3e..5eea84b 100644
--- a/src/components/SkinnyCenter.astro
+++ b/src/components/SkinnyCenter.astro
@@ -1,5 +1,5 @@
<div
- class="mx-auto mb-8 mt-2 max-w-full p-4 pb-16 md:mb-32 md:mt-16 md:max-w-screen-lg md:p-5"
+ class="mx-auto mb-8 mt-2 w-full max-w-[60ch] p-4 pb-16 md:mb-32 md:mt-16 md:p-5"
>
<slot />
</div>
diff --git a/src/components/Work.astro b/src/components/Work.astro
index 51cfed1..895a89e 100644
--- a/src/components/Work.astro
+++ b/src/components/Work.astro
@@ -1,6 +1,7 @@
---
import { getCollection } from "astro:content";
import { dateRange } from "@lib/utils";
+import Button from "./Button.astro";
const collection = (await getCollection("work")).sort(
(a, b) =>
@@ -18,23 +19,19 @@ const work = await Promise.all(
<ul class="list-none pl-0">
{
work.map((entry) => (
- <li class="pb-8 pl-0 last:pb-0">
- <h3 class="mb-1 mt-4 text-balance text-xl font-semibold text-secondary">
- <span class="text-tertiary">{entry.data.role} at</span>{" "}
+ <li class="pb-4 pl-0 last:pb-0">
+ <h3 class="mb-1 mt-4 text-balance font-semibold text-secondary">
+ <span class="text-tertiary">{entry.data.role} at</span>
{entry.data.company}
</h3>
- <time class="block text-sm text-accent">
+ <time class="block text-accent">
{dateRange(entry.data.dateStart, entry.data.dateEnd)}
</time>
- <article class="mt-4 text-lg text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy">
+ <article class="mt-2 text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy">
<entry.Content />
</article>
{entry.data.article ? (
- <a href={entry.data.article}>
- <div class="mt-2 flex flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-2 py-1 text-sm font-medium capitalize text-primary transition-colors hover:bg-accent">
- View project
- </div>
- </a>
+ <Button href={entry.data.article} link="View project" />
) : null}
</li>
))
diff --git a/src/content/projects/packard/index.mdx b/src/content/projects/packard/index.mdx
index adfdb6f..adbf2f7 100644
--- a/src/content/projects/packard/index.mdx
+++ b/src/content/projects/packard/index.mdx
@@ -3,11 +3,7 @@ title: "Packard"
description: "A simple RSS aggregator meant to allow you to take a quick glance at what's occurring in topics you care about."
date: 2025-01-12
updated: 2025-01-12
-image:
- {
- url: "packard.avif",
- alt: "Packard GitHub v0.0.1 Release",
- }
+image: { url: "packard.avif", alt: "Packard GitHub v0.0.1 Release" }
tags: ["rust", "rss aggregator"]
categories: ["personal"]
---
diff --git a/src/content/work/camouflage-store.md b/src/content/work/camouflage-store.md
index 1a5ca7a..09cabe5 100644
--- a/src/content/work/camouflage-store.md
+++ b/src/content/work/camouflage-store.md
@@ -6,8 +6,4 @@ dateEnd: "Current"
article: "https://troylusty.com/projects/camouflage-store"
---
-Setup and ongoing management of an
-[online e-commerce store](https://camouflagestore.uk) in addition to creating,
-editing, and publishing informational
-[YouTube](https://www.youtube.com/@camouflagestoreuk) and social media content
-for a family run outdoors store.
+Migrating and managing an ecommerce store, in addition to creating informational video content.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index de86767..e761dcc 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -2,7 +2,6 @@
import Head from "@components/Head.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
-import SkinnyCenter from "@components/SkinnyCenter.astro";
import "@styles/global.css";
interface Props {
@@ -18,7 +17,7 @@ const { title, description, image, date, updated, tags } = Astro.props;
---
<!doctype html>
-<html lang="en" class="overflow-y-scroll scroll-smooth subpixel-antialiased">
+<html lang="en" class="scroll-smooth antialiased">
<Head
title={title}
description={description}
@@ -28,12 +27,10 @@ const { title, description, image, date, updated, tags } = Astro.props;
tags={tags}
/>
<body class="bg-primary text-secondary">
- <div class="flex min-h-screen flex-col justify-start">
+ <div class="flex min-h-screen flex-col justify-start p-8 pt-0 md:pt-8">
<Header />
- <main>
- <SkinnyCenter>
- <slot />
- </SkinnyCenter>
+ <main class="mx-auto w-full max-w-prose space-y-6">
+ <slot />
</main>
<Footer />
</div>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index e303621..9c83232 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,7 +1,7 @@
---
import Layout from "@layouts/Layout.astro";
import { SITE } from "@consts";
-import { Icon } from "astro-icon/components";
+import Button from "@components/Button.astro";
---
<Layout title="404" description={SITE.DESCRIPTION}>
@@ -11,29 +11,19 @@ import { Icon } from "astro-icon/components";
>
<div>
<h2
- class="animate-reveal break-words text-4xl font-semibold opacity-0"
+ class="animate-reveal break-words text-2xl font-semibold opacity-0"
id="featured-projects"
>
404
</h2>
<h3
- class="mt-2 animate-reveal text-xl font-bold opacity-0 [animation-delay:0.1s]"
+ class="mt-2 animate-reveal font-bold opacity-0 [animation-delay:0.1s]"
>
Content not found
</h3>
</div>
<div class="animate-reveal opacity-0 [animation-delay:0.2s]">
- <a
- href="/"
- class="flex items-center gap-1 rounded bg-secondary px-3.5 py-2.5 text-sm font-semibold text-primary"
- >
- <p>Go back home</p>
- <Icon
- name="mdi:arrow-u-left-top"
- title="Send me an email"
- class="h-4 w-auto"
- />
- </a>
+ <Button href="/" link="Go home" />
</div>
</div>
</section>
diff --git a/src/pages/cv.astro b/src/pages/cv.astro
index 6d8dc41..dd8a90b 100644
--- a/src/pages/cv.astro
+++ b/src/pages/cv.astro
@@ -6,89 +6,82 @@ import Education from "@components/Education.astro";
import Skills from "@components/Skills.astro";
import { Icon } from "astro-icon/components";
import Link from "@components/Link.astro";
-import Prose from "@components/Prose.astro";
---
<Layout title={CV.TITLE} description={CV.DESCRIPTION}>
- <div class="mx-auto max-w-full md:max-w-prose">
- <section>
+ <section>
+ <div
+ class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
+ >
+ <h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
+ Troy Lusty
+ </h1>
<div
- class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
+ class="mt-4 flex flex-col items-start gap-2 text-tertiary md:flex-row"
>
- <h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
- Troy Lusty
- </h1>
- <div
- class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
- >
- <div class="flex animate-reveal items-center gap-2 opacity-0">
- <div
- class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
- >
- <Icon name="mdi:email" />
- <Link href="mailto:hello@troylusty.com">
- <p>hello@troylusty.com</p>
- </Link>
- </div>
- <div
- class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
- >
- <Icon name="mdi:web" />
- <Link href="/">
- <p>troylusty.com</p>
- </Link>
- </div>
+ <div class="flex animate-reveal items-center gap-2 opacity-0">
+ <div
+ class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
+ >
+ <Icon name="mdi:email" />
+ <Link href="mailto:hello@troylusty.com">
+ <p>hello@troylusty.com</p>
+ </Link>
+ </div>
+ <div
+ class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
+ >
+ <Icon name="mdi:web" />
+ <Link href="/">
+ <p>troylusty.com</p>
+ </Link>
</div>
</div>
</div>
- </section>
- <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
- <h2 class="mb-16 break-words text-4xl font-semibold capitalize">
- About me
- </h2>
- <p class="mb-8 text-lg">
- Hi, my name is Troy and I’m a student 3D artist studying on a BA (Hons)
- Game Arts and Design course in the UK.
- </p>
- <p class="mb-8 text-lg">
- In 2019 I began experimenting with Blender after having used various 2D
- art applications such as Adobe Photoshop for over 5 years. After making
- this change, I realised that I have a huge interest in creating 3D
- graphics for video games and TV. At the moment I am working on expanding
- my skillset to encompass other areas with a focus on lighting and
- rendering techniques in relation to environment art.
- </p>
- <p class="mb-8 text-lg">
- My current portfolio of work can be found on my website at:
- <a
- class="text-secondary underline decoration-tertiary decoration-wavy"
- href="/projects">troylusty.com/projects</a
- >.
- </p>
- </section>
- <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
- <h2 class="mb-16 break-words text-4xl font-semibold capitalize">
- Education
- </h2>
- <Education />
- </section>
- <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
- <h2 class="mb-16 break-words text-4xl font-semibold capitalize">
- Skills
- </h2>
- <p class="mb-8 text-lg">
- 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 am also very interested in web development.
- </p>
- <Skills />
- </section>
- <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
- <h2 class="mb-16 break-words text-4xl font-semibold capitalize">
- Experience
- </h2>
- <Work />
- </section>
- </div>
+ </div>
+ </section>
+ <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
+ <h2 class="mb-4 break-words text-2xl font-semibold capitalize">About me</h2>
+ <p class="mb-2">
+ Hi, my name is Troy and I’m a student 3D artist studying on a BA (Hons)
+ Game Arts and Design course in the UK.
+ </p>
+ <p class="mb-2">
+ In 2019 I began experimenting with Blender after having used various 2D
+ art applications such as Adobe Photoshop for over 5 years. After making
+ this change, I realised that I have a huge interest in creating 3D
+ graphics for video games and TV. At the moment I am working on expanding
+ my skillset to encompass other areas with a focus on lighting and
+ rendering techniques in relation to environment art.
+ </p>
+ <p class="mb-2">
+ My current portfolio of work can be found on my website at:
+ <a
+ class="text-secondary underline decoration-tertiary decoration-wavy"
+ href="/projects">troylusty.com/projects</a
+ >.
+ </p>
+ </section>
+ <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
+ <h2 class="mb-4 break-words text-2xl font-semibold capitalize">
+ Education
+ </h2>
+ <Education />
+ </section>
+ <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
+ <h2 class="mb-4 break-words text-2xl font-semibold capitalize">Skills</h2>
+ <p class="mb-2">
+ 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 am also very interested in web development.
+ </p>
+ <Skills />
+ </section>
+ <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
+ <h2 class="mb-4 break-words text-2xl font-semibold capitalize">
+ Experience
+ </h2>
+ <Work />
+ </section>
</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7630dbd..6894f1c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,6 +5,7 @@ import { getCollection } from "astro:content";
import ShowcaseProject from "@components/ShowcaseProject.astro";
import ShowcasePost from "@components/ShowcasePost.astro";
import Hero from "@components/Hero.astro";
+import Button from "@components/Button.astro";
const allPosts = await getCollection("posts");
@@ -27,7 +28,7 @@ const projects = allProjects
<div class="group flex w-fit flex-row items-center justify-between gap-6">
<a href="/projects">
<h2
- class="animate-reveal break-words text-4xl font-semibold capitalize opacity-0 transition-colors duration-500 group-hover:text-tertiary"
+ class="animate-reveal break-words text-2xl font-semibold capitalize opacity-0 transition-colors duration-500 group-hover:text-tertiary"
id="featured-projects"
>
Featured projects
@@ -35,17 +36,13 @@ const projects = allProjects
</a>
</div>
<ol
- class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
+ class="mt-8 grid animate-reveal grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
>
{projects.map((project) => <ShowcaseProject collection={project} />)}
</ol>
{
allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? (
- <a href="/projects">
- <div class="mt-8 flex animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-3 py-2 font-medium capitalize text-primary opacity-0 transition-colors [animation-delay:0.1s] hover:bg-accent">
- View all
- </div>
- </a>
+ <Button href="/projects" link="View all" />
) : null
}
</section>
@@ -53,7 +50,7 @@ const projects = allProjects
<div class="group flex w-fit flex-row items-center justify-between gap-6">
<a href="/posts">
<h2
- class="animate-reveal break-words text-4xl font-semibold capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s] group-hover:text-tertiary"
+ class="animate-reveal break-words text-2xl font-semibold capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s] group-hover:text-tertiary"
id="featured-projects"
>
Recent posts
@@ -61,18 +58,13 @@ const projects = allProjects
</a>
</div>
<ol
- class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
+ class="mt-8 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
>
{posts.map((post) => <ShowcasePost collection={post} />)}
</ol>
{
allPosts.length > HOME.HOMESETTINGS!.NUM_POSTS_ON_HOMEPAGE ? (
- <a href="/posts">
- {" "}
- <div class="mt-8 flex animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-3 py-2 font-medium capitalize text-primary opacity-0 transition-colors duration-300 [animation-delay:0.1s] hover:bg-accent">
- View all
- </div>
- </a>
+ <Button href="/posts" link="View all" />
) : null
}
</section>
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
index e305ec8..5737ed4 100644
--- a/src/pages/posts/index.astro
+++ b/src/pages/posts/index.astro
@@ -10,7 +10,7 @@ const posts = (await getCollection("posts"))
---
<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
- <h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
+ <h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
{POSTS.TITLE}
</h1>
<ol
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index e839209..2238093 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -10,11 +10,11 @@ const projects = (await getCollection("projects"))
---
<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
- <h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
+ <h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
{PROJECTS.TITLE}
</h1>
<ol
- class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
+ class="mt-16 grid animate-reveal grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
>
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
</ol>
diff --git a/src/styles/global.css b/src/styles/global.css
index 0cc053c..f915d20 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -28,3 +28,11 @@
@apply transition-transform hover:scale-[98%] active:scale-[200%];
}
}
+
+@media print {
+ body {
+ margin: 0;
+ color: #000;
+ background-color: #fff;
+ }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 36484f2..4e6bab1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -19,7 +19,7 @@ export default {
},
animation: {
reveal: "reveal 0.3s forwards ease-in-out",
- logo: "logo 1s forwards ease-out",
+ logo: "logo 0.5s forwards ease-out",
"gradient-x": "gradient-x 6s ease infinite",
"gradient-y": "gradient-y 6s ease infinite",
"gradient-xy": "gradient-xy 6s ease infinite",
@@ -39,11 +39,11 @@ export default {
},
logo: {
"0%": {
- transform: "translateY(480px)",
+ transform: "translateY(100%)",
color: "hsl(var(--primary))",
},
"100%": {
- transform: "translateY(0px)",
+ transform: "translateY(0%)",
color: "hsl(var(--secondary))",
},
},