refined design

app/experience/[slug]/page.tsx

@@ -1,30 +1,43 @@
-import { getPostBySlug, getPostSlugs } from '@/lib/mdx';
+import { getPostBySlug, getPostSlugs, Post } from '@/lib/mdx';
 import { notFound } from 'next/navigation';
 import { DATA } from '@/app/resume';
 import { getPublicationsData } from '@/lib/publications';
 import { Article } from '@/components/page-article';
 
+type Props = {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+};
+
 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
+export async function generateMetadata({ params }: Props) {
   const { slug } = await params;
 
+  if (!slug) {
+    return {};
+  }
+
   const post = await getPostBySlug('experience', slug);
-  if (!post) { return {}; }
+  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
+export default async function ExperiencePage({ params }: Props) {
   const { slug } = await params;
 
+  if (!slug) {
+    notFound();
+  }
+
   const post = await getPostBySlug('experience', slug);
   const publications = getPublicationsData();
 
@@ -37,11 +50,13 @@ export default async function ExperiencePage({ params }: { params: { slug: strin
   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 prevPost: Post | null = prevSlug ? await getPostBySlug('experience', prevSlug) : null;
+  const nextPost: Post | null = 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,
+    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

@@ -1,18 +1,13 @@
 // 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;
+import { getAllTags, getSortedPostsData } from "@/lib/posts";
+import { FilterableExperienceGrid } from "@/components/filterable-experience-list";
 
 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);
+  const allPosts = posts.filter((post) => post.title);
+  const allTags = getAllTags(5, "experience").filter((tag) => (tag.name === "project" || tag.name === "teaching"));
 
   return (
     <main className="flex flex-col min-h-[100dvh] space-y-10">
@@ -23,30 +18,12 @@ export default function ExperiencePage() {
               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/>
+            My professional experience encompasses both hands-on systems engineering and academic instruction. I&apos;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>
+          <FilterableExperienceGrid posts={allPosts} tags={allTags} />
+
         </div>
       </section>
     </main>