Files
website/app/experience/page.tsx
2025-09-12 23:20:36 +02:00

54 lines
2.3 KiB
TypeScript

// src/pages/experience.tsx
import { getSortedPostsData } from "@/lib/posts";
import { ProjectCard } from "@/components/project-card";
import { ExperienceCard } from "@/components/list-item"; // Import the new component
import { BlurFade } from "@/components/magicui/blur-fade";
const BLUR_FADE_DELAY = 0.04;
export default function ExperiencePage() {
const posts = getSortedPostsData("experience");
// Filter out posts that might not be suitable for a list item if needed,
// or ensure your getSortedPostsData provides necessary fields for both.
const experiencePosts = posts.filter((post) => post.title);
return (
<main className="flex flex-col min-h-[100dvh] space-y-10">
<section id="projects-list">
<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">
Experience
</h1>
<p className="text-muted-foreground">
My professional experience encompasses both hands-on systems engineering and academic instruction. I've worked at the intersection of machine learning and complex systems, with projects ranging from exploring emergent behavior in AI to managing cluster infrastructure. In my role at <b><a href="https://www.mobile.ifi.lmu.de/team/steffen-illium/">LMU Munich</a></b>, I further developed this experience by mentoring students, contributing to lectures, and leading practical seminars.<br/>
</p>
</div>
<hr />
<div className="flex flex-col space-y-4">
{experiencePosts.map((post, id) => (
<BlurFade
key={post.title + "-list"}
delay={BLUR_FADE_DELAY * 2 + id * 0.005}
>
<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>
);
}