feat: harden portfolio and add SEO foundations

lib/og-card.tsx

@@ -0,0 +1,74 @@
+export const OG_SIZE = { width: 1200, height: 630 } as const;
+export const OG_CONTENT_TYPE = "image/png";
+
+export function OgCard({
+  eyebrow,
+  title,
+  description,
+}: {
+  eyebrow: string;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        background: "#050505",
+        color: "#f4f1e8",
+        padding: 72,
+        fontFamily: "Arial, sans-serif",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          color: "#ccff00",
+          fontSize: 24,
+          letterSpacing: "0.16em",
+          textTransform: "uppercase",
+        }}
+      >
+        {eyebrow}
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
+        <div
+          style={{
+            display: "flex",
+            fontSize: 64,
+            fontWeight: 700,
+            lineHeight: 1.08,
+          }}
+        >
+          {title}
+        </div>
+        <div
+          style={{
+            display: "flex",
+            maxWidth: 980,
+            color: "#c7c3ba",
+            fontSize: 28,
+            lineHeight: 1.35,
+          }}
+        >
+          {description}
+        </div>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          borderTop: "1px solid #343434",
+          paddingTop: 24,
+          fontSize: 20,
+          letterSpacing: "0.12em",
+        }}
+      >
+        EVANDRO.DEV.BR / ENGENHARIA DE SOFTWARE
+      </div>
+    </div>
+  );
+}