finish up project page

src/app/projects/page.tsx

@@ -11,6 +11,7 @@ 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"
 
 export default function ProjectsPage() {
   const { data: projects, isLoading } = trpc.projectv2.listWithStack.useQuery();
@@ -61,8 +62,9 @@ export default function ProjectsPage() {
               <Card.CardContent className="flex flex-col gap-3">
                 {project.description && (
                   <div className="prose prose-sm dark:prose-invert max-w-none text-muted-foreground">
-                    <AnimatePopUp position={i + 1.4} duration={project.description.length / 20}>
-                      <AnimateTextIn position={i + 1.5} animation="slide"><Markdown>{project.description}</Markdown></AnimateTextIn></AnimatePopUp>
+                    <AnimatePopUp position={i + 1.4} duration={10}>
+                      <Markdown remarkPlugins={[remarkGfm]}>{project.description}</Markdown>
+                    </AnimatePopUp>
                   </div>
                 )}
                 <div className="flex flex-row">