Publish partially complete changes in order to make applications

src/pages/404.astro

@@ -4,20 +4,10 @@ import { SITE } from "@consts";
 ---
 
 <Layout title="404" description={SITE.DESCRIPTION}>
-  <section class="mb-32" id="postHero" aria-labelledby="featured-projects">
-    <div
-      class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
-    >
-      <div>
-        <h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
-          404
-        </h1>
-        <h2
-          class="animate-reveal mt-2 font-bold opacity-0 [animation-delay:0.1s]"
-        >
-          Content not found
-        </h2>
-      </div>
-    </div>
-  </section>
+  <h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
+    404
+  </h1>
+  <h2 class="animate-reveal font-bold opacity-0 [animation-delay:0.1s]">
+    Content not found
+  </h2>
 </Layout>

src/pages/about.astro

@@ -0,0 +1,85 @@
+---
+import Layout from "@layouts/Layout.astro";
+import { SITE, ABOUT } from "@consts";
+import { Image } from "astro:assets";
+import { Icon } from "astro-icon/components";
+import Link from "@components/Link.astro";
+import icon from "public/assets/icon.png";
+import Button from "@components/Button.astro";
+---
+
+<Layout title={SITE.TITLE} description={ABOUT.DESCRIPTION}>
+  <div class="animate-reveal flex items-center justify-between opacity-0">
+    <div class="flex-1 space-y-1.5">
+      <h1
+        class="animate-reveal flex flex-col text-start text-3xl font-semibold opacity-0 sm:block"
+      >
+        <span class="text-secondary text-nowrap">{SITE.AUTHOR}</span><span
+          class="text-tertiary sm:ml-2">{ABOUT.DESCRIPTION}</span
+        >
+      </h1>
+      <p class="text-secondary/70 max-w-md text-pretty">Digital designer.</p><p
+        class="text-secondary/70 max-w-md items-center text-sm text-pretty"
+      >
+        <Link
+          class="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
+          href="https://www.google.com/maps/place/Devon"
+        >
+          <Icon name="mdi:earth" class="h-3 w-3" />
+          Devon, United Kingdom, GMT
+        </Link>
+      </p><div class="text-secondary/70 flex gap-x-1 pt-1 text-sm print:hidden">
+        <a
+          href={`mailto:${SITE.EMAIL}`}
+          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
+        >
+          <Icon name="mdi:email" title="Email" class="h-4 w-4" />
+        </a>
+        <Link
+          href="/"
+          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
+        >
+          <Icon name="mdi:link-variant" title="Website" class="h-4 w-4" />
+        </Link>
+
+        <Link
+          href="https://code.troylusty.com"
+          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
+        >
+          <Icon name="mdi:git" title="Git" class="h-4 w-4" />
+        </Link>
+        <Link
+          href="https://store.steampowered.com/developer/troy"
+          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
+        >
+          <Icon name="mdi:steam" title="Steamworks" class="h-4 w-4" />
+        </Link>
+      </div>
+      <p
+        class="text-secondary/70 hidden max-w-md items-center text-sm text-pretty print:flex"
+      >
+        <Link
+          class="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
+          href={`mailto:${SITE.EMAIL}`}
+        >
+          <Icon name="mdi:email" class="h-3 w-3" />
+          {SITE.EMAIL}
+        </Link>
+      </p>
+    </div><span
+      class="relative flex h-28 w-28 shrink-0 overflow-hidden rounded-xl"
+    >
+      <Image
+        src={icon}
+        alt="Troy Lusty"
+        class="aspect-square h-full w-full"
+        loading="eager"
+      />
+    </span>
+  </div>
+  <div
+    class="animate-reveal mx-auto max-w-full opacity-0 [animation-delay:0.2s]"
+  >
+    <Button href="/cv" link="CV" />
+  </div>
+</Layout>

src/pages/archive/index.astro

@@ -0,0 +1,41 @@
+---
+import Layout from "@layouts/Layout.astro";
+import { Image } from "astro:assets";
+import { ARCHIVE } from "@consts";
+
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  `./assets/*.{jpeg,jpg,png}`,
+);
+
+const imageList = await Promise.all(
+  Object.entries(images).map(async ([filepath, imageModule]) => {
+    const metadata = await imageModule();
+    return {
+      image: metadata.default,
+      alt: filepath,
+    };
+  }),
+);
+---
+
+<Layout title={ARCHIVE.TITLE} description={ARCHIVE.DESCRIPTION}>
+  <h1
+    class="animate-reveal text-start text-3xl font-semibold break-words opacity-0"
+  >
+    <span class="text-secondary">{ARCHIVE.TITLE}</span><span
+      class="text-tertiary ml-2">{ARCHIVE.DESCRIPTION}</span
+    >
+  </h1>
+  <div class="animate-reveal grid grid-cols-2 md:grid-cols-3 gap-2 [animation-delay:0.1s]">
+    {
+      imageList.map((item) => (
+        <Image
+          src={item.image}
+          alt={item.alt}
+          loading="eager"
+          class="aspect-square h-full w-full rounded-sm object-cover"
+        />
+      ))
+    }
+  </div>
+</Layout>

src/pages/cv.mdx

@@ -22,6 +22,7 @@ My role has me in charge of managing an online e-commerce store in addition to c
 
 - **Production Assistant**, SDC Radiant Rumble <small class="font-light font-mono text-xs">(2024)</small>
 - **Photogrammetrist**, Paignton Picture House <small class="font-light font-mono text-xs">(2023)</small>
+- **Website mock-up templates**, WebBoss <small class="font-light font-mono text-xs">(2019)</small>
 
 ---
 

src/pages/index.astro

@@ -8,8 +8,7 @@ import Slideshow from "@components/Slideshow.astro";
 const allProjects = await getCollection("projects");
 const projects = allProjects
   .filter((project) => !project.data.draft && project.data.featured)
-  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
-  .slice(0, HOME.HOMESETTINGS?.NUM_PROJECTS_ON_HOMEPAGE);
+  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 ---
 
 <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>

src/pages/posts/index.astro

@@ -16,6 +16,10 @@ const posts = (await getCollection("posts"))
   <ol
     class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
   >
-    {posts.map((article: any) => <ShowcasePost collection={article} />)}
+    {
+      //import type { CollectionEntry } from "astro:content";
+      //posts.map((article: CollectionEntry<"posts">) => (
+      posts.map((article: any) => <ShowcasePost collection={article} />)
+    }
   </ol>
 </Layout>

src/pages/projects/index.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
 import { PROJECTS, SITE } from "@consts";
 import Layout from "@layouts/Layout.astro";
 import ShowcaseProject from "@components/ShowcaseProject.astro";

src/pages/tags/index.astro

@@ -4,13 +4,16 @@ import { SITE } from "@consts";
 import Layout from "@layouts/Layout.astro";
 import { createSlug } from "@lib/utils";
 
-function freqSort(items: Array<string>) {
-  var cnts = items.reduce(function (obj: any, val) {
-    obj[val] = (obj[val] || 0) + 1;
-    return obj;
-  }, {});
-  var sorted = Object.keys(cnts).sort(function (a, b) {
-    return cnts[b] - cnts[a];
+function freqSort(items: Array<string>): string[] {
+  const counts: { [key: string]: number } = items.reduce(
+    (obj: { [key: string]: number }, val: string) => {
+      obj[val] = (obj[val] || 0) + 1;
+      return obj;
+    },
+    {},
+  );
+  const sorted: string[] = Object.keys(counts).sort((a: string, b: string) => {
+    return counts[b] - counts[a];
   });
   return sorted;
 }