almost done

app/research/[slug]/page.tsx

@@ -0,0 +1,50 @@
+// file: app/research/[slug]/page.tsx
+
+import { getPostBySlug, getPostSlugs } from '@/lib/mdx';
+import { notFound } from 'next/navigation';
+import { getPublicationsData } from '@/lib/publications';
+import { Article } from '@/components/page-article';
+import { DATA } from '@/app/resume';
+
+export async function generateStaticParams() {
+  const slugs = getPostSlugs('research');
+  return slugs.map((slug) => ({ slug }));
+}
+
+export async function generateMetadata({ params }: { params: { slug: string } }) {
+  const { slug } = await params;
+
+  const post = await getPostBySlug('research', slug);
+  if (!post) { return {}; }
+  return {
+    title: post.frontmatter.title,
+    description: post.frontmatter.teaser || DATA.description,
+  };
+}
+
+export default async function ResearchPage({ params }: { params: { slug: string } }) {
+  const { slug } = await params;
+
+  const post = await getPostBySlug('research', slug);
+  const publications = getPublicationsData();
+
+  if (!post) {
+    notFound();
+  }
+
+  // --- Navigation Logic ---
+  const allSlugs = getPostSlugs('research');
+  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('research', prevSlug) : null;
+  const nextPost = nextSlug ? await getPostBySlug('research', 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="research" />;
+}

app/research/page.tsx

@@ -0,0 +1,53 @@
+import { getSortedPostsData } from "@/lib/posts";
+import { ProjectCard } from "@/components/project-card";
+import { BlurFade } from "@/components/magicui/blur-fade";
+
+const BLUR_FADE_DELAY = 0.04;
+
+export default function ResearchPage() {
+  const posts = getSortedPostsData("research");
+
+  return (
+    <main className="flex flex-col min-h-[100dvh] space-y-10">
+      <section id="research">
+        <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">
+              Research
+            </h1>
+            <p className="text-muted-foreground">
+              This section details my scientific publications, primarily focused
+              on advancing machine learning and deep neural networks.
+              My involvement has spanned, from conceptualizing the ideas 
+              and developing machine learning models, to providing support 
+              to my colleagues.
+            </p>
+          </div>
+          <hr />
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-2">
+            {posts
+              .filter((post) => post.title)
+              .map((post, id) => (
+              <BlurFade
+                key={post.title}
+                delay={BLUR_FADE_DELAY * 2 + id * 0.005}
+              >
+                <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>
+    </main>
+  );
+}