almost done

app/connect/page.tsx

@@ -0,0 +1,75 @@
+import { DATA } from "@/app/resume";
+import Image from "next/image";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { CenteredImage } from "@/components/centered-image";
+import { BlurFade } from "@/components/magicui/blur-fade";
+import { TrackedLink } from "@/components/util-tracked-link";
+
+const BLUR_FADE_DELAY = 0.05;
+
+export default function ConnectPage() {
+  const featuredSocials = ["Email", "LinkedIn", "GoogleScholar", "arXiv", "ResearchGate", "Gitea"];
+  const socialLinks = Object.entries(DATA.contact.social)
+    .filter(([name]) => featuredSocials.includes(name));
+
+  return (
+    <main 
+      className="fixed inset-0 flex flex-col items-center justify-center bg-background"
+    >
+      <div className="flex flex-col items-center space-y-8 text-center max-w-sm w-full p-6">
+        
+        <BlurFade delay={BLUR_FADE_DELAY * 1}>
+          <Image
+            src="/images/newshot_2.jpg"
+            alt="Dr. Steffen Illium's headshot"
+            width={128}
+            height={128}
+            className="rounded-full border shadow-sm"
+          />
+        </BlurFade>
+        
+        <BlurFade delay={BLUR_FADE_DELAY * 2}>
+          <h1 className="text-4xl font-bold tracking-tight">
+            Dr. Steffen Illium
+          </h1>
+        </BlurFade>
+
+        <BlurFade delay={BLUR_FADE_DELAY * 3}>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 w-full">              
+            {socialLinks.map(([name, social]) => (
+                <TrackedLink href={social.url} key={name} eventName={`${name}-social`} target="_blank">
+                    <Button variant="outline" className="w-full">
+                        <social.icon className="size-4 mr-2" />
+                        {name}
+                    </Button>
+                </TrackedLink>
+            ))}
+          </div>
+        </BlurFade>
+
+        <div className="flex w-full flex-col items-center space-y-4 pb-8">
+          <div className="w-full px-8">
+            <BlurFade delay={BLUR_FADE_DELAY * 4}>
+              <hr className="w-full" />
+            </BlurFade>
+          </div>
+
+          <BlurFade delay={BLUR_FADE_DELAY * 5}>
+            <a href="/images/qr.png" download="SteffenIllium-QRCode.png">
+              <Image
+                src="/images/qr.png"
+                alt="QR Code to connect"
+                width={256}
+                height={256}
+                className="rounded-xl shadow-lg hover:opacity-80 transition-opacity"
+              />
+            </a>
+          </BlurFade>
+        </div>
+
+      </div>
+    </main>
+  );
+}