fix height problems

package.json

@@ -33,7 +33,9 @@
     "@hookform/resolvers": "^5.4.0",
     "@mdx-js/mdx": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
+    "@mdx-js/loader": "^3.1.1",
     "@neondatabase/serverless": "^1.1.0",
+    "@next/mdx": "^16.2.9",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -69,6 +71,7 @@
     "@trpc/next": "^11.17.0",
     "@trpc/react-query": "^11.17.0",
     "@trpc/server": "^11.17.0",
+    "@types/mdx": "^2.0.14",
     "@uiw/react-md-editor": "^4.1.1",
     "@uploadthing/react": "^7.3.3",
     "@vercel/speed-insights": "^2.0.0",
@@ -104,6 +107,7 @@
     "server-only": "^0.0.1",
     "shadcn": "^4.10.0",
     "sonner": "^2.0.7",
+    "superjson": "^2.2.6",
     "tailwind-merge": "^3.6.0",
     "tailwindcss-motion": "^1.1.1",
     "type-fest": "^5.7.0",

src/app/_components/Animated/AnimateIn.tsx

@@ -1,3 +1,4 @@
+"use client"
 import { useRef, type HTMLAttributes, type ReactNode } from "react";
 import { SplitText } from "gsap/SplitText";
 import gsap from 'gsap'
