og

src/app/api/og/route.tsx

···
+import { generateOGImage } from "@/lib/og-image";
+import { getPageOGData } from "@/lib/og-utils";
+import { NextRequest } from "next/server";
+
+export const runtime = "edge";
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const path = searchParams.get("path") || "/";
+    const title = searchParams.get("title");
+    const subtitle = searchParams.get("subtitle");
+    const description = searchParams.get("description");
+    const type = searchParams.get("type") as
+      | "default"
+      | "portfolio"
+      | "project"
+      | "page"
+      | null;
+
+    // Use custom data if provided, otherwise fallback to defaults
+    let data;
+    if (title) {
+      data = {
+        title,
+        subtitle: subtitle || undefined,
+        description: description || undefined,
+        type: type || "page",
+      };
+    } else {
+      data = getPageOGData(path);
+    }
+
+    return generateOGImage(data);
+  } catch (e: any) {
+    console.log(`${e.message}`);
+    return new Response(`Failed to generate the image`, {
+      status: 500,
+    });
+  }
+}

src/app/opengraph-image.tsx

···
-import { ImageResponse } from "@vercel/og";
+import { generateOGImage } from "@/lib/og-image";
+import { getPageOGData } from "@/lib/og-utils";
 
 export const runtime = "edge";
 export const alt = "Jasper Mayone";
···
 export const contentType = "image/png";
 
 export default async function Image() {
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          height: "100%",
-          width: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "#151922", // Updated to match site dark mode background
-          padding: "40px",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            border: "2px solid rgba(255, 255, 255, 0.1)",
-            borderRadius: "10px", // Matching site's rounded corners
-            padding: "40px",
-            backgroundColor: "rgba(21, 25, 34, 0.7)",
-            boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)",
-            width: "90%",
-            height: "80%",
-          }}
-        >
-          <h1
-            style={{
-              fontSize: "88px",
-              fontWeight: "bold",
-              color: "#ffffff",
-              marginBottom: "20px",
-              textAlign: "center",
-              borderBottom: "4px solid #4299e1", // Using border instead of unsupported wavy underline
-              paddingBottom: "10px",
-            }}
-          >
-            Jasper Mayone
-          </h1>
-          <div
-            style={{
-              fontSize: "32px",
-              color: "#e0e0e0",
-              textAlign: "center",
-              maxWidth: "700px",
-              lineHeight: 1.4,
-              margin: "0 auto",
-            }}
-          >
-            Circus Artist • Coder • Photographer
-          </div>
-          <div
-            style={{
-              fontSize: "24px",
-              color: "#4299e1", // Changed to site's primary blue
-              marginTop: "30px",
-              textAlign: "center",
-            }}
-          >
-            jaspermayone.com
-          </div>
-        </div>
-      </div>
-    ),
-    {
-      width: 1200,
-      height: 630,
-    },
-  );
+  const data = getPageOGData("/");
+  return generateOGImage(data);
 }

src/app/portfolio/page.tsx

···
 import FOOTER from "@/components/FOOTER";
 import SquigglyLine from "@/components/SquigglyLine";
 import styles from "@/styles/Home.module.css";
+import { generateOGMetadata } from "@/lib/og-utils";
 
 export const metadata: Metadata = {
   title: "Portfolio",
   description: "A showcase of my projects and accomplishments.",
+  ...generateOGMetadata(
+    "/portfolio",
+    "Portfolio",
+    "A showcase of my projects and accomplishments.",
+  ),
 };
 
 export default function Portfolio() {

src/lib/og-image.tsx

···
+import { ImageResponse } from "@vercel/og";
+import { OGImageData } from "./og-utils";
+
+export const runtime = "edge";
+
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = "image/png";
+
+export function generateOGImage(data: OGImageData) {
+  const { title, subtitle, description, type = "default" } = data;
+
+  // Color schemes based on type
+  const getColors = (type: string) => {
+    switch (type) {
+      case "portfolio":
+        return {
+          bg: "#151922",
+          cardBg: "rgba(21, 25, 34, 0.8)",
+          accent: "#10b981", // emerald
+          border: "rgba(16, 185, 129, 0.2)",
+        };
+      case "project":
+        return {
+          bg: "#1a1a2e",
+          cardBg: "rgba(26, 26, 46, 0.8)",
+          accent: "#f59e0b", // amber
+          border: "rgba(245, 158, 11, 0.2)",
+        };
+      case "page":
+        return {
+          bg: "#0f172a",
+          cardBg: "rgba(15, 23, 42, 0.8)",
+          accent: "#8b5cf6", // violet
+          border: "rgba(139, 92, 246, 0.2)",
+        };
+      default:
+        return {
+          bg: "#151922",
+          cardBg: "rgba(21, 25, 34, 0.7)",
+          accent: "#4299e1", // blue
+          border: "rgba(66, 153, 225, 0.2)",
+        };
+    }
+  };
+
+  const colors = getColors(type);
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: "100%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: colors.bg,
+          padding: "40px",
+          fontFamily:
+            'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            border: `2px solid ${colors.border}`,
+            borderRadius: "16px",
+            padding: "50px",
+            backgroundColor: colors.cardBg,
+            boxShadow: "0 25px 50px rgba(0, 0, 0, 0.4)",
+            width: "90%",
+            height: "80%",
+            textAlign: "center",
+          }}
+        >
+          <h1
+            style={{
+              fontSize: title.length > 20 ? "64px" : "80px",
+              fontWeight: "bold",
+              color: "#ffffff",
+              marginBottom: "16px",
+              textAlign: "center",
+              borderBottom: `4px solid ${colors.accent}`,
+              paddingBottom: "12px",
+              maxWidth: "100%",
+              lineHeight: 1.1,
+            }}
+          >
+            {title}
+          </h1>
+
+          {subtitle && (
+            <div
+              style={{
+                fontSize: "36px",
+                color: "#e2e8f0",
+                textAlign: "center",
+                maxWidth: "800px",
+                lineHeight: 1.3,
+                marginBottom: description ? "16px" : "24px",
+              }}
+            >
+              {subtitle}
+            </div>
+          )}
+
+          {description && (
+            <div
+              style={{
+                fontSize: "24px",
+                color: "#94a3b8",
+                textAlign: "center",
+                maxWidth: "700px",
+                lineHeight: 1.4,
+                marginBottom: "24px",
+              }}
+            >
+              {description}
+            </div>
+          )}
+
+          <div
+            style={{
+              fontSize: "20px",
+              color: colors.accent,
+              marginTop: "auto",
+              textAlign: "center",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+            }}
+          >
+            <div
+              style={{
+                width: "8px",
+                height: "8px",
+                borderRadius: "50%",
+                backgroundColor: colors.accent,
+              }}
+            />
+            jaspermayone.com
+            <div
+              style={{
+                width: "8px",
+                height: "8px",
+                borderRadius: "50%",
+                backgroundColor: colors.accent,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    },
+  );
+}

