Some content fixes, some layout fixes

src/pages/about.astro

@@ -17,15 +17,17 @@ import MainLayout from "../layouts/MainLayout.astro";
         <Image
           src={aboutImage}
           alt="A photo of Nathan conducting the Woodville Concert Band"
-          class="mx-auto mt-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out hover:scale-150 hover:shadow-xl/50"
+          class="mx-auto mt-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out md:hover:scale-150 md:hover:shadow-xl/50"
           transition:name="aboutImage"
         />
-        <a
+        <span class="block w-full text-center"
-          href="/contact/"
+          ><a
-          class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded object-center px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
+            href="/contact/"
+            class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded object-center px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
+          >
+            Get in touch!
+          </a></span
         >
-          Get in touch!
-        </a>
       </div>
     </section>
   </div>

src/pages/index.astro

@@ -1,25 +1,22 @@
 ---
 import { getCollection } from "astro:content";
 
+import ProjectCard from "@/components/ProjectCard.astro";
+import TrackCard from "@/components/TrackCard.astro";
+import { Content } from "@assets/bios/short.mdx";
+import aboutImage from "@assets/img/about.jpg";
+import AwardCard from "@components/AwardCard.astro";
+import ImageCarousel from "@components/ImageCarousel.astro";
+import Link from "@components/Link.astro";
+import Paragraph from "@components/Paragraph.astro";
+import SectionTitle from "@components/SectionTitle.astro";
+import person from "@data/person";
+import site from "@data/site";
+import MainLayout from "@layouts/MainLayout.astro";
 import { Image } from "astro:assets";
-import {
-  Content as AboutContent,
-  components as aboutComponents
-} from "../assets/bios/short.mdx";
-import aboutImage from "../assets/img/about.jpg";
-import AwardCard from "../components/AwardCard.astro";
-import ImageCarousel from "../components/ImageCarousel.astro";
-import Link from "../components/Link.astro";
-import Paragraph from "../components/Paragraph.astro";
-import ProjectCard from "../components/ProjectCard.astro";
-import SectionTitle from "../components/SectionTitle.astro";
-import person from "../data/person";
-import site from "../data/site";
-import MainLayout from "../layouts/MainLayout.astro";
 
 import { Icon } from "astro-icon/components";
 
-import TrackCard from "@/components/TrackCard.astro";
 import { convertEagerImagesImportGlobToArray } from "@lib/utils";
 
 const heroImages = import.meta.glob<{ default: ImageMetadata; eager: true }>(
@@ -56,13 +53,17 @@ const tracks = (
 ---
 
 <MainLayout navbarDisplay="transparent">
-  <div class="flex h-screen w-full items-center justify-center">
+  <div class="h-screen w-full flex-row">
-    <ImageCarousel
+    <div class="absolute inset-0 h-full w-full bg-black">
-      images={heroImagesArray}
+      <ImageCarousel
-      className="absolute z-10 h-full w-full"
+        images={heroImagesArray}
-      foreground={true}
+        className="h-full w-full"
-    />
+        foreground={true}
-    <div class="z-20 px-8 py-36 text-center">
+      />
+    </div>
+    <div
+      class="absolute inset-0 flex h-full w-full flex-col justify-center px-8 py-36 text-center"
+    >
       <h1
         class="font-header pb-8 text-5xl font-medium text-white uppercase text-shadow-lg/75 md:text-7xl lg:text-9xl"
       >
@@ -87,13 +88,11 @@ const tracks = (
     <section id="about" class="bg-white dark:bg-gray-950">
       <div class="mx-auto max-w-4xl px-8 py-16 text-justify sm:text-center">
         <SectionTitle>About</SectionTitle>
-        <AboutContent
+        <Content components={{ p: Paragraph, a: Link }} />
-          components={{ ...aboutComponents, p: Paragraph, a: Link }}
-        />
         <Image
           src={aboutImage}
           alt="Nathan conducting the Woodville Concert Band"
-          class="mx-auto mt-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out hover:scale-150 hover:shadow-xl/50"
+          class="mx-auto mt-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out md:hover:scale-150 md:hover:shadow-xl/50"
           transition:name="aboutImage"
         />
         <span class="block w-full text-center"
@@ -128,7 +127,7 @@ const tracks = (
         </a>
       </div>
     </section>
-    <section id="projects" class="bg-white dark:bg-gray-950">
+    <section id="projects" class="overflow-hidden bg-white dark:bg-gray-950">
       <div class="mx-auto max-w-4xl px-8 py-16 text-center">
         <SectionTitle>What I've been working on</SectionTitle>
         <Paragraph>
@@ -156,7 +155,7 @@ const tracks = (
       </div>
     </section>
     <section id="listen" class="bg-primary text-white dark:bg-gray-800">
-      <div class="w-full">
+      <div class="w-full overflow-hidden">
         <div class="pt-16 text-center">
           <SectionTitle lineColour="text-white">Listen</SectionTitle>