feat: include brief description on index

inspiration taken from sanju.sh

bun.lock

@@ -10,7 +10,6 @@
         "@astrojs/sitemap": "3.2.1",
         "@fontsource-variable/outfit": "^5.1.1",
         "@fontsource-variable/red-hat-mono": "^5.1.1",
-        "@fontsource/instrument-serif": "^5.1.1",
         "@tailwindcss/vite": "^4.0.6",
         "astro": "^5.3.0",
         "astro-icon": "^1.1.5",
@@ -133,8 +132,6 @@
 
     "@fontsource-variable/red-hat-mono": ["@fontsource-variable/red-hat-mono@5.1.1", "", {}, "sha512-yeZTpCFFU+fJwlhDrMdQROva42Kuaj1KjCp2HSHziT0FE+BPEL90oS0yAAdDZqwjgI77wDp2I6kgnZoHFV95AQ=="],
 
-    "@fontsource/instrument-serif": ["@fontsource/instrument-serif@5.1.1", "", {}, "sha512-DZ+ho/lr8PIqilsGjh5jc0o9oT1BR8UHaBMzCdC4r4MmMqopMzS8uEFGuKwNCd7cDSoAiVXEigaRgnzdi1uv1g=="],
-
     "@iconify-json/mdi": ["@iconify-json/mdi@1.2.3", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg=="],
 
     "@iconify/tools": ["@iconify/tools@4.1.1", "", { "dependencies": { "@iconify/types": "^2.0.0", "@iconify/utils": "^2.2.0", "@types/tar": "^6.1.13", "axios": "^1.7.9", "cheerio": "1.0.0", "domhandler": "^5.0.3", "extract-zip": "^2.0.1", "local-pkg": "^0.5.1", "pathe": "^1.1.2", "svgo": "^3.3.2", "tar": "^6.2.1" } }, "sha512-Hybu/HGhv6T8nLQhiG9rKx+ekF7NNpPOEQAy7JRSKht3s3dcFSsPccYzk24Znc9MTxrR6Gak3cg6CPP5dyvS2Q=="],

package.json

@@ -17,7 +17,6 @@
     "@astrojs/sitemap": "3.2.1",
     "@fontsource-variable/outfit": "^5.1.1",
     "@fontsource-variable/red-hat-mono": "^5.1.1",
-    "@fontsource/instrument-serif": "^5.1.1",
     "@tailwindcss/vite": "^4.0.6",
     "astro": "^5.3.0",
     "astro-icon": "^1.1.5",

src/components/Header.astro

@@ -1,5 +1,6 @@
 ---
 import { SITE } from "@consts";
+import Button from "@components/Button.astro";
 
 const pathname = new URL(Astro.request.url).pathname;
 const currentPath = pathname.replace(/\/$/, "");
@@ -32,6 +33,7 @@ const currentPath = pathname.replace(/\/$/, "");
           );
         })
       }
+      <Button href={`mailto:${SITE.EMAIL}`} link="Email" />
     </ul>
   </nav>
 </header>

src/components/Hero.astro

@@ -1,27 +1,41 @@
 ---
-import { Image } from "astro:assets";
-import icon from "public/assets/icon.png";
+import { SITE } from "@consts";
+import Link from "@components/Link.astro";
 ---
 
-<section class="animate-reveal opacity-0">
-  <div class="mx-auto flex h-full self-center px-8 py-32">
-    <div
-      class="mx-auto my-auto max-w-xl text-center text-4xl tracking-tight text-balance text-white md:text-6xl"
+<section class="animate-reveal flex flex-col gap-6 opacity-0">
+  <h1
+    class="flex w-full flex-col lowercase text-start text-7xl leading-[1] font-medium tracking-[-2px] sm:tracking-[-4px]"
   >
-      <div
-        class="text-secondary flex items-center justify-center gap-3 font-semibold"
+    <span class="text-nowrap">Troy Lusty</span>
+    <span class="text-tertiary text-pretty">Digital Designer</span>
+  </h1>
+  <div class="text-secondary/70 text-lg font-medium">
+    I am in my final year of studying on a Game Arts and Design BA (Hons) degree
+    and on the side I manage online operations for a
+    <Link href="/projects/camouflage-store" class="underline underline-offset-2"
+      >family run business</Link
+    >.
+  </div>
+  <div class="text-tertiary text-lg font-medium">
+    Want to chat?
+    <Link
+      href="mailto:hello@troylusty.com"
+      class="underline lowercase underline-offset-2"
     >
-        Hi, I'm Troy,
-        <Image
-          src={icon}
-          class="size-12 rounded-xl md:size-16"
-          alt="Troy Lusty"
-          loading="eager"
-        />
-      </div>
-      <div class="text-tertiary font-serif font-light tracking-wide italic">
-        digital designer.
-      </div>
+      Send me a message
+    </Link>
   </div>
