almost done

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>
+  );
+}