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