chore: delete unused images

.env.example

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

.gitignore

@@ -2,6 +2,7 @@
 dist/
 .output/
 .astro/
+.continue/
 
 # dependencies
 node_modules/

.husky/post-commit

@@ -0,0 +1,3 @@
+echo "post-commit..."
+git push gh
+git push sh

.husky/pre-commit

@@ -1 +1,2 @@
-npx lint-staged
+echo "pre-commit..."
+npx lint-staged

README.md

@@ -10,7 +10,7 @@ You need [node](https://nodejs.org) and [pnpm](https://pnpm.io).
 
 ```bash
 # clone project
-$ git clone git@git.sr.ht:~ayoayco/ayco.io-astro
+$ git clone https://git.ayo.run/ayo/ayco.io-astro
 
 # go into project dir
 $ cd ./ayco.io-astro
@@ -26,16 +26,29 @@ $ pnpm i
 | ------------------- | ---------------------------------------------- |
 | `pnpm run dev`      | start dev server                               |
 | `pnpm run build`    | generate static files to `dist` directory      |
-| `pnpm run deploy`   | upload to my server              |
+| `pnpm run deploy`   | upload to my server                            |
 | `pnpm run prep:now` | back up and clear current `now page` constants |
 
 ## Deployment
 
-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. 
+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.
 
-If you want to run build before deploying, do `npm run build:deploy` 
+You can do this by adding a `.env` file with the following content (replace the IP):
 
------
+```bash
+# .env
+HOST=123.456.789.00
+```
 
-*Just keep building.*<br />
+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.
-*~Ayo*
+
+If you want to run build before deploying, do `npm run build:deploy`
+
+## Auto-mirror to various code forges
+
+The power of git lies within its decentralized nature. I push this project to three different code forges, because I'm paranoid like that. No, I just like to show off. I do this with a post-commit hook that automatically calls `git push <repo> --mirror`, and you can see that in the `.husky/post-commit` file.
+
+---
+
+_Just keep building._<br />
+_~Ayo_

_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

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(),

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ayco/personal-website",
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.3.51",
   "private": true,
   "scripts": {
     "astro": "astro",
@@ -12,7 +12,8 @@
     "lint": "eslint . --config eslint.config.mjs --cache",
     "format": "prettier . --write",
     "check": "npm run format && npm run lint",
-    "deploy": "eval $(grep '^HOST' .env) && scp -r dist ayo@$HOST:~/ayco.io-flask",
+    "deploy": "eval $(grep '^HOST' .env) && scp -v -r dist ayo@$HOST:~/ayco.io-flask",
+    "patch:build:deploy": "npm run patch && npm run build && npm run deploy",
     "build:preview": "npm run build && astro preview",
     "build:deploy": "npm run build && npm run deploy",
     "copy:dist": "npm run build && cp -R dist ../ayco.io-flask/",
@@ -22,35 +23,35 @@
   "devDependencies": {
     "@astro-reactive/form": "^0.10.1",
     "@astro-reactive/validator": "^0.5.1",
-    "@astrojs/sitemap": "^3.4.2",
+    "@astrojs/sitemap": "^3.7.0",
     "@ayco/astro-sw": "^0.8.14",
-    "@eslint/compat": "^1.3.1",
+    "@eslint/compat": "^2.0.2",
-    "@eslint/js": "^9.32.0",
+    "@eslint/js": "^10.0.1",
     "@iconify-json/mdi": "^1.2.3",
-    "@iconify-json/simple-icons": "^1.2.45",
+    "@iconify-json/simple-icons": "^1.2.71",
-    "@iconify-json/tabler": "^1.2.20",
+    "@iconify-json/tabler": "^1.2.27",
-    "@typescript-eslint/parser": "^8.38.0",
+    "@typescript-eslint/parser": "^8.56.0",
-    "astro": "^5.12.8",
+    "astro": "^5.17.3",
-    "astro-eslint-parser": "^1.2.2",
+    "astro-eslint-parser": "^1.3.0",
     "astro-github-stats": "^0.8.0",
     "astro-icon": "^1.1.5",
     "consola": "^3.4.2",
-    "eslint": "^9.32.0",
+    "eslint": "^10.0.1",
-    "eslint-plugin-astro": "^1.3.1",
+    "eslint-plugin-astro": "^1.6.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "globals": "^16.3.0",
+    "globals": "^17.3.0",
     "husky": "^9.1.7",
-    "jiti": "^2.5.1",
+    "jiti": "^2.6.1",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^16.2.7",
     "pathe": "^2.0.3",
-    "prettier": "^3.6.2",
+    "prettier": "^3.8.1",
     "prettier-plugin-astro": "^0.14.1",
     "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.38.0",
+    "typescript-eslint": "^8.56.0",
     "unified": "^11.0.5"
   },
   "lint-staged": {

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,
@@ -29,10 +28,9 @@ jacobhands.com@bsky.brid.gy, true, false,
 malstrom.me@bsky.brid.gy, true, false,
 shuuji3.xyz@bsky.brid.gy, true, false,
 intenttoship.dev@bsky.brid.gy, true, false,
-haoqun.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,

public/robots.txt

@@ -1,35 +1,137 @@
 Sitemap: https://ayo.ayco.io/sitemap-index.xml
 
-User-agent: *
+User-agent: AddSearchBot
-Disallow:
+User-agent: AI2Bot
-
+User-agent: AI2Bot-DeepResearchEval
-User-agent: AdsBot-Google
+User-agent: Ai2Bot-Dolma
+User-agent: aiHitBot
+User-agent: amazon-kendra
 User-agent: Amazonbot
+User-agent: AmazonBuyForMe
+User-agent: Amzn-SearchBot
+User-agent: Amzn-User
+User-agent: Andibot
+User-agent: Anomura
 User-agent: anthropic-ai
 User-agent: Applebot
-User-agent: AwarioRssBot
+User-agent: Applebot-Extended
-User-agent: AwarioSmartBot
+User-agent: atlassian-bot
+User-agent: Awario
+User-agent: AzureAI-SearchBot
+User-agent: bedrockbot
+User-agent: bigsur.ai
+User-agent: Bravebot
+User-agent: Brightbot 1.0
+User-agent: BuddyBot
 User-agent: Bytespider
 User-agent: CCBot
+User-agent: Channel3Bot
+User-agent: ChatGLM-Spider
+User-agent: ChatGPT Agent
 User-agent: ChatGPT-User
-User-agent: ClaudeBot
+User-agent: Claude-SearchBot
+User-agent: Claude-User
 User-agent: Claude-Web
+User-agent: ClaudeBot
+User-agent: Cloudflare-AutoRAG
+User-agent: CloudVertexBot
 User-agent: cohere-ai
-User-agent: DataForSeoBot
+User-agent: cohere-training-data-crawler
+User-agent: Cotoyogi
+User-agent: Crawl4AI
+User-agent: Crawlspace
+User-agent: Datenbank Crawler
+User-agent: DeepSeekBot
+User-agent: Devin
+User-agent: Diffbot
+User-agent: DuckAssistBot
+User-agent: Echobot Bot
+User-agent: EchoboxBot
 User-agent: FacebookBot
+User-agent: facebookexternalhit
+User-agent: Factset_spyderbot
+User-agent: FirecrawlAgent
 User-agent: FriendlyCrawler
+User-agent: Gemini-Deep-Research
+User-agent: Google-CloudVertexBot
 User-agent: Google-Extended
+User-agent: Google-Firebase
+User-agent: Google-NotebookLM
+User-agent: GoogleAgent-Mariner
 User-agent: GoogleOther
+User-agent: GoogleOther-Image
+User-agent: GoogleOther-Video
 User-agent: GPTBot
+User-agent: iAskBot
+User-agent: iaskspider
+User-agent: iaskspider/2.0
+User-agent: IbouBot
+User-agent: ICC-Crawler
 User-agent: ImagesiftBot
-User-agent: magpie-crawler
+User-agent: imageSpider
-User-agent: Meltwater
+User-agent: img2dataset
+User-agent: ISSCyberRiskCrawler
+User-agent: kagi-fetcher
+User-agent: Kangaroo Bot
+User-agent: KlaviyoAIBot
+User-agent: KunatoCrawler
+User-agent: laion-huggingface-processor
+User-agent: LAIONDownloader
+User-agent: LCC
+User-agent: LinerBot
+User-agent: Linguee Bot
+User-agent: LinkupBot
+User-agent: Manus-User
+User-agent: meta-externalagent
+User-agent: Meta-ExternalAgent
+User-agent: meta-externalfetcher
+User-agent: Meta-ExternalFetcher
+User-agent: meta-webindexer
+User-agent: MistralAI-User
+User-agent: MistralAI-User/1.0
+User-agent: MyCentralAIScraperBot
+User-agent: netEstate Imprint Crawler
+User-agent: NotebookLM
+User-agent: NovaAct
+User-agent: OAI-SearchBot
 User-agent: omgili
 User-agent: omgilibot
-User-agent: peer39_crawler
+User-agent: OpenAI
-User-agent: peer39_crawler/1.0
+User-agent: Operator
+User-agent: PanguBot
+User-agent: Panscient
+User-agent: panscient.com
+User-agent: Perplexity-User
 User-agent: PerplexityBot
-User-agent: PiplBot
+User-agent: PetalBot
-User-agent: Seekr
+User-agent: PhindBot
+User-agent: Poggio-Citations
+User-agent: Poseidon Research Crawler
+User-agent: QualifiedBot
+User-agent: QuillBot
+User-agent: quillbot.com
+User-agent: SBIntuitionsBot
+User-agent: Scrapy
+User-agent: SemrushBot-OCOB
+User-agent: SemrushBot-SWA
+User-agent: ShapBot
+User-agent: Sidetrade indexer bot
+User-agent: Spider
+User-agent: TavilyBot
+User-agent: TerraCotta
+User-agent: Thinkbot
+User-agent: TikTokSpider
+User-agent: Timpibot
+User-agent: TwinAgent
+User-agent: VelenPublicWebCrawler
+User-agent: WARDBot
+User-agent: Webzio-Extended
+User-agent: webzio-extended
+User-agent: wpbot
+User-agent: WRTNBot
+User-agent: YaK
+User-agent: YandexAdditional
+User-agent: YandexAdditionalBot
 User-agent: YouBot
+User-agent: ZanistaBot
 Disallow: /

src/components/Footer.astro

@@ -32,8 +32,8 @@ const year = new Date().getFullYear()
             aria-label={linkObj.text}
           >
             <Icon
-              width="1.5em"
+              width="1em"
-              height="1.5em"
+              height="1em"
               name={`${linkObj.set ?? 'simple-icons'}:${linkObj.icon}`}
             />
           </a>
@@ -47,9 +47,7 @@ const year = new Date().getFullYear()
     <a href="/">Ayo Ayco</a>. This website <a
       href="https://ayos.blog/stopped-tracking-on-my-sites"
       >does not track users</a
-    >. See the <a href="https://git.sr.ht/~ayoayco/ayco.io-astro"
+    >. See the <a href="https://git.ayo.run/ayo/ayco.io-astro">source code.</a>
-      >source code.</a
-    >
   </p>
 
   <WebRings />

src/components/Head.astro

@@ -3,17 +3,20 @@ export interface Props {
   title?: string | undefined
   description?: string | undefined
   ogImage?: string | undefined
+  ogFileType?: string | undefined
 }
 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'
+const defaultOgFileType = 'image/png'
 
 let {
   title,
   description = defaultDescription,
   ogImage = defaultOgImage,
+  ogFileType = defaultOgFileType,
 } = Astro.props
 
 const baseURL = Astro.site?.toString().slice(0, -1) // ?? 'https://ayo.ayco.io'
@@ -35,7 +38,8 @@ const baseURL = Astro.site?.toString().slice(0, -1) // ?? 'https://ayo.ayco.io'
   <meta property="og:url" content={baseURL + Astro.url.pathname} />
   <meta property="og:title" content={title} />
   <meta property="og:description" content={description} />
-  <meta property="og:image" content={`/${ogImage}`} />
+  <meta property="og:image:type" content={ogFileType} />
+  <meta property="og:image" content={ogImage} />
 
   <!-- Links -->
   <link rel="canonical" href={baseURL + Astro.url.pathname} />

src/constants/bkup/2025-06-10.json

@@ -0,0 +1,7 @@
+{
+  "title": "Reading stuff & something to look forward to",
+  "description": "fighting to find a direction above the storm",
+  "publishDate": "2025-06-10",
+  "publishedOn": "",
+  "publishState": ""
+}

src/constants/bkup/2025-06-10.md

@@ -0,0 +1,12 @@
+## Reading
+
+Books I'm currently reading as I continue to have a messed up health & rhythm
+
+- [Getting Real](https://books.37signals.com/8/getting-real)
+- [How to Read a Book](https://en.wikipedia.org/wiki/How_to_Read_a_Book)
+- [Code Complete 2](http://www.amazon.com/dp/0735619670/)
+- [The Mythical Man-Month](http://www.amazon.com/dp/0201835959/)
+
+## Something to look forward to
+
+Reading has been a great companion lately. [37signals](https://37signals.com/) inspired me while reading their book "Getting Real", just in time as I'm up for updating my vision for 2030, after achieving most of my personal 2025 targets. [I want to start a cooperative that will empower people to take ownership of their digital lives.](https://social.ayco.io/@ayo/114655020696985932).

src/constants/links.ts

@@ -41,24 +41,44 @@ export default links
 
 export const footerLinks: Link[] = [
   {
-    text: 'SourceHut',
+    text: "Ayo's Forge",
-    url: 'https://ayco.io/sh/',
+    url: 'https://git.ayo.run/ayo/',
-    icon: 'sourcehut',
+    icon: 'git',
+  },
+  {
+    text: 'GitHub',
+    url: 'https://github.com/ayo-run',
+    icon: 'github',
+  },
+  {
+    text: 'CodePen',
+    url: 'https://codepen.io/ayo-run',
+    icon: 'codepen',
   },
   {
     text: 'Mastodon',
-    url: 'https://yolk.ayo.run/https://social.ayco.io/public/local',
+    url: 'https://main.elk.zone/social.ayco.io/@ayo',
     icon: 'mastodon',
   },
+  {
+    text: 'Bluesky',
+    url: 'http://bsky.app/profile/ayo.run',
+    icon: 'bluesky',
+  },
   {
     text: 'Pixelfed',
     url: 'https://metapixl.com/@ayo',
     icon: 'pixelfed',
   },
   {
-    text: 'GitHub',
+    text: 'Instagram',
-    url: 'https://ayco.io/gh',
+    url: 'https://www.instagram.com/ayoayco/',
-    icon: 'github',
+    icon: 'instagram',
+  },
+  {
+    text: 'LinkedIn',
+    url: 'https://www.linkedin.com/in/ayoayco/',
+    icon: 'linkedin',
   },
 ]
 

src/constants/now.json

@@ -1,7 +1,7 @@
 {
-  "title": "Reading stuff & something to look forward to",
+  "title": "BACK AT IT",
-  "description": "fighting to find a direction above the storm",
+  "description": "",
-  "publishDate": "2025-06-10",
+  "publishDate": "2026-02-22",
-  "publishedOn": "",
+  "publishedOn": "the 22nd day of February 2026",
   "publishState": ""
 }

src/constants/now.md

@@ -1,12 +1,9 @@
-## Reading
+Hello! Been a while!
 
-Books I'm currently reading as I continue to have a messed up health & rhythm
+Yes, I'm getting back to some of my shelved side projects like <a href="https://github.com/ayoayco/mcfly#readme">McFly</a> and <a href="https://github.com/ayoayco/astro-sw#readme">Astro SW</a>.
 
-- [Getting Real](https://books.37signals.com/8/getting-real)
+Why were they shelved, you ask?
-- [How to Read a Book](https://en.wikipedia.org/wiki/How_to_Read_a_Book)
-- [Code Complete 2](http://www.amazon.com/dp/0735619670/)
-- [The Mythical Man-Month](http://www.amazon.com/dp/0201835959/)
 
-## Something to look forward to
+Well, that's a story for another time.
 
-Reading has been a great companion lately. [37signals](https://37signals.com/) inspired me while reading their book "Getting Real", just in time as I'm up for updating my vision for 2030, after achieving most of my personal 2025 targets. [I want to start a cooperative that will empower people to take ownership of their digital lives.](https://social.ayco.io/@ayo/114655020696985932).
+You can <a href="https://github.com/ayoayco">Follow me on GitHub</a> to see my activities on these projects if that's your thing. :)

src/layouts/Layout.astro

@@ -8,15 +8,34 @@ import { links } from '../constants/links'
 export interface Props {
   title?: string
   description?: string
-  ogImage?: string
 }
 
-const { title, description, ogImage } = Astro.props
+const { title, description } = Astro.props
+import { getImage } 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 ogImage = await getImage({
+  src: avatar,
+  width: 400,
+  height: 400,
+  format: 'png',
+})
+const ogFileType = 'image/png'
 ---
 
 <!doctype html>
 <html lang="en">
-  <Head title={title} description={description} ogImage={ogImage} />
+  <Head
+    title={title}
+    description={description}
+    ogImage={ogImage.src}
+    ogFileType={ogFileType}
+  />
 
   <body class="h-card">
     <Nav links={links} />

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.
-        <!--Some people shy away from writing things about themselves, and thus looks negatively at others who do. But that shouldn't be the case!-->
-        I find it helpful to have a single canonical <code class="inline-code"
-          >/about</code
-        > 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
+      I am an engineering manager at <a href="https://ing.com">ING</a> and a certified
-      Amsterdam. I'm also a certified software architecture professional
+      software architecture professional (CPSA‑F®) by <a
-      (CPSA‑F®) by <a href="https://isaqb.org" target="_blank">isaqb.org</a>.
+        href="https://isaqb.org"
+        target="_blank">iSAQB</a
+      >.
     </p>
-
     <p>
-      In my spare time, when I have energy, I find it fun building <a
+      In my spare time, I find it fun building <a href="/showcase">projects</a>,
-        href="/showcase">hobby projects</a
+      running self-hosted services at <a href="https://ayo.run">ayo.run</a>, and
-      >, running self-hosted services at <a href="https://ayo.run">ayo.run</a>,
+      volunteering to <a href="https://ayos.blog/why-fediverse/" target="_blank"
-      and volunteering to <a
+        >Fediverse</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

@@ -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, note } = data
+const avatarSize = 150
 ---
 
 <Layout>
@@ -12,24 +22,21 @@ import now from '../constants/now.json'
         <!-- h-card details -->
         <span class="p-name">Ayo Ayco</span>
         <a class="u-url u-uid" href="https://ayo.ayco.io">w</a>,
-        <p class="p-note">
+        <section class="p-note" set:html={note} />
-          Frontend guy who likes server adventures & works w/ linux. Looking to
-          specialize in web perf, but mostly feels like an impostor for now. Has
-          hobby projects.
-        </p>
       </div>
-      <img
+      <Picture
         class="u-photo highlighted-section__content__profile-picture"
         alt="Ayo Ayco's avatar"
-        src="/ayo-sm.png"
+        formats={['avif', 'webp']}
-        width="140"
+        src={avatar}
-        height="140"
+        width={avatarSize}
+        height={avatarSize}
       />
       <div class="highlighted-section__content__text">
         <h1 title="Ayo Ayco | Software Engineer + Web Developer">
           Hi, I'm <span class="heavy-text">Ayo</span>!
         </h1>
-        <!-- <a href="https://forms.ayo.run/form/tnz7FybY" class="now-wrapper"> -->
+        <!--a href="https://forms.ayo.run/form/tnz7FybY" class="now-wrapper"-->
         <a href="/now" class="now-wrapper">
           <span class="now-label">now</span>
           <span class="status">{now.title}</span>
@@ -57,7 +64,7 @@ import now from '../constants/now.json'
         />
         <Card
           newTab={true}
-          href="https://ayco.io/cv"
+          href="/Ayco_Resume.pdf"
           title="CV / Resume"
           body="Download and peruse my skills and experience"
         />
@@ -67,7 +74,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 +132,8 @@ import now from '../constants/now.json'
     background-color: var(--color-brand-blue-1);
     display: block;
     border-radius: 50%;
-    width: 140px;
+    width: var(--avatarSize) px;
-    height: 140px;
+    height: var(--avatarSize) px;
   }
 
   .highlighted-section__content ul a {

src/pages/now/and-then/posts/2025-06-10.astro

@@ -0,0 +1,75 @@
+---
+import Layout from '../../../../layouts/Layout.astro'
+import Footer from '../../../../components/Footer.astro'
+
+const title = `Reading stuff & something to look forward to`
+const description = `fighting to find a direction above the storm`
+let publishedOn = ``
+const publishDate = `2025-06-10`
+const publishState = ``
+const content = `<h2>Reading</h2>
+<p>Books I'm currently reading as I continue to have a messed up health &#x26; rhythm</p>
+<ul>
+<li><a href="https://books.37signals.com/8/getting-real">Getting Real</a></li>
+<li><a href="https://en.wikipedia.org/wiki/How_to_Read_a_Book">How to Read a Book</a></li>
+<li><a href="http://www.amazon.com/dp/0735619670/">Code Complete 2</a></li>
+<li><a href="http://www.amazon.com/dp/0201835959/">The Mythical Man-Month</a></li>
+</ul>
+<h2>Something to look forward to</h2>
+<p>Reading has been a great companion lately. <a href="https://37signals.com/">37signals</a> inspired me while reading their book "Getting Real", just in time as I'm up for updating my vision for 2030, after achieving most of my personal 2025 targets. <a href="https://social.ayco.io/@ayo/114655020696985932">I want to start a cooperative that will empower people to take ownership of their digital lives.</a>.</p>`
+
+publishedOn = publishedOn === '' ? publishDate : publishedOn
+---
+
+<Layout title={title} description={description}>
+  <main>
+    <h1><span class="text-gradient">{title}</span></h1>
+    <p>
+      <small>
+        Published on
+        <time datetime={publishDate}>
+          {publishedOn}
+        </time>
+        {publishState}
+      </small>
+    </p>
+
+    <Fragment set:html={content} />
+  </main>
+  <Footer />
+</Layout>
+
+<style>
+  .text-gradient {
+    font-weight: 900;
+    background-image: var(--ayo-gradient);
+    animation: pulse 4s ease-in-out infinite;
+    background-size: 500% 500%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 100% 200%;
+    background-position-y: 100%;
+    border-radius: 0.4rem;
+  }
+
+  .highlighted-content {
+    margin: 1rem 0;
+    background: #4f39fa;
+    padding: 1rem;
+    border-radius: 0.4rem;
+    color: var(--color-bg);
+  }
+
+  .highlighted-content code {
+    font-size: var(--font-size-base);
+    border: 0.1em solid var(--color-border);
+    border-radius: 4px;
+    padding: 0.15em 0.25em;
+  }
+
+  .link-card-grid {
+    display: grid;
+    gap: 1rem;
+    padding: 0;
+  }
+</style>

src/pages/showcase.astro

@@ -16,6 +16,12 @@ import Card from '../components/Card.astro'
       >.
     </p>
     <ul>
+      <Card
+        newTab
+        href="https://git.ayo.run/ayo/simple-tts#readme"
+        title="Simple TTS"
+        body="A machine learning text-to-speech program for the terminal"
+      />
       <Card
         newTab
         href="https://mcfly.js.org"
@@ -24,7 +30,7 @@ import Card from '../components/Card.astro'
       />
       <Card
         newTab
-        href="https://ayco.io/sh/astro-sw#readme"
+        href="https://git.ayo.run/ayo/astro-sw#readme"
         title="Astro SW"
         body="Integration to use your service worker with Astro"
       />
@@ -36,15 +42,15 @@ import Card from '../components/Card.astro'
       />
       <Card
         newTab
-        href="https://ayco.io/sh/astro-resume#readme"
+        href="https://git.ayo.run/ayo/astro-resume#readme"
         title="Astro Resume"
         body="Utilities for serializing data from server for use in the client with types preserved across components."
       />
       <Card
         newTab
-        href="https://ayco.io/n/generate-timezone-json"
+        href="https://astro-reactive.js.org"
-        title="Time Zone JSON Generator"
+        title="Astro Reactive"
-        body="Generate a JSON file containing time zones from the official IANA Database or your own zone.tab file"
+        body="Let your Data build your UI with Astro components 🔥"
       />
       <Card
         newTab
@@ -52,6 +58,12 @@ import Card from '../components/Card.astro'
         title="Cozy 🧸"
         body="Your modern-day reading assistant"
       />
+      <Card
+        newTab
+        href="https://ayco.io/n/generate-timezone-json"
+        title="Time Zone JSON Generator"
+        body="Generate a JSON file containing time zones from the official IANA Database or your own zone.tab file"
+      />
       <Card
         newTab
         href="https://kaboom.ayco.io"
@@ -64,16 +76,6 @@ import Card from '../components/Card.astro'
         title="Minesweeper"
         body="Recreated the classic game for the web 💣"
       />
-      <Card
-        href="/showcase/astro-reactive-form"
-        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/sw.mjs

@@ -6,17 +6,39 @@
 const cacheName = `${__prefix ?? 'app'}-v${__version ?? '000'}`
 const forceLogging = true
 
+/**
+ * Cleans up old service worker caches by deleting any cache that doesn't match the current cache name.
+ * This ensures only the current version of the application's cache is retained.
+ * @async
+ * @function cleanOldCaches
+ * @returns {Promise<void>} A promise that resolves when old caches have been deleted
+ */
 const cleanOldCaches = async () => {
   const allowCacheNames = [cacheName]
   const allCaches = await caches.keys()
   allCaches.forEach((key) => {
     if (!allowCacheNames.includes(key)) {
       console.info('Deleting old cache', key)
-      caches.delete(key)
+      caches
+        .delete(key)
+        .then(() => {
+          console.info('Successfully deleted cache:', key)
+        })
+        .catch((error) => {
+          console.warn('Failed to delete old cache:', key, error)
+        })
     }
   })
 }
 
+/**
+ * Adds specified resources to the service worker cache.
+ * This function is used to cache static assets for offline access.
+ * @async
+ * @function addResourcesToCache
+ * @param {Array<string>} resources - An array of URLs representing the resources to be cached.
+ * @returns {Promise<void>} A promise that resolves when all resources have been successfully added to the cache.
+ */
 const addResourcesToCache = async (resources) => {
   const cache = await caches.open(cacheName)
   console.info('adding resources to cache...', {
@@ -34,6 +56,14 @@ const addResourcesToCache = async (resources) => {
   }
 }
 
+/**
+ * Puts a response in the cache.
+ * @async
+ * @function putInCache
+ * @param {Request} request - The request to be cached.
+ * @param {Response} response - The response to be cached.
+ * @returns {Promise<void>} A promise that resolves when the response has been added to the cache.
+ */
 const putInCache = async (request, response) => {
   const cache = await caches.open(cacheName)
 
@@ -49,9 +79,6 @@ const networkFirst = async ({ request, fallbackUrl }) => {
   try {
     // Try to get the resource from the network for 5 seconds
     const responseFromNetwork = await fetch(request.clone())
-    // response may be used only once
-    // we need to save clone to put one copy in cache
-    // and serve second one
     putInCache(request, responseFromNetwork.clone())
     console.info('using network response', responseFromNetwork.url)
     return responseFromNetwork
@@ -64,11 +91,13 @@ const networkFirst = async ({ request, fallbackUrl }) => {
       return responseFromCache
     }
 
-    // Try the fallback
+    // If fallback is provided, try to use it, otherwise return error
-    const fallbackResponse = await cache.match(fallbackUrl)
+    if (fallbackUrl) {
-    if (fallbackResponse) {
+      const fallbackResponse = await cache.match(fallbackUrl)
-      console.info('using fallback cached response...', fallbackResponse.url)
+      if (fallbackResponse) {
-      return fallbackResponse
+        console.info('using fallback cached response...', fallbackResponse.url)
+        return fallbackResponse
+      }
     }
 
     // when even the fallback response is not available,