max-w-prose entire site

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>

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
+  <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>
       <Content />
     </Prose>

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>

src/components/Footer.astro

@@ -4,8 +4,7 @@ import Link from "@components/Link.astro";
 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="mb-6 text-secondary md:mb-0">
       <a class="inline-flex items-center" href="#top" title="Back to top">
@@ -18,11 +17,10 @@ import { Icon } from "astro-icon/components";
       </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">
+            <li class="mb-1 last:mb-0">
               <a
                 data-navlink
                 href={i.href}
@@ -36,15 +34,13 @@ import { Icon } from "astro-icon/components";
       </ul>
     </div>
   </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"
+      <a href="/" class="transition-colors hover:text-secondary">{SITE.TITLE}</a
-          >{SITE.TITLE}</a
       >. All Rights Reserved.
     </span>
-      <div class="mt-4 flex gap-5 sm:mt-0 sm:justify-center">
+    <div class="mt-4 flex gap-2 sm:mt-0 sm:justify-center">
       {
         SITE.LINKS.map((i) => (
           <Link href={i.href}>
@@ -58,5 +54,4 @@ import { Icon } from "astro-icon/components";
       }
     </div>
   </div>
-  </div>
 </footer>

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

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>

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>

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>

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">
+      <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"
           >{collection.data.description}</span
         >

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>

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>

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>

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

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:
+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"]
 categories: ["personal"]
 ---

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
+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.

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>
+      <main class="mx-auto w-full max-w-prose space-y-6">
-        <SkinnyCenter>
         <slot />
-        </SkinnyCenter>
       </main>
       <Footer />
     </div>

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
+        <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>
   </section>

src/pages/cv.astro

@@ -6,20 +6,18 @@ 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>
     <div
       class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
     >
-        <h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
+      <h1 class="animate-reveal break-words text-2xl 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"
+        class="mt-4 flex flex-col items-start gap-2 text-tertiary md:flex-row"
       >
         <div class="flex animate-reveal items-center gap-2 opacity-0">
           <div
@@ -43,14 +41,12 @@ import Prose from "@components/Prose.astro";
     </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">
+    <h2 class="mb-4 break-words text-2xl font-semibold capitalize">About me</h2>
-        About me
+    <p class="mb-2">
-      </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">
+    <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
@@ -58,7 +54,7 @@ import Prose from "@components/Prose.astro";
       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">
+    <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"
@@ -67,16 +63,14 @@ import Prose from "@components/Prose.astro";
     </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">
+    <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-16 break-words text-4xl font-semibold capitalize">
+    <h2 class="mb-4 break-words text-2xl font-semibold capitalize">Skills</h2>
-        Skills
+    <p class="mb-2">
-      </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
@@ -85,10 +79,9 @@ import Prose from "@components/Prose.astro";
     <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">
+    <h2 class="mb-4 break-words text-2xl font-semibold capitalize">
       Experience
     </h2>
     <Work />
   </section>
-  </div>
 </Layout>

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">
+        <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
     }
   </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">
+        <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
     }
   </section>

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

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>

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;
+  }
+}

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