From 70875623b178c9f695756ac44f3b12defe76a476 Mon Sep 17 00:00:00 2001
From: Troy <hello@troylusty.com>
Date: Fri, 17 Jan 2025 22:16:14 +0000
Subject: [PATCH] set max-w-prose on entire site (#30)

---
 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"
-        >&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">
+    <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"
+      >&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>
 </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))",
         },
       },