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

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>