@@ -11,6 +12,7 @@ const AnimateTextIn = ({
   speed = 1,
   scrollOnly = false,
   once = false,
+  debugId,
   className
 }: {
   children: ReactNode,
@@ -18,6 +20,7 @@ const AnimateTextIn = ({
   position?: gsap.Position,
   scrollOnly?: boolean,
   once?: boolean,
+  debugId?: string,
   speed?: number,
   className?: HTMLAttributes<HTMLDivElement>['className']
 }) => {
@@ -26,7 +29,7 @@ const AnimateTextIn = ({
     position,
     scrollOnly,
     once,
-    debugId: `text-${position}`,
+    debugId: debugId ?? `text-${position}`,
     makeReveal: (node) => {
       // The wrapper starts at opacity 0 (so there's no flash of unsplit text);
       // reveal the wrapper and let the per-character tween do the animation.

src/app/_components/Animated/AnimatePopUp.tsx

@@ -9,6 +9,7 @@ const AnimatePopUp = ({
   ease='elastic',
   scrollOnly=false,
   once=false,
+  debugId,
 }:{
     children:ReactNode
     position:gsap.Position,
@@ -17,9 +18,10 @@ const AnimatePopUp = ({
     ease?:gsap.EaseString|gsap.EaseFunction,
     scrollOnly?:boolean,
     once?:boolean,
+    debugId?:string,
   }) => {
   return (
-    <AnimatedDiv children={children} position={position} scrollOnly={scrollOnly} once={once} className={cn(className,'h-0 translate-y-[50] overflow-hidden')} height='auto' y={0} overflow='' ease={ease} duration={duration} />
+    <AnimatedDiv children={children} position={position} scrollOnly={scrollOnly} once={once} debugId={debugId} className={cn(className,'h-0 translate-y-[50] overflow-hidden')} height='auto' y={0} overflow='' ease={ease} duration={duration} />
   )
 }
 

src/app/_components/Animated/AnimatedDiv.tsx

@@ -1,3 +1,4 @@
+"use client"
 import gsap from "gsap";
 import { type HTMLAttributes, type ReactNode, useRef } from "react";
 import { useReveal } from "./useReveal";

src/app/_components/Animated/useReveal.ts

@@ -3,7 +3,7 @@
 import { useGSAP } from "@gsap/react"
 import { ScrollTrigger } from "gsap/all"
 import type { RefObject } from "react"
-import { GSAP_DEBUG, useGsapContext } from "~/app/_providers/GsapProvicer"
+import { GSAP_DEBUG, nearestScroller, useGsapContext } from "~/app/_providers/GsapProvicer"
 
 export type UseRevealOptions = {
   position: gsap.Position
@@ -39,9 +39,12 @@ export function useReveal(
   const ctx = useGsapContext()
   useGSAP(() => {
     const el = ref.current
-    if (!el || !ctx) return
+    if (!el || !ctx) {
+      if (GSAP_DEBUG) console.log("[cv-debug][useReveal:skip]", { debugId, hasEl: !!el, hasCtx: !!ctx })
+      return
+    }
 
-    const scroller = ctx.getScroller()
+    const scroller = nearestScroller(el)
     const scrollerEl = scroller instanceof Element ? scroller : undefined
 
     const rect = el.getBoundingClientRect()
@@ -53,6 +56,28 @@ export function useReveal(
       bottom = r.top + r.height
     }
     const isInView = rect.bottom > top && rect.top < bottom
+    if (GSAP_DEBUG) {
+      const scrollerRect = scrollerEl?.getBoundingClientRect()
+      console.log("[cv-debug][useReveal:register]", {
+        debugId,
+        position,
+        scrollOnly,
+        once,
+        isInView,
+        rect: { top: rect.top, bottom: rect.bottom, height: rect.height },
+        viewport: { top, bottom },
+        scroller:
+          scroller === window
+            ? "window"
+            : {
+                slot: scrollerEl?.getAttribute("data-slot"),
+                className: scrollerEl?.className,
+                clientHeight: scrollerEl?.clientHeight,
+                scrollHeight: scrollerEl?.scrollHeight,
+                rect: scrollerRect ? { top: scrollerRect.top, bottom: scrollerRect.bottom, height: scrollerRect.height } : undefined,
+              },
+      })
+    }
 
     const reveal = makeReveal(el)
     // A reveal that animates height (pop-ups) shifts every trigger below it.
@@ -83,19 +108,26 @@ export function useReveal(
     if (isInView && !scrollOnly) {
       // The shared timeline only decides *when* the entrance starts; the reveal
       // plays independently so the ScrollTrigger can take it over afterwards.
+      if (GSAP_DEBUG) console.log("[cv-debug][useReveal:schedule]", { debugId, position })
       ctx.schedule(() => reveal.play(), position)
       // `once` elements keep their revealed state — no scroll trigger at all.
-      if (!once) ctx.onReady(addReplayTrigger)
+      if (!once) {
+        if (GSAP_DEBUG) console.log("[cv-debug][useReveal:onReady]", { debugId })
+        ctx.onReady(addReplayTrigger)
+      }
     } else if (isInView) {
       // scrollOnly + already on screen: no enter crossing will fire, so reveal
       // now. Keep a trigger for scroll-out unless this is a `once` element.
+      if (GSAP_DEBUG) console.log("[cv-debug][useReveal:play-now]", { debugId, position })
       reveal.play()
       if (!once) addReplayTrigger()
     } else if (once) {
       // Off-screen: reveal when first reached, then self-destruct so it never
       // reverses.
+      if (GSAP_DEBUG) console.log("[cv-debug][useReveal:scroll-once]", { debugId, position })
       ScrollTrigger.create({ ...baseTrigger, once: true, onEnter: () => reveal.play() })
     } else {
+      if (GSAP_DEBUG) console.log("[cv-debug][useReveal:scroll-trigger-only]", { debugId, position })
       addReplayTrigger()
     }
   }, { dependencies: [] })

src/app/_providers/GsapProvicer.tsx

@@ -20,6 +20,25 @@ ScrollTrigger.config({ ignoreMobileResize: true })
 // element and mount the GSDevTools timeline scrubber. Handy for seeing exactly
 // where each card's enter/exit lines sit relative to the viewport.
 export const GSAP_DEBUG = false
+
+export function nearestScroller(el: Element): Element | Window {
+  let node: Element | null = el.parentElement
+  while (node) {
+    if (node.getAttribute('data-slot') === 'scroll-area-viewport') {
+      const viewport = node as HTMLElement
+      const rect = viewport.getBoundingClientRect()
+      const hasUsableBox = rect.width > 0 && rect.height > 0
+      const canScroll =
+        viewport.scrollHeight > viewport.clientHeight ||
+        viewport.scrollWidth > viewport.clientWidth
+
+      if (hasUsableBox && canScroll) return viewport
+    }
+    node = node.parentElement
+  }
+  return window
+}
+
 const GsapContext = createContext<{
   // Add a real animation (with its own duration) to the entrance timeline.
   addAnimation: (
@@ -47,14 +66,24 @@ export function useGsapContext() {
 export const useTimeLine = (dep:any,all?:boolean) => {
   const gsapContext = useGsapContext()
     useEffect(() => {
+      if (GSAP_DEBUG) {
+        console.log("[cv-debug][useTimeLine:effect]", {
+          hasDep: !!dep,
+          isArray: dep instanceof Array,
+          length: dep instanceof Array ? dep.length : undefined,
+          all,
+        })
+      }
       if (dep instanceof Array && all) {
         let acc = true;
         let allDepsSatisfied = dep.reduce((p,c) => c !== undefined && p ,acc )
         if (allDepsSatisfied) {
+          if (GSAP_DEBUG) console.log("[cv-debug][useTimeLine:resume-all]")
           gsapContext?.resumeTimeline()
         }
       } else {
         if (dep) {
+          if (GSAP_DEBUG) console.log("[cv-debug][useTimeLine:resume]")
           gsapContext?.resumeTimeline()
         }
       }
@@ -100,7 +129,7 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
       devToolsCreated.current = true
       GSDevTools.create({ animation: tl.current })
     }
-    return () => { console.log("gsap cleanup") }
+    return () => { if (GSAP_DEBUG) console.log("gsap cleanup") }
   })
 
   // Handoff: fire registered callbacks once, when the entrance finishes.
@@ -108,11 +137,19 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
   const readyCbs = useRef<Array<() => void>>([])
   const fireReady = useCallback(() => {
     if (readyFired.current) return
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:ready]", {
+        callbacks: readyCbs.current.length,
+        duration: tl.current?.duration(),
+        progress: tl.current?.progress(),
+      })
+    }
     readyFired.current = true
     readyCbs.current.forEach((cb) => cb())
     readyCbs.current = []
   },[])
   const onReady = useCallback((cb: () => void) => {
+    if (GSAP_DEBUG) console.log("[cv-debug][gsap:onReady]", { readyFired: readyFired.current })
     if (readyFired.current) cb()
     else readyCbs.current.push(cb)
   },[])
@@ -122,14 +159,43 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     // entrance already played). Parking a tween in a finished, paused timeline
     // would freeze it at its from-state, so once the entrance is done let the
     // (live) tween play on its own instead.
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:addAnimation]", {
+        position,
+        readyFired: readyFired.current,
+        durationBefore: tl.current?.duration(),
+      })
+    }
     if (readyFired.current) return
     tl.current?.add(animation, position);
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:addAnimation:done]", {
+        position,
+        durationAfter: tl.current?.duration(),
+        children: tl.current?.getChildren(false, true, true).length,
+      })
+    }
   },[])
   const schedule = useCallback((fn: () => void, position: gsap.Position) => {
     // Same late-arrival case: a callback added past the playhead never fires, so
     // run the reveal immediately once the entrance has finished.
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:schedule]", {
+        position,
+        readyFired: readyFired.current,
+        durationBefore: tl.current?.duration(),
+        childrenBefore: tl.current?.getChildren(false, true, true).length,
+      })
+    }
     if (readyFired.current) { fn(); return }
     tl.current?.add(fn, position)
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:schedule:done]", {
+        position,
+        durationAfter: tl.current?.duration(),
+        childrenAfter: tl.current?.getChildren(false, true, true).length,
+      })
+    }
   },[])
 
   // Throttle ScrollTrigger.refresh() to once per frame so the ResizeObserver
