troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

set max-w-prose on entire site (#30)

Browse source
This commit is contained in:
Troy 2025-01-17 22:16:14 +00:00 • committed by GitHub
parent cf859eda1b
commit 70875623b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 184 additions and 208 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Accordion.astro
View file

@ -16,7 +16,7 @@ const { institution, qualification, grades, isOpen = false } = Astro.props;
<summary <summary
class="flex cursor-pointer items-center justify-between py-3 font-bold" 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} {qualification}
</p> </p>
<span class="transition group-open:rotate-180"> <span class="transition group-open:rotate-180">
@ -26,7 +26,7 @@ const { institution, qualification, grades, isOpen = false } = Astro.props;
/> />
</span> </span>
</summary> </summary>
<div class="p-4 text-lg"> <div class="p-4">
<p class="my-0 mb-2 font-semibold text-tertiary"> <p class="my-0 mb-2 font-semibold text-tertiary">
{institution} {institution}
</p> </p>

10
src/components/Article.astro
View file

@ -28,16 +28,16 @@ const listFormatter = new Intl.ListFormat("en-GB", {
updated={article.data.updated} updated={article.data.updated}
tags={article.data.tags} tags={article.data.tags}
> >
<div class="mx-auto mb-16 max-w-prose"> <div class="mx-auto mb-8">
<h1 <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 <span class="text-secondary">{article.data.title}</span><span
class="ml-2 text-tertiary">{article.data.description}</span class="ml-2 text-tertiary">{article.data.description}</span
> >
</h1> </h1>
<div <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"> <div class="flex items-center gap-2">
<Icon name="mdi:calendar" /> <Icon name="mdi:calendar" />
@ -79,9 +79,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
} }
</div> </div>
</div> </div>
<div <div class="mx-auto animate-reveal opacity-0 [animation-delay:0.2s]">
class="mx-auto max-w-prose animate-reveal opacity-0 [animation-delay:0.2s]"
>
<Prose> <Prose>
<Content /> <Content />
</Prose> </Prose>

16
src/components/Button.astro Normal file
View file

@ -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>

91
src/components/Footer.astro
View file

