47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
import { getSortedPostsData } from "@/lib/posts";
|
|
import { BlurFade } from "@/components/magicui/blur-fade";
|
|
import { ExperienceCard } from "@/components/list-item";
|
|
|
|
const BLUR_FADE_DELAY = 0.04;
|
|
|
|
export default function ProjectsPage() {
|
|
const posts = getSortedPostsData("projects");
|
|
|
|
return (
|
|
<main className="flex flex-col min-h-[100dvh] space-y-10">
|
|
<section id="projects">
|
|
<div className="mx-auto w-full max-w-6xl space-y-8">
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none mt-12">
|
|
Projects
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
My work sits at the intersection of machine learning and systems engineering. I have experience in everything from exploring emergent behavior in AI agents to managing robust, automated infrastructure with Kubernetes. Here are some highlights.
|
|
</p>
|
|
</div>
|
|
<hr />
|
|
<div className="flex flex-col space-y-4"> {/* Use flex-col for list items */}
|
|
{posts.map((post, id) => (
|
|
<BlurFade
|
|
key={post.title + "-list"} // Use a different key to avoid collisions if both sections are rendered
|
|
delay={BLUR_FADE_DELAY * 2 + id * 0.05} // You might want to adjust delay for list items
|
|
>
|
|
<ExperienceCard
|
|
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>
|
|
</main>
|
|
);
|
|
} |