@@ -148,6 +214,12 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
   const resizeObserver = useRef<ResizeObserver | null>(null)
 
   const resetTimeline = useCallback(() => {
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:reset]", {
+        duration: tl.current?.duration(),
+        progress: tl.current?.progress(),
+      })
+    }
     tl.current?.kill()
     tl.current?.revert()
     ScrollTrigger.getAll().forEach(st => st.kill())
@@ -161,7 +233,19 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
 
   const resumeTimeline = useCallback(() => {
     const t = tl.current
-    if (!t) return
+    if (!t) {
+      if (GSAP_DEBUG) console.log("[cv-debug][gsap:resume:skip-no-timeline]")
+      return
+    }
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:resume:start]", {
+        duration: t.duration(),
+        progress: t.progress(),
+        paused: t.paused(),
+        readyFired: readyFired.current,
+        children: t.getChildren(false, true, true).length,
+      })
+    }
     // When the orchestrated entrance finishes, hand off to scroll control and
     // realign triggers against the now-settled layout.
     t.eventCallback("onComplete", () => { fireReady(); ScrollTrigger.refresh() })
@@ -185,6 +269,13 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     }
 
     t.resume()
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:resume:after]", {
+        duration: t.duration(),
+        progress: t.progress(),
+        paused: t.paused(),
+      })
+    }
   },[getScroller, fireReady, scheduleRefresh])
 
   // Fonts/markdown/images loading also change content height after the triggers

