ui: retheme favicon + OG card to the cyan→magenta theme

The tab logo and social preview were still on the old teal palette. Retone both
to the electric cyan→magenta theme matching the hero nameplate:
- favicon.svg: jw monogram + prompt-line + cursor on a cyan→magenta gradient.
- og.png (gen-og.mjs): name in the cyan→violet→magenta hero gradient, cyan
  eyebrow/separators, magenta URL, cyan→magenta top bar + dual corner glows.
- bump ?v=2 on both refs (public/ assets are CF-edge-cached + social platforms
  cache OG hard) so the new art shows immediately.

public/favicon.svg

@@ -1,11 +1,17 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="JW">
+  <defs>
+    <linearGradient id="jw" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3fbaf5"/>
+      <stop offset="1" stop-color="#e879f9"/>
+    </linearGradient>
+  </defs>
   <rect width="64" height="64" rx="14" fill="#090c14"/>
-  <rect x="0.5" y="0.5" width="63" height="63" rx="13.5" fill="none" stroke="#2dd4bf" stroke-opacity="0.5"/>
+  <rect x="0.5" y="0.5" width="63" height="63" rx="13.5" fill="none" stroke="url(#jw)" stroke-opacity="0.6"/>
   <text x="32" y="33" font-family="ui-monospace, Menlo, Consolas, monospace" font-size="22"
-        font-weight="700" fill="#5eead4" text-anchor="middle" dominant-baseline="central"
+        font-weight="700" fill="url(#jw)" text-anchor="middle" dominant-baseline="central"
         letter-spacing="1">jw</text>
-  <rect x="18" y="46" width="22" height="3" rx="1.5" fill="#2dd4bf"/>
+  <rect x="18" y="46" width="22" height="3" rx="1.5" fill="url(#jw)"/>
-  <rect x="43" y="46" width="6" height="3" rx="1.5" fill="#2dd4bf">
+  <rect x="43" y="46" width="6" height="3" rx="1.5" fill="#e879f9">
     <animate attributeName="opacity" values="1;0;1" dur="1.1s" repeatCount="indefinite"/>
   </rect>
 </svg>

scripts/gen-og.mjs

@@ -12,26 +12,37 @@ const H = 630;
 const svg = `
 <svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
   <defs>
-    <linearGradient id="title" x1="0" y1="0" x2="0" y2="1">
+    <!-- Electric cyan->violet->magenta — mirrors the live hero nameplate. -->
-      <stop offset="0" stop-color="#e7edf4"/>
+    <linearGradient id="title" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="1" stop-color="#7fdcc9"/>
+      <stop offset="0" stop-color="#3fbaf5"/>
+      <stop offset="0.5" stop-color="#9a7cf2"/>
+      <stop offset="1" stop-color="#e879f9"/>
     </linearGradient>
-    <radialGradient id="glow" cx="18%" cy="0%" r="80%">
+    <linearGradient id="bar" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="0" stop-color="#2dd4bf" stop-opacity="0.22"/>
+      <stop offset="0" stop-color="#3fbaf5"/>
-      <stop offset="60%" stop-color="#2dd4bf" stop-opacity="0"/>
+      <stop offset="1" stop-color="#e879f9"/>
+    </linearGradient>
+    <radialGradient id="glow" cx="14%" cy="0%" r="85%">
+      <stop offset="0" stop-color="#3fbaf5" stop-opacity="0.20"/>
+      <stop offset="55%" stop-color="#3fbaf5" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="glow2" cx="92%" cy="100%" r="70%">
+      <stop offset="0" stop-color="#e879f9" stop-opacity="0.16"/>
+      <stop offset="60%" stop-color="#e879f9" stop-opacity="0"/>
     </radialGradient>
     <pattern id="grid" width="44" height="44" patternUnits="userSpaceOnUse">
-      <path d="M44 0H0V44" fill="none" stroke="#94a3b8" stroke-opacity="0.06" stroke-width="1"/>
+      <path d="M44 0H0V44" fill="none" stroke="#3fbaf5" stroke-opacity="0.05" stroke-width="1"/>
     </pattern>
   </defs>
 
   <rect width="${W}" height="${H}" fill="#090c14"/>
   <rect width="${W}" height="${H}" fill="url(#grid)"/>
   <rect width="${W}" height="${H}" fill="url(#glow)"/>
-  <rect x="0" y="0" width="${W}" height="6" fill="#2dd4bf"/>
+  <rect width="${W}" height="${H}" fill="url(#glow2)"/>
+  <rect x="0" y="0" width="${W}" height="6" fill="url(#bar)"/>
 
   <text x="80" y="150" font-family="monospace" font-size="24" letter-spacing="4"
-        fill="#5eead4">~/ PLATFORM &amp; INFRASTRUCTURE ENGINEER</text>
+        fill="#3fbaf5">~/ PLATFORM &amp; INFRASTRUCTURE ENGINEER</text>
 
   <text x="78" y="300" font-family="sans-serif" font-size="118" font-weight="700"
         letter-spacing="-3" fill="url(#title)">Jonathon Wright</text>
@@ -42,9 +53,9 @@ const svg = `
   <text x="80" y="434" font-family="C059, serif" font-style="italic" font-size="35"
         fill="#aeb9c9">&#183; GPU-backed edge systems</text>
 
-  <text x="80" y="560" font-family="monospace" font-size="20" fill="#8aa0b8">RHEL <tspan fill="#5eead4">&#9656;</tspan> Kubernetes <tspan fill="#5eead4">&#9656;</tspan> GitOps <tspan fill="#5eead4">&#9656;</tspan> Ansible <tspan fill="#5eead4">&#9656;</tspan> Observability <tspan fill="#5eead4">&#9656;</tspan> Edge AI</text>
+  <text x="80" y="560" font-family="monospace" font-size="20" fill="#8aa0b8">RHEL <tspan fill="#3fbaf5">&#9656;</tspan> Kubernetes <tspan fill="#3fbaf5">&#9656;</tspan> GitOps <tspan fill="#3fbaf5">&#9656;</tspan> Ansible <tspan fill="#3fbaf5">&#9656;</tspan> Observability <tspan fill="#3fbaf5">&#9656;</tspan> Edge AI</text>
   <text x="${W - 80}" y="560" text-anchor="end" font-family="monospace" font-size="22"
-        fill="#5eead4">www.bztmon.com</text>
+        fill="#e879f9">www.bztmon.com</text>
 </svg>`;
 
 await sharp(Buffer.from(svg)).png().toFile(out);

src/data/site.ts

@@ -26,7 +26,7 @@ export const site = {
   url: "https://www.bztmon.com",
   // Public contact (matches the CV).
   email: "jonnywright2011@live.com.au",
-  ogImage: "/og.png",
+  ogImage: "/og.png?v=2",
   locale: "en",
   // Content license for blog posts + pages. Edit here to relicense site-wide.
   license: {

src/layouts/Layout.astro

@@ -27,7 +27,7 @@ const ogImage = new URL(site.ogImage, site.url).href;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=2" />
     <link rel="canonical" href={canonical} />
 
     <title>{pageTitle}</title>