90 lines
2.6 KiB
TypeScript
90 lines
2.6 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";
|
|
import MyQrCode from "@/components/element-qr";
|
|
import Link from "next/link";
|
|
|
|
const BLUR_FADE_DELAY = 0.05;
|
|
|
|
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} className="w-full">
|
|
<hr />
|
|
</BlurFade>
|
|
|
|
<BlurFade delay={BLUR_FADE_DELAY * 3}>
|
|
<h2 className="text-4xl tracking-tight">Contact</h2>
|
|
</BlurFade>
|
|
<BlurFade delay={BLUR_FADE_DELAY * 4}>
|
|
<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>
|
|
<BlurFade delay={BLUR_FADE_DELAY * 5} className="w-full">
|
|
<hr />
|
|
</BlurFade>
|
|
<BlurFade
|
|
delay={BLUR_FADE_DELAY * 5}
|
|
className="flex w-full flex-col items-center my-2 pb-6">
|
|
<Link href={DATA.url}>
|
|
<MyQrCode />
|
|
</Link>
|
|
</BlurFade>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|