@ -4,59 +4,54 @@ import Link from "@components/Link.astro";
import { Icon } from "astro-icon/components"; import { Icon } from "astro-icon/components";
--- ---
<footer class="mt-auto"> <footer class="mx-auto mb-8 mt-auto w-full max-w-prose space-y-6 pt-12">
<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="md:flex md:justify-between"> <div class="mb-6 text-secondary md:mb-0">
<div class="mb-6 text-secondary md:mb-0"> <a class="inline-flex items-center" href="#top" title="Back to top">
<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" />
<Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out" /> <div
<div class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block"
class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block" >
> Troy Lusty
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>
</div> </div>
</div> </a>
</div> </div>
<div class="mt-12 sm:flex sm:items-center sm:justify-between lg:mt-16"> <div class="text-left sm:gap-6 md:text-right">
<span class="text-sm text-tertiary sm:text-center" <ul class="font-medium text-tertiary">
>&copy; {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">
{ {
SITE.LINKS.map((i) => ( SITE.NAVLINKS.map((i) => (
<Link href={i.href}> <li class="mb-1 last:mb-0">
<Icon <a
name={i.icon} data-navlink
title={i.name} href={i.href}
class="h-5 w-5 text-tertiary transition-colors hover:text-secondary" class="capitalize transition-colors hover:text-secondary"
/> >
</Link> {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"
>&copy; {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>
</div> </div>
</footer> </footer>

2
src/components/Header.astro
View file

@ -3,7 +3,7 @@ import { SITE } from "@consts";
import { Icon } from "astro-icon/components"; 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 <div
class="flex h-12 items-center justify-between leading-[0px] text-secondary" class="flex h-12 items-center justify-between leading-[0px] text-secondary"
> >

4
src/components/Hero.astro
View file

@ -12,10 +12,10 @@ import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
<section class="mb-32 overflow-clip"> <section class="mb-32 overflow-clip">
<h1 <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 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 >United Kingdom</span
>. >.
</h1> </h1>

2
src/components/Prose.astro
View file

@ -1,5 +1,5 @@
<div <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 /> <slot />
</div> </div>

4
src/components/RelatedArticles.astro
View file

@ -33,14 +33,14 @@ const next = items[(index + 1) % items.length];
/> />
</a> </a>
<a href={`/${prev.collection}/${prev.slug}`}> <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} {prev.data.title}
</p> </p>
</a> </a>
</div> </div>
<div class="group flex w-fit flex-row items-center justify-between gap-2 self-end"> <div class="group flex w-fit flex-row items-center justify-between gap-2 self-end">
<a href={`/${next.collection}/${next.slug}`}> <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} {next.data.title}
</p> </p>
</a> </a>

6
src/components/ShowcasePost.astro
View file

@ -14,10 +14,8 @@ const { collection } = Astro.props;
href={`/${collection.collection}/${collection.slug}`} href={`/${collection.collection}/${collection.slug}`}
> >
<article class="flex flex-col"> <article class="flex flex-col">
<h3 class="mb-3 text-balance text-xl font-semibold"> <h3 class="mb-1 text-balance font-semibold">
<span title="Title" class="text-secondary">{collection.data.title}</span <span class="text-secondary">{collection.data.title}</span><span
><span
title="Description"
class="ml-2 text-tertiary transition-colors group-hover:text-accent" class="ml-2 text-tertiary transition-colors group-hover:text-accent"
>{collection.data.description}</span >{collection.data.description}</span
> >

2
src/components/ShowcaseProject.astro
View file

@ -27,7 +27,7 @@ const { collection } = Astro.props;
href={`/${collection.collection}/${collection.slug}`} href={`/${collection.collection}/${collection.slug}`}
aria-label={collection.data.title}></a> aria-label={collection.data.title}></a>
<h3 <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} {collection.data.title}
</h3> </h3>

2
src/components/Skills.astro
View file

@ -19,7 +19,7 @@ const skills = await Promise.all(
<Icon <Icon
name={entry.data.icon} name={entry.data.icon}
title={entry.data.title} 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> <p class="m-0 cursor-default">{entry.data.title}</p>
</li> </li>

2
src/components/SkinnyCenter.astro
View file

@ -1,5 +1,5 @@
<div <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 /> <slot />
</div> </div>

17
src/components/Work.astro
View file

@ -1,6 +1,7 @@
--- ---
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import { dateRange } from "@lib/utils"; import { dateRange } from "@lib/utils";
import Button from "./Button.astro";
const collection = (await getCollection("work")).sort( const collection = (await getCollection("work")).sort(
(a, b) => (a, b) =>
@ -18,23 +19,19 @@ const work = await Promise.all(
<ul class="list-none pl-0"> <ul class="list-none pl-0">
{ {
work.map((entry) => ( work.map((entry) => (
<li class="pb-8 pl-0 last:pb-0"> <li class="pb-4 pl-0 last:pb-0">
<h3 class="mb-1 mt-4 text-balance text-xl font-semibold text-secondary"> <h3 class="mb-1 mt-4 text-balance font-semibold text-secondary">
<span class="text-tertiary">{entry.data.role} at</span>{" "} <span class="text-tertiary">{entry.data.role} at</span>
{entry.data.company} {entry.data.company}
</h3> </h3>
<time class="block text-sm text-accent"> <time class="block text-accent">
{dateRange(entry.data.dateStart, entry.data.dateEnd)} {dateRange(entry.data.dateStart, entry.data.dateEnd)}
</time> </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 /> <entry.Content />
</article> </article>
{entry.data.article ? ( {entry.data.article ? (
<a href={entry.data.article}> <Button href={entry.data.article} link="View project" />
<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>
) : null} ) : null}
</li> </li>
)) ))

6
src/content/projects/packard/index.mdx
View file

@ -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." 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 date: 2025-01-12
updated: 2025-01-12 updated: 2025-01-12
image: image: { url: "packard.avif", alt: "Packard GitHub v0.0.1 Release" }
{
url: "packard.avif",
alt: "Packard GitHub v0.0.1 Release",
}
tags: ["rust", "rss aggregator"] tags: ["rust", "rss aggregator"]
categories: ["personal"] categories: ["personal"]
--- ---

6
src/content/work/camouflage-store.md
View file

@ -6,8 +6,4 @@ dateEnd: "Current"
article: "https://troylusty.com/projects/camouflage-store" article: "https://troylusty.com/projects/camouflage-store"
--- ---
Setup and ongoing management of an Migrating and managing an ecommerce store, in addition to creating informational video content.
[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.

11
src/layouts/Layout.astro
View file

@ -2,7 +2,6 @@
import Head from "@components/Head.astro"; import Head from "@components/Head.astro";
import Header from "@components/Header.astro"; import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro"; import Footer from "@components/Footer.astro";
import SkinnyCenter from "@components/SkinnyCenter.astro";
import "@styles/global.css"; import "@styles/global.css";
interface Props { interface Props {
@ -18,7 +17,7 @@ const { title, description, image, date, updated, tags } = Astro.props;
--- ---
<!doctype html> <!doctype html>
<html lang="en" class="overflow-y-scroll scroll-smooth subpixel-antialiased"> <html lang="en" class="scroll-smooth antialiased">
<Head <Head
title={title} title={title}
description={description} description={description}
@ -28,12 +27,10 @@ const { title, description, image, date, updated, tags } = Astro.props;
tags={tags} tags={tags}
/> />
<body class="bg-primary text-secondary"> <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 /> <Header />
<main> <main class="mx-auto w-full max-w-prose space-y-6">
<SkinnyCenter> <slot />
<slot />
</SkinnyCenter>
</main> </main>
<Footer /> <Footer />
</div> </div>

18
src/pages/404.astro
View file

@ -1,7 +1,7 @@
--- ---
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import { SITE } from "@consts"; import { SITE } from "@consts";
import { Icon } from "astro-icon/components"; import Button from "@components/Button.astro";
--- ---
<Layout title="404" description={SITE.DESCRIPTION}> <Layout title="404" description={SITE.DESCRIPTION}>
@ -11,29 +11,19 @@ import { Icon } from "astro-icon/components";
> >
<div> <div>
<h2 <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" id="featured-projects"
> >
404 404
</h2> </h2>
<h3 <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 Content not found
</h3> </h3>
</div> </div>
<div class="animate-reveal opacity-0 [animation-delay:0.2s]"> <div class="animate-reveal opacity-0 [animation-delay:0.2s]">
<a <Button href="/" link="Go home" />
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>
</div> </div>
</div> </div>
</section> </section>

147
src/pages/cv.astro
View file

@ -6,89 +6,82 @@ import Education from "@components/Education.astro";
import Skills from "@components/Skills.astro"; import Skills from "@components/Skills.astro";
import { Icon } from "astro-icon/components"; import { Icon } from "astro-icon/components";
import Link from "@components/Link.astro"; import Link from "@components/Link.astro";
import Prose from "@components/Prose.astro";
--- ---
<Layout title={CV.TITLE} description={CV.DESCRIPTION}> <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 <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"> <div class="flex animate-reveal items-center gap-2 opacity-0">
Troy Lusty <div
</h1> class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
<div >
class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row" <Icon name="mdi:email" />
> <Link href="mailto:hello@troylusty.com">
<div class="flex animate-reveal items-center gap-2 opacity-0"> <p>hello@troylusty.com</p>
<div </Link>
class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent" </div>
> <div
<Icon name="mdi:email" /> class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
<Link href="mailto:hello@troylusty.com"> >
<p>hello@troylusty.com</p> <Icon name="mdi:web" />
</Link> <Link href="/">
</div> <p>troylusty.com</p>
<div </Link>
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>
</div> </div>
</div> </div>
</section> </div>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]"> </section>
<h2 class="mb-16 break-words text-4xl font-semibold capitalize"> <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
About me <h2 class="mb-4 break-words text-2xl font-semibold capitalize">About me</h2>
</h2> <p class="mb-2">
<p class="mb-8 text-lg"> Hi, my name is Troy and I’m a student 3D artist studying on a BA (Hons)
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.
Game Arts and Design course in the UK. </p>
</p> <p class="mb-2">
<p class="mb-8 text-lg"> In 2019 I began experimenting with Blender after having used various 2D
In 2019 I began experimenting with Blender after having used various 2D art applications such as Adobe Photoshop for over 5 years. After making
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
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
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
my skillset to encompass other areas with a focus on lighting and rendering techniques in relation to environment art.
rendering techniques in relation to environment art. </p>
</p> <p class="mb-2">
<p class="mb-8 text-lg"> My current portfolio of work can be found on my website at:
My current portfolio of work can be found on my website at: <a
<a class="text-secondary underline decoration-tertiary decoration-wavy"
class="text-secondary underline decoration-tertiary decoration-wavy" href="/projects">troylusty.com/projects</a
href="/projects">troylusty.com/projects</a >.
>. </p>
</p> </section>
</section> <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]"> <h2 class="mb-4 break-words text-2xl font-semibold capitalize">
<h2 class="mb-16 break-words text-4xl font-semibold capitalize"> Education
Education </h2>
</h2> <Education />
<Education /> </section>
</section> <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
<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>
<h2 class="mb-16 break-words text-4xl font-semibold capitalize"> <p class="mb-2">
Skills My specific chosen area of focus is design, lighting, and rendering
</h2> focusing on 3D environments within software such as Blender and Unreal
<p class="mb-8 text-lg"> Engine. Using either real-time or offline rendering techniques. In
My specific chosen area of focus is design, lighting, and rendering addition to this, I am also very interested in web development.
focusing on 3D environments within software such as Blender and Unreal </p>
Engine. Using either real-time or offline rendering techniques. In <Skills />
addition to this, I am also very interested in web development. </section>
</p> <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
<Skills /> <h2 class="mb-4 break-words text-2xl font-semibold capitalize">
</section> Experience
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]"> </h2>
<h2 class="mb-16 break-words text-4xl font-semibold capitalize"> <Work />
Experience </section>
</h2>
<Work />
</section>
</div>
</Layout> </Layout>

22
src/pages/index.astro
View file

@ -5,6 +5,7 @@ import { getCollection } from "astro:content";
import ShowcaseProject from "@components/ShowcaseProject.astro"; import ShowcaseProject from "@components/ShowcaseProject.astro";
import ShowcasePost from "@components/ShowcasePost.astro"; import ShowcasePost from "@components/ShowcasePost.astro";
import Hero from "@components/Hero.astro"; import Hero from "@components/Hero.astro";
import Button from "@components/Button.astro";
const allPosts = await getCollection("posts"); 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"> <div class="group flex w-fit flex-row items-center justify-between gap-6">
<a href="/projects"> <a href="/projects">
<h2 <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" id="featured-projects"
> >
Featured projects Featured projects
@ -35,17 +36,13 @@ const projects = allProjects
</a> </a>
</div> </div>
<ol <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} />)} {projects.map((project) => <ShowcaseProject collection={project} />)}
</ol> </ol>
{ {
allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? ( allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? (
<a href="/projects"> <Button href="/projects" link="View all" />
<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>
) : null ) : null
} }
</section> </section>
@ -53,7 +50,7 @@ const projects = allProjects
<div class="group flex w-fit flex-row items-center justify-between gap-6"> <div class="group flex w-fit flex-row items-center justify-between gap-6">
<a href="/posts"> <a href="/posts">
<h2 <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" id="featured-projects"
> >
Recent posts Recent posts
@ -61,18 +58,13 @@ const projects = allProjects
</a> </a>
</div> </div>
<ol <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} />)} {posts.map((post) => <ShowcasePost collection={post} />)}
</ol> </ol>
{ {
allPosts.length > HOME.HOMESETTINGS!.NUM_POSTS_ON_HOMEPAGE ? ( allPosts.length > HOME.HOMESETTINGS!.NUM_POSTS_ON_HOMEPAGE ? (
<a href="/posts"> <Button href="/posts" link="View all" />
{" "}
<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>
) : null ) : null
} }
</section> </section>

2
src/pages/posts/index.astro
View file

@ -10,7 +10,7 @@ const posts = (await getCollection("posts"))
--- ---
<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}> <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} {POSTS.TITLE}
</h1> </h1>
<ol <ol

4
src/pages/projects/index.astro
View file

@ -10,11 +10,11 @@ const projects = (await getCollection("projects"))
--- ---
<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}> <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} {PROJECTS.TITLE}
</h1> </h1>
<ol <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} />)} {projects.map((article: any) => <ShowcaseProject collection={article} />)}
</ol> </ol>

8
src/styles/global.css
View file

@ -28,3 +28,11 @@
@apply transition-transform hover:scale-[98%] active:scale-[200%]; @apply transition-transform hover:scale-[98%] active:scale-[200%];
} }
} }
@media print {
body {
margin: 0;
color: #000;
background-color: #fff;
}
}

6
tailwind.config.ts
View file

@ -19,7 +19,7 @@ export default {
}, },
animation: { animation: {
reveal: "reveal 0.3s forwards ease-in-out", 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-x": "gradient-x 6s ease infinite",
"gradient-y": "gradient-y 6s ease infinite", "gradient-y": "gradient-y 6s ease infinite",
"gradient-xy": "gradient-xy 6s ease infinite", "gradient-xy": "gradient-xy 6s ease infinite",
@ -39,11 +39,11 @@ export default {
}, },
logo: { logo: {
"0%": { "0%": {
transform: "translateY(480px)", transform: "translateY(100%)",
color: "hsl(var(--primary))", color: "hsl(var(--primary))",
}, },
"100%": { "100%": {
transform: "translateY(0px)", transform: "translateY(0%)",
color: "hsl(var(--secondary))", color: "hsl(var(--secondary))",
}, },
}, },