styling (#80)

src/components/PlayVoice.astro

@@ -11,9 +11,10 @@ const { id } = Astro.props;
     <astro-voice data-id={id}>
       <button
         id="play-voice"
-        class="absolute right-3 top-3 z-20 flex w-16 items-center gap-1 text-sm"
+        class="fixed right-3 top-3 z-20 flex w-24 items-center gap-1 text-sm"
         aria-label="play text content as audio"
       >
+        <span class="sr-only">play text content as audio</span>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -32,7 +33,7 @@ const { id } = Astro.props;
             fill="currentColor"
           />
         </svg>
-        Read
+        Read (AI)
       </button>
     </astro-voice>
   )
@@ -70,7 +71,7 @@ const { id } = Astro.props;
         );
         audio.addEventListener(
           "pause",
-          () => (button.innerHTML = playIcon + "Read"),
+          () => (button.innerHTML = playIcon + "Read (AI)"),
         );
       }
     }

src/components/pages/home/ProjectCard.astro

@@ -41,17 +41,23 @@ const tags: CollectionEntry<"tags">[] = await getEntries(project.data.tags);
       aria-label={`${project.data.name} project page`}
       data-astro-prefetch
     >
-      <Image
-        src={project.data.cover}
-        height={192}
-        alt={project.data.name}
-        class={cn(
-          "mx-auto mb-2 h-[128px] object-contain opacity-0 animate-show",
-          project.slug === "vsctrustorgnz" && "dark:invert",
-        )}
-        loading="lazy"
-        transition:name={`project-${project.data.name}-image`}
-      /></a
+      {
+        project.data.cover ? (
+          <Image
+            src={project.data.cover}
+            height={192}
+            alt={project.data.name}
+            class={cn(
+              "mx-auto mb-2 h-[128px] animate-show object-contain opacity-0",
+              project.slug === "vsctrustorgnz" && "dark:invert",
+            )}
+            loading="lazy"
+            transition:name={`project-${project.data.name}-image`}
+          />
+        ) : (
+          <div class="h-[128px] w-full" />
+        )
+      }</a
     >
 
     <div class="mt-auto">

src/content/config.ts

@@ -21,7 +21,7 @@ const projects = defineCollection({
     z.object({
       name: z.string(),
       description: z.string(),
-      cover: image(),
+      cover: image().optional(),
       image: image(),
       url: z.string(),
       source: z.string().optional(),

src/content/projects/astroawsamplify.md

@@ -1,7 +1,6 @@
 ---
 name: Astro AWS Amplify
 description: Astro + Amplify SSR Hosting
-cover: "./astroawsamplify-cover.png"
 image: "./astroawsamplify.png"
 url: https://www.astroawsamplify.com/
 tags:

src/pages/index.astro

@@ -4,8 +4,13 @@ import { getCollection } from "astro:content";
 import { SEO } from "astro-seo";
 
 import Layout from "@/layouts/Layout.astro";
+import Tool from "@/components/pages/home/Tool.astro";
 import ProjectCard from "@/components/pages/home/ProjectCard.astro";
 
+const tools = (await getCollection("tools")).sort(
+  (a, b) => a.data.order - b.data.order,
+);
+
 const projects = (await getCollection("projects")).sort(
   (a, b) => a.data.order - b.data.order,
 );
@@ -48,6 +53,19 @@ const ogImageUrl = new URL(
     I'm a web developer. Currently I work as a freelancer.
   </p>
 
+  <div class="flex flex-col gap-6">
+    <div class="space-y-4">
+      <h2>Some cool things I've worked with</h2>
+      <ul class="grid grid-cols-2 justify-center gap-6 sm:grid-cols-4">
+        {
+          tools.map(({ slug, data: tool }) => (
+            <Tool name={tool.name} slug={slug} url={tool.url} />
+          ))
+        }
+      </ul>
+    </div>
+  </div>
+
   <h2 class="mt-6">Some of my projects</h2>
 
   <div