From 1d975fdc095bc8f1e76f8f40e6c7be21ff005505 Mon Sep 17 00:00:00 2001
From: Ayo <ayo@ayco.io>
Date: Wed, 25 Feb 2026 20:06:32 +0100
Subject: [PATCH] feat: use mastodon account avatar as remote source for astro
 Picture component

---
 astro.config.mjs      |  3 ++-
 src/pages/index.astro | 25 ++++++++++++++++++-------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 2e47fed..46d28c5 100644
--- a/astro.config.mjs
+++ b/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(),
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ee3005e..c8cb09a 100644
--- a/src/pages/index.astro
+++ b/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 {