feat: use mastodon account avatar as remote source for astro Picture component

astro.config.mjs

@@ -11,7 +11,8 @@ import icon from 'astro-icon'
 export default defineConfig({
   site: 'https://ayo.ayco.io',
   image: {
-    domains: ['cdn.bsky.app'],
+    domains: ['cdn.bsky.app', 'media.ayco.io'],
+    remotePatterns: [{ protocol: 'https' }],
   },
   integrations: [
     sitemap(),

src/pages/index.astro

@@ -3,6 +3,16 @@ import Layout from '../layouts/Layout.astro'
 import Card from '../components/Card.astro'
 import Footer from '../components/Footer.astro'
 import now from '../constants/now.json'
+
+import { Picture } from 'astro:assets'
+
+// fetch mastodon account
+const response = await fetch(
+  'https://social.ayco.io/api/v1/accounts/lookup?acct=ayo'
+)
+const data = await response.json()
+const { avatar } = data
+const avatarSize = 150
 ---
 
 <Layout>
@@ -18,12 +28,13 @@ import now from '../constants/now.json'
           hobby projects.
         </p>
       </div>
-      <img
+      <Picture
         class="u-photo highlighted-section__content__profile-picture"
         alt="Ayo Ayco's avatar"
-        src="/ayo-2025-sm.png"
-        width="140"
-        height="140"
+        formats={['avif', 'webp']}
+        src={avatar}
+        width={avatarSize}
+        height={avatarSize}
       />
       <div class="highlighted-section__content__text">
         <h1 title="Ayo Ayco | Software Engineer + Web Developer">
@@ -67,7 +78,7 @@ import now from '../constants/now.json'
   <Footer />
 </Layout>
 
-<style>
+<style define:vars={{ avatarSize }}>
   h1 {
     margin: 0;
     color: rgba(255, 255, 255, 0.75);
@@ -125,8 +136,8 @@ import now from '../constants/now.json'
     background-color: var(--color-brand-blue-1);
     display: block;
     border-radius: 50%;
-    width: 140px;
-    height: 140px;
+    width: var(--avatarSize);
+    height: var(--avatarSize);
   }
 
   .highlighted-section__content ul a {