cleanup markdown

src/app/projects/page.tsx

@@ -4,14 +4,13 @@ import { trpc } from "~/app/_trpc/Client";
 import * as Card from "~/components/ui/card";
 import { Badge } from "~/components/ui/badge";
 import { StackBadge } from "~/components/StackBadge";
-import Markdown from "react-markdown";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import AnimatedPageTitle from "../_components/Animated/AnimatedPageTitle";
 import AnimateTextIn from "../_components/Animated/AnimateIn";
 import { useTimeLine } from "../_providers/GsapProvicer";
 import AnimatePopUp from "../_components/Animated/AnimatePopUp";
 import { Button } from "~/components/ui/button";
-import remarkGfm from "remark-gfm"
+import { ClientMdx } from "~/components/ClientMdx";
 
 export default function ProjectsPage() {
   const { data: projects, isLoading } = trpc.projectv2.listWithStack.useQuery();
@@ -63,7 +62,7 @@ export default function ProjectsPage() {
                 {project.description && (
                   <div className="prose prose-sm dark:prose-invert max-w-none text-muted-foreground">
                     <AnimatePopUp once position={i + 1.4} duration={10}>
-                      <Markdown remarkPlugins={[remarkGfm]}>{project.description}</Markdown>
+                      <ClientMdx source={project.description} fallback={project.description} />
                     </AnimatePopUp>
                   </div>
                 )}