src/app/_trpc/ServerClient.ts

@@ -1,22 +1,3 @@
-import { httpBatchLink } from "@trpc/client";
 import { trpcRouter } from "~/server/routers/_app";
 
-function getBaseUrl() {
-  if (typeof window !== 'undefined')
-    // browser should use relative path
-    return '';
-  if (process.env.VERCEL_URL)
-    // reference for vercel.com
-    return `https://${process.env.VERCEL_URL}`;
-  if (process.env.RENDER_INTERNAL_HOSTNAME)
-    // reference for render.com
-    return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
-  // assume localhost
-  return `http://localhost:${process.env.PORT ?? 3000}`;
-};
-
-export const servTrpc = trpcRouter.createCaller({
-  links: [
-    httpBatchLink({url: `${getBaseUrl()}/api/trpc`}),
-  ],
-});
+export const servTrpc = trpcRouter.createCaller({});

src/app/_trpc/TrpcProvider.tsx

@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
 import { httpBatchLink } from "@trpc/client";
 import React, { useState } from "react"
+import superjson from "superjson";
 import { trpc } from "./Client";
 import getBaseUrl from "~/app/_trpc/GetBaseUrl";
 let clientQueryClient: QueryClient | undefined = undefined;
@@ -33,6 +34,7 @@ export default function TrpcProvider({ children }: { children: React.ReactNode }
       links: [
         httpBatchLink({
           url: `${baseUrl}/api/trpc`,
+          transformer: superjson,
         }),
       ],
     })

src/app/cv/_components/CvCategory.tsx

@@ -1,4 +1,4 @@
-'use client'
+import type { ReactNode } from "react"
 import CvEntry from "./CvEntry"
 import type { RouterOutputs } from "~/server/routers/_app"
 import { cn } from "~/lib/utils"
@@ -14,13 +14,14 @@ type CvCategoryProps = {
   category: CvCategoryData,
   layout: "row" | "col",
   position?: number,
+  descriptions: Record<string, ReactNode>,
 }
