seo: add homepage OG image generator via next/og
This commit is contained in:
parent
575dc752df
commit
9d88b52429
1 changed files with 95 additions and 0 deletions
95
src/app/opengraph-image.tsx
Normal file
95
src/app/opengraph-image.tsx
Normal 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 & 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 }
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue