homepage, cv page layout

src/components/mdx-components.tsx

@@ -91,6 +91,26 @@ function Figure({
   );
 }
 
+// A bare markdown image (![alt](src)) fills the prose width. Pass a numeric
+// markdown title — ![alt](src "160") — to render it as a fixed-size, circular
+// avatar instead (used by the CV header). Untitled images keep the old look.
+function Img({ src, alt, title }: { src: string; alt?: string; title?: string }) {
+  const size = title && /^\d+$/.test(title) ? Number(title) : undefined;
+  if (size) {
+    return (
+      <img
+        src={src}
+        alt={alt ?? ""}
+        width={size}
+        height={size}
+        style={{ width: size, height: size }}
+        className="mx-auto !my-0 shrink-0 rounded-full object-cover ring-2 ring-foreground/10"
+      />
+    );
+  }
+  return <img src={src} alt={alt ?? ""} className="w-full rounded-md border object-cover" />;
+}
+
 function PullQuote({ children }: { children: ReactNode }) {
   return (
     <blockquote className="border-primary my-8 border-l-4 pl-5 text-xl leading-8 font-medium">
@@ -127,6 +147,7 @@ export const mdxComponents = {
   ButtonLink,
   Callout,
   Figure,
+  img: Img,
   Lead,
   PullQuote,
   TagList,