fix height problems

package.json

@@ -31,7 +31,11 @@
     "@fortawesome/react-fontawesome": "^3.3.1",
     "@gsap/react": "^2.1.2",
     "@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",
@@ -67,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",
@@ -94,7 +99,6 @@
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.6",
     "react-hook-form": "^7.77.0",
-    "react-markdown": "^10.1.0",
     "react-resizable-panels": "^4.11.2",
     "recharts": "3.8.1",
     "rehype-highlight": "^7.0.2",
@@ -103,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/_components/Form/Fields/MdeFormField.tsx

@@ -8,6 +8,7 @@ import type { Control, FieldValues, Path } from "react-hook-form";
 import { FormControl, FormField, FormItem, FormLabel } from "~/components/ui/form";
 import { Button } from "~/components/ui/button";
 import { cn } from "~/lib/utils";
+import { ClientMdx } from "~/components/ClientMdx";
 import {
   InternalLinkTextarea,
   type AutocompleteTriggerConfig,
@@ -81,7 +82,7 @@ export default function MdeFormField<T extends FieldValues>(params: {
                   ),
                   preview: params.renderPreview
                     ? (source) => params.renderPreview?.(source) ?? <></>
-                    : undefined,
+                    : (source) => <ClientMdx source={source} fallback={source} />,
                 }}
               />
             </FormControl>

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/admin/blog/_components/BlogMdxEditorPreview.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 import type { MDXRemoteSerializeResult } from 'next-mdx-remote'
-import { mdxComponents } from '~/app/blog/_components/mdx-components'
+import { mdxComponents } from '~/components/mdx-components'
 
 export default function BlogMdxEditorPreview(params: { source: string }) {
   const [compiled, setCompiled] = useState<MDXRemoteSerializeResult | null>(null)

src/app/blog/[slug]/page.tsx

@@ -1,9 +1,10 @@
 import { notFound } from "next/navigation";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import { TRPCError } from "@trpc/server";
+import matter from "gray-matter";
 import { servTrpc } from "~/app/_trpc/ServerClient";
 import { Badge } from "~/components/ui/badge";
-import { mdxComponents } from "../_components/mdx-components";
+import { mdxComponents } from "~/components/mdx-components";
 
 type Props = {
   params: Promise<{ slug: string }>;
@@ -12,37 +13,47 @@ type Props = {
 export default async function BlogPostPage({ params }: Props) {
   const { slug } = await params;
 
-  let post: Awaited<ReturnType<typeof servTrpc.blog.bySlug>>;
+  let post: Awaited<ReturnType<typeof servTrpc.blog.metadataBySlug>>;
   try {
-    post = await servTrpc.blog.bySlug(slug);
+    post = await servTrpc.blog.metadataBySlug(slug);
   } catch (e) {
     if (e instanceof TRPCError && e.code === "NOT_FOUND") notFound();
     throw e;
   }
 
+  const response = await fetch(post.fileUrl, { next: { revalidate: 3600 } });
+  if (!response.ok) notFound();
+
+  const parsed = matter(await response.text());
+  const tags = Array.isArray(parsed.data.tags)
+    ? parsed.data.tags.map((tag) => String(tag).trim()).filter(Boolean)
+    : post.tags;
+  const title = typeof parsed.data.title === "string" ? parsed.data.title : post.title;
+  const date = typeof parsed.data.date === "string" ? parsed.data.date : post.date;
+
   return (
     <main className="mx-auto max-w-2xl px-4 py-12">
       <header className="mb-8">
-        <h1 className="text-3xl font-bold">{post.title}</h1>
-        {post.date && (
+        <h1 className="text-3xl font-bold">{title}</h1>
+        {date && (
           <time className="text-muted-foreground text-sm">
-            {new Date(post.date).toLocaleDateString("en-US", {
+            {new Date(date).toLocaleDateString("en-US", {
               year: "numeric",
               month: "long",
               day: "numeric",
             })}
           </time>
         )}
-        {post.tags.length > 0 && (
+        {tags.length > 0 && (
           <div className="mt-3 flex flex-wrap gap-1.5">
-            {post.tags.map((tag) => (
+            {tags.map((tag) => (
               <Badge key={tag} variant="outline">{tag}</Badge>
             ))}
           </div>
         )}
       </header>
       <article className="prose dark:prose-invert max-w-none">
-        <MDXRemote source={post.content} components={mdxComponents} />
+        <MDXRemote source={parsed.content} components={mdxComponents} />
       </article>
     </main>
   );

src/app/chat/_components/AssistantMessage.tsx

@@ -1,6 +1,5 @@
 import type { UIMessage } from "ai";
-import Markdown from "react-markdown";
-import { cn } from "~/lib/utils";
+import { ClientMdx } from "~/components/ClientMdx";
 
 export const AssistantMessage = (props: { message: UIMessage }) => {
   let message = props.message;
@@ -16,9 +15,7 @@ export const AssistantMessage = (props: { message: UIMessage }) => {
         {message.parts.map((part, i) => {
           if (part.type === 'text') {
             return (
-              <Markdown key={crypto.randomUUID()}>
-                {part.text}
-              </Markdown>
+              <ClientMdx key={i} source={part.text} fallback={part.text} />
             )
           }
           if (part.type === 'tool-scheduleMeeting') {

src/app/cv/_components/CvCategory.tsx

@@ -1,42 +1,43 @@
-'use client'
-import { trpc } from "~/app/_trpc/Client"
+import type { ReactNode } from "react"
 import CvEntry from "./CvEntry"
 import type { RouterOutputs } from "~/server/routers/_app"
 import { cn } from "~/lib/utils"
 import { AnimatedCard, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 import type { ArrayElement } from "type-fest"
-import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp";
+import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
+import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
 import { ScrollArea } from "~/components/ui/scroll-area";
+
+export type CvCategoryData = ArrayElement<RouterOutputs['categoryv2']['listAllWithEntries']>
+
 type CvCategoryProps = {
-  initialData: ArrayElement<RouterOutputs['categoryv2']['listByLayoutPosition']>,
-  layout: "row"|"col",
+  category: CvCategoryData,
+  layout: "row" | "col",
   position?: number,
-  children?: React.ReactElement<Parameters<typeof CvEntry>>
+  descriptions: Record<string, ReactNode>,
 }
-export default function CvCategory(props:CvCategoryProps)  {
-  const category = trpc.categoryv2.getById.useQuery(props.initialData? props.initialData.id : "");
-  const entries = trpc.entryv2.byCategoryAndToDateDescending.useQuery(category.data?.id || "")
-  const position = props.position ?? 0
-		return (
-			<AnimatedCard position={position} className={cn(props.layout == "row" ? "w-full" : "", "h-screen")}>
-				<CardHeader>
-					<CardTitle>
-						{category.data?.name}
-					</CardTitle>
-				</CardHeader>
-				{(entries.data?.length ? entries.data?.length : 0 ) > 0 ?
-					<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-4","overflow-scroll")}>
-						<ScrollArea>
-						{entries.data?.map((entry,i) => (
-							<AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}>
-							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
-							</AnimatePopUp>
-						))}
-					</ScrollArea>
-					</CardContent>
-					:
-					<></>
-				}
-			</AnimatedCard>
-		)
+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 once position={position + 0.2} animation="slide" debugId={`cv-category-title:${category.name}:${position + 0.2}`}>
+          <CardTitle>{category.name}</CardTitle>
+        </AnimateTextIn>
+      </CardHeader>
+      {entries.length > 0 ?
+        <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} 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>
+        </CardContent>
+        :
+        <></>
+      }
+    </AnimatedCard>
+  )
 }

src/app/cv/_components/CvEntry.tsx

@@ -1,68 +1,52 @@
-import { trpc } from "~/app/_trpc/Client"
+import type { ReactNode } from "react"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
-import { Skeleton } from "~/components/ui/skeleton"
-import { cn, type Defined } from "~/lib/utils"
-import Markdown from 'react-markdown'
+import { cn } from "~/lib/utils"
 import { format } from 'date-fns'
-import rehypeHighlight from 'rehype-highlight'
-import rehypeRaw from 'rehype-raw'
-import type { RouterOutputs } from "~/server/routers/_app"
 import type { ArrayElement } from "type-fest"
-export default function CvEntry(params: {
-	initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>,
-	className?: string
+import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
+import AnimatedDiv from "~/app/_components/Animated/AnimatedDiv"
+import type { CvCategoryData } from "./CvCategory"
+
+export type CvEntryData = ArrayElement<CvCategoryData['cvEntry']>
+
+export default function CvEntry({ entry, description, className, position = 0 }: {
+	entry: CvEntryData,
+	description?: ReactNode,
+	className?: string,
+	position?: number
 }) {
-	const query = trpc.entryv2.getById.useQuery(params.initialData.id);
-	const { data, isError, error } = query
 	return (
-		<>
-			{
-				data ?
-					<>
-						<Card className={params.className ? cn("w-fit", params.className) : "w-fit"}>
-							{
-								data.title ?
-									<CardHeader>
-										<CardTitle> {data.title} </CardTitle>
-									</CardHeader> :
-									<></>
-							}
-							{
-								data.description ?
-									<CardContent className="text-sm lg:text-base">
-										<article className="prose prose-zinc dark:prose-invert max-w-none">
-											<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
-										</article>
-									</CardContent> :
-									<></>
-							}
-							{
-								!data.hideDates ?
-									<CardFooter className="text-sm">
-										{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
-									</CardFooter> :
-									<></>
-							}
-						</Card>
-					</> :
-					<>
-						<Card>
-							<CardHeader>
-								<div className="flex flex-row">
-									<CardTitle> <Skeleton className="h-2rem w-5rem" /> </CardTitle>
-									<span className="ml-auto text-sm"> <Skeleton className="h-1rem w-3rem" /> - <Skeleton className="h-1rem w-3rem" /> </span>
-								</div>
-							</CardHeader>
-							<CardContent>
-								<div>
-									<Skeleton className="h-4 w-60" />
-									<Skeleton className="h-4 w-50" />
-									<Skeleton className="h-4 w-50" />
-								</div>
-							</CardContent>
-						</Card>
-					</>
+		<Card className={className ? cn("w-fit", className) : "w-fit"}>
+			{entry.title ?
+				<CardHeader>
+					<AnimateTextIn position={position} animation="slide" debugId={`cv-entry-title:${entry.title}:${position}`}>
+						<CardTitle> {entry.title} </CardTitle>
+					</AnimateTextIn>
+				</CardHeader> :
+				<></>
 			}
-		</>
+			{entry.description ?
+				<CardContent className="text-sm lg:text-base">
+					{/* 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">
+							{description ?? entry.description}
+						</article>
+					</AnimatedDiv>
+				</CardContent> :
+				<></>
+			}
+			{!entry.hideDates ?
+				<CardFooter className="text-sm">
+					<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> :
+				<></>
+			}
+		</Card>
 	)
 }

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,56 +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 sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
-  const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
-  const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
-  const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
-  useTimeLine(col2Categories.data)
+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.data &&
-          <>
-            <SidebarTriggerDisappearsOnMobile />
-            <Sidebar>
-              <SidebarContent className="p-2 lg:pt-[3.2rem]">
-                {sidebarCategories.data?.map((cat, i) => {
-                  if (cat !== undefined) {
-                    return (
-                      <CvCategory layout="col" position={i} initialData={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.data?.map((cat, i) => (
-                <CvCategory layout="row" position={i} initialData={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.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col1Categories.data?.map((cat, i) => (
-                  <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
-                ))}
-              </div>
-              <div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col2Categories.data?.map((cat, i) => (
-                  <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </SidebarProvider>
-    </>
+    <Suspense>
+      <Page cv={cv} descriptions={descriptions} />
+    </Suspense>
   )
 }

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>
                 )}
@@ -111,11 +110,6 @@ export default function ProjectsPage() {
           <div className="pt-5" />
         </div>
       ))}
-      {/* Scroll runway: lets the last cards' ScrollTrigger exit points be
-          reached past the visible area, so on short viewports the second-to-last
-          card animates out off-screen instead of being frozen mid-exit at the
-          bottom of the scroll. Tune the height if a card is still caught. */}
-      <div aria-hidden className="h-[70dvh] shrink-0" />
     </ScrollArea>
   );
 }

src/components/ClientMdx.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { evaluate } from "@mdx-js/mdx";
+import { MDXProvider, useMDXComponents } from "@mdx-js/react";
+import type { MDXComponents } from "mdx/types";
+import { useEffect, useState, type ComponentType, type ReactNode } from "react";
+import * as runtime from "react/jsx-runtime";
+import rehypeHighlight from "rehype-highlight";
+import remarkGfm from "remark-gfm";
+import { mdxComponents } from "~/components/mdx-components";
+
+type MdxModule = {
+  default: ComponentType<{ components?: MDXComponents }>;
+};
+
+type ClientMdxProps = {
+  source: string;
+  components?: MDXComponents;
+  format?: "md" | "mdx";
+  fallback?: ReactNode;
+  errorFallback?: (error: Error) => ReactNode;
+};
+
+export function ClientMdx({
+  source,
+  components = mdxComponents,
+  format = "md",
+  fallback = null,
+  errorFallback,
+}: ClientMdxProps) {
+  const [Content, setContent] = useState<MdxModule["default"] | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const trimmed = source.trim();
+
+    if (!trimmed) {
+      setContent(null);
+      setError(null);
+      return;
+    }
+
+    void evaluate(trimmed, {
+      ...runtime,
+      baseUrl: import.meta.url,
+      format,
+      useMDXComponents,
+      rehypePlugins: [rehypeHighlight],
+      remarkPlugins: [remarkGfm],
+    })
+      .then((mod) => {
+        if (cancelled) return;
+        setContent(() => (mod as MdxModule).default);
+        setError(null);
+      })
+      .catch((nextError: unknown) => {
+        if (cancelled) return;
+        setContent(null);
+        setError(nextError instanceof Error ? nextError : new Error("Failed to render MDX"));
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [format, source]);
+
+  if (error) {
+    return errorFallback ? errorFallback(error) : <p>{source}</p>;
+  }
+
+  if (!Content) return <>{fallback}</>;
+
+  return (
+    <MDXProvider components={components}>
+      <Content components={components} />
+    </MDXProvider>
+  );
+}

src/components/mdx-components.tsx

@@ -1,5 +1,10 @@
 import Link from "next/link";
-import { Children, isValidElement, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import {
+  Children,
+  isValidElement,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import { cn } from "~/lib/utils";

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/routers/blog.ts

@@ -305,6 +305,25 @@ export const blogRouter = router({
     };
   }),
 
+  metadataBySlug: publicProcedure.input(z.string()).query(async ({ input: slug }) => {
+    const post = await db.query.blogPost.findFirst({
+      where(fields, operators) {
+        return operators.eq(fields.slug, slug);
+      },
+    });
+
+    if (!post) throw new TRPCError({ code: "NOT_FOUND", message: `Post "${slug}" not found` });
+
+    return {
+      slug: post.slug,
+      title: post.title,
+      date: post.date,
+      description: post.description,
+      tags: post.tags ?? [],
+      fileUrl: post.fileUrl,
+    };
+  }),
+
   syncFromUploadThing: publicProcedure.mutation(async () => {
     await assertAdmin();
 

src/server/routers/cvCategory.ts

@@ -13,6 +13,20 @@ export const cvCategoryRouter = router({
     console.log(res);
     return res;
   }),
+  // Single round-trip for the whole CV page: every category (across all layout
+  // positions) with its entries already populated. Lets the page fetch-then-render
+  // instead of waterfalling per-category/per-entry queries, so all content is
+  // present before the entrance animation runs.
+  listAllWithEntries: publicProcedure.query(async () => {
+    const res = await db.query.cvCategory.findMany({
+      with: {
+        cvEntry: {
+          orderBy: (t, { desc }) => desc(t.toTime),
+        },
+      },
+    })
+    return res;
+  }),
   getById: publicProcedure.input(z.string()).query(async ({input}) => {
     const res = await db.query.cvCategory.findFirst({
       where(fields, operators) {

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;