seo: add homepage OG image generator via next/og

This commit is contained in:
Zac Gaetano 2026-05-01 11:15:20 -04:00
parent 575dc752df
commit 9d88b52429

View file

@ -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 }
);
}