almost done

app/experience/[slug]/page.tsx

@@ -0,0 +1,48 @@
+import { getPostBySlug, getPostSlugs } from '@/lib/mdx';
+import { notFound } from 'next/navigation';
+import { DATA } from '@/app/resume';
+import { getPublicationsData } from '@/lib/publications';
+import { Article } from '@/components/page-article';
+
+export async function generateStaticParams() {
+  const slugs = getPostSlugs('experience');
+  return slugs.map((slug) => ({ slug }));
+}
+
+export async function generateMetadata({ params }: { params: { slug: string } }) {
+  // FIX: Await params to get slug for Next.js 15
+  const { slug } = await params;
+
+  const post = await getPostBySlug('experience', slug);
+  if (!post) { return {}; }
+  return {
+    title: post.frontmatter.title,
+    description: post.frontmatter.teaser || DATA.description,
+  };
+}
+
+export default async function ExperiencePage({ params }: { params: { slug: string } }) {
+  // FIX: Await params to get slug for Next.js 15
+  const { slug } = await params;
+
+  const post = await getPostBySlug('experience', slug);
+  const publications = getPublicationsData();
+
+  if (!post) {
+    notFound();
+  }
+
+  // --- Navigation Logic ---
+  const allSlugs = getPostSlugs('experience');
+  const currentIndex = allSlugs.findIndex((s) => s === slug);
+  const prevSlug = currentIndex > 0 ? allSlugs[currentIndex - 1] : null;
+  const nextSlug = currentIndex < allSlugs.length - 1 ? allSlugs[currentIndex + 1] : null;
+  const prevPost = prevSlug ? await getPostBySlug('experience', prevSlug) : null;
+  const nextPost = nextSlug ? await getPostBySlug('experience', nextSlug) : null;
+  const navigation = {
+    prev: prevPost ? { slug: prevSlug, title: prevPost.frontmatter.title } : null,
+    next: nextPost ? { slug: nextSlug, title: nextPost.frontmatter.title } : null,
+  };
+
+  return <Article post={post} publications={publications} navigation={navigation} basePath="experience" />;
+}

app/experience/page.tsx

@@ -0,0 +1,54 @@
+// 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>
+  );
+}