-export default function CvCategory({ category, layout, position = 0 }: CvCategoryProps) {
+export default function CvCategory({ category, layout, position = 0, descriptions }: CvCategoryProps) {
   const entries = category.cvEntry
   return (
     <AnimatedCard position={position} className={cn(layout == "row" ? "w-full" : "", "h-screen")}>
       <CardHeader>
-        <AnimateTextIn position={position + 0.2} animation="slide">
+        <AnimateTextIn once position={position + 0.2} animation="slide" debugId={`cv-category-title:${category.name}:${position + 0.2}`}>
           <CardTitle>{category.name}</CardTitle>
         </AnimateTextIn>
       </CardHeader>
@@ -28,8 +29,8 @@ export default function CvCategory({ category, layout, position = 0 }: CvCategor
         <CardContent className={cn(layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col", "gap-4", "overflow-scroll")}>
           <ScrollArea>
             {entries.map((entry, i) => (
-              <AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}>
-                <CvEntry position={position + 0.4 + i * 0.2} entry={entry} className={layout == "row" ? "w-full lg:w-fit" : undefined} />
+              <AnimatePopUp position={position + 0.4 + i * 0.2} debugId={`cv-entry-wrapper:${category.name}:${entry.title}:${position + 0.4 + i * 0.2}`} key={entry.id}>
+                <CvEntry position={position + 0.4 + i * 0.2} entry={entry} description={descriptions[entry.id]} className={layout == "row" ? "w-full lg:w-fit" : undefined} />
               </AnimatePopUp>
             ))}
           </ScrollArea>

src/app/cv/_components/CvEntry.tsx

@@ -1,16 +1,17 @@
+import type { ReactNode } from "react"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
 import { cn } from "~/lib/utils"
 import { format } from 'date-fns'
 import type { ArrayElement } from "type-fest"
 import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
-import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
+import AnimatedDiv from "~/app/_components/Animated/AnimatedDiv"
 import type { CvCategoryData } from "./CvCategory"
-import { ClientMdx } from "~/components/ClientMdx"
 
 export type CvEntryData = ArrayElement<CvCategoryData['cvEntry']>
 
-export default function CvEntry({ entry, className, position = 0 }: {
+export default function CvEntry({ entry, description, className, position = 0 }: {
 	entry: CvEntryData,
+	description?: ReactNode,
 	className?: string,
 	position?: number
 }) {
@@ -18,7 +19,7 @@ export default function CvEntry({ entry, className, position = 0 }: {
 		<Card className={className ? cn("w-fit", className) : "w-fit"}>
 			{entry.title ?
 				<CardHeader>
-					<AnimateTextIn position={position} animation="slide">
+					<AnimateTextIn position={position} animation="slide" debugId={`cv-entry-title:${entry.title}:${position}`}>
 						<CardTitle> {entry.title} </CardTitle>
 					</AnimateTextIn>
 				</CardHeader> :
@@ -26,17 +27,21 @@ export default function CvEntry({ entry, className, position = 0 }: {
 			}
 			{entry.description ?
 				<CardContent className="text-sm lg:text-base">
-					<AnimatePopUp position={position + 0.2}>
+					{/* Fade the description in place instead of collapsing its height:
+					    the outer entry pop-up (CvCategory) measures height:auto when it
+					    plays, so the description must stay laid out at full height or the
+					    entry reveals too short. */}
+					<AnimatedDiv once position={position + 0.2} className="opacity-0" opacity={1} duration={0.5} debugId={`cv-entry-description:${entry.title}:${position + 0.2}`}>
 						<article className="prose prose-zinc dark:prose-invert max-w-none">
-							<ClientMdx source={entry.description} fallback={entry.description} />
+							{description ?? entry.description}
 						</article>
-					</AnimatePopUp>
+					</AnimatedDiv>
 				</CardContent> :
 				<></>
 			}
 			{!entry.hideDates ?
 				<CardFooter className="text-sm">
-					<AnimateTextIn position={position + 0.4}>
+					<AnimateTextIn position={position + 0.4} debugId={`cv-entry-dates:${entry.title}:${position + 0.4}`}>
 						{`von ${format(new Date(entry.fromTime), 'M. yyyy')} bis zum ${format(new Date(entry.toTime), 'M. yyyy')}`}
 					</AnimateTextIn>
 				</CardFooter> :

src/app/cv/_components/Page.tsx

@@ -0,0 +1,59 @@
+'use client'
+import type { ReactNode } from "react";
+import { Sidebar, SidebarContent, SidebarProvider } from "~/components/ui/sidebar";
+import type { RouterOutputs } from "~/server/routers/_app"
+import SidebarTriggerDisappearsOnMobile from "./SidebarTriggerDisappearsOnMobile";
+import CvCategory from "./CvCategory";
+import { useTimeLine } from "~/app/_providers/GsapProvicer";
+export default function CvPage(props: {
+  cv: RouterOutputs['categoryv2']['listAllWithEntries'],
+  descriptions: Record<string, ReactNode>,
+}) {
+  useTimeLine(props.cv)
+  const { descriptions } = props
+  const byPosition = (pos: "sidebar" | "header" | "col1" | "col2") =>
+    props.cv?.filter((c) => c.layoutPosition === pos) ?? []
+  const sidebarCategories = byPosition("sidebar")
+  const headerCategories = byPosition("header")
+  const col1Categories = byPosition("col1")
+  const col2Categories = byPosition("col2")
+  return (
+    <>
+      <SidebarProvider>
+        {sidebarCategories.length > 0 &&
+          <>
+            <SidebarTriggerDisappearsOnMobile />
+            <Sidebar>
+              <SidebarContent className="p-2 lg:pt-[3.2rem]">
+                {sidebarCategories.map((cat, i) => (
+                  <CvCategory layout="col" position={i} category={cat} descriptions={descriptions} key={cat.id} />
+                ))}
+              </SidebarContent>
+            </Sidebar>
+          </>
+        }
+        <div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
+          <div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
+            <div id="header" className="flex  w-full h-fit flex-row gap-4 flex-wrap">
+              {headerCategories.map((cat, i) => (
+                <CvCategory layout="row" position={i} category={cat} descriptions={descriptions} key={cat.id} />
+              ))}
+            </div>
+            <div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
+              <div id="col1" className={`flex flex-col w-full ${col1Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
+                {col1Categories.map((cat, i) => (
+                  <CvCategory layout="col" position={i} category={cat} descriptions={descriptions} key={cat.id} />
+                ))}
+              </div>
+              <div id="col2" className={`flex flex-col w-full ${col2Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
+                {col2Categories.map((cat, i) => (
+                  <CvCategory layout="col" position={i} category={cat} descriptions={descriptions} key={cat.id} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </SidebarProvider>
+    </>
+  )
+}

src/app/cv/page.tsx

@@ -1,55 +1,42 @@
-'use client'
-import { useTimeLine } from "../_providers/GsapProvicer";
-import { trpc } from "../_trpc/Client";
-import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
-import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
-import CvCategory from "./_components/CvCategory";
-export default function CvPage() {
-  const cv = trpc.categoryv2.listAllWithEntries.useQuery();
-  useTimeLine(cv.data)
-  const byPosition = (pos: "sidebar" | "header" | "col1" | "col2") =>
-    cv.data?.filter((c) => c.layoutPosition === pos) ?? []
-  const sidebarCategories = byPosition("sidebar")
-  const headerCategories = byPosition("header")
-  const col1Categories = byPosition("col1")
-  const col2Categories = byPosition("col2")
+import { Suspense, type ReactNode } from "react";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import rehypeHighlight from "rehype-highlight";
+import remarkGfm from "remark-gfm";
+import { servTrpc as trpc } from "../_trpc/ServerClient";
+import { mdxComponents } from "~/components/mdx-components";
+import Page from "./_components/Page";
+
+export default async function CvPage() {
+  const cv = await trpc.categoryv2.listAllWithEntries();
+
+  // Render the MDX descriptions on the server so they exist at first paint.
+  // The client tree (which runs the GSAP entrance via useTimeLine) only places
+  // these already-rendered nodes — it never invokes the MDX renderer itself, so
+  // the 'use client' boundary stays intact and the animations no longer play
+  // against an un-rendered fallback.
+  const descriptions: Record<string, ReactNode> = {};
+  for (const category of cv ?? []) {
+    for (const entry of category.cvEntry) {
+      if (!entry.description?.trim()) continue;
+      descriptions[entry.id] = (
+        <MDXRemote
+          source={entry.description}
+          components={mdxComponents}
+          options={{
+            mdxOptions: {
+              format: "md",
+              remarkPlugins: [remarkGfm],
+              rehypePlugins: [rehypeHighlight],
+            },
+          }}
+        />
+      );
+    }
+  }
+
   return (
-    <>
-      <SidebarProvider>
-        {sidebarCategories.length > 0 &&
-          <>
-            <SidebarTriggerDisappearsOnMobile />
-            <Sidebar>
-              <SidebarContent className="p-2 lg:pt-[3.2rem]">
-                {sidebarCategories.map((cat, i) => (
-                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
-                ))}
-              </SidebarContent>
-            </Sidebar>
-          </>
-        }
-        <div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
-          <div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
-            <div id="header" className="flex  w-full h-fit flex-row gap-4 flex-wrap">
-              {headerCategories.map((cat, i) => (
-                <CvCategory layout="row" position={i} category={cat} key={cat.id} />
-              ))}
-            </div>
-            <div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
-              <div id="col1" className={`flex flex-col w-full ${col1Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col1Categories.map((cat, i) => (
-                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
-                ))}
-              </div>
-              <div id="col2" className={`flex flex-col w-full ${col2Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col2Categories.map((cat, i) => (
-                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </SidebarProvider>
-    </>
+    <Suspense>
+      <Page cv={cv} descriptions={descriptions} />
+    </Suspense>
   )
 }

src/components/ui/card.tsx

@@ -1,3 +1,4 @@
+"use client"
 import * as React from "react"
 import { useRef } from "react";
 import gsap from 'gsap'

src/server/trpc.ts

@@ -1,5 +1,8 @@
 import { initTRPC } from "@trpc/server"
+import superjson from "superjson"
 
-const t = initTRPC.create();
+const t = initTRPC.create({
+	transformer: superjson,
+});
 export const router = t.router;
 export const publicProcedure = t.procedure;