src/lib/og-utils.ts

···
+export interface OGImageData {
+  title: string;
+  subtitle?: string;
+  description?: string;
+  type?: "default" | "portfolio" | "project" | "page";
+}
+
+export const getPageOGData = (path: string): OGImageData => {
+  const pathMappings: Record<string, OGImageData> = {
+    "/": {
+      title: "Jasper Mayone",
+      subtitle: "Circus Artist • Coder • Photographer",
+      type: "default",
+    },
+    "/portfolio": {
+      title: "Portfolio",
+      subtitle: "Projects & Work by Jasper Mayone",
+      description:
+        "Full-stack development, circus performance, and creative projects",
+      type: "portfolio",
+    },
+    "/contact": {
+      title: "Contact",
+      subtitle: "Get in Touch",
+      description:
+        "Reach out for collaborations, projects, or just to say hello",
+      type: "page",
+    },
+    "/uses": {
+      title: "Uses",
+      subtitle: "Tools & Setup",
+      description: "Software, hardware, and gear I use daily",
+      type: "page",
+    },
+    "/now": {
+      title: "Now",
+      subtitle: "What I'm up to",
+      description: "Current projects and focus areas",
+      type: "page",
+    },
+    "/changelog": {
+      title: "Changelog",
+      subtitle: "Site Updates",
+      description: "Recent changes and improvements to the site",
+      type: "page",
+    },
+    "/colophon": {
+      title: "Colophon",
+      subtitle: "About This Site",
+      description: "How this website was built and designed",
+      type: "page",
+    },
+    "/panera": {
+      title: "Panera",
+      subtitle: "Menu Explorer",
+      description: "Interactive Panera menu browser",
+      type: "project",
+    },
+    "/green": {
+      title: "Green",
+      subtitle: "Sustainability Focus",
+      description: "Environmental initiatives and green tech",
+      type: "page",
+    },
+    "/podroll": {
+      title: "Podroll",
+      subtitle: "Podcast Recommendations",
+      description: "Curated list of podcasts worth listening to",
+      type: "page",
+    },
+    "/pfp": {
+      title: "Profile Pictures",
+      subtitle: "Avatar Collection",
+      description: "Available profile pictures and avatars",
+      type: "page",
+    },
+    "/verify": {
+      title: "Verify",
+      subtitle: "Identity Verification",
+      description: "Verify my identity across platforms",
+      type: "page",
+    },
+  };
+
+  return (
+    pathMappings[path] || {
+      title: "Jasper Mayone",
+      subtitle: path
+        .replace("/", "")
+        .replace("-", " ")
+        .replace(/\b\w/g, (l) => l.toUpperCase()),
+      type: "page",
+    }
+  );
+};
+
+// Helper function to generate OG image URL for any page
+export const getOGImageUrl = (
+  path: string,
+  customData?: Partial<OGImageData>,
+) => {
+  const baseUrl = "/api/og";
+  const params = new URLSearchParams();
+
+  if (customData) {
+    if (customData.title) params.set("title", customData.title);
+    if (customData.subtitle) params.set("subtitle", customData.subtitle);
+    if (customData.description)
+      params.set("description", customData.description);
+    if (customData.type) params.set("type", customData.type);
+  } else {
+    params.set("path", path);
+  }
+
+  return `${baseUrl}?${params.toString()}`;
+};
+
+// Helper to generate complete OG metadata for any page
+export const generateOGMetadata = (
+  path: string,
+  title: string,
+  description: string,
+  customData?: Partial<OGImageData>,
+) => {
+  const ogImageUrl = getOGImageUrl(path, customData);
+
+  return {
+    openGraph: {
+      title: `${title} - Jasper Mayone`,
+      description,
+      images: [
+        {
+          url: ogImageUrl,
+          width: 1200,
+          height: 630,
+          alt: `${title} - Jasper Mayone`,
+        },
+      ],
+    },
+    twitter: {
+      title: `${title} - Jasper Mayone`,
+      description,
+      images: [
+        {
+          url: ogImageUrl,
+          alt: `${title} - Jasper Mayone`,
+        },
+      ],
+    },
+  };
+};