74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import { DATA } from "@/app/resume";
|
|
import Image from "next/image";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { BlurFade } from "@/components/magicui/blur-fade";
|
|
import { TrackedLink } from "@/components/util-tracked-link";
|
|
import { Metadata } from "next";
|
|
|
|
const BLUR_FADE_DELAY = 0.01;
|
|
|
|
export const metadata: Metadata = {
|
|
alternates: {
|
|
canonical: `${DATA.url}/connect`,
|
|
},
|
|
}
|
|
|
|
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="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"
|
|
sizes="128px"
|
|
priority
|
|
/>
|
|
</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-1 sm:grid-cols-2 lg:grid-cols-2 gap-2 w-full">
|
|
{socialLinks.map(([name, social]) => (
|
|
<TrackedLink className="truncate" 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-4">
|
|
|
|
<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={240}
|
|
height={240}
|
|
className="rounded-xl shadow-lg hover:opacity-80 transition-opacity"
|
|
/>
|
|
</a>
|
|
</BlurFade>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
} |