From 9d88b52429c034448b08e433e1bf746e706eb353 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Fri, 1 May 2026 11:15:20 -0400
Subject: [PATCH] seo: add homepage OG image generator via next/og

---
 src/app/opengraph-image.tsx | 95 +++++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 src/app/opengraph-image.tsx

diff --git a/src/app/opengraph-image.tsx b/src/app/opengraph-image.tsx
new file mode 100644
index 0000000..4dfd64d
--- /dev/null
+++ b/src/app/opengraph-image.tsx
@@ -0,0 +1,95 @@
+import { ImageResponse } from "next/og";
+
+export const alt = "Wild Dragon — Zachary Gaetano | Broadcast Systems Integration";
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: "#0a0a0a",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          justifyContent: "center",
+          padding: "80px 80px",
+        }}
+      >
+        {/* Top accent bar */}
+        <div
+          style={{
+            width: 48,
+            height: 3,
+            background: "#3b82f6",
+            marginBottom: 48,
+          }}
+        />
+
+        {/* Name */}
+        <div
+          style={{
+            fontSize: 76,
+            fontWeight: 700,
+            color: "#ffffff",
+            lineHeight: 1.05,
+            marginBottom: 20,
+            letterSpacing: "-1px",
+          }}
+        >
+          Zachary Gaetano
+        </div>
+
+        {/* Primary title */}
+        <div
+          style={{
+            fontSize: 28,
+            fontWeight: 300,
+            color: "#737373",
+            marginBottom: 40,
+            letterSpacing: "0.01em",
+          }}
+        >
+          Broadcast Systems Integration &amp; Camera Operator
+        </div>
+
+        {/* Tags row */}
+        <div style={{ display: "flex", gap: 12, marginBottom: 72 }}>
+          {["Production Facility Design", "Washington DC", "Arri Trinity Operator"].map(
+            (tag) => (
+              <div
+                key={tag}
+                style={{
+                  padding: "10px 18px",
+                  background: "rgba(59,130,246,0.12)",
+                  color: "#3b82f6",
+                  borderRadius: 8,
+                  fontSize: 15,
+                  fontWeight: 500,
+                  border: "1px solid rgba(59,130,246,0.2)",
+                }}
+              >
+                {tag}
+              </div>
+            )
+          )}
+        </div>
+
+        {/* URL */}
+        <div
+          style={{
+            fontSize: 18,
+            color: "#404040",
+            letterSpacing: "0.08em",
+          }}
+        >
+          wilddragon.net
+        </div>
+      </div>
+    ),
+    { ...size }
+  );
+}