1.3.27

.env.example

@@ -0,0 +1,2 @@
+# replace with correct IP, and rename the file to .env
+HOST=123.456.789.00

README.md

@@ -33,6 +33,15 @@ $ pnpm i
 
 For the script `npm run deploy`, you need to add an environmental variable named HOST containing the IP address of the host server. This will scp the build files into the server.
 
+You can do this by adding a `.env` file with the following content (replace the IP):
+
+```bash
+# .env
+HOST=123.456.789.00
+```
+
+There is a service worker (`src/sw.mjs`) that caches assets on client browsers. For cache invalidation, the version property in package.json is used. Increment the version via `npm version patch` (or `minor`, `major`) if there is a significant change in the website's assets.
+
 If you want to run build before deploying, do `npm run build:deploy`
 
 ---

_archived/tech-bsky-fedi.astro

@@ -1,9 +1,9 @@
 ---
 import { Code } from 'astro:components'
 import { Image } from 'astro:assets'
-import Footer from '../components/Footer.astro'
+import Footer from '../../components/Footer.astro'
-import Layout from '../layouts/Layout.astro'
+import Layout from '../../layouts/Layout.astro'
-import importedCode from '../../public/following_accounts.csv?raw'
+import importedCode from '../../../public/following_accounts.csv?raw'
 
 const csvToArray = (content: string) => {
   return content

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ayco/personal-website",
   "type": "module",
-  "version": "1.3.7",
+  "version": "1.3.27",
   "private": true,
   "scripts": {
     "astro": "astro",

public/following_accounts.csv

@@ -8,8 +8,7 @@ jay.bsky.team@bsky.brid.gy, true, false,
 b0rk.jvns.ca@bsky.brid.gy, true, false,
 seldo.com@bsky.brid.gy, true, false,
 nerdy.dev@bsky.brid.gy, true, false,
-wongmjane.com@bsky.brid.gy, true, false,
+samuel.fm@bsky.brid.gy, true, false,
-samuel.bsky.team@bsky.brid.gy, true, false,
 laurenshof.online@bsky.brid.gy, true, false,
 bell.bz@bsky.brid.gy, true, false,
 matrix.org@bsky.brid.gy, true, false,
@@ -32,6 +31,6 @@ intenttoship.dev@bsky.brid.gy, true, false,
 element.io@bsky.brid.gy, true, false,
 e18e.dev@bsky.brid.gy, true, false,
 danabra.mov@bsky.brid.gy, true, false,
-heydonworks.bsky.social@bsky.brid.gy, true, false,
+heydonworks.com@bsky.brid.gy, true, false,
 danielroe.dev@bsky.brid.gy, true, false,
 patak.dev@bsky.brid.gy, true, false,

src/components/Head.astro

@@ -7,7 +7,7 @@ export interface Props {
 const defaultDescription =
   'Professional software engineer specializing in web development with a decade of experience building web applications for both private businesses and government-funded high-impact projects utilizing web technologies, IoT, data viz/insights, remote sensing, and GIS'
 
-const defaultTitle = 'Ayo Ayco - Web Dev, Engineer, Leader, Thinker'
+const defaultTitle = 'Ayo Ayco - Tech Leader, Software Engineer, Web Developer'
 const defaultOgImage = 'ayo.png'
 
 let {

src/constants/links.ts

@@ -50,14 +50,9 @@ export const footerLinks: Link[] = [
     url: 'https://sr.ht/~ayoayco',
     icon: 'sourcehut',
   },
-  {
-    text: 'GitHub',
-    url: 'https://ayco.io/gh',
-    icon: 'github',
-  },
   {
     text: 'Mastodon',
-    url: 'https://social.ayco.io/about',
+    url: 'https://main.elk.zone/social.ayco.io/@ayo',
     icon: 'mastodon',
   },
   {
@@ -70,11 +65,21 @@ export const footerLinks: Link[] = [
     url: 'http://bsky.app/profile/ayo.ayco.io',
     icon: 'bluesky',
   },
+  {
+    text: 'Instagram',
+    url: 'https://www.instagram.com/ayoayco/',
+    icon: 'instagram',
+  },
   {
     text: 'LinkedIn',
     url: 'https://www.linkedin.com/in/ayoayco/',
     icon: 'linkedin',
   },
+  {
+    text: 'GitHub',
+    url: 'https://ayco.io/gh',
+    icon: 'github',
+  },
 ]
 
 export const socialLinks: Link[] = [

src/pages/about.astro

@@ -8,51 +8,33 @@ import Footer from '../components/Footer.astro'
     <h1>Ayo Ayco</h1>
     <p>ᜈᜄ᜔ᜋᜓᜎ ᜐ ᜉᜒᜇ̢̟ᜎᜐ᜔ ᜅ᜔ ᜐᜒᜎᜅᜈᜈ᜔</p>
     <p>
-      Frontend guy who likes server adventures, coding, and linux. Passionate
+      Technical engineering leader experienced in web development, software
-      about the indieweb, digital sovereignty, and kindness.
+      architecture, and community building. Passionate about the indieweb,
+      digital sovereignty, and kindness.
     </p>
-    <details>
-      <summary>
-        Hey there! I interrupt this page for a message from this website's
-        sponsor...
-      </summary>
     <p>
-        <strong>Myself!</strong> Thank you for wanting to read a bit more about me.
+      I am an engineering manager at <a href="https://ing.com">ING</a> and a certified
-        <!--Some people shy away from writing things about themselves, and thus looks negatively at others who do. But that shouldn't be the case!-->
+      software architecture professional (CPSA‑F®) by <a
-        I find it helpful to have a single canonical <code class="inline-code"
+        href="https://isaqb.org"
-          >/about</code
+        target="_blank">iSAQB</a
-        > page with these significant information. It is always a work in progress
+      >.
-        (like me), and to be honest, I do this mostly as a reminder as the world
-        continue to impose identity onto us. Cheers to celebrating differences!
     </p>
-      <small> Now back to the rest of the web page... </small>
-    </details>
     <p>
-      I am a newbie engineering manager at a large global bank headquartered in
+      In my spare time, I find it fun building <a href="/showcase">projects</a>,
-      Amsterdam. I'm also a certified software architecture professional
+      running self-hosted services at <a href="https://ayo.run">ayo.run</a>, and
-      (CPSA‑F®) by <a href="https://isaqb.org" target="_blank">isaqb.org</a>.
+      volunteering to <a href="https://ayos.blog/why-fediverse/" target="_blank"
-    </p>
+        >Fediverse</a
-
-    <p>
-      In my spare time, when I have energy, I find it fun building <a
-        href="/showcase">hobby projects</a
-      >, running self-hosted services at <a href="https://ayo.run">ayo.run</a>,
-      and volunteering to <a
-        href="https://ayos.blog/why-fediverse/"
-        target="_blank">Fediverse</a
       > projects like <a href="https://elk.zone">elk.zone</a>,
       <a href="https://m.webtoo.ls/public/local">webtoo.ls</a>, and <a
         href="https://m.webtoo.ls/@vitest">vitest's fedi presence</a
       >.
     </p>
-
     <p>
-      In a previous life, I've volunteered much of my weekends into teaching
+      I've volunteered much of my early years into leadership trainings,
-      kids, leading groups of students, planting a church, and facilitating
+      teaching & leading groups of students, planting a church, and facilitating
-      focus group discussions with entrepreneurial founders, where I learned a
+      focus group discussions with entrepreneurial founders, where I learned the
-      lot about the power of multi-generational & multi-cultural communities.
+      power of multi-generational & multi-cultural communities.
     </p>
-
     <h2 id="contact">Contact info</h2>
     <ul>
       <li>✉️ Email: <a href="mailto:ayo@ayco.io">ayo@ayco.io</a></li>

src/pages/index.astro

@@ -21,7 +21,7 @@ import Footer from '../components/Footer.astro'
       <img
         class="u-photo highlighted-section__content__profile-picture"
         alt="Ayo Ayco's avatar"
-        src="/ayo-sm.png"
+        src="/ayo-2025-sm.png"
         width="140"
         height="140"
       />

src/pages/showcase.astro

@@ -20,7 +20,7 @@ import Card from '../components/Card.astro'
         newTab
         href="https://git.ayo.run/ayo/simple-tts#readme"
         title="Simple TTS"
-        body="A simple machine learning text-to-speech program for the terminal"
+        body="A machine learning text-to-speech program for the terminal"
       />
       <Card
         newTab
@@ -28,11 +28,6 @@ import Card from '../components/Card.astro'
         title="McFly"
         body="A meta-framework for building web experiences"
       />
-      <Card
-        href="/showcase/tech-bsky-fedi"
-        title="Tech Bsky ↔ Fedi"
-        body="Celebrating bsky folks who bridged their accounts to the fediverse!"
-      />
       <Card
         newTab
         href="https://ayco.io/sh/astro-sw#readme"
@@ -80,11 +75,6 @@ import Card from '../components/Card.astro'
         title="Reactive Form"
         body="The reactive form component for Astro 🔥"
       />
-      <Card
-        href="/showcase/astro-github-stats"
-        title="GitHub Stats"
-        body="Embed GitHub stats on your Astro page ✨"
-      />
     </ul>
   </main>
   <Footer />

src/pages/showcase/tech-bsky-fedi.astro

@@ -1,218 +0,0 @@
----
-import { Code } from 'astro:components'
-import { Image } from 'astro:assets'
-import Footer from '../../components/Footer.astro'
-import Layout from '../../layouts/Layout.astro'
-import importedCode from '../../../public/following_accounts.csv?raw'
-
-const csvToArray = (content: string) => {
-  return content
-    .split('\n')
-    .slice(1)
-    .map((str) => str.split(',')[0])
-}
-
-const accounts = csvToArray(importedCode)
-
-let accountObjects = accounts
-  .map((account) => {
-    const bskyHandle = account?.replace('@bsky.brid.gy', '')
-    const url = `https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile/?actor=${bskyHandle}`
-
-    return account
-      ? {
-          bskyHandle,
-          fediHandle: account,
-          url,
-        }
-      : null
-  })
-  .filter((acct) => !!acct)
-
-const urls = accountObjects.map((account) => account.url)
-const promises = urls.map((url) => fetch(url))
-const responses = await Promise.all(promises)
-let data = await Promise.all(responses.map((response) => response.json()))
-
-// filter accounts with error (e.g., AccountDisabled)
-accountObjects = accountObjects.filter((acct, index) => {
-  const hasNoError = !data[index].error
-  if (!hasNoError)
-    console.log(`>>> ${acct.bskyHandle} has error: ${data[index].error}`)
-  return hasNoError
-})
-data = data.filter((datum) => !datum.error)
-
-const title = 'Tech Bsky ↔ Fedi'
-const description =
-  'Celebrating bsky folks who bridged their accounts to the fediverse!'
----
-
-<Layout title={title} description={description} ogImage="bskyfedi.png">
-  <main>
-    <h1 class="text-gradient">{title}</h1>
-
-    <p><em>{description}</em></p>
-
-    <p>
-      A lot of tech accounts are now active in Bsky. Some of them opted to be
-      bridged to the Fediverse via <a href="https://fed.brid.gy">fed.brid.gy</a>
-      -- so we can also follow them from any ActivityPub powered social platforms.
-    </p>
-
-    <p>
-      On this page, I upload my handpicked tech Bsky accounts that are currently
-      bridged to the Fedi. Feel free to <a
-        href="mailto:ayo@ayco.io?subject=Re:%20Tech%20bsky%20<->%20fedi"
-        >send me a mail</a
-      > to request adding accounts I missed.
-    </p>
-
-    <p>
-      If you are on bsky and want to be bridged too, please follow <a
-        href="https://bsky.app/profile/ap.brid.gy"
-        target="_blank">@ap.brid.gy</a
-      >.
-    </p>
-
-    <p>
-      If you are on fedi and want to follow the accounts here, scroll to the <a
-        href="#how">bottom of the page</a
-      > for a handy `.csv` file you can upload to your chosen fedi platform.
-    </p>
-
-    <p>
-      Note that for the bsky accounts to see your replies and likes from fedi,
-      you have to bridge your account as well by following <a
-        href="https://elk.zone/@bsky.brid.gy@bsky.brid.gy"
-        >@bsky.brid.gy@bsky.brid.gy</a
-      >
-    </p>
-
-    <h2>Accounts ({accountObjects.length})</h2>
-
-    <p><em>Ordered in terms of my time of discovery.</em></p>
-
-    <div class="table-container">
-      <table>
-        <tr>
-          <th>&nbsp;</th>
-          <th>Fedi</th>
-          <th>Bsky</th>
-        </tr>
-        {
-          accountObjects.map((account, index) => (
-            <tr>
-              <td>
-                <Image
-                  src={data[index].avatar ?? ''}
-                  alt={`${account.bskyHandle}'s avatar`}
-                  width="50"
-                  height="50"
-                  decoding="async"
-                  loading="lazy"
-                />
-              </td>
-              <td>
-                <span>
-                  <a
-                    href={`https://elk.zone/@${account.fediHandle}`}
-                    target="_blank"
-                  >
-                    {account.fediHandle}
-                  </a>
-                </span>
-              </td>
-              <td>
-                <span>
-                  <a
-                    href={`https://bsky.app/profile/${account.bskyHandle}`}
-                    target="_blank"
-                  >
-                    {account.bskyHandle}
-                  </a>
-                </span>
-              </td>
-            </tr>
-          ))
-        }
-      </table>
-    </div>
-
-    <h2 id="how">How how how?</h2>
-
-    <p>
-      Download the <a href="following_accounts.csv">.csv file</a>
-      <strong>or</strong> copy the content below and save in a file. Then, upload
-      to your fedi account provider.
-    </p>
-
-    <p>If you're on Mastodon, this functionality is found in:</p>
-    <p>
-      <strong>Preferences</strong> &rarr; <strong>Import and export</strong> &rarr;
-      <strong>Import</strong>
-    </p>
-
-    <h2>Full <code class="inline-code">.csv</code> content</h2>
-    <br />
-
-    <Code code={importedCode} />
-
-    <Footer />
-  </main>
-</Layout>
-
-<style>
-  td img {
-    border-radius: 5px;
-    min-width: 50px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .table-container {
-    overflow-x: auto;
-  }
-
-  th,
-  td {
-    padding: 1rem;
-    border-radius: 5px;
-    background: rgba(0, 0, 0, 0.01);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-  }
-
-  th:first-child,
-  td:first-child {
-    display: block;
-    max-width: calc(50px + 2rem);
-  }
-
-  td a {
-    color: var(--text-color-dark);
-    text-decoration: none;
-
-    &:hover {
-      color: var(--color-brand-blue-3);
-      text-decoration: underline;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    td,
-    th {
-      background: rgba(0, 0, 0, 0.1);
-      border: 1px solid rgba(0, 0, 0, 0.1);
-
-      & a {
-        color: var(--text-color-light);
-        text-decoration: none;
-
-        &:hover {
-          color: var(--color-brand-complement);
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-</style>