set max-w-prose on entire site (#30)
This commit is contained in:
GitHub
parent
cf859eda1b
commit
70875623b1
23 changed files with 184 additions and 208 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue