finish up project page

src/app/admin/_components/AdminSideBar.tsx

@@ -1,14 +1,15 @@
 import Link from "next/link";
+import { ScrollArea } from "~/components/ui/scroll-area";
 import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger } from "~/components/ui/sidebar";
 import SimpleSidebarGroup from "~/components/ui/simple-sidebar-group";
 
 export default function AdminSideBar() {
   return (
     <>
-      <SidebarProvider>
-        <Sidebar className="z-[51]">
+        <Sidebar variant="floating" className="h-[96%] mt-10 z-[51]">
           <SidebarTrigger className="absolute z-[52] left-65 top-100" />
           <SidebarContent>
+            <ScrollArea>
             <SimpleSidebarGroup lable="CV">
               <Link href={"/admin/cv/category/create"}> Create Category </Link>
               <Link href={"/admin/cv/entry/create"}> Create Entry </Link>
@@ -29,9 +30,9 @@ export default function AdminSideBar() {
             <SimpleSidebarGroup lable="Chat">
               <Link href={"/admin/chat"}> System Prompt </Link>
             </SimpleSidebarGroup>
+            </ScrollArea>
           </SidebarContent>
         </Sidebar>
-      </SidebarProvider>
     </>
   )
 }

src/app/admin/cv/category/list/page.tsx

@@ -11,13 +11,8 @@ import CreateUpdateCvCategoryForm from "../_components/CreateUpdateForm";
 export default function CvPage() {
   const categories = trpc.category.select.useQuery({}, { refetchInterval: 1000 });
   const entires = trpc.entry.select.useSuspenseQuery({}, { refetchInterval: 1000 })
-  const gsap = useGsapContext()
-  const container = useRef<HTMLDivElement>(null);
-  useGSAP(() => {
-    gsap?.from('.gsapan', { x: -100, opacity: 0, duration: 0.5, stagger: { each: 0.3 } });
-  }, { scope: container, dependencies: [categories.status], revertOnUpdate: true });
   return (
-    <div ref={container} className="w-5/6 lg:w-1/2 flex flex-col gap-3">
+    <>
       {categories.data == undefined ?
         <div className="gsapan"></div>
         :
@@ -64,6 +59,6 @@ export default function CvPage() {
           <CollapsibleForm entityName="Category" form={CreateUpdateCvCategoryForm} />
         </>
       }
-    </div>
+    </>
   )
 }

src/app/admin/cv/entry/list/page.tsx

@@ -8,13 +8,9 @@ import { useGsapContext } from "~/app/_providers/GsapProvicer";
 
 export default function CvPage() {
   const entires = trpc.entry.select.useQuery({});
-  const gsap = useGsapContext()
   const container = useRef<HTMLDivElement>(null);
-  useGSAP(() => {
-    gsap?.from('.gsapan', { x: -100, opacity: 0, duration: 0.5, stagger: { each: 0.3 } })
-  }, { scope: container, dependencies: [entires.status], revertOnUpdate: true });
   return (
-    <div ref={container} className="w-5/6 lg:w-1/2 flex flex-col gap-3">
+    <>
       {entires.data == undefined ?
         <div className="gsapan"></div>
         :
@@ -40,6 +36,6 @@ export default function CvPage() {
           })}
         </>
       }
-    </div>
+    </>
   )
 }

src/app/admin/layout.tsx

@@ -1,14 +1,18 @@
+import { SidebarProvider } from "~/components/ui/sidebar";
 import AdminSideBar from "./_components/AdminSideBar";
+import { ScrollArea } from "~/components/ui/scroll-area";
 
 export const dynamic = 'force-dynamic';
 
 export default function Admin({children}: Readonly<{children: React.ReactNode}>) {
   return (
     <>
+      <SidebarProvider>
       <AdminSideBar/>
-      <main className="absolute flex items-center content-center justify-center flex-wrap w-[100vw] left-0 top-15">
+      <ScrollArea className="px-10 lg:px-0 w-full h-screen pb-10 max-w-4xl mx-auto pt-10">
         {children}
-      </main>
+      </ScrollArea>
+      </SidebarProvider>
     </>
   )
 }

src/app/admin/project/list/page.tsx

@@ -10,7 +10,7 @@ export default function ProjectList() {
   const projects = trpc.project.select.useQuery({}, { refetchInterval: 1000 })
   const techStacks = trpc.techStack.select.useSuspenseQuery({}, { refetchInterval: 1000 })
   return (
-    <div className="w-5/6 lg:w-1/2 flex flex-col gap-3">
+    <>
       {
         projects.data == undefined ?
         <></> :
@@ -55,6 +55,6 @@ export default function ProjectList() {
         <CollapsibleForm entityName="Project" form={CreateUpdateProjectForm} />
         </>
       }
-    </div>
+      </>
   )
 }

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">