Ugh

src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import Logo from "../components/Logo.astro";
+import { Image } from "astro:assets";
 import SocialLinks from "../components/SocialLinks.astro";
 import TechLinks from "../components/TechLinks.astro";
 import Layout from "../layouts/Layout.astro";
@@ -12,10 +12,18 @@ import { config } from "../config";
     ogImage={config.siteConfig.pageOpenGraph.home.image}
     ogType={config.siteConfig.pageOpenGraph.home.type}
 >
-    <Logo server:defer>
-        <div slot="fallback" class="skeleton w-48 h-48 rounded-full mx-auto">
-        </div>
-    </Logo>
+    <Image
+        src={config.personalInfo.profileImage.src}
+        alt={config.personalInfo.profileImage.alt}
+        widths={[192, 384]}
+        sizes="12rem"
+        layout="constrained"
+        loading="eager"
+        fetchpriority="high"
+        class="rounded-full mx-auto opacity-0 transition-opacity duration-300"
+        style="max-width: 12rem; width: 100%;"
+        onload="this.classList.remove('opacity-0')"
+    />
 
     <h1 class="text-primary text-4xl sm:text-6xl font-bold text-center">
         {config.personalInfo.name}