220 lines
8.8 KiB
TypeScript
220 lines
8.8 KiB
TypeScript
import { getSortedPostsData } from "@/lib/posts";
|
|
import { ProjectCard } from "@/components/project-card";
|
|
import { ResumeCard } from "@/components/resume-card";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { DATA } from "@/app/resume";
|
|
import Markdown from "react-markdown";
|
|
import { TextAnimate } from "@/components/magicui/text-animate";
|
|
import { BlurFade } from "@/components/magicui/blur-fade";
|
|
import { TrackedLink } from "@/components/util-tracked-link";
|
|
|
|
const BLUR_FADE_DELAY = 0.01;
|
|
|
|
export default function Page() {
|
|
const posts = getSortedPostsData().slice(0, 6);
|
|
return (
|
|
<main className="flex flex-col min-h-[100dvh]">
|
|
<section id="hero pt-12">
|
|
<div className="mx-auto w-full max-w-2xl">
|
|
<div className="flex flex-col sm:flex-row items-center sm:justify-between pt-16 pb-8 sm:py-12 space-y-6">
|
|
{" "}
|
|
<div className="flex-col flex flex-1 space-y-1.5 items-center sm:items-start">
|
|
<TextAnimate
|
|
delay={BLUR_FADE_DELAY}
|
|
className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-center sm:text-left">
|
|
{`Hi, I'm ${DATA.name.split(" ")[0]}`}
|
|
</TextAnimate>
|
|
<TextAnimate
|
|
className="max-w-[400px] md:text-xl text-center sm:text-left"
|
|
delay={BLUR_FADE_DELAY}>
|
|
AI Consultant & Researcher with a PhD in Computer Science.
|
|
</TextAnimate>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-y-4">
|
|
<BlurFade delay={BLUR_FADE_DELAY}>
|
|
<Avatar className="size-28 border">
|
|
<AvatarImage
|
|
alt={DATA.name}
|
|
src={DATA.avatarUrl}
|
|
fetchPriority="high"
|
|
/>
|
|
<AvatarFallback>{DATA.initials}</AvatarFallback>
|
|
</Avatar>
|
|
</BlurFade>
|
|
<BlurFade delay={BLUR_FADE_DELAY * 2}>
|
|
<TrackedLink
|
|
href="/illium_cv_censored.pdf"
|
|
eventName="cv-download"
|
|
className="w-full"
|
|
download>
|
|
<Badge className="flex px-3 py-1 text-sm shadow-sm transition-all duration-300 ease-out hover:shadow-lg dark:shadow-[var(--shadow-glow)] dark:hover:shadow-[var(--shadow-glow-hover)]">
|
|
Download CV
|
|
</Badge>
|
|
</TrackedLink>
|
|
</BlurFade>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="about">
|
|
<BlurFade delay={BLUR_FADE_DELAY * 3}>
|
|
<h2 className="text-xl font-bold">About</h2>
|
|
</BlurFade>
|
|
<BlurFade
|
|
delay={BLUR_FADE_DELAY * 4}
|
|
className="prose max-w-full text-pretty font-sans text-sm text-muted-foreground dark:prose-invert">
|
|
<Markdown>{DATA.summary}</Markdown>
|
|
</BlurFade>
|
|
</section>
|
|
<section id="projects">
|
|
<div className="space-y-8 w-full py-4">
|
|
<BlurFade delay={BLUR_FADE_DELAY * 11}>
|
|
<div className="flex flex-col items-center justify-center space-y-4 text-center">
|
|
<div className="space-y-2">
|
|
<div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm">
|
|
Recent Posts
|
|
</div>
|
|
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
|
|
Check out my latest work
|
|
</h2>
|
|
<p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
|
|
I've worked on a variety of projects, from scientific
|
|
research to managing projects. Here are a few of my latest.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</BlurFade>
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 max-w-[1040px] mx-auto">
|
|
{posts
|
|
.filter((post) => post.title)
|
|
.map((post, id) => (
|
|
<BlurFade
|
|
key={post.title}
|
|
delay={BLUR_FADE_DELAY * 12 + id * 0.05}>
|
|
<ProjectCard
|
|
href={post.href}
|
|
key={post.title}
|
|
title={post.title!}
|
|
description={post.excerpt || ""}
|
|
dates={post.date}
|
|
tags={post.tags}
|
|
image={post.image || ""}
|
|
video={post.video}
|
|
links={[]}
|
|
/>
|
|
</BlurFade>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="skills" className="py-6">
|
|
<div className="flex min-h-0 flex-col gap-y-4">
|
|
<BlurFade delay={BLUR_FADE_DELAY * 9}>
|
|
<h2 className="text-xl font-bold">Skills</h2>
|
|
</BlurFade>
|
|
<div className="flex flex-col gap-y-2">
|
|
{Object.entries(DATA.skills).map(([category, skills], id) => (
|
|
<div key={id}>
|
|
<BlurFade delay={BLUR_FADE_DELAY * 9.5}>
|
|
<h3 className="text-lg font-semibold">{category}</h3>
|
|
</BlurFade>
|
|
<div className="flex flex-wrap gap-1">
|
|
{skills.map((skill, id) => (
|
|
<BlurFade
|
|
key={skill}
|
|
delay={BLUR_FADE_DELAY * 10 + id * 0.05}>
|
|
<Badge key={skill}>{skill}</Badge>
|
|
</BlurFade>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="work" className="py-4">
|
|
<div className="flex min-h-0 flex-col gap-y-3">
|
|
<BlurFade delay={BLUR_FADE_DELAY * 7}>
|
|
<h2 className="text-xl font-bold">Work Experience</h2>
|
|
</BlurFade>
|
|
{DATA.work.map((work, id) => (
|
|
<BlurFade
|
|
key={work.company}
|
|
delay={BLUR_FADE_DELAY * 8 + id * 0.05}>
|
|
<ResumeCard
|
|
key={work.company}
|
|
href={work.href}
|
|
logoUrl={work.logoUrl}
|
|
altText={work.company}
|
|
title={work.company}
|
|
subtitle={work.title}
|
|
period={`${work.start} - ${work.end}`}
|
|
/>
|
|
</BlurFade>
|
|
))}
|
|
</div>
|
|
</section>
|
|
<section id="education" className="py-4">
|
|
<div className="flex min-h-0 flex-col gap-y-3">
|
|
<BlurFade delay={BLUR_FADE_DELAY * 7}>
|
|
<h2 className="text-xl font-bold">Education</h2>
|
|
</BlurFade>
|
|
{DATA.education.map((education, id) => (
|
|
<BlurFade
|
|
key={education.school}
|
|
delay={BLUR_FADE_DELAY * 8 + id * 0.05}>
|
|
<ResumeCard
|
|
key={education.school}
|
|
href={education.href}
|
|
logoUrl={education.logoUrl}
|
|
altText={education.school}
|
|
title={education.school}
|
|
subtitle={education.degree}
|
|
period={`${education.start} - ${education.end}`}
|
|
/>
|
|
</BlurFade>
|
|
))}
|
|
</div>
|
|
</section>
|
|
<section id="contact">
|
|
<div className="grid items-center justify-center gap-4 px-4 text-center md:px-6 w-full py-12">
|
|
<BlurFade delay={BLUR_FADE_DELAY * 16}>
|
|
<div className="space-y-3">
|
|
<div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm">
|
|
Contact
|
|
</div>
|
|
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
|
|
Get in Touch
|
|
</h2>
|
|
<p className="mx-auto max-w-[800px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
|
|
Want to collaborate or have a question?
|
|
<br />
|
|
I'd love to hear from you.
|
|
</p>
|
|
</div>
|
|
</BlurFade>
|
|
<BlurFade delay={BLUR_FADE_DELAY * 18}>
|
|
<div className="flex flex-wrap gap-2 justify-center">
|
|
{Object.entries(DATA.contact.social)
|
|
//.filter(([_, social]) => !social.pub)
|
|
.map(([name, social]) => (
|
|
<TrackedLink
|
|
href={social.url}
|
|
key={name}
|
|
className="group"
|
|
eventName={`${name}-social`}>
|
|
<Badge className="cards flex gap-2 px-3 py-1 text-sm">
|
|
<social.icon className="size-4" />
|
|
{name}
|
|
</Badge>
|
|
</TrackedLink>
|
|
))}
|
|
</div>
|
|
</BlurFade>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|