+  <div id="social-links" class="flex flex-row gap-4">
+    {
+      SITE.LINKS.map((i) => (
+        <Link
+          href={i.href}
+          class="text-tertiary hover:text-accent text-lg font-medium lowercase underline-offset-2 hover:underline"
+        >
+          {i.name}
+        </Link>
+      ))
+    }
   </div>
 </section>

src/consts.ts

@@ -25,7 +25,7 @@ export const SITE: Site = {
   AUTHOR: "Troy Lusty",
   LINKS: [
     {
-      name: "RSS feed",
+      name: "RSS",
       href: "/rss.xml",
       icon: "mdi:rss",
     },
@@ -50,7 +50,7 @@ export const SITE: Site = {
       icon: "mdi:github",
     },
     {
-      name: "Steam developer",
+      name: "Steam",
       href: "https://store.steampowered.com/developer/troy",
       icon: "mdi:steam",
     },

src/content/projects/3d-package-design/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: "3D Package Design"
-description: "3D Package Design inspired by Derek Elliott."
+description: "3D Package Design inspired by the work of Derek Elliott."
 date: 2020-08-16
 updated: 2020-08-16
 image:

src/content/projects/astronaut/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Astronaut"
-description: "Astronaut (Lighting and Camera Test)"
+description: "Lighting and camera test."
 date: 2022-03-28
 updated: 2022-03-28
 image: { url: "troy-lusty-astronaut.avif", alt: "Astronaut final piece" }

src/content/projects/must-find-beans/index.mdx

@@ -0,0 +1,41 @@
+---
+title: "MUST FIND BEANS"
+description: "What would you do if you awoke to find your breakfast entirely bean free, and how far would you go to make it right?"
+date: 2026-01-01
+updated: 2026-01-01
+image: { url: "capsule.avif", alt: "MUST FIND BEANS Title Logo" }
+tags: ["godot", "blender"]
+categories: ["personal"]
+includeHero: true
+draft: true
+---
+
+## Details
+
+**THIS GAME IS VERY EARLY IN PRODUCTION**
+
+Demonstrate your culinary combat skills in MUST FIND BEANS, a chaos driven FPS set in an endless arena full of enemies in an eat or be eaten situation.
+
+### Culinary combat
+
+Prepare and serve up your opponents using a variety of cutlery and condiments, each fit for a different scenario!
+
+### Leaderboard
+
+Go against players all around the world with the in-game leaderboard.
+
+### Other key features
+
+- Ultra-wide support
+
+## Early screenshots
+
+![](ss_8340a3c02235371547350c557fefb830e6e2d067.avif)
+![](ss_c578870d1c22722983b76c3effe7fba7f5d1cb5e.avif)
+![](ss_b2dc5ca65e2f24088afac3faf79f450057e13383.avif)
+![](ss_3f3907ac4aa8d8e9e4ca19ecab3c51ede971b2bd.avif)
+![](ss_ed538aaba4f11d33c6919a7d17657b6ffc2b422a.avif)
+
+### External links
+
+[Steam store page](https://store.steampowered.com/app/3012740/MUST_FIND_BEANS/)

src/content/projects/unreleased-projects/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Unreleased projects"
-description: "Unreleased and incomplete projects."
+description: "Incomplete and in-progress projects."
 date: 2022-07-07
 updated: 2024-11-05
 collection: true

src/pages/cv.astro

@@ -258,7 +258,7 @@ import icon from "public/assets/icon.png";
                   <div class="mt-5 w-full lg:inline-block lg:w-8/12">
                     <span class="box">Astro</span>
                     <span class="box">Tailwind CSS</span>
-                    <span class="box">Alpine.js</span>
+                    <span class="box">TypeScript</span>
                     <span class="box">GitHub Actions</span>
                     <span class="box">Docker</span>
                   </div>

src/pages/index.astro

@@ -14,10 +14,7 @@ const projects = allProjects
 
 <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
   <Hero />
-  <section
-    id="featured-projects"
-    class="animate-reveal opacity-0 [animation-delay:0.1s]"
-  >
+  <section class="animate-reveal opacity-0 [animation-delay:0.1s]">
     <Slideshow images={projects} />
   </section>
 </Layout>

src/styles/global.css

@@ -43,8 +43,11 @@
   --tertiary: light-dark(var(--color-neutral-500), var(--color-neutral-500));
   --accent: light-dark(var(--color-neutral-700), var(--color-neutral-300));
 
-  --button: light-dark(#f3f4f6, #1f1f1f);
-  --button-active: light-dark(#e5e7eb, #2f2f2f);
+  --button: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --button-active: light-dark(
+    var(--color-neutral-300),
+    var(--color-neutral-700)
+  );
 }
 
 @media (prefers-color-scheme: dark) {