Add alt as caption, add details to header, add some early writing to DNDT

projects/dungeons-and-dining-tables.mdx

@@ -30,3 +30,20 @@ externalLinks:
     }
   ]
 ---
+
+_This page contains just a few details of my involvement in the project. I will continue to update it and add more details while the game develops (and when I get the time to!)_.
+
+Since late 2023 I have had the pleasure of working with the team at Catalyst Games on the cozy-adventure RPG _Dungeons and Dining Tables_, a game where you play as an axolotl on a quest to decorate their house.
+This little axolotl and the team around it have since become key figures in my life and I consider myself privileged to be a part of the project's development.
+
+![The axolotl, which I affectionately name Frank after the axolotl of a friend](/src/assets/img/projects/dungeons-and-dining-tables/nathan-cummins-dungeons-and-dining-tables-13.jpg)
+
+# My Role
+
+While I joined the team partway through the development of the project, I have still been involved since quite early in the development timeline as a composer, sound designer, and also as a programmer responsible for almost all integration of audio.
+This has allowed me to deeply integrate both music and sound into the game and with cross-pollination of the two together, from birds that tweet the melody of the area that you are in, to music that mixes between highly orchestrated pieces to music for jazz quartet, to custom designed logic allowing sounds to be obscured by objects in the game-world.
+
+# My Inspiration
+
+Throughout the project I have taken a lot of inspiration from games that have been significant to my development as a composer and as a sound designer.
+The games that have inspired me the most include _Super Mario Galaxy_, and many games from the _The Legend of Zelda_ series, in particular the approach to sound design from _The Legend of Zelda: Breath of the Wild_.

src/components/MDX/IMG.astro

@@ -7,4 +7,11 @@ import { getImageByPath } from "@lib/utils";
 const image = getImageByPath(src);
 ---
 
-{image && <Image src={image} alt={alt} />}
+{
+  image && (
+    <div class="my-8">
+      <Image src={image} alt={alt} />
+      <div class="mt-2 block w-full text-center text-sm italic">{alt}</div>
+    </div>
+  )
+}

src/pages/projects/[...slug].astro

@@ -58,22 +58,29 @@ import P from "@components/MDX/P.astro";
 >
   <div class="w-full">
     <section id="title" class="text-white">
-      <div class="flex h-96 w-full items-center justify-center">
+      <div class="flex h-100 w-full items-center justify-center">
         <ImageCarousel
           images={images}
           class="h-full w-full"
           foreground={true}
           interval={2000}
           transitionDuration="duration-1000"
-          quality={50}
-          height={256}
+          quality={70}
+          height={400}
           shuffle={true}
           ><div
             class="absolute inset-0 flex h-full w-full items-center justify-center px-8 text-center"
           >
-            <h1 class="font-header text-5xl uppercase text-shadow-lg/75">
-              {project.data.title}
-            </h1>
+            <div class="block">
+              <h1 class="font-header text-5xl uppercase text-shadow-lg/75">
+                {project.data.title}
+              </h1>
+              <div class="pt-2 text-lg font-bold">
+                <span>{project.data.role}</span> | <span
+                  >{project.data.type}</span
+                >
+              </div>
+            </div>
           </div></ImageCarousel
         >
       </div>