make meeting creation user level

Add AI assistant tools for site search, project details, experience matching, and calendar availability
Merge branch 'chat-scroll-behaiviour'
2026-06-18 04:55:25 +02:00 · 2026-06-18 03:37:22 +02:00 · 2026-06-18 02:53:20 +02:00 · 2026-06-18 02:53:06 +02:00 · 2026-06-18 02:49:05 +02:00 · 2026-06-18 02:47:15 +02:00
108 changed files with 7044 additions and 1265 deletions
--- a/.codex
+++ b/.codex
--- a/.gitignore
+++ b/.gitignore
@@ -46,4 +46,5 @@ yarn-error.log*
 .idea
 # clerk configuration (can include secrets)
 /.clerk/
+.worktrees
 .claudesession
--- a/.ignore
+++ b/.ignore
@@ -1,2 +1,4 @@
 node_modules/**
 .next/**
+.worktrees
+.clerk
--- a/README.md
+++ b/README.md
@@ -1,29 +1,13 @@
-# Create T3 App
+# My Personal Website

-This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
+## Using:

-## What's next? How do I make an app with this?
+- nextjs
+- trpc
+- neon
+- uploadthing
+- drizzle
+- gsap
+- openai

-We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.

-If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
-
- [Next.js](https://nextjs.org)
- [NextAuth.js](https://next-auth.js.org)
- [Prisma](https://prisma.io)
- [Drizzle](https://orm.drizzle.team)
- [Tailwind CSS](https://tailwindcss.com)
- [tRPC](https://trpc.io)
-
-## Learn More
-
-To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
-
- [Documentation](https://create.t3.gg/)
- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
-
-You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
-
-## How do I deploy this?
-
-Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.
--- a/bun.lock
+++ b/bun.lock
--- a/next.config.js
+++ b/next.config.js
@@ -6,9 +6,10 @@ import "./src/env.js";

 /** @type {import("next").NextConfig} */
 const config = {
- typescript: {
-  ignoreBuildErrors: true
- }
+  transpilePackages: ["next-mdx-remote"],
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 };

 export default config;
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
  "type": "module",
  "scripts": {
    "build": "next build",
+    "build:ffmpeg-worker": "bun build node_modules/@ffmpeg/ffmpeg/dist/esm/worker.js --target browser --format esm --minify --outfile public/ffmpeg/worker.js",
    "check": "biome check .",
    "check:unsafe": "biome check --write --unsafe .",
    "check:write": "biome check --write .",
@@ -19,14 +20,22 @@
    "test": "vitest --typecheck"
  },
  "dependencies": {
-    "@clerk/nextjs": "^7.0.2",
-    "@electric-sql/pglite": "^0.3.16",
+    "@ai-sdk/openai": "^3.0.67",
+    "@ai-sdk/react": "^3.0.195",
+    "@clerk/nextjs": "^7.4.2",
+    "@electric-sql/pglite": "^0.4.6",
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/util": "^0.12.2",
    "@fortawesome/fontawesome-svg-core": "^7.2.0",
    "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@fortawesome/react-fontawesome": "^3.2.0",
+    "@fortawesome/react-fontawesome": "^3.3.1",
    "@gsap/react": "^2.1.2",
-    "@hookform/resolvers": "^5.2.2",
-    "@neondatabase/serverless": "^1.0.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",
@@ -53,77 +62,87 @@
    "@radix-ui/react-toggle": "^1.1.10",
    "@radix-ui/react-toggle-group": "^1.1.11",
    "@radix-ui/react-tooltip": "^1.2.8",
-    "@t3-oss/env-nextjs": "^0.13.10",
+    "@t3-oss/env-nextjs": "^0.13.11",
    "@tailwindcss/typography": "^0.5.19",
-    "@tanstack/react-query": "^5.90.21",
-    "@tanstack/react-query-next-experimental": "^5.91.0",
+    "@tanstack/react-query": "^5.100.14",
+    "@tanstack/react-query-next-experimental": "^5.100.14",
    "@testing-library/user-event": "^14.6.1",
-    "@trpc/client": "^11.12.0",
-    "@trpc/next": "^11.12.0",
-    "@trpc/react-query": "^11.12.0",
-    "@trpc/server": "^11.12.0",
-    "@uiw/react-md-editor": "^4.0.11",
+    "@trpc/client": "^11.17.0",
+    "@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",
+    "ai": "^6.0.193",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^4.4.0",
    "date-format": "^4.0.14",
-    "drizzle-orm": "^0.45.1",
+    "drizzle-orm": "^0.45.2",
    "drizzle-zod": "^0.8.3",
    "embla-carousel-react": "^8.6.0",
    "glazejs": "^2.0.1",
-    "gsap": "^3.14.2",
+    "googleapis": "^173.0.0",
+    "gray-matter": "^4.0.3",
+    "gsap": "^3.15.0",
    "input-otp": "^1.4.2",
-    "lucide-react": "^0.577.0",
-    "next": "16.1.6",
+    "lucide-react": "^1.17.0",
+    "next": "16.2.6",
+    "next-mdx-remote": "^6.0.0",
    "next-themes": "^0.4.6",
-    "postgres": "^3.4.8",
+    "postgres": "^3.4.9",
    "radix-ui": "^1.4.3",
-    "react": "^19.2.4",
-    "react-day-picker": "^9.14.0",
-    "react-dom": "^19.2.4",
-    "react-hook-form": "^7.71.2",
-    "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^4.7.2",
-    "recharts": "2.15.4",
+    "react": "^19.2.6",
+    "react-day-picker": "^10.0.1",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.77.0",
+    "react-resizable-panels": "^4.11.2",
+    "recharts": "3.8.1",
    "rehype-highlight": "^7.0.2",
    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
    "server-only": "^0.0.1",
-    "shadcn": "^4.0.2",
+    "shadcn": "^4.10.0",
    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0",
+    "superjson": "^2.2.6",
+    "tailwind-merge": "^3.6.0",
    "tailwindcss-motion": "^1.1.1",
-    "type-fest": "^5.4.4",
+    "type-fest": "^5.7.0",
+    "uploadthing": "^7.7.4",
    "vaul": "^1.1.2",
-    "zod": "^4.3.6"
+    "wavesurfer.js": "^7.12.8",
+    "zod": "^4.4.3"
  },
  "devDependencies": {
-    "@biomejs/biome": "2.4.6",
+    "@biomejs/biome": "2.4.16",
    "@swc/jest": "^0.2.39",
-    "@tailwindcss/postcss": "^4.2.1",
+    "@tailwindcss/postcss": "^4.3.0",
    "@testing-library/dom": "^10.4.1",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.2",
    "@types/jest": "^30.0.0",
-    "@types/node": "^25.4.0",
-    "@types/react": "^19.2.14",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
-    "@vitest/coverage-v8": "^4.0.18",
-    "dotenv": "^17.3.1",
-    "drizzle-kit": "^0.31.9",
-    "jest": "^30.3.0",
-    "jest-environment-jsdom": "^30.3.0",
-    "jsdom": "^28.1.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/coverage-v8": "^4.1.8",
+    "dotenv": "^17.4.2",
+    "drizzle-kit": "^0.31.10",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
+    "jsdom": "^29.1.1",
    "next-router-mock": "^1.0.5",
    "pg-mem": "^3.0.14",
-    "postcss": "^8.5.8",
-    "tailwindcss": "^4.2.1",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.0",
    "ts-node": "^10.9.2",
    "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
    "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
  },
  "ct3aMetadata": {
    "initVersion": "7.39.3"
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/ffmpeg/worker.js
+++ b/public/ffmpeg/worker.js
@@ -0,0 +1 @@
+var C="https://unpkg.com/@ffmpeg/core@0.12.9/dist/umd/ffmpeg-core.js",N;(function(E){E.LOAD="LOAD",E.EXEC="EXEC",E.FFPROBE="FFPROBE",E.WRITE_FILE="WRITE_FILE",E.READ_FILE="READ_FILE",E.DELETE_FILE="DELETE_FILE",E.RENAME="RENAME",E.CREATE_DIR="CREATE_DIR",E.LIST_DIR="LIST_DIR",E.DELETE_DIR="DELETE_DIR",E.ERROR="ERROR",E.DOWNLOAD="DOWNLOAD",E.PROGRESS="PROGRESS",E.LOG="LOG",E.MOUNT="MOUNT",E.UNMOUNT="UNMOUNT"})(N||(N={}));var G=Error("unknown message type"),V=Error("ffmpeg is not loaded, call `await ffmpeg.load()` first"),b=Error("called FFmpeg.terminate()"),v=Error("failed to import ffmpeg-core.js");var I,X=async({coreURL:E,wasmURL:D,workerURL:O})=>{let S=!I;try{if(!E)E=C;importScripts(E)}catch{if(!E||E===C)E=C.replace("/umd/","/esm/");if(self.createFFmpegCore=(await import(E)).default,!self.createFFmpegCore)throw v}let A=E,x=D?D:E.replace(/.js$/g,".wasm"),B=O?O:E.replace(/.js$/g,".worker.js");return I=await self.createFFmpegCore({mainScriptUrlOrBlob:`${A}#${btoa(JSON.stringify({wasmURL:x,workerURL:B}))}`}),I.setLogger((W)=>self.postMessage({type:N.LOG,data:W})),I.setProgress((W)=>self.postMessage({type:N.PROGRESS,data:W})),S},Y=({args:E,timeout:D=-1})=>{I.setTimeout(D),I.exec(...E);let O=I.ret;return I.reset(),O},j=({args:E,timeout:D=-1})=>{I.setTimeout(D),I.ffprobe(...E);let O=I.ret;return I.reset(),O},J=({path:E,data:D})=>{return I.FS.writeFile(E,D),!0},$=({path:E,encoding:D})=>I.FS.readFile(E,{encoding:D}),q=({path:E})=>{return I.FS.unlink(E),!0},z=({oldPath:E,newPath:D})=>{return I.FS.rename(E,D),!0},H=({path:E})=>{return I.FS.mkdir(E),!0},K=({path:E})=>{let D=I.FS.readdir(E),O=[];for(let S of D){let A=I.FS.stat(`${E}/${S}`),x=I.FS.isDir(A.mode);O.push({name:S,isDir:x})}return O},Q=({path:E})=>{return I.FS.rmdir(E),!0},R=({fsType:E,options:D,mountPoint:O})=>{let S=E,A=I.FS.filesystems[S];if(!A)return!1;return I.FS.mount(A,D,O),!0},Z=({mountPoint:E})=>{return I.FS.unmount(E),!0};self.onmessage=async({data:{id:E,type:D,data:O}})=>{let S=[],A;try{if(D!==N.LOAD&&!I)throw V;switch(D){case N.LOAD:A=await X(O);break;case N.EXEC:A=Y(O);break;case N.FFPROBE:A=j(O);break;case N.WRITE_FILE:A=J(O);break;case N.READ_FILE:A=$(O);break;case N.DELETE_FILE:A=q(O);break;case N.RENAME:A=z(O);break;case N.CREATE_DIR:A=H(O);break;case N.LIST_DIR:A=K(O);break;case N.DELETE_DIR:A=Q(O);break;case N.MOUNT:A=R(O);break;case N.UNMOUNT:A=Z(O);break;default:throw G}}catch(x){self.postMessage({id:E,type:N.ERROR,data:x.toString()});return}if(A instanceof Uint8Array)S.push(A.buffer);self.postMessage({id:E,type:D,data:A},S)};
--- a/src/app/@modal/(.)assistant/_components/ChatModal.tsx
+++ b/src/app/@modal/(.)assistant/_components/ChatModal.tsx
@@ -0,0 +1,31 @@
+'use client'
+import { useRouter } from 'next/navigation'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui/dialog'
+import ChatInterface from '~/app/chat/_components/ChatInterface'
+import { useMessages } from '~/app/_providers/MessagesProvider';
+import { Spinner } from '~/components/ui/spinner';
+
+export default function ChatModal() {
+	const router = useRouter()
+	const {messages,session,isLoading,error} = useMessages()
+	return (
+		<Dialog modal={true} open onOpenChange={() => router.back()}>
+			<DialogContent className="w-full max-w-full rounded-none sm:max-w-full h-[100svh] lg:max-w-3xl lg:rounded-xl lg:h-[80vh] flex flex-col p-0 gap-0">
+				<DialogHeader className="p-4 border-b shrink-0">
+					<DialogTitle>Talk To My AI-Assistant</DialogTitle>
+				</DialogHeader>
+				<div className="flex-1 overflow-hidden min-h-0">
+					{!isLoading &&
+					<ChatInterface sessionId={session?.id} dbMessages={messages ?? []}/>
+					}
+					{isLoading &&
+						<><Spinner/> Loading Messages...</>
+					}
+					{error &&
+						<div> {error} </div>
+					}
+				</div>
+			</DialogContent>
+		</Dialog>
+	)
+}
--- a/src/app/@modal/(.)assistant/page.tsx
+++ b/src/app/@modal/(.)assistant/page.tsx
@@ -0,0 +1,8 @@
+'use client'
+import ChatModal from './_components/ChatModal'
+
+export default function AssistantModalPage() {
+	return (
+		<ChatModal/>
+	)
+}
--- a/src/app/_components/Animated/AnimateIn.tsx
+++ b/src/app/_components/Animated/AnimateIn.tsx
@@ -0,0 +1,51 @@
+"use client"
+import { useRef, type HTMLAttributes, type ReactNode } from "react";
+import { SplitText } from "gsap/SplitText";
+import gsap from 'gsap'
+import { cn } from "~/lib/utils";
+import { useReveal } from "./useReveal";
+
+const AnimateTextIn = ({
+  children,
+  animation = "type",
+  position = 0,
+  speed = 1,
+  scrollOnly = false,
+  once = false,
+  debugId,
+  className
+}: {
+  children: ReactNode,
+  animation?: "type" | "slide",
+  position?: gsap.Position,
+  scrollOnly?: boolean,
+  once?: boolean,
+  debugId?: string,
+  speed?: number,
+  className?: HTMLAttributes<HTMLDivElement>['className']
+}) => {
+  const el = useRef<HTMLDivElement>(null)
+  useReveal(el, {
+    position,
+    scrollOnly,
+    once,
+    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.
+      gsap.set(node, { opacity: 1 })
+      const split = new SplitText(node, { type: 'chars' })
+      const fromVars = animation === "slide"
+        ? { opacity: 0, x: -10, duration: 0.2 * speed, stagger: { each: 0.08 * speed }, ease: 'bounce.inOut' }
+        : { opacity: 0, duration: 0.01 * speed, stagger: { each: 0.04 * speed }, ease: 'bounce.inOut' }
+      return gsap.from(split.chars, { ...fromVars, paused: true })
+    },
+  })
+  return (
+    <div ref={el} className={cn(className, "opacity-0")}>
+      {children}
+    </div>
+  )
+}
+
+export default AnimateTextIn;
--- a/src/app/_components/Animated/AnimatePopUp.tsx
+++ b/src/app/_components/Animated/AnimatePopUp.tsx
@@ -0,0 +1,28 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import AnimatedDiv from "./AnimatedDiv";
+import { cn } from "~/lib/utils";
+const AnimatePopUp = ({
+  children,
+  position,
+  className,
+  duration=1,
+  ease='elastic',
+  scrollOnly=false,
+  once=false,
+  debugId,
+}:{
+    children:ReactNode
+    position:gsap.Position,
+    className?:HTMLAttributes<HTMLDivElement>['className']
+    duration?:number,
+    ease?:gsap.EaseString|gsap.EaseFunction,
+    scrollOnly?:boolean,
+    once?:boolean,
+    debugId?:string,
+  }) => {
+  return (
+    <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} />
+  )
+}
+
+export default AnimatePopUp;
--- a/src/app/_components/Animated/AnimatedBackGroundContainer.tsx
+++ b/src/app/_components/Animated/AnimatedBackGroundContainer.tsx
@@ -0,0 +1,435 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import type React from "react";
+import { useCallback, useEffect, useRef } from "react";
+
+const PALETTES = {
+  dark: {
+    particles: [
+      "rgba(255,255,255,0.70)",
+      "rgba(255,255,255,0.45)",
+      "rgba(180,180,180,0.50)",
+      "rgba(200,200,200,0.35)",
+      "rgba(255,255,255,0.22)",
+    ],
+    grainOpacity: 0.05,
+  },
+  light: {
+    particles: [
+      "rgba(0,0,0,0.55)",
+      "rgba(0,0,0,0.35)",
+      "rgba(60,60,60,0.40)",
+      "rgba(80,80,80,0.25)",
+      "rgba(0,0,0,0.18)",
+    ],
+    grainOpacity: 0.03,
+  },
+} as const;
+
+interface Particle {
+  angle: number;
+  radius: number;
+  speed: number;
+  size: number;
+  colorIndex: number;
+  wobbleAmp: number;
+  wobbleSpeed: number;
+  wobblePhase: number;
+}
+
+interface CanvasSize {
+  dpr: number;
+  height: number;
+  width: number;
+}
+
+interface AnimatedBackgroundContainerProps {
+  children: React.ReactNode;
+  className?: string;
+  particleCount?: number;
+  orbitRadius?: number;
+  followSpeed?: number;
+  mobileSpeed?: number;
+}
+
+const DEFAULT_PARTICLE_COLORS: readonly string[] = PALETTES.dark.particles;
+const PARTICLE_COLOR_COUNT = DEFAULT_PARTICLE_COLORS.length;
+const EDGE_FADE_DISTANCE = 80;
+const MAX_DEVICE_PIXEL_RATIO = 2;
+const MOBILE_TARGET_DISTANCE = 30;
+
+const rand = (min: number, max: number) => Math.random() * (max - min) + min;
+
+const isMobileDevice = () => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  return window.matchMedia("(pointer: coarse)").matches || window.innerWidth < 768;
+};
+
+const createParticle = (orbitRadius: number): Particle => {
+  const minRadius = Math.max(10, orbitRadius * 0.12);
+
+  return {
+    angle: rand(0, Math.PI * 2),
+    radius: rand(minRadius, orbitRadius),
+    speed: rand(0.002, 0.003) * (Math.random() > 0.5 ? 1 : -1),
+    size: rand(1.2, 4),
+    colorIndex: Math.floor(rand(0, PARTICLE_COLOR_COUNT)),
+    wobbleAmp: rand(orbitRadius * 0.025, orbitRadius * 0.12),
+    wobbleSpeed: rand(0.008, 0.035),
+    wobblePhase: rand(0, Math.PI * 2),
+  };
+};
+
+export default function AnimatedBackgroundContainer({
+  children,
+  className = "",
+  particleCount = 60,
+  orbitRadius = 240,
+  followSpeed = 0.06,
+  mobileSpeed = 1,
+}: AnimatedBackgroundContainerProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const frameRef = useRef(0);
+  const animationFrameRef = useRef<number | null>(null);
+  const isMobileRef = useRef(false);
+  const isVisibleRef = useRef(true);
+  const prefersReducedMotionRef = useRef(false);
+  const particlesRef = useRef<Particle[]>([]);
+  const mousePosRef = useRef({ x: 0, y: 0 });
+  const smoothMouseRef = useRef({ x: 0, y: 0 });
+  const mobileAnchorRef = useRef({ x: 0, y: 0 });
+  const mobileTargetRef = useRef({ x: 0, y: 0 });
+  const canvasSizeRef = useRef<CanvasSize>({ dpr: 1, height: 0, width: 0 });
+  const containerRectRef = useRef<DOMRect | null>(null);
+  const followSpeedRef = useRef(followSpeed);
+  const mobileSpeedRef = useRef(mobileSpeed);
+  const particleColorsRef = useRef<readonly string[]>(DEFAULT_PARTICLE_COLORS);
+
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === undefined || resolvedTheme === "dark";
+  const palette = isDark ? PALETTES.dark : PALETTES.light;
+
+  useEffect(() => {
+    particleColorsRef.current = palette.particles;
+  }, [palette]);
+
+  useEffect(() => {
+    followSpeedRef.current = followSpeed;
+  }, [followSpeed]);
+
+  useEffect(() => {
+    mobileSpeedRef.current = mobileSpeed;
+  }, [mobileSpeed]);
+
+  useEffect(() => {
+    particlesRef.current = Array.from({ length: particleCount }, () =>
+      createParticle(orbitRadius),
+    );
+  }, [particleCount, orbitRadius]);
+
+  const seedPositions = useCallback(() => {
+    const { height, width } = canvasSizeRef.current;
+    if (width === 0 || height === 0) {
+      return;
+    }
+
+    const centerX = width / 2;
+    const centerY = height / 2;
+
+    mousePosRef.current = { x: centerX, y: centerY };
+    smoothMouseRef.current = { x: centerX, y: centerY };
+    mobileAnchorRef.current = { x: centerX, y: centerY };
+    mobileTargetRef.current = {
+      x: rand(centerX * 0.4, centerX * 1.6),
+      y: rand(centerY * 0.4, centerY * 1.6),
+    };
+  }, []);
+
+  const updateContainerRect = useCallback(() => {
+    const container = containerRef.current;
+    if (container) {
+      containerRectRef.current = container.getBoundingClientRect();
+    }
+  }, []);
+
+  const resizeCanvas = useCallback(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) {
+      return;
+    }
+
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+    const dpr = Math.min(window.devicePixelRatio || 1, MAX_DEVICE_PIXEL_RATIO);
+    const nextWidth = Math.round(width * dpr);
+    const nextHeight = Math.round(height * dpr);
+
+    canvasSizeRef.current = { dpr, height, width };
+    updateContainerRect();
+
+    if (canvas.width !== nextWidth) {
+      canvas.width = nextWidth;
+    }
+    if (canvas.height !== nextHeight) {
+      canvas.height = nextHeight;
+    }
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.scale(dpr, dpr);
+    seedPositions();
+  }, [seedPositions, updateContainerRect]);
+
+  useEffect(() => {
+    isMobileRef.current = isMobileDevice();
+    resizeCanvas();
+
+    const handleResize = () => {
+      isMobileRef.current = isMobileDevice();
+      resizeCanvas();
+    };
+
+    const resizeObserver =
+      "ResizeObserver" in window
+        ? new ResizeObserver(() => {
+            handleResize();
+          })
+        : null;
+
+    if (containerRef.current && resizeObserver) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", updateContainerRect, {
+      capture: true,
+      passive: true,
+    });
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", updateContainerRect, { capture: true });
+    };
+  }, [resizeCanvas, updateContainerRect]);
+
+  const handleMouseMove = useCallback((event: MouseEvent) => {
+    const rect = containerRectRef.current;
+    if (!rect || isMobileRef.current) {
+      return;
+    }
+
+    mousePosRef.current = {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top,
+    };
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    container.addEventListener("mousemove", handleMouseMove, { passive: true });
+    return () => container.removeEventListener("mousemove", handleMouseMove);
+  }, [handleMouseMove]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+
+    const stopAnimation = () => {
+      if (animationFrameRef.current !== null) {
+        window.cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    };
+
+    const draw = () => {
+      if (!isVisibleRef.current || prefersReducedMotionRef.current) {
+        animationFrameRef.current = null;
+        return;
+      }
+
+      const { height, width } = canvasSizeRef.current;
+      if (width === 0 || height === 0) {
+        animationFrameRef.current = window.requestAnimationFrame(draw);
+        return;
+      }
+
+      frameRef.current += 1;
+
+      if (isMobileRef.current) {
+        const mobileLerp = 0.008 * mobileSpeedRef.current;
+        mobileAnchorRef.current.x +=
+          (mobileTargetRef.current.x - mobileAnchorRef.current.x) * mobileLerp;
+        mobileAnchorRef.current.y +=
+          (mobileTargetRef.current.y - mobileAnchorRef.current.y) * mobileLerp;
+
+        const dx = mobileTargetRef.current.x - mobileAnchorRef.current.x;
+        const dy = mobileTargetRef.current.y - mobileAnchorRef.current.y;
+        if (Math.hypot(dx, dy) < MOBILE_TARGET_DISTANCE) {
+          mobileTargetRef.current = {
+            x: rand(width * 0.15, width * 0.85),
+            y: rand(height * 0.15, height * 0.85),
+          };
+        }
+
+        smoothMouseRef.current.x = mobileAnchorRef.current.x;
+        smoothMouseRef.current.y = mobileAnchorRef.current.y;
+      } else {
+        const desktopLerp = followSpeedRef.current;
+        smoothMouseRef.current.x +=
+          (mousePosRef.current.x - smoothMouseRef.current.x) * desktopLerp;
+        smoothMouseRef.current.y +=
+          (mousePosRef.current.y - smoothMouseRef.current.y) * desktopLerp;
+      }
+
+      const centerX = smoothMouseRef.current.x;
+      const centerY = smoothMouseRef.current.y;
+      const colors = particleColorsRef.current;
+
+      ctx.clearRect(0, 0, width, height);
+
+      for (const particle of particlesRef.current) {
+        particle.angle += particle.speed;
+
+        const wobble =
+          Math.sin(frameRef.current * particle.wobbleSpeed + particle.wobblePhase) *
+          particle.wobbleAmp;
+        const radius = particle.radius + wobble;
+        const x = centerX + Math.cos(particle.angle) * radius;
+        const y = centerY + Math.sin(particle.angle) * radius;
+
+        const edgeFade = Math.max(
+          0,
+          Math.min(
+            x / EDGE_FADE_DISTANCE,
+            (width - x) / EDGE_FADE_DISTANCE,
+            y / EDGE_FADE_DISTANCE,
+            (height - y) / EDGE_FADE_DISTANCE,
+            1,
+          ),
+        );
+
+        if (edgeFade <= 0) {
+          continue;
+        }
+
+        ctx.globalAlpha = edgeFade;
+        ctx.fillStyle = colors[particle.colorIndex] ?? colors[0] ?? "#ffffff";
+        ctx.beginPath();
+        ctx.arc(x, y, particle.size, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      ctx.globalAlpha = 1;
+      animationFrameRef.current = window.requestAnimationFrame(draw);
+    };
+
+    const startAnimation = () => {
+      if (
+        animationFrameRef.current === null &&
+        isVisibleRef.current &&
+        !prefersReducedMotionRef.current
+      ) {
+        animationFrameRef.current = window.requestAnimationFrame(draw);
+      }
+    };
+
+    const handleVisibilityChange = () => {
+      isVisibleRef.current = document.visibilityState === "visible";
+
+      if (isVisibleRef.current) {
+        startAnimation();
+      } else {
+        stopAnimation();
+      }
+    };
+
+    const motionMedia = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleMotionChange = () => {
+      prefersReducedMotionRef.current = motionMedia.matches;
+
+      if (prefersReducedMotionRef.current) {
+        stopAnimation();
+        ctx.clearRect(0, 0, canvasSizeRef.current.width, canvasSizeRef.current.height);
+      } else {
+        startAnimation();
+      }
+    };
+
+    isVisibleRef.current = document.visibilityState === "visible";
+    prefersReducedMotionRef.current = motionMedia.matches;
+    startAnimation();
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    motionMedia.addEventListener("change", handleMotionChange);
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      motionMedia.removeEventListener("change", handleMotionChange);
+      stopAnimation();
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{
+        position: "relative",
+        minHeight: "100vh",
+        width: "100%",
+        overflow: "hidden",
+        transition: "background-color 0.6s ease",
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        aria-hidden
+        style={{
+          position: "absolute",
+          inset: 0,
+          zIndex: 0,
+          pointerEvents: "none",
+        }}
+      />
+
+      <div
+        aria-hidden
+        style={{
+          position: "absolute",
+          inset: 0,
+          zIndex: 1,
+          opacity: palette.grainOpacity,
+          pointerEvents: "none",
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
+          backgroundRepeat: "repeat",
+          backgroundSize: "180px 180px",
+        }}
+      />
+
+      <div style={{ position: "relative", zIndex: 2 }}>{children}</div>
+    </div>
+  );
+}
--- a/src/app/_components/Animated/AnimatedDiv.tsx
+++ b/src/app/_components/Animated/AnimatedDiv.tsx
@@ -0,0 +1,45 @@
+"use client"
+import gsap from "gsap";
+import { type HTMLAttributes, type ReactNode, useRef } from "react";
+import { useReveal } from "./useReveal";
+
+const AnimatedDiv = (
+  {
+    children,
+    position,
+    className,
+    animationMode = 'to',
+    scrollOnly = false,
+    once = false,
+    debugId,
+    ...tweenVars
+  }:
+  gsap.TweenVars & {
+    children: ReactNode,
+    position: gsap.Position,
+    animationMode?: 'from' | 'to',
+    scrollOnly?: boolean,
+    once?: boolean,
+    debugId?: string,
+    className?: HTMLAttributes<HTMLDivElement>['className']
+  }
+) => {
+  const div = useRef<HTMLDivElement>(null)
+  useReveal(div, {
+    position,
+    scrollOnly,
+    once,
+    debugId,
+    makeReveal: (el) =>
+      animationMode === 'from'
+        ? gsap.from(el, { ...tweenVars, paused: true })
+        : gsap.to(el, { ...tweenVars, paused: true }),
+  })
+  return (
+    <div ref={div} className={className}>
+      {children}
+    </div>
+  )
+}
+
+export default AnimatedDiv;
--- a/src/app/_components/Animated/AnimatedPageTitle.tsx
+++ b/src/app/_components/Animated/AnimatedPageTitle.tsx
@@ -0,0 +1,22 @@
+import { useGSAP } from "@gsap/react"; import { useEffect, useLayoutEffect, useRef,type ReactNode } from "react";
+import { useGsapContext } from "~/app/_providers/GsapProvicer";
+import { SplitText } from "gsap/SplitText";
+import gsap from 'gsap'
+const AnimatedPageTitle = (
+  { children, position }: { children: ReactNode, position:gsap.Position }
+) => {
+  const el = useRef<HTMLHeadingElement>(null)
+  const gsapContext = useGsapContext();
+  useLayoutEffect(() => {
+    const split = new SplitText(el.current, { type: "lines,chars", autoSplit:true })
+    gsapContext?.addAnimation(gsap.to(el.current, { opacity: 100 }),position)
+    gsapContext?.addAnimation(gsap.from(split.chars, { id: 'titlesplit',
+      stagger: 0.05, rotate: -90, opacity: 0, x: -10, onComplete: () => {split.revert()}
+    }),'>')
+  },[])
+  return (
+    <h1 className="text-4xl break-keep opacity-0 font-bold text-balance w-full" ref={el}> {children} </h1>
+  )
+}
+
+export default AnimatedPageTitle;
--- a/src/app/_components/Animated/useReveal.ts
+++ b/src/app/_components/Animated/useReveal.ts
@@ -0,0 +1,134 @@
+'use client'
+
+import { useGSAP } from "@gsap/react"
+import { ScrollTrigger } from "gsap/all"
+import type { RefObject } from "react"
+import { GSAP_DEBUG, nearestScroller, useGsapContext } from "~/app/_providers/GsapProvicer"
+
+export type UseRevealOptions = {
+  position: gsap.Position
+  /** Skip the orchestrated entrance and let ScrollTrigger drive from the start. */
+  scrollOnly?: boolean
+  /**
+   * Reveal once and keep it: after the element animates in (entrance or first
+   * scroll-in) it never reverses on leave. Default false = animate out at the
+   * top and back in on scroll-up.
+   */
+  once?: boolean
+  debugId?: string
+  /**
+   * Build the hidden -> shown animation for `el`. It must be a single,
+   * *independent* animation (not added to any timeline): `play()` reveals,
+   * `reverse()` hides. The hook pauses it, schedules its entrance through the
+   * shared timeline, and lets a ScrollTrigger drive the very same animation on
+   * scroll — so the two modes never fight over the element.
+   */
+  makeReveal: (el: HTMLElement) => gsap.core.Tween | gsap.core.Timeline
+}
+
+/**
+ * Shared reveal behavior for cards, text and pop-ups: an element in view at
+ * load plays an orchestrated timeline entrance, then hands the *same* tween to
+ * a ScrollTrigger that animates it out at the top and back in on scroll-up. An
+ * element off-screen at load is ScrollTrigger-driven from the start.
+ */
+export function useReveal(
+  ref: RefObject<HTMLElement | null>,
+  { position, scrollOnly = false, once = false, debugId, makeReveal }: UseRevealOptions,
+) {
+  const ctx = useGsapContext()
+  useGSAP(() => {
+    const el = ref.current
+    if (!el || !ctx) {
+      if (GSAP_DEBUG) console.log("[cv-debug][useReveal:skip]", { debugId, hasEl: !!el, hasCtx: !!ctx })
+      return
+    }
+
+    const scroller = nearestScroller(el)
+    const scrollerEl = scroller instanceof Element ? scroller : undefined
+
+    const rect = el.getBoundingClientRect()
+    let top = 0
+    let bottom = window.innerHeight
+    if (scrollerEl) {
+      const r = scrollerEl.getBoundingClientRect()
+      top = r.top
+      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.
+    // Re-measure as it animates so positions track the real layout instead of
+    // only correcting at the very end. requestRefresh is throttled + deferred to
+    // the next frame, so this won't re-enter a ScrollTrigger callback.
+    reveal.eventCallback("onUpdate", () => ctx.requestRefresh())
+    reveal.pause()
+
+    const baseTrigger = {
+      trigger: el,
+      start: "top bottom",
+      end: "bottom top",
+      scroller: scrollerEl,
+      markers: GSAP_DEBUG,
+      id: GSAP_DEBUG ? debugId : undefined,
+    }
+    // Full behavior: in at the bottom, out at the top, and back on scroll-up.
+    const addReplayTrigger = () =>
+      ScrollTrigger.create({
+        ...baseTrigger,
+        onEnter: () => reveal.play(),
+        onEnterBack: () => reveal.play(),
+        onLeave: () => reveal.reverse(),
+        onLeaveBack: () => reveal.reverse(),
+      })
+
+    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) {
+        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: [] })
+}
--- a/src/app/_components/ChatFAB.tsx
+++ b/src/app/_components/ChatFAB.tsx
@@ -0,0 +1,22 @@
+'use client'
+import Link from 'next/link'
+import { MessageCircle } from 'lucide-react'
+import { Button } from '~/components/ui/button'
+import { usePathname } from 'next/navigation'
+export default function ChatFAB() {
+	const pathName = usePathname()
+	const isChat = pathName.indexOf('\/chat') > -1
+	return (
+		<>
+			{!isChat &&
+				<div className="fixed bottom-6 right-6 z-50">
+					<Button asChild size="icon" className="h-14 w-14 rounded-full shadow-lg">
+						<Link href="/assistant">
+							<MessageCircle className="h-6 w-6" />
+						</Link>
+					</Button>
+				</div>
+			}
+		</>
+	)
+}
--- a/src/app/_components/Form/Components/FormScaffold.tsx
+++ b/src/app/_components/Form/Components/FormScaffold.tsx
@@ -15,7 +15,7 @@ export default function FormScaffold<T extends FieldValues,>(params: {
 }) {
  const { form, onSubmit, title, id, className, children } = params
  return (
-    <Card.Card className={className ? className : "w-5/6 lg:w-1/2"}>
+    <Card.Card className={className ? className : "w-full"}>
      <Card.CardHeader>
        <Card.CardTitle>
          <DependentText bool={id ? true : false} true={`Update ${title}`} false={`Create ${title}`} />
--- a/src/app/_components/Form/Components/MutationProvider.tsx
+++ b/src/app/_components/Form/Components/MutationProvider.tsx
@@ -1,4 +1,3 @@
-import type { UseTRPCMutationResult } from "node_modules/@trpc/react-query/dist/getQueryKey.d-CruH3ncI.mjs";
 import { createContext, useContext, type ReactNode } from "react";

 interface ToString {
@@ -8,7 +7,7 @@ interface ToString {


 export interface MutationInterface {
-  mutate: (params:{id:string}) => void 
+  mutate: (params: any) => void
  error: ToString | null
  status: "error" | "idle" | "pending" | "success"
 }
--- a/src/app/_components/Form/Fields/IntInputFormField.tsx
+++ b/src/app/_components/Form/Fields/IntInputFormField.tsx
@@ -0,0 +1,53 @@
+import type { ComponentProps } from "react";
+import type { Control, FieldValues, Path } from "react-hook-form";
+import { FormControl, FormField, FormItem, FormLabel } from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+
+type IntInputFormFieldProps<T extends FieldValues> = Omit<
+  ComponentProps<typeof Input>,
+  "defaultValue" | "name" | "onChange" | "type" | "value"
+> & {
+  control: Control<T>;
+  emptyValue?: null | undefined;
+  label: string;
+  name: Path<T>;
+};
+
+export default function IntInputFormField<T extends FieldValues>({
+  control,
+  emptyValue,
+  label,
+  name,
+  ...inputProps
+}: IntInputFormFieldProps<T>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem className="flex flex-col">
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <Input
+              {...inputProps}
+              inputMode="numeric"
+              onBlur={field.onBlur}
+              onChange={(event) => {
+                const value = event.currentTarget.value;
+
+                field.onChange(
+                  value === "" ? emptyValue : Number.parseInt(value, 10),
+                );
+              }}
+              placeholder={inputProps.placeholder ?? name}
+              ref={field.ref}
+              step={inputProps.step ?? 1}
+              type="number"
+              value={field.value ?? ""}
+            />
+          </FormControl>
+        </FormItem>
+      )}
+    />
+  );
+}
--- a/src/app/_components/Form/Fields/InternalLinkTextarea.tsx
+++ b/src/app/_components/Form/Fields/InternalLinkTextarea.tsx
@@ -0,0 +1,224 @@
+'use client'
+
+import { forwardRef, useMemo, useRef, useState, type KeyboardEvent, type TextareaHTMLAttributes } from 'react'
+
+export type InternalLinkSuggestion = {
+  label: string
+  href: string
+  group: string
+}
+
+export type MdeAutocompleteSuggestion = {
+  label: string
+  value: string
+  detail: string
+  group: string
+  trigger: string
+}
+
+export const AUTOCOMPLETE_CURSOR_MARKER = '{{cursor}}'
+
+export type AutocompleteTriggerConfig = {
+  trigger: string
+  label: string
+  isQueryValid?: (query: string) => boolean
+}
+
+type ActiveToken = {
+  start: number
+  end: number
+  query: string
+  trigger: MdeAutocompleteSuggestion['trigger']
+}
+
+const defaultTriggerConfigs: AutocompleteTriggerConfig[] = [
+  {
+    trigger: '[[',
+    label: 'Internal links',
+    isQueryValid: (query) => !query.includes(']'),
+  },
+  {
+    trigger: '<',
+    label: 'MDX components',
+    isQueryValid: (query) => !/[\s>]/.test(query),
+  },
+]
+
+function findActiveToken(
+  value: string,
+  cursor: number,
+  triggerConfigs: AutocompleteTriggerConfig[],
+): ActiveToken | null {
+  const beforeCursor = value.slice(0, cursor)
+  const activeTrigger = triggerConfigs
+    .map((config) => ({ config, start: beforeCursor.lastIndexOf(config.trigger) }))
+    .filter((candidate) => candidate.start !== -1)
+    .sort((a, b) => b.start - a.start)[0]
+
+  if (!activeTrigger) return null
+
+  const query = beforeCursor.slice(activeTrigger.start + activeTrigger.config.trigger.length)
+  if (query.includes('\n')) return null
+  if (activeTrigger.config.isQueryValid && !activeTrigger.config.isQueryValid(query)) return null
+
+  return {
+    start: activeTrigger.start,
+    end: cursor,
+    query,
+    trigger: activeTrigger.config.trigger,
+  }
+}
+
+export function linkSuggestionsToAutocomplete(suggestions: InternalLinkSuggestion[]): MdeAutocompleteSuggestion[] {
+  return suggestions.map((suggestion) => ({
+    label: suggestion.label,
+    value: `[${suggestion.label}](${suggestion.href})`,
+    detail: suggestion.href,
+    group: suggestion.group,
+    trigger: '[[',
+  }))
+}
+
+export const InternalLinkTextarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  suggestions: MdeAutocompleteSuggestion[]
+  triggerConfigs?: AutocompleteTriggerConfig[]
+}>(({ suggestions, triggerConfigs, value, onChange, onKeyDown, ...props }, ref) => {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+  const [token, setToken] = useState<ActiveToken | null>(null)
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  function setRefs(element: HTMLTextAreaElement | null) {
+    textareaRef.current = element
+    if (typeof ref === 'function') ref(element)
+    else if (ref) ref.current = element
+  }
+
+  const resolvedTriggerConfigs = useMemo(() => {
+    const configured = triggerConfigs?.length ? triggerConfigs : defaultTriggerConfigs
+    const merged = new Map(configured.map((config) => [config.trigger, config]))
+
+    for (const suggestion of suggestions) {
+      if (!merged.has(suggestion.trigger)) {
+        merged.set(suggestion.trigger, {
+          trigger: suggestion.trigger,
+          label: suggestion.trigger,
+        })
+      }
+    }
+
+    return Array.from(merged.values()).sort((a, b) => b.trigger.length - a.trigger.length)
+  }, [suggestions, triggerConfigs])
+
+  const triggerLabels = useMemo(
+    () => new Map(resolvedTriggerConfigs.map((config) => [config.trigger, config.label])),
+    [resolvedTriggerConfigs],
+  )
+
+  const matches = useMemo(() => {
+    if (!token) return []
+    const query = token.query.toLowerCase()
+    return suggestions
+      .filter((suggestion) => suggestion.trigger === token.trigger)
+      .filter((suggestion) => {
+        const haystack = `${suggestion.group} ${suggestion.label} ${suggestion.detail}`.toLowerCase()
+        return haystack.includes(query)
+      })
+      .slice(0, 8)
+  }, [suggestions, token])
+
+  function updateToken(textarea: HTMLTextAreaElement) {
+    const nextToken = findActiveToken(textarea.value, textarea.selectionStart, resolvedTriggerConfigs)
+    setToken(nextToken)
+    setSelectedIndex(0)
+  }
+
+  function insertSuggestion(textarea: HTMLTextAreaElement, suggestion: MdeAutocompleteSuggestion) {
+    if (!token) return
+
+    const markerIndex = suggestion.value.indexOf(AUTOCOMPLETE_CURSOR_MARKER)
+    const insertedValue = markerIndex === -1
+      ? suggestion.value
+      : suggestion.value.replace(AUTOCOMPLETE_CURSOR_MARKER, '')
+    const cursor = token.start + (markerIndex === -1 ? insertedValue.length : markerIndex)
+    const nextValue = `${textarea.value.slice(0, token.start)}${insertedValue}${textarea.value.slice(token.end)}`
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')?.set
+    nativeInputValueSetter?.call(textarea, nextValue)
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    textarea.setSelectionRange(cursor, cursor)
+    setToken(null)
+    setSelectedIndex(0)
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
+    if (token && matches.length > 0) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        setSelectedIndex((index) => (index + 1) % matches.length)
+        return
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        setSelectedIndex((index) => (index - 1 + matches.length) % matches.length)
+        return
+      }
+      if (event.key === 'Enter' || event.key === 'Tab') {
+        event.preventDefault()
+        const suggestion = matches[selectedIndex]
+        if (suggestion) insertSuggestion(event.currentTarget, suggestion)
+        return
+      }
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        setToken(null)
+        return
+      }
+    }
+
+    onKeyDown?.(event)
+  }
+
+  return (
+    <>
+        <textarea
+        {...props}
+        ref={setRefs}
+        value={value}
+        onChange={(event) => {
+          onChange?.(event)
+          updateToken(event.currentTarget)
+        }}
+        onClick={(event) => updateToken(event.currentTarget)}
+        onKeyUp={(event) => {
+          if (['ArrowDown', 'ArrowUp', 'Enter', 'Tab', 'Escape'].includes(event.key)) return
+          updateToken(event.currentTarget)
+        }}
+        onKeyDown={handleKeyDown}
+      />
+      {token && matches.length > 0 && (
+        <div className='bg-popover text-popover-foreground absolute left-3 top-12 z-50 w-80 overflow-hidden rounded-md border shadow-md'>
+          <div className='border-b px-3 py-2 text-xs text-muted-foreground'>
+            {triggerLabels.get(token.trigger) ?? token.trigger} for {token.trigger}{token.query}
+          </div>
+          <div className='max-h-64 overflow-y-auto py-1'>
+            {matches.map((suggestion, index) => (
+              <button
+                key={`${suggestion.trigger}:${suggestion.group}:${suggestion.label}`}
+                type='button'
+                className={`flex w-full flex-col px-3 py-2 text-left text-sm ${index === selectedIndex ? 'bg-muted' : ''}`}
+                onMouseDown={(event) => {
+                  event.preventDefault()
+                  if (textareaRef.current) insertSuggestion(textareaRef.current, suggestion)
+                }}
+              >
+                <span className='font-medium'>{suggestion.label}</span>
+                <span className='text-xs text-muted-foreground'>{suggestion.group} - {suggestion.detail}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  )
+})
+
+InternalLinkTextarea.displayName = 'InternalLinkTextarea'
--- a/src/app/_components/Form/Fields/MdeFormField.tsx
+++ b/src/app/_components/Form/Fields/MdeFormField.tsx
@@ -1,25 +1,100 @@
+"use client";
+
 import MDEditor from "@uiw/react-md-editor";
+import { Maximize2, Minimize2 } from "lucide-react";
+import { useEffect, useState, type ReactElement, type TextareaHTMLAttributes } from "react";
+import { createPortal } from "react-dom";
 import type { Control, FieldValues, Path } from "react-hook-form";
 import { FormControl, FormField, FormItem, FormLabel } from "~/components/ui/form";
-export default function MdeFormField<T extends FieldValues>(params: { control: Control<T>, name: Path<T>, label: string, dataColorMode: "dark"|"light" }) {
+import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+import { ClientMdx } from "~/components/ClientMdx";
+import {
+  InternalLinkTextarea,
+  type AutocompleteTriggerConfig,
+  type MdeAutocompleteSuggestion,
+} from "./InternalLinkTextarea";
+
+export default function MdeFormField<T extends FieldValues>(params: {
+  control: Control<T>,
+  name: Path<T>,
+  label: string,
+  dataColorMode: "dark"|"light",
+  autocompleteSuggestions?: MdeAutocompleteSuggestion[],
+  triggerConfigs?: AutocompleteTriggerConfig[],
+  renderPreview?: (source: string) => ReactElement,
+}) {
+  const [fullscreen, setFullscreen] = useState(false)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!fullscreen) return
+
+    const originalOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+
+    return () => {
+      document.body.style.overflow = originalOverflow
+    }
+  }, [fullscreen])
+
  return (
    <FormField
      control={params.control}
      name={params.name}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel>
-            Description
-          </FormLabel>
-          <FormControl>
-            <MDEditor
-              value={field.value ? field.value : ""}
-              onChange={field.onChange}
-              data-color-mode={params.dataColorMode}
-            />
-          </FormControl>
-        </FormItem>
-      )}
+      render={({ field }) => {
+        const editor = (
+          <FormItem className={cn(fullscreen && "mde-form-field-fullscreen")}>
+            <div className="flex shrink-0 items-center justify-between gap-2">
+              <FormLabel>
+                {params.label}
+              </FormLabel>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon-sm"
+                aria-label={fullscreen ? "Exit fullscreen editor" : "Open fullscreen editor"}
+                onClick={() => setFullscreen((value) => !value)}
+              >
+                {fullscreen ? <Minimize2 /> : <Maximize2 />}
+              </Button>
+            </div>
+            <FormControl className={cn(fullscreen && "min-h-0 flex-1")}>
+              <MDEditor
+                className={cn(fullscreen && "mde-form-field-editor-fullscreen min-h-0 flex-1")}
+                height={fullscreen ? "calc(100vh - 72px)" : undefined}
+                visibleDragbar={!fullscreen}
+                value={field.value ? field.value : ""}
+                onChange={field.onChange}
+                data-color-mode={params.dataColorMode}
+                commandsFilter={(command) => command.name === "fullscreen" ? false : command}
+                components={{
+                  textarea: (props) => (
+                    <InternalLinkTextarea
+                      {...(props as TextareaHTMLAttributes<HTMLTextAreaElement>)}
+                      suggestions={params.autocompleteSuggestions ?? []}
+                      triggerConfigs={params.triggerConfigs}
+                    />
+                  ),
+                  preview: params.renderPreview
+                    ? (source) => params.renderPreview?.(source) ?? <></>
+                    : (source) => <ClientMdx source={source} fallback={source} />,
+                }}
+              />
+            </FormControl>
+          </FormItem>
+        )
+
+        if (fullscreen && mounted) {
+          return createPortal(editor, document.body)
+        }
+
+        return editor
+      }}
    />
  )
 }
--- a/src/app/_components/Form/Fields/MultiBooleanFormField.tsx
+++ b/src/app/_components/Form/Fields/MultiBooleanFormField.tsx
@@ -1,6 +1,7 @@
 import type { CheckedState } from "@radix-ui/react-checkbox";
 import { ChevronDownIcon } from "lucide-react";
-import { createContext,useContext, useState } from "react";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import { createContext,useContext, useState, type KeyboardEventHandler } from "react";
 import { useFormContext, type Control, type ControllerRenderProps, type FieldValues, type Path } from "react-hook-form";
 import type { Entries } from "type-fest";
 import { Button } from "~/components/ui/button";
@@ -16,6 +17,7 @@ const MultiBooleanFieldContext = createContext<MultiBooleanFieldContextProps|und

 function InnerMultiBooleanFormField(params: { options: string[], onChange: (arg0: string[]) => void }) {
  const context = useContext(MultiBooleanFieldContext)
+  const [searchBuffer, setSearchBuffer] = useState<string>("")
  if (context === undefined) {
    return (<></>)
  }
@@ -43,19 +45,40 @@ function InnerMultiBooleanFormField(params: { options: string[], onChange: (arg0
    }
    return context.checkedValues[key]
  }
+
+  const handleKeyDown:KeyboardEventHandler = (e) => {
+    if (e.ctrlKey && e.key == "c") {
+      setSearchBuffer("")
+    } else if (e.code == "Backspace") {
+      setSearchBuffer((prev) => {
+        const newVal = prev.substring(0,prev.length - 2)
+        console.log(newVal)
+        return newVal
+      })
+    }
+
+   else if (e.key.length === 1) {
+      setSearchBuffer((prev) => {
+        const newVal = prev + e.key;
+        console.log(newVal)
+        return newVal;
+      })
+    }
+  }
+
  return (
-    <>
+    <ScrollArea onKeyDown={handleKeyDown} className="flex h-60">
      {
        params.options.map((opt) => (
-          <FormItem key={opt}>
-            <div className="flex flex-row justify-between py-2 border-b-1">
+           opt.startsWith(searchBuffer) && <FormItem key={opt}>
+            <div className="flex flex-row justify-between py-2 border-b">
            <FormLabel>{opt}</FormLabel>
            <Checkbox data-testid="multiboolean-checkbox" checked={checked(opt)} onCheckedChange={onCheckedItemChange(opt)} />
            </div>
          </FormItem>
        ))
      }
-    </>
+    </ScrollArea>
  )
 }
 export default function MultiBooleanFormField<T extends FieldValues>(params: { control: Control<T>, name: Path<T>, label: string, options: string[], defaultValues?: string[] }) {
@@ -76,9 +99,9 @@ export default function MultiBooleanFormField<T extends FieldValues>(params: { c
          </PopoverTrigger>
          <FormControl>
          <PopoverContent data-testid="multiboolean-content">
-            <MultiBooleanFieldContext.Provider value={{checkedValues: checkedValues, setCheckedValue: setCheckedValues}}>
-              <InnerMultiBooleanFormField onChange={field.onChange} options={params.options} />
-            </MultiBooleanFieldContext.Provider>
+              <MultiBooleanFieldContext.Provider value={{checkedValues: checkedValues, setCheckedValue: setCheckedValues}}>
+                <InnerMultiBooleanFormField onChange={field.onChange} options={params.options} />
+              </MultiBooleanFieldContext.Provider>
          </PopoverContent>
          </FormControl>
          </Popover>
--- a/src/app/_components/Form/Fields/index.ts
+++ b/src/app/_components/Form/Fields/index.ts
@@ -1,5 +1,6 @@
 export { default as BooleanFormField } from './BooleanFormField'
 export { default as TextInputFormField } from './TextInputFormField'
+export { default as IntInputFormField } from './IntInputFormField'
 export { default as MultiBooleanFormField } from './MultiBooleanFormField'
 export { default as SelectFormField } from './SelectFormField'
 export { default as MdeFormField } from './MdeFormField'
--- a/src/app/_components/ThemeIcon.tsx
+++ b/src/app/_components/ThemeIcon.tsx
@@ -4,10 +4,18 @@ import { Moon, Sun } from "lucide-react"
 import { useEffect } from "react"
 type Props = {activeTheme:string|undefined}
 const ThemeIcon = (props:Props) => {
-  if (props.activeTheme == "dark") {
-    return (<Sun/>)
-  } else {
-    return (<Moon/>)
-  }
+  return (
+    <>
+      {props.activeTheme && props.activeTheme == 'dark' &&
+        <Sun/>
+      }
+      {props.activeTheme && props.activeTheme == 'light' &&
+        <Moon/>
+      }
+      {!props.activeTheme &&
+        <Sun/>
+      }
+    </>
+  )
 }
 export default ThemeIcon;
--- a/src/app/_components/ThemeSwitch.tsx
+++ b/src/app/_components/ThemeSwitch.tsx
@@ -8,6 +8,9 @@ import ThemeIcon from "./ThemeIcon"

 export function ThemeSwitch() {
  const { setTheme, theme } = useTheme()
+  if (!theme) {
+    setTheme('dark')
+  }
  const toggleTheme = () => {
    setTheme(theme == "dark" ? "light" : "dark")
  }
--- a/src/app/_components/TopNav.tsx
+++ b/src/app/_components/TopNav.tsx
@@ -7,7 +7,7 @@ import { ThemeSwitch } from "./ThemeSwitch"

 export default function TopNav() {
 	return (
-		<div className="fixed lg:w-full right-0 z-50 lg:bg-background">
+		<div className="fixed backdrop-blur-md lg:w-full right-0 z-50">
 			<nav className="flex flex-col-reverse lg:flex-row flex-wrap w-20 lg:w-full outline-1 lg:h-10 h-full">
 				<div className="flex flex-wrap lg:h-full w-20 lg:w-fit lg:flex-row">
 					<Button className="flex h-10 lg:h-full w-full lg:w-20" asChild variant="outline">
@@ -19,6 +19,14 @@ export default function TopNav() {
 					<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
 						<Link href={"/projects"}> Projects </Link>
 					</Button>
+					<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
+						<Link href={"/music"}> Music </Link>
+					</Button>
+					<Show when="signed-in">
+						<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
+							<Link href="/chat"> Chat </Link>
+						</Button>
+					</Show>
 				</div>
 				<div className="flex flex-col-reverse flex-wrap lg:h-full w-20 lg:w-fit lg:flex-row lg:ml-auto">
 					<AdminWrap>
@@ -44,7 +52,13 @@ export default function TopNav() {
 						<Show when="signed-in">
 							<Button asChild className="flex h-10 lg:h-full cursor-pointer lg:w-20 content-center" variant={"outline"}>
 								<div>
-									<UserButton />
+									<UserButton
+									userProfileProps={{
+										additionalOAuthScopes: {
+											google: ['https://www.googleapis.com/auth/calendar'],
+										},
+									}}
+								/>
 								</div>
 							</Button>
 						</Show>
--- a/src/app/_providers/GsapProvicer.tsx
+++ b/src/app/_providers/GsapProvicer.tsx
@@ -1,18 +1,293 @@
 'use client'
 import { useGSAP } from '@gsap/react'
 import gsap from 'gsap'
-import { createContext, useContext, type ReactNode } from 'react'
+import { SplitText } from 'gsap/SplitText'
+import { ScrollTrigger, GSDevTools } from 'gsap/all'
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, type ReactNode } from 'react'

 gsap.registerPlugin(useGSAP)
-const GsapContext = createContext<typeof globalThis.gsap | null>(null)
+gsap.registerPlugin(ScrollTrigger)
+gsap.registerPlugin(SplitText)
+gsap.registerPlugin(GSDevTools)
+
+// iOS Safari shows/hides its address bar at the scroll extremes, which resizes
+// the viewport and makes ScrollTrigger refresh + fire spurious onLeave/onEnter
+// toggles (text animating out at the bottom and not coming back). Ignoring those
+// mobile-toolbar resizes keeps the real enter/leave reverse behavior intact.
+ScrollTrigger.config({ ignoreMobileResize: true })
+
+// Flip to true to draw ScrollTrigger start/end markers on every animated
+// 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: (
+    animation: gsap.core.TimelineChild,
+    position: gsap.Position
+  ) => void,
+  // Schedule a zero-duration callback at `position` — used to *start* an
+  // independent reveal tween so the timeline only orchestrates timing.
+  schedule: (fn: () => void, position: gsap.Position) => void,
+  // Run `cb` once the entrance is done (timeline complete or first user scroll).
+  onReady: (cb: () => void) => void,
+  // Re-measure all ScrollTriggers (throttled to once per frame). Call it
+  // whenever an animation changes content height so trigger positions stay
+  // aligned with the real layout.
+  requestRefresh: () => void,
+  resetTimeline: () => void,
+  resumeTimeline: () => void,
+  getScroller: () => Element | Window | null
+} | null>(null)

 export function useGsapContext() {
  return useContext(GsapContext)
 }

-export default function GsapProvider({children}:{children:ReactNode}) {
+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()
+        }
+      }
+    },[dep])
+  useLayoutEffect(() => {
+    return () => {
+      gsapContext?.resetTimeline()
+    }
+  },[])
+}
+
+export default function GsapProvider({ children }: { children: ReactNode }) {
+  const tl = useRef<gsap.core.Timeline | null>(null)
+  const scrollerRef = useRef<Element | Window | null>(null)
+  const getScroller = useCallback(() => {
+    // const cached = scrollerRef.current
+    // if (!cached || (cached instanceof Element && !document.contains(cached))) {
+      let scrollers = document.querySelectorAll('[data-slot="scroll-area-viewport"]')
+      if (scrollers.length < 1) {
+        scrollerRef.current = window
+      } else {
+        let scrollerArray = Array.from(scrollers.values()).sort((a,b) => {
+          const s1 = a as HTMLDivElement;
+          const s2 = b as HTMLDivElement;
+          // using bitwise not (~~) to coerce NaN values to 0
+          const aPriority = ~~Number(s1.dataset?.scrollerPriority)
+          const bPriority = ~~Number(s2.dataset?.scrollerPriority)
+          return aPriority - bPriority;
+        })
+        let prioScroller = scrollerArray.pop();
+        scrollerRef.current = prioScroller || window;
+      }
+
+    // }
+    return scrollerRef.current
+  }, [])
+  const devToolsCreated = useRef(false)
+  useGSAP(() => {
+    if (!tl.current) {
+      tl.current = gsap.timeline({ paused: true })
+    }
+    if (GSAP_DEBUG && tl.current && !devToolsCreated.current) {
+      devToolsCreated.current = true
+      GSDevTools.create({ animation: tl.current })
+    }
+    return () => { if (GSAP_DEBUG) console.log("gsap cleanup") }
+  })
+
+  // Handoff: fire registered callbacks once, when the entrance finishes.
+  const readyFired = useRef(false)
+  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)
+  },[])
+
+  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
+    // Content can mount in waves (e.g. nested queries resolving after the
+    // 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
+  // can fire freely while content height animates.
+  const refreshQueued = useRef(false)
+  const scheduleRefresh = useCallback(() => {
+    if (refreshQueued.current) return
+    refreshQueued.current = true
+    requestAnimationFrame(() => {
+      refreshQueued.current = false
+      ScrollTrigger.refresh()
+    })
+  },[])
+
+  const scrollCleanup = useRef<(() => void) | null>(null)
+  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())
+    resizeObserver.current?.disconnect()
+    scrollCleanup.current?.()
+    scrollCleanup.current = null
+    readyFired.current = false
+    readyCbs.current = []
+    tl.current = gsap.timeline({paused:true})
+  },[])
+
+  const resumeTimeline = useCallback(() => {
+    const t = tl.current
+    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() })
+
+    const scroller = getScroller()
+    // If the user scrolls before the entrance finishes, snap it to the end and
+    // switch to scroll control so the timeline and ScrollTriggers never fight
+    // over the same elements.
+    scrollCleanup.current?.()
+    const onFirstScroll = () => { t.progress(1); fireReady() }
+    scroller?.addEventListener("scroll", onFirstScroll, { once: true, passive: true })
+    scrollCleanup.current = () => scroller?.removeEventListener("scroll", onFirstScroll)
+
+    // Continuously realign triggers while content height changes — entrance
+    // growth, scroll-driven collapses, late-loading media.
+    if (scroller instanceof Element) {
+      const target = scroller.firstElementChild ?? scroller
+      resizeObserver.current?.disconnect()
+      resizeObserver.current = new ResizeObserver(scheduleRefresh)
+      resizeObserver.current.observe(target)
+    }
+
+    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
+  // were created; refresh so start/end stay aligned with the real card sizes.
+  useEffect(() => {
+    const refresh = () => ScrollTrigger.refresh()
+    window.addEventListener("load", refresh)
+    document.fonts?.ready.then(refresh).catch(() => {})
+    return () => window.removeEventListener("load", refresh)
+  }, [])
  return (
-    <GsapContext.Provider value={gsap}>
+    <GsapContext.Provider value={{ addAnimation, schedule, onReady, requestRefresh: scheduleRefresh, resetTimeline, resumeTimeline, getScroller }}>
      {children}
    </GsapContext.Provider>
  )
--- a/src/app/_providers/MessagesProvider.tsx
+++ b/src/app/_providers/MessagesProvider.tsx
@@ -0,0 +1,95 @@
+'use client'
+import type { inferRouterOutputs } from '@trpc/server';
+import { useUser } from '@clerk/nextjs'
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
+import { trpc } from '~/app/_trpc/Client'
+import type { ChatRouter } from '~/server/routers/chat'
+const MessageContext = createContext<{
+  session?: inferRouterOutputs<ChatRouter>['getSession']
+  messages?: inferRouterOutputs<ChatRouter>['getMessages']
+  refetchMessages: () => void
+  clearChat: (callback?: () => void) => void
+  error: string|null
+  isLoading: boolean
+  clearingChat: boolean
+  clearedChat: boolean
+}>({
+  session: undefined,
+  messages: undefined,
+  refetchMessages: () => undefined,
+  clearChat: () => undefined,
+  error: null,
+  isLoading: true,
+  clearingChat: false,
+  clearedChat: false
+})
+export const useMessages = () => useContext(MessageContext)
+export const MessagesProvider = ({children}:{children:ReactNode}) => {
+  const [error,setError] = useState<string|null>(null)
+  const [isLoading,setIsLoading] = useState<boolean>(true)
+  const { isLoaded, isSignedIn } = useUser()
+  const { data: session,error:sessionError,isLoading:sessionLoading} = trpc.chat.getSession.useQuery(undefined, {
+    enabled: isSignedIn === true,
+  })
+  const { data: messages, refetch, error:messageError, isLoading:messagesLoading } = trpc.chat.getMessages.useQuery(session?.id ? session.id : "", {
+    enabled: isSignedIn === true && session?.id != undefined,
+  })
+  const { mutate ,isPending:clearingChat,isSuccess:clearedChat } = trpc.chat.clearChat.useMutation()
+  const utils = trpc.useUtils()
+  const refetchMessages = () => {
+    if (!isSignedIn) {
+      return;
+    }
+      utils.chat.getMessages.invalidate()
+      refetch()
+  }
+  const clearChat = (callback?: () => void) => {
+    if (!isSignedIn) {
+      if (callback) {
+        callback()
+      }
+      return;
+    }
+    mutate(undefined,{onSuccess: () => {
+      if (callback) {
+        callback()
+      }
+      utils.chat.getMessages.invalidate()
+    }})
+  }
+  useEffect(() => {
+    if (isSignedIn !== true) {
+      setError(null)
+      return;
+    }
+    messageError && setError(messageError.message)
+    sessionError && setError(sessionError.message)
+  },[messageError,sessionError,isSignedIn])
+  useEffect(() => {
+    if (!isLoaded) {
+      setIsLoading(true)
+      return;
+    }
+    if (isSignedIn !== true) {
+      setIsLoading(false)
+      return;
+    }
+    setIsLoading(sessionLoading || messagesLoading)
+  },[isLoaded,isSignedIn,sessionLoading,messagesLoading])
+  return (
+    <MessageContext.Provider value={
+      {
+        session: isSignedIn === true ? session : undefined,
+        messages: isSignedIn === true ? messages : undefined,
+        refetchMessages,
+        clearChat,
+        error,
+        isLoading,
+        clearingChat,
+        clearedChat
+      }
+    }>
+      {children}
+    </MessageContext.Provider>
+  )
+}
--- a/src/app/_providers/ThemeProvider.tsx
+++ b/src/app/_providers/ThemeProvider.tsx
@@ -1,23 +1,10 @@
 'use client'
-import * as React from "react"
 import { ThemeProvider as NextThemesProvider } from "next-themes"

 export default function ThemeProvider({children}:{children: React.ReactNode}) {
-  const [mounted,setMounted] = React.useState(false)
-  React.useEffect(() => {
-    setMounted(true)
-  })
-  if (mounted) {
-    return (
-      <NextThemesProvider disableTransitionOnChange nonce="test" attribute="class" defaultTheme="dark">
-        {children}
-       </NextThemesProvider>
-     )
-  } else {
-    return (
-      <>
-        {children}
-      </>
-    )
-  }
+  return (
+    <NextThemesProvider disableTransitionOnChange attribute="class" defaultTheme="dark">
+      {children}
+    </NextThemesProvider>
+  )
 }
--- a/src/app/_trpc/ServerClient.ts
+++ b/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({});
--- a/src/app/_trpc/TrpcProvider.tsx
+++ b/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,
        }),
      ],
    })
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -4,5 +4,6 @@ import { env } from "~/env"

 export async function isAdmin() {
 		const userid = (await auth()).userId
+		console.log(userid)
 		return (userid == env.ADMIN_USER_CLERK_ID)
 }
--- a/src/app/actions/cancelMeeting.ts
+++ b/src/app/actions/cancelMeeting.ts
@@ -0,0 +1,25 @@
+'use server'
+import { getGoogleCalendarClient, getGoogleCalendarId } from '~/server/googleCalendar'
+
+export async function cancelMeeting({ eventId }: { eventId: string }) {
+	try {
+		const calendar = getGoogleCalendarClient()
+
+		await calendar.events.delete({
+			calendarId: getGoogleCalendarId(),
+			eventId,
+		})
+
+		return {
+			success: true,
+			eventId,
+			message: 'Meeting removed from Gregor availability calendar.',
+		}
+	} catch (error) {
+		console.error('Failed to cancel meeting:', error)
+		return {
+			success: false,
+			error: 'Failed to remove the meeting from Gregor availability calendar.',
+		}
+	}
+}
--- a/src/app/actions/currentTime.ts
+++ b/src/app/actions/currentTime.ts
@@ -0,0 +1,8 @@
+export default function currentTime() {
+  let now = Date.now();
+  console.log(now);
+  return {
+    success: true,
+    time: now
+  }
+}
--- a/src/app/actions/scheduleMeeting.ts
+++ b/src/app/actions/scheduleMeeting.ts
@@ -0,0 +1,87 @@
+'use server'
+import { env } from '~/env'
+import { getGoogleCalendarClient, getGoogleCalendarId } from '~/server/googleCalendar'
+
+function googleCalendarDate(date: Date) {
+	return date.toISOString().replace(/[-:]|\.\d{3}/g, '')
+}
+
+function createGoogleCalendarTemplateLink({
+	title,
+	description,
+	startTime,
+	endTime,
+	gregorEmail,
+}: {
+	title: string
+	description: string
+	startTime: Date
+	endTime: Date
+	gregorEmail: string
+}) {
+	const params = new URLSearchParams({
+		action: 'TEMPLATE',
+		text: title,
+		dates: `${googleCalendarDate(startTime)}/${googleCalendarDate(endTime)}`,
+		details: description,
+		add: gregorEmail,
+	})
+
+	return `https://calendar.google.com/calendar/render?${params.toString()}`
+}
+
+export async function scheduleMeeting({
+	title,
+	description,
+	dateTime,
+	durationMinutes,
+	attendeeEmail,
+	attendeeName,
+}: {
+	title: string
+	description: string
+	dateTime: string
+	durationMinutes: number
+	attendeeEmail?: string
+	attendeeName?: string
+}) {
+	try {
+		const calendar = getGoogleCalendarClient()
+
+		const startTime = new Date(dateTime)
+		const endTime = new Date(startTime.getTime() + durationMinutes * 60 * 1000)
+		const attendeeNote = attendeeEmail
+			? `\n\nVisitor: ${attendeeName ?? 'Unknown'} <${attendeeEmail}>`
+			: ''
+		const eventDescription = `${description}${attendeeNote}`
+
+		const eventRequest = {
+			summary: title,
+			description: eventDescription,
+			start: { dateTime: startTime.toISOString(), timeZone: 'UTC' },
+			end: { dateTime: endTime.toISOString(), timeZone: 'UTC' },
+		}
+		const event = await calendar.events.insert({
+			calendarId: getGoogleCalendarId(),
+			requestBody: eventRequest,
+		})
+
+		const addToCalendarLink = createGoogleCalendarTemplateLink({
+			title,
+			description,
+			startTime,
+			endTime,
+			gregorEmail: env.GREGOR_MEETING_EMAIL,
+		})
+
+		return {
+			success: true,
+			eventId: event.data.id,
+			addToCalendarLink,
+			message: `Meeting "${title}" scheduled for ${startTime.toLocaleString()}.${attendeeEmail ? ` Visitor email noted: ${attendeeEmail}.` : ''} The add-to-calendar link invites ${env.GREGOR_MEETING_EMAIL}.`,
+		}
+	} catch (error) {
+		console.error('Failed to schedule meeting:', error)
+		return { success: false, error: 'Failed to schedule meeting. Please try again.' }
+	}
+}
--- a/src/app/admin/_components/AdminSideBar.tsx
+++ b/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 async function AdminSideBar() {
+export default function AdminSideBar() {
  return (
    <>
-      <SidebarProvider>
-        <Sidebar className="z-[51]">
-          <SidebarTrigger className="absolute z-[52] left-65 top-100" />
+        <Sidebar variant="floating" className="h-full lg:h-[96%] lg: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>
@@ -20,12 +21,19 @@ export default async function AdminSideBar() {
              <Link href={"/admin/project/techStack/create"}> Create Stack </Link>
              <Link href={"/admin/project/list"}>  Project List </Link>
            </SimpleSidebarGroup>
-            <SimpleSidebarGroup lable="Blog">
-              <Link href={"/"}> Some Blog Action </Link>
+            <SimpleSidebarGroup lable="Music">
+              <Link href={"/admin/music"}> Manage Music </Link>
            </SimpleSidebarGroup>
+            <SimpleSidebarGroup lable="Blog">
+              <Link href={"/admin/blog/create"}> Create Post </Link>
+              <Link href={"/admin/blog/list"}> Post List </Link>
+            </SimpleSidebarGroup>
+            <SimpleSidebarGroup lable="Chat">
+              <Link href={"/admin/chat"}> System Prompt </Link>
+            </SimpleSidebarGroup>
+            </ScrollArea>
          </SidebarContent>
        </Sidebar>
-      </SidebarProvider>
    </>
  )
 }
--- a/src/app/admin/_components/MdxComponentReference.tsx
+++ b/src/app/admin/_components/MdxComponentReference.tsx
@@ -0,0 +1,98 @@
+import { ChevronsUpDown } from "lucide-react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "~/components/ui/accordion";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/components/ui/collapsible";
+
+const examples = [
+  {
+    name: "Lead",
+    description: "Intro paragraph with larger muted text.",
+    code: `<Lead>
+Short opening summary.
+</Lead>`,
+  },
+  {
+    name: "Callout",
+    description: "Highlighted note, tip, or warning block.",
+    code: `<Callout title="Heads up" variant="note">
+Important context for readers.
+</Callout>
+
+<Callout title="Tip" variant="tip">
+A practical recommendation.
+</Callout>
+
+<Callout title="Careful" variant="warning">
+A caveat or tradeoff.
+</Callout>`,
+  },
+  {
+    name: "ButtonLink",
+    description: "Button-styled internal or external link.",
+    code: `<ButtonLink href="/projects">
+View projects
+</ButtonLink>
+
+<ButtonLink href="https://example.com" variant="outline">
+External resource
+</ButtonLink>`,
+  },
+  {
+    name: "Figure",
+    description: "Image with optional caption.",
+    code: `<Figure
+  src="https://example.com/image.jpg"
+  alt="Describe the image"
+  caption="Optional caption"
+/>`,
+  },
+  {
+    name: "PullQuote",
+    description: "Large emphasized quote or takeaway.",
+    code: `<PullQuote>
+A highlighted quote or strong takeaway.
+</PullQuote>`,
+  },
+  {
+    name: "TagList",
+    description: "Inline list of tag badges.",
+    code: `<TagList tags={["nextjs", "mdx", "uploadthing"]} />`,
+  },
+  {
+    name: "Badge",
+    description: "Small inline label.",
+    code: `<Badge variant="outline">Next.js</Badge>`,
+  },
+];
+
+export default function MdxComponentReference() {
+  return (
+    <Collapsible className="rounded-lg border">
+      <CollapsibleTrigger className="flex w-full items-center justify-between gap-2 p-4 text-left">
+        <h2 className="text-base font-semibold">MDX Components</h2>
+        <ChevronsUpDown className="size-4 shrink-0 text-muted-foreground" />
+      </CollapsibleTrigger>
+      <CollapsibleContent className="px-4 pb-4">
+        <p className="text-muted-foreground text-sm">
+          Components available inside MDX content. Type <code className="rounded bg-muted px-1">[[</code> for internal links or <code className="rounded bg-muted px-1">&lt;</code> for component snippets.
+        </p>
+        <Accordion type="single" collapsible className="mt-3">
+          {examples.map((example) => (
+            <AccordionItem key={example.name} value={example.name}>
+              <AccordionTrigger>
+                <span>
+                  <span className="block">{example.name}</span>
+                  <span className="text-muted-foreground block text-xs font-normal">{example.description}</span>
+                </span>
+              </AccordionTrigger>
+              <AccordionContent>
+                <pre className="bg-muted overflow-x-auto rounded-md p-3 text-xs">
+                  <code>{example.code}</code>
+                </pre>
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
--- a/src/app/admin/_components/MdxEditorPreview.tsx
+++ b/src/app/admin/_components/MdxEditorPreview.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+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 '~/components/mdx-components'
+
+export default function MdxEditorPreview(params: { source: string }) {
+  const [compiled, setCompiled] = useState<MDXRemoteSerializeResult | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    const timeout = window.setTimeout(() => {
+      void serialize(params.source, {
+        parseFrontmatter: false,
+        mdxOptions: {
+          remarkPlugins: [],
+          rehypePlugins: [],
+        },
+      })
+        .then((result) => {
+          if (cancelled) return
+          setCompiled(result)
+          setError(null)
+        })
+        .catch((nextError: unknown) => {
+          if (cancelled) return
+          setCompiled(null)
+          setError(nextError instanceof Error ? nextError.message : 'Failed to compile MDX preview')
+        })
+    }, 200)
+
+    return () => {
+      cancelled = true
+      window.clearTimeout(timeout)
+    }
+  }, [params.source])
+
+  if (error) {
+    return (
+      <div className='rounded-md border border-destructive/40 bg-destructive/10 p-4 text-sm text-destructive'>
+        {error}
+      </div>
+    )
+  }
+
+  if (!compiled) {
+    return <div className='text-muted-foreground p-4 text-sm'>Rendering preview...</div>
+  }
+
+  return (
+    <article className='prose dark:prose-invert max-w-none'>
+      <MDXRemote {...compiled} components={mdxComponents} />
+    </article>
+  )
+}
--- a/src/app/admin/_components/useMdxEditorFieldProps.tsx
+++ b/src/app/admin/_components/useMdxEditorFieldProps.tsx
@@ -0,0 +1,143 @@
+'use client'
+
+import { trpc } from '~/app/_trpc/Client'
+import type { RouterOutputs } from '~/server/routers/_app'
+import {
+  AUTOCOMPLETE_CURSOR_MARKER,
+  linkSuggestionsToAutocomplete,
+  type AutocompleteTriggerConfig,
+  type InternalLinkSuggestion,
+  type MdeAutocompleteSuggestion,
+} from '~/app/_components/Form/Fields/InternalLinkTextarea'
+import MdxEditorPreview from './MdxEditorPreview'
+
+function internalLinkSuggestions(params: {
+  posts?: RouterOutputs['blog']['list'],
+  projects?: RouterOutputs['projectv2']['listWithStack'],
+}): InternalLinkSuggestion[] {
+  const postLinks = params.posts?.map((post) => ({
+    label: post.title,
+    href: `/blog/${post.slug}`,
+    group: 'Blog',
+  })) ?? []
+
+  const projectLinks = params.projects?.map((project) => ({
+    label: project.title,
+    href: `/projects#${project.id}`,
+    group: 'Project',
+  })) ?? []
+
+  return [...postLinks, ...projectLinks]
+}
+
+const mdxAutocompleteSuggestions: MdeAutocompleteSuggestion[] = [
+  {
+    label: 'Lead',
+    value: `<Lead>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Lead>`,
+    detail: 'Intro paragraph with larger muted text.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Callout note',
+    value: `<Callout title="Heads up" variant="note">\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Callout>`,
+    detail: 'Highlighted note block.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Callout tip',
+    value: `<Callout title="Tip" variant="tip">\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Callout>`,
+    detail: 'Highlighted tip block.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Callout warning',
+    value: `<Callout title="Careful" variant="warning">\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Callout>`,
+    detail: 'Highlighted warning block.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'ButtonLink',
+    value: `<ButtonLink href="${AUTOCOMPLETE_CURSOR_MARKER}">\nView projects\n</ButtonLink>`,
+    detail: 'Button-styled internal or external link.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Figure',
+    value: `<Figure\n  src="${AUTOCOMPLETE_CURSOR_MARKER}"\n  alt="Describe the image"\n  caption="Optional caption"\n/>`,
+    detail: 'Image with optional caption.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'PullQuote',
+    value: `<PullQuote>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</PullQuote>`,
+    detail: 'Large emphasized quote.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'TagList',
+    value: `<TagList tags={[${AUTOCOMPLETE_CURSOR_MARKER}]} />`,
+    detail: 'Inline list of tag badges.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Badge',
+    value: `<Badge variant="outline">${AUTOCOMPLETE_CURSOR_MARKER}</Badge>`,
+    detail: 'Small inline label.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Image',
+    value: `![Image](${AUTOCOMPLETE_CURSOR_MARKER})`,
+    detail: 'Markdown image',
+    group: 'Markdown',
+    trigger: '!',
+  },
+]
+
+const mdxTriggerConfigs: AutocompleteTriggerConfig[] = [
+  {
+    trigger: '[[',
+    label: 'Internal links',
+    isQueryValid: (query) => !query.includes(']'),
+  },
+  {
+    trigger: '<',
+    label: 'MDX components',
+    isQueryValid: (query) => !/[\s>]/.test(query),
+  },
+  {
+    trigger: '!',
+    label: 'Markdown',
+    isQueryValid: (query) => !/[\s\)]/.test(query),
+  },
+]
+
+/**
+ * Shared props for an MDX-aware `MdeFormField`: internal-link + component
+ * autocomplete, trigger configs, and a live MDX preview. Used by every admin
+ * form that edits MDX content (blog, project, cv entry).
+ */
+export function useMdxEditorFieldProps() {
+  const posts = trpc.blog.list.useQuery(undefined, { refetchInterval: 5000 })
+  const projects = trpc.projectv2.listWithStack.useQuery()
+
+  const autocompleteSuggestions = [
+    ...linkSuggestionsToAutocomplete(internalLinkSuggestions({ posts: posts.data, projects: projects.data })),
+    ...mdxAutocompleteSuggestions,
+  ]
+
+  return {
+    autocompleteSuggestions,
+    triggerConfigs: mdxTriggerConfigs,
+    renderPreview: (source: string) => <MdxEditorPreview source={source} />,
+  }
+}
--- a/src/app/admin/blog/[slug]/page.tsx
+++ b/src/app/admin/blog/[slug]/page.tsx
@@ -0,0 +1,11 @@
+'use client'
+import { trpc } from '~/app/_trpc/Client'
+import { useParams } from 'next/navigation'
+import CreateUpdateBlogForm from '../_components/CreateUpdateForm'
+
+export default function Page() {
+  const { slug } = useParams<{ slug: string }>()
+  const { data } = trpc.blog.bySlug.useQuery(slug)
+  if (data) return <CreateUpdateBlogForm entity={data} />
+  return <></>
+}
--- a/src/app/admin/blog/_components/CreateUpdateForm.tsx
+++ b/src/app/admin/blog/_components/CreateUpdateForm.tsx
@@ -0,0 +1,113 @@
+'use client'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { trpc } from '~/app/_trpc/Client'
+import { FormScaffold } from '~/app/_components/Form/Components'
+import { FormMutationContextProvider } from '~/app/_components/Form/Components/MutationProvider'
+import { useState } from 'react'
+import { TextInputFormField, MdeFormField } from '~/app/_components/Form/Fields'
+import { usePathname, useRouter } from 'next/navigation'
+import { useTheme } from 'next-themes'
+import type { RouterOutputs } from '~/server/routers/_app'
+import MdxComponentReference from '~/app/admin/_components/MdxComponentReference'
+import { useMdxEditorFieldProps } from '~/app/admin/_components/useMdxEditorFieldProps'
+
+type BlogPost = RouterOutputs['blog']['bySlug']
+
+const blogPostSchema = z.object({
+  slug: z.string().min(1),
+  title: z.string().min(1),
+  date: z.string().optional(),
+  description: z.string().optional(),
+  tags: z.string().optional(),
+  content: z.string(),
+})
+
+function parseTags(value: string | undefined): string[] {
+  return value?.split(',').map((tag) => tag.trim()).filter(Boolean) ?? []
+}
+
+export default function CreateUpdateBlogForm(params: { className?: string, entity?: BlogPost }) {
+  const [slug, setSlug] = useState<string | undefined>(params.entity?.slug)
+  const [originalSlug, setOriginalSlug] = useState<string | undefined>(params.entity?.slug)
+  const { theme } = useTheme()
+  const form = useForm<z.infer<typeof blogPostSchema>>({
+    resolver: zodResolver(blogPostSchema),
+    defaultValues: {
+      slug: params.entity?.slug ?? '',
+      title: params.entity?.title ?? '',
+      date: params.entity?.date ?? '',
+      description: params.entity?.description ?? '',
+      tags: params.entity?.tags?.join(', ') ?? '',
+      content: params.entity?.content ?? '',
+    },
+  })
+  const path = usePathname()
+  const router = useRouter()
+  const mdxEditorProps = useMdxEditorFieldProps()
+
+  const createMutation = trpc.blog.insert.useMutation({
+    onSuccess: (data) => {
+      if (data[0]) {
+        setSlug(data[0].slug)
+        setOriginalSlug(data[0].slug)
+      }
+    },
+  })
+  const updateMutation = trpc.blog.update.useMutation({
+    onSuccess: (data) => {
+      if (data[0]) {
+        setSlug(data[0].slug)
+        setOriginalSlug(data[0].slug)
+      }
+    },
+  })
+  const deleteMutation = trpc.blog.delete.useMutation({
+    onSuccess: () => {
+      if (path.includes('list')) { router.refresh(); return }
+      router.back()
+    },
+  })
+
+  function onSubmit(values: z.infer<typeof blogPostSchema>) {
+    const input = { ...values, tags: parseTags(values.tags) }
+    if (slug && originalSlug) {
+      updateMutation.mutate({ ...input, originalSlug })
+    } else {
+      createMutation.mutate(input)
+    }
+  }
+
+  return (
+    <FormMutationContextProvider value={{
+      createMutation: createMutation,
+      updateMutation: updateMutation,
+      deleteMutation: deleteMutation,
+    }}>
+      <div className='flex flex-col gap-4'>
+        <MdxComponentReference />
+        <FormScaffold
+          form={form}
+          onSubmit={onSubmit}
+          title='Blog Post'
+          id={slug}
+          className={params.className}
+        >
+          <TextInputFormField control={form.control} name='slug' label='Slug' />
+          <TextInputFormField control={form.control} name='title' label='Title' />
+          <TextInputFormField control={form.control} name='date' label='Date (YYYY-MM-DD)' />
+          <TextInputFormField control={form.control} name='description' label='Description' />
+          <TextInputFormField control={form.control} name='tags' label='Tags (comma separated)' />
+          <MdeFormField
+            control={form.control}
+            name='content'
+            label='Content'
+            dataColorMode={(theme as 'dark' | 'light') ?? 'dark'}
+            {...mdxEditorProps}
+          />
+        </FormScaffold>
+      </div>
+    </FormMutationContextProvider>
+  )
+}
--- a/src/app/admin/blog/create/page.tsx
+++ b/src/app/admin/blog/create/page.tsx
@@ -0,0 +1,6 @@
+'use client'
+import CreateUpdateBlogForm from '../_components/CreateUpdateForm'
+
+export default function Page() {
+  return <CreateUpdateBlogForm />
+}
--- a/src/app/admin/blog/list/page.tsx
+++ b/src/app/admin/blog/list/page.tsx
@@ -0,0 +1,61 @@
+'use client'
+import Link from 'next/link'
+import { trpc } from '~/app/_trpc/Client'
+import * as Card from '~/components/ui/card'
+import { CollapsibleForm } from '~/app/_components/Form/Components'
+import CreateUpdateBlogForm from '../_components/CreateUpdateForm'
+import { Badge } from '~/components/ui/badge'
+import { Button } from '~/components/ui/button'
+import { RefreshCw } from 'lucide-react'
+
+export default function BlogListPage() {
+  const posts = trpc.blog.list.useQuery(undefined, { refetchInterval: 5000 })
+  const syncMutation = trpc.blog.syncFromUploadThing.useMutation({
+    onSuccess: () => posts.refetch(),
+  })
+
+  return (
+    <div className='w-5/6 lg:w-1/2 flex flex-col gap-3'>
+      <div className='flex justify-end'>
+        <Button
+          type='button'
+          variant='outline'
+          onClick={() => syncMutation.mutate(undefined)}
+          disabled={syncMutation.status === 'pending'}
+        >
+          <RefreshCw />
+          Sync
+        </Button>
+      </div>
+      {syncMutation.data && (
+        <p className='text-sm text-muted-foreground'>
+          Synced {syncMutation.data.created} created, {syncMutation.data.updated} updated, {syncMutation.data.skipped} skipped.
+        </p>
+      )}
+      {posts.data == undefined ?
+        <div className='gsapan' /> :
+        <>
+          {posts.data.map((post) => (
+            <Card.Card className='gsapan' key={post.slug}>
+              <Link href={`/admin/blog/${post.slug}`}>
+                <Card.CardHeader>
+                  <Card.CardTitle>{post.title}</Card.CardTitle>
+                  {post.date && <p className='text-sm text-muted-foreground'>{post.date}</p>}
+                  {post.description && <p className='text-sm text-muted-foreground'>{post.description}</p>}
+                  {post.tags && post.tags.length > 0 && (
+                    <div className='flex flex-wrap gap-1.5'>
+                      {post.tags.map((tag) => (
+                        <Badge key={tag} variant='outline'>{tag}</Badge>
+                      ))}
+                    </div>
+                  )}
+                </Card.CardHeader>
+              </Link>
+            </Card.Card>
+          ))}
+          <CollapsibleForm entityName='Blog Post' form={CreateUpdateBlogForm} />
+        </>
+      }
+    </div>
+  )
+}
--- a/src/app/admin/chat/_components/ModelSelector.tsx
+++ b/src/app/admin/chat/_components/ModelSelector.tsx
@@ -0,0 +1,48 @@
+'use client'
+import { trpc } from '~/app/_trpc/Client'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '~/components/ui/select'
+
+export default function ModelSelector({ initialValue }: { initialValue: string }) {
+	const utils = trpc.useUtils()
+	const { data: models, isLoading, error } = trpc.chat.listModels.useQuery()
+	const { data: model = initialValue } = trpc.chat.getModel.useQuery(undefined, {
+		initialData: initialValue,
+	})
+
+	const mutation = trpc.chat.updateModel.useMutation({
+		onSuccess: () => utils.chat.getModel.invalidate(),
+	})
+
+	// Ensure the currently-saved model is always selectable, even if the
+	// OpenAI list doesn't include it (e.g. a deprecated model).
+	const options = Array.from(new Set([model, ...(models ?? [])])).filter(Boolean)
+
+	return (
+		<div className="flex flex-col gap-2">
+			<Select value={model} onValueChange={(v) => mutation.mutate({ model: v })}>
+				<SelectTrigger className="w-72">
+					<SelectValue placeholder={isLoading ? 'Loading models…' : 'Select a model'} />
+				</SelectTrigger>
+				<SelectContent>
+					{options.map((id) => (
+						<SelectItem key={id} value={id}>
+							{id}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+			<div className="flex items-center gap-3 text-sm text-muted-foreground">
+				{mutation.isPending && <span>Saving…</span>}
+				{mutation.isSuccess && !mutation.isPending && <span>Saved</span>}
+				{error && <span className="text-destructive">Failed to load models: {error.message}</span>}
+				{mutation.error && <span className="text-destructive">{mutation.error.message}</span>}
+			</div>
+		</div>
+	)
+}
--- a/src/app/admin/chat/_components/SystemPromptForm.tsx
+++ b/src/app/admin/chat/_components/SystemPromptForm.tsx
@@ -0,0 +1,39 @@
+'use client'
+import { useState } from 'react'
+import { Textarea } from '~/components/ui/textarea'
+import { Button } from '~/components/ui/button'
+import { trpc } from '~/app/_trpc/Client'
+
+export default function SystemPromptForm({ initialValue }: { initialValue: string }) {
+	const [value, setValue] = useState(initialValue)
+	const [saved, setSaved] = useState(false)
+
+	const mutation = trpc.chat.updateSystemPrompt.useMutation({
+		onSuccess: () => setSaved(true),
+	})
+
+	function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+		e.preventDefault()
+		setSaved(false)
+		mutation.mutate({ prompt: value })
+	}
+
+	return (
+		<form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
+			<Textarea
+				value={value}
+				onChange={(e) => { setValue(e.target.value); setSaved(false) }}
+				rows={16}
+				className="font-mono text-sm resize-y"
+				placeholder="Enter the system prompt for the AI recruiter..."
+			/>
+			<div className="flex items-center gap-3">
+				<Button type="submit" disabled={mutation.isPending}>
+					{mutation.isPending ? 'Saving…' : 'Save'}
+				</Button>
+				{saved && <span className="text-sm text-muted-foreground">Saved</span>}
+				{mutation.error && <span className="text-sm text-destructive">{mutation.error.message}</span>}
+			</div>
+		</form>
+	)
+}
--- a/src/app/admin/chat/page.tsx
+++ b/src/app/admin/chat/page.tsx
@@ -0,0 +1,31 @@
+import { servTrpc } from '~/app/_trpc/ServerClient'
+import SystemPromptForm from './_components/SystemPromptForm'
+import ModelSelector from './_components/ModelSelector'
+
+export default async function SystemPromptPage() {
+	const prompt = await servTrpc.chat.getSystemPrompt()
+	const model = await servTrpc.chat.getModel()
+
+	return (
+		<div className="w-full max-w-2xl p-6 flex flex-col gap-8">
+			<div className="flex flex-col gap-4">
+				<div>
+					<h1 className="text-lg font-semibold">AI Model</h1>
+					<p className="text-sm text-muted-foreground">
+						The OpenAI model used to respond to chat requests.
+					</p>
+				</div>
+				<ModelSelector initialValue={model} />
+			</div>
+			<div className="flex flex-col gap-4">
+				<div>
+					<h1 className="text-lg font-semibold">AI System Prompt</h1>
+					<p className="text-sm text-muted-foreground">
+						This prompt is sent to the model on every chat request.
+					</p>
+				</div>
+				<SystemPromptForm initialValue={prompt} />
+			</div>
+		</div>
+	)
+}
--- a/src/app/admin/cv/category/_components/CreateUpdateForm.tsx
+++ b/src/app/admin/cv/category/_components/CreateUpdateForm.tsx
@@ -14,13 +14,13 @@ import { SelectItem } from '~/components/ui/select';
 import {FormMutationContextProvider} from '~/app/_components/Form/Components/MutationProvider';
 export default function CreateUpdateCvCategoryForm(params: { className?: string, entity?: IterableElement<RouterOutputs['category']['select']> }) {
  const schemas = entitySchemas('cvCategory')
-  const [id, setId] = useState<string | undefined>(params.entity ? params.entity.id : undefined)
+  const [id, setId] = useState<string | undefined>(params.entity?.id)
  const form = useForm<z.infer<typeof schemas.insert>>({
    resolver: zodResolver(schemas.insert),
    defaultValues: {
-      id: params.entity ? params.entity.id : crypto.randomUUID(),
-      name: params.entity ? params.entity.name : "",
-      layoutPosition: params.entity ? params.entity.layoutPosition : "col1"
+      id: params.entity?.id || crypto.randomUUID(),
+      name: params.entity?.name || "",
+      layoutPosition: params.entity?.layoutPosition || "col1"
    }
  })
  let path = usePathname()
--- a/src/app/admin/cv/category/list/page.tsx
+++ b/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>
+    </>
  )
 }
--- a/src/app/admin/cv/entry/_components/CreateUpdateForm.tsx
+++ b/src/app/admin/cv/entry/_components/CreateUpdateForm.tsx
@@ -14,6 +14,8 @@ import { useState } from 'react';
 import { SelectFormField, TextInputFormField, MdeFormField, CalenderFormField, BooleanFormField } from '~/app/_components/Form/Fields'
 import { usePathname, useRouter } from 'next/navigation';
 import {FormMutationContextProvider, type FormCreateMutationInterface} from '~/app/_components/Form/Components/MutationProvider';
+import MdxComponentReference from '~/app/admin/_components/MdxComponentReference';
+import { useMdxEditorFieldProps } from '~/app/admin/_components/useMdxEditorFieldProps';
 export default function CreateUpdateCvEntryForm(params: { className?: string, entity?: IterableElement<RouterOutputs['entry']['select']>, isUpdate?: boolean }) {
  const [id, setId] = useState<string | undefined>(params.entity ? params.entity.id : undefined)
  const { theme } = useTheme()
@@ -34,6 +36,7 @@ export default function CreateUpdateCvEntryForm(params: { className?: string, en
  })
  let path = usePathname()
  let router = useRouter()
+  const mdxEditorProps = useMdxEditorFieldProps()
  const createMutation = trpc.entry.insert.useMutation({ onSuccess: makeOnSuccess('create', form, setId) })
  const updateMutation = trpc.entry.update.useMutation({ onSuccess: makeOnSuccess('update', form) })
  const deleteMutation = trpc.entry.delete.useMutation({ onSuccess: makeOnSuccess('delete', form, undefined, path, router) })
@@ -51,6 +54,8 @@ export default function CreateUpdateCvEntryForm(params: { className?: string, en
      updateMutation:updateMutation,
      deleteMutation:deleteMutation
    }}>
+    <div className='flex flex-col gap-4'>
+    <MdxComponentReference />
    <FormScaffold
      form={form}
      onSubmit={onSubmit}
@@ -70,11 +75,12 @@ export default function CreateUpdateCvEntryForm(params: { className?: string, en
        }
      </SelectFormField>
      <TextInputFormField control={form.control} name='title' label='Title' />
-      <MdeFormField control={form.control} name='description' label='Description' dataColorMode={(theme as "dark" | "light") ? (theme as "dark" | "light") : "dark"} />
+      <MdeFormField control={form.control} name='description' label='Description' dataColorMode={(theme as "dark" | "light") ? (theme as "dark" | "light") : "dark"} {...mdxEditorProps} />
      <CalenderFormField control={form.control} name='fromTime' label='From Date' />
      <CalenderFormField control={form.control} name='toTime' label='To Date' />
      <BooleanFormField control={form.control} name='hideDates' label='Hide Dates' />
    </FormScaffold>
+    </div>
    </FormMutationContextProvider>
  )
 }
--- a/src/app/admin/cv/entry/list/page.tsx
+++ b/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>
+    </>
  )
 }
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -1,14 +1,22 @@
-'use server'
-
+import { redirect } from "next/navigation";
+import { isAdmin } from "~/app/actions";
+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 async function Admin({children}: Readonly<{children: React.ReactNode}>) {
+  if (!(await isAdmin())) redirect("/");
+
  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>
    </>
  )
 }
--- a/src/app/admin/music/_components/ConvertToStreamButton.tsx
+++ b/src/app/admin/music/_components/ConvertToStreamButton.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import { useState } from "react";
+import { AudioLines, Loader2, RefreshCw } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { trpc } from "~/app/_trpc/Client";
+import { useUploadThing } from "~/lib/uploadthing";
+import { transcodeToAac } from "~/lib/ffmpeg/transcode";
+import { toast } from "sonner";
+import type { RouterOutputs } from "~/server/routers/_app";
+import type { IterableElement } from "type-fest";
+
+export default function ConvertToStreamButton(props: {
+	track: IterableElement<RouterOutputs['music']['list']>;
+}) {
+	const { track } = props;
+	const utils = trpc.useUtils();
+	const [busy, setBusy] = useState(false);
+	const [stage, setStage] = useState("");
+	const [progress, setProgress] = useState(0);
+
+	const setStream = trpc.music.setStream.useMutation({
+		onSuccess: () => utils.music.list.invalidate(),
+	});
+
+	const { startUpload } = useUploadThing("musicUploader");
+
+	async function handleConvert() {
+		setBusy(true);
+		setProgress(0);
+		let currentStage = "Loading ffmpeg";
+		const goto = (s: string) => {
+			currentStage = s;
+			setStage(s);
+		};
+		try {
+			goto("Transcoding");
+			const file = await transcodeToAac({
+				sourceUrl: track.fileUrl,
+				outputName: `${track.title || "track"}.m4a`,
+				onProgress: setProgress,
+			});
+
+			goto("Uploading");
+			const uploaded = await startUpload([file]);
+			const res = uploaded?.[0];
+			if (!res) throw new Error("Upload returned no file");
+
+			goto("Saving");
+			await setStream.mutateAsync({
+				id: track.id,
+				streamUrl: res.serverData.fileUrl,
+				streamKey: res.serverData.fileKey,
+				streamName: res.serverData.fileName,
+			});
+			toast("Streaming version saved");
+		} catch (e) {
+			console.error("[ConvertToStream] failed during", currentStage, e);
+			const detail =
+				e instanceof Error
+					? e.message
+					: typeof e === "string"
+						? e
+						: (() => {
+								try {
+									return JSON.stringify(e);
+								} catch {
+									return String(e);
+								}
+							})();
+			toast(`Conversion failed (${currentStage}): ${detail || "see console for details"}`);
+		} finally {
+			setBusy(false);
+			setStage("");
+			setProgress(0);
+		}
+	}
+
+	return (
+		<div className="flex items-center gap-2">
+			<Button type="button" variant="outline" size="sm" disabled={busy} onClick={handleConvert}>
+				{busy ? (
+					<Loader2 className="animate-spin" />
+				) : track.streamUrl ? (
+					<RefreshCw />
+				) : (
+					<AudioLines />
+				)}
+				{busy
+					? `${stage}${stage === "Transcoding" && progress ? ` ${Math.round(progress * 100)}%` : "…"}`
+					: track.streamUrl
+						? "Re-generate stream"
+						: "Generate stream (AAC)"}
+			</Button>
+			{track.streamUrl && !busy && (
+				<span className="text-xs text-muted-foreground">Streaming version ready</span>
+			)}
+		</div>
+	);
+}
--- a/src/app/admin/music/_components/UploadMusicForm.tsx
+++ b/src/app/admin/music/_components/UploadMusicForm.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import { useState } from "react";
+import { trpc } from "~/app/_trpc/Client";
+import { UploadDropzone } from "~/lib/uploadthing";
+import { Label } from "~/components/ui/label";
+import { FormScaffold } from "~/app/_components/Form/Components";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { RouterOutputs } from "~/server/routers/_app";
+import type { IterableElement } from "type-fest";
+import { Toaster } from "~/components/ui/sonner";
+import { toast } from "sonner";
+import { FormMutationContextProvider } from "~/app/_components/Form/Components/MutationProvider";
+import { TextInputFormField } from "~/app/_components/Form/Fields";
+import { createMusicInputSchema } from "~/lib/trpc/music/schemas"; 
+export default function CreateUpdateMusicForm(props: {
+	entity?: IterableElement<RouterOutputs['music']['list']>,
+	className?: string
+}) {
+	const entity = props.entity;
+	const [id, setId] = useState<string | undefined>(entity?.id)
+	const utils = trpc.useUtils();
+	const form = useForm<z.infer<typeof createMusicInputSchema>>({
+		resolver: zodResolver(createMusicInputSchema),
+		defaultValues: {
+			id: entity?.id || crypto.randomUUID(),
+			title: entity?.title || "",
+			description: entity?.description || "",
+			fileUrl: entity?.fileUrl,
+			fileKey: entity?.fileKey,
+			fileName: entity?.fileName,
+		}
+	})
+
+	const createMutation = trpc.music.create.useMutation({
+		onSuccess: (values) => {
+			setId(values?.id);
+			utils.music.list.invalidate();
+		},
+		onError: (e) => {
+			toast(e.message)
+		}
+	})
+	const updateMutation = trpc.music.update.useMutation({
+		onSuccess: (_) => {
+			utils.music.list.invalidate();
+		},
+		onError: (e) => {
+			toast(e.message)
+		}
+	})
+	const deleteMutation = trpc.music.delete.useMutation({
+		onSuccess: (_) => {
+			utils.music.list.invalidate();
+		},
+		onError: (e) => {
+			toast(e.message)
+		}
+	})
+
+	function onSubmit(values: z.infer<typeof createMusicInputSchema>) {
+		id ?
+			updateMutation.mutate(values) :
+			createMutation.mutate(values)
+	}
+
+	return (
+		<>
+			<Toaster />
+			<FormMutationContextProvider value={{
+				createMutation: createMutation,
+				updateMutation: updateMutation,
+				deleteMutation: deleteMutation
+			}}>
+				<FormScaffold form={form} onSubmit={onSubmit} title='Music' id={id} className={props.className}>
+					<TextInputFormField control={form.control} name='title' label='Title'/>
+					<TextInputFormField control={form.control} name='description' label='Description'/>
+				<div className="flex flex-col gap-1.5">
+					<Label>Audio File</Label>
+						<UploadDropzone
+							endpoint="musicUploader"
+							config={{mode: 'auto'}}
+							onUploadError={(e) => {
+								toast(e.message)
+							}}
+							onClientUploadComplete={(res) => {
+								console.log(res)
+								if (res[0]) {
+									form.setValue('fileKey',res[0].serverData.fileKey);
+									form.setValue('fileName',res[0].serverData.fileName);
+									form.setValue('title',res[0].serverData.fileName);
+									form.setValue('description',res[0].serverData.fileName);
+									form.setValue('fileUrl',res[0].serverData.fileUrl);
+								}
+								console.log(form.getValues());
+							}}
+						/>
+				</div>
+				</FormScaffold>
+			</FormMutationContextProvider>
+		</>
+	);
+}
--- a/src/app/admin/music/page.tsx
+++ b/src/app/admin/music/page.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { trpc } from "~/app/_trpc/Client";
+import * as Card from "~/components/ui/card";
+import UploadMusicForm from "./_components/UploadMusicForm";
+import ConvertToStreamButton from "./_components/ConvertToStreamButton";
+import { CollapsibleForm } from "~/app/_components/Form/Components";
+import { useEffect } from "react";
+
+export default function AdminMusicPage() {
+	const { data: tracks } = trpc.music.list.useQuery();
+	useEffect(() => {console.log(tracks)}, [tracks])
+	return (
+		<div className="w-5/6 lg:w-1/2 flex flex-col gap-3">
+			{tracks && <>
+				{tracks.map((t) => (
+					<Card.Card key={t.id}>
+						<Card.CardContent className="flex flex-col gap-4">
+							<UploadMusicForm entity={t} className="w-full"/>
+							<ConvertToStreamButton track={t} />
+						</Card.CardContent>
+					</Card.Card>
+				))}
+			</>}
+			<CollapsibleForm entityName="Track" form={UploadMusicForm}/>
+		</div>
+	);
+}
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,15 +1,9 @@
-'use server'
-
-import { Show } from "@clerk/nextjs";
-
 export default async function AdminPage() {
  return (
-    <Show when="signed-in">
-  		<main className="flex min-h-screen flex-col items-center justify-center">
-  			<div>
-  				hello admin
-  			</div>
-  		</main>
-  	</Show>
+		<main className="flex min-h-screen flex-col items-center justify-center">
+			<div>
+				hello admin
+			</div>
+		</main>
  )
 }
--- a/src/app/admin/project/_components/CreateUpdateProjectForm.tsx
+++ b/src/app/admin/project/_components/CreateUpdateProjectForm.tsx
@@ -8,12 +8,14 @@ import type { IterableElement } from 'type-fest'
 import { entitySchemas, makeOnSuccess } from "~/lib/utils";
 import { useEffect, useState } from "react";
 import type { RouterOutputs } from '~/server/routers/_app';
-import { SelectFormField, TextInputFormField, MdeFormField } from '~/app/_components/Form/Fields'
+import { SelectFormField, TextInputFormField, MdeFormField, IntInputFormField } from '~/app/_components/Form/Fields'
 import { FormScaffold } from '~/app/_components/Form/Components';
 import { usePathname, useRouter } from 'next/navigation';
 import { useTheme } from 'next-themes';
 import { makeUseRelationShipWithNameIndex } from '~/lib/hooks';
 import { FormMutationContextProvider } from '~/app/_components/Form/Components/MutationProvider';
+import MdxComponentReference from '~/app/admin/_components/MdxComponentReference';
+import { useMdxEditorFieldProps } from '~/app/admin/_components/useMdxEditorFieldProps';
 export default function CreateUpdateProjectForm(params: { className?: string, entity?: IterableElement<RouterOutputs['project']['select']> }) {
  const [id, setId] = useState<string | undefined>(params.entity ? params.entity.id : undefined)
  const { theme } = useTheme()
@@ -29,11 +31,13 @@ export default function CreateUpdateProjectForm(params: { className?: string, en
      releaseStatus: params.entity ? params.entity.releaseStatus : "unreleased",
      releaseLink: params.entity ? params.entity.releaseLink : "",
      sourceType: params.entity ? params.entity.sourceType : "open",
-      sourceLink: params.entity ? params.entity.sourceLink : ""
+      sourceLink: params.entity ? params.entity.sourceLink : "",
+      orderPos: params.entity ? params.entity.orderPos : 0
    }
  })
  let path = usePathname()
  let router = useRouter()
+  const mdxEditorProps = useMdxEditorFieldProps()
  const createMutation = trpc.project.insert.useMutation({ onSuccess: makeOnSuccess('create', form, setId) })
  const updateMutation = trpc.project.update.useMutation({ onSuccess: makeOnSuccess('update', form) })
  const deleteMutation = trpc.project.delete.useMutation({ onSuccess: makeOnSuccess('delete', form, undefined, path, router) })
@@ -49,6 +53,8 @@ export default function CreateUpdateProjectForm(params: { className?: string, en
        updateMutation: updateMutation,
        deleteMutation: deleteMutation
      }}>
+      <div className='flex flex-col gap-4'>
+      <MdxComponentReference />
      <FormScaffold
        form={form}
        onSubmit={onSubmit}
@@ -68,7 +74,7 @@ export default function CreateUpdateProjectForm(params: { className?: string, en
          }
        </SelectFormField>
        <TextInputFormField control={form.control} name='title' label='Title' />
-        <MdeFormField control={form.control} name='description' label='Description' dataColorMode={(theme as "dark" | "light") ?? "dark"} />
+        <MdeFormField control={form.control} name='description' label='Description' dataColorMode={(theme as "dark" | "light") ?? "dark"} {...mdxEditorProps} />
        <SelectFormField control={form.control} name='sourceType' label='Source Type' defaultValue={'open'} placeholder='open'  >
          <SelectItem value="open"> open </SelectItem>
          <SelectItem value="closed"> closed </SelectItem>
@@ -79,7 +85,9 @@ export default function CreateUpdateProjectForm(params: { className?: string, en
          <SelectItem value="unreleased"> unreleased </SelectItem>
        </SelectFormField>
        <TextInputFormField control={form.control} label='Release Link' name='releaseLink' />
+        <IntInputFormField control={form.control} label='Order Position' name='orderPos'/>
      </FormScaffold>
+      </div>
    </FormMutationContextProvider>
  )
 }
--- a/src/app/admin/project/list/page.tsx
+++ b/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>
+      </>
  )
 }
--- a/src/app/admin/project/techStack/_components/CreateUpdateForm.tsx
+++ b/src/app/admin/project/techStack/_components/CreateUpdateForm.tsx
@@ -46,7 +46,7 @@ export default function CreateUpdateStackForm(params: { className?: string, enti
          id={id}
          className={params.className}
        >
-          <MultiBooleanFormField control={form.control} name='stackItems' label='Stack Items' options={stackItemEnum.enumValues} defaultValues={params.entity?.stackItems ?? [""]} />
+          <MultiBooleanFormField control={form.control} name='stackItems' label='Stack Items' options={stackItemEnum.enumValues} defaultValues={params.entity?.stackItems ?? []} />
        </FormScaffold>
      </FormMutationContextProvider>
    </>
--- a/src/app/api/chat/route.ts
+++ b/src/app/api/chat/route.ts
@@ -0,0 +1,80 @@
+import { auth } from '@clerk/nextjs/server'
+import { createOpenAI } from '@ai-sdk/openai'
+import { streamText, convertToModelMessages, stepCountIs, type UIMessage } from 'ai'
+import { eq, and } from 'drizzle-orm'
+import { env } from '~/env'
+import { db } from '~/server/db'
+import { chatSession, chatMessage } from '~/server/dbschema/schema'
+import { servTrpc } from '~/app/_trpc/ServerClient'
+import { createChatTools } from '~/server/ai/tools'
+
+const openai = createOpenAI({ apiKey: env.OPENAI_API_KEY })
+
+export async function POST(req: Request) {
+	const { userId } = await auth()
+	if (userId == null) return new Response('Unauthorized', { status: 401 })
+
+	const { messages, sessionId } = (await req.json()) as {
+		messages: UIMessage[]
+		sessionId: string
+	}
+
+	// Verify this session belongs to the authenticated user
+	const session = await db
+		.select()
+		.from(chatSession)
+		.where(and(eq(chatSession.id, sessionId), eq(chatSession.userId, userId)))
+		.limit(1)
+		.then((r) => r[0])
+
+	if (!session) return new Response('Session not found', { status: 404 })
+
+	const configuredSystemPrompt = await servTrpc.chat.getSystemPrompt() || 'You are an AI recruiter assistant.'
+	const systemPrompt = `${configuredSystemPrompt}
+
+Runtime context:
+- Current server time: ${new Date().toISOString()}.
+- Default meeting timezone: Europe/Berlin.
+- For availability questions like "next open spot", call getAvailability once. It defaults to checking from now. Use nextAvailableSlot for the next opening, or the first item in availableSlots if needed. Do not call getAvailability again just to get more slots.
+- After scheduleMeeting succeeds, include only the returned addToCalendarLink for the visitor. Format it as a Markdown link like [Add this meeting to your Google Calendar](URL); do not paste the raw URL. Explain briefly that this link lets them add the meeting to their own calendar and invite Gregor. Do not mention internal Google Calendar event links.
+- You can remove meetings from Gregor's availability calendar with cancelMeeting only when you have the exact eventId from a previous scheduleMeeting result. If a visitor asks to reschedule and you have both the old eventId and a confirmed new slot, call cancelMeeting once for the old event and scheduleMeeting once for the new event. If you do not have the old eventId, ask for clarification instead of guessing.
+- When rescheduling, make clear that cancelMeeting only removes the old slot from Gregor's availability calendar. If the visitor already added the old link to their own calendar, they may need to remove that copy themselves.
+- Do not calculate or invent calendar availability yourself.`
+	const model = await servTrpc.chat.getModel()
+
+	// Save the latest user message
+	const lastMessage = messages[messages.length - 1]
+	if (lastMessage?.role === 'user') {
+		const content = lastMessage.parts
+			.filter((p): p is { type: 'text'; text: string } => p.type === 'text')
+			.map((p) => p.text)
+			.join('')
+		if (content) {
+			await db.insert(chatMessage).values({ sessionId, role: 'user', content })
+		}
+	}
+
+	const result = streamText({
+		model: openai(model),
+		system: systemPrompt,
+		messages: await convertToModelMessages(messages),
+		tools: createChatTools(),
+		stopWhen: stepCountIs(3),
+		onFinish: async ({ text, finishReason }) => {
+			console.log('[ai:chat:onFinish]', {
+				finishReason,
+				hasText: Boolean(text),
+				textLength: text.length,
+			})
+			if (text && finishReason === 'stop') {
+				await db.insert(chatMessage).values({
+					sessionId,
+					role: 'assistant',
+					content: text,
+				})
+			}
+		},
+	})
+
+	return result.toUIMessageStreamResponse()
+}
--- a/src/app/api/uploadthing/route.ts
+++ b/src/app/api/uploadthing/route.ts
@@ -0,0 +1,6 @@
+import { createRouteHandler } from "uploadthing/next";
+import { fileRouter } from "~/server/uploadthing";
+
+export const { GET, POST } = createRouteHandler({
+	router: fileRouter,
+});
--- a/src/app/assistant/page.tsx
+++ b/src/app/assistant/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function AssistantPage() {
+	redirect('/chat')
+}
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -0,0 +1,60 @@
+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";
+
+type Props = {
+  params: Promise<{ slug: string }>;
+};
+
+export default async function BlogPostPage({ params }: Props) {
+  const { slug } = await params;
+
+  let post: Awaited<ReturnType<typeof servTrpc.blog.metadataBySlug>>;
+  try {
+    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">{title}</h1>
+        {date && (
+          <time className="text-muted-foreground text-sm">
+            {new Date(date).toLocaleDateString("en-US", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            })}
+          </time>
+        )}
+        {tags.length > 0 && (
+          <div className="mt-3 flex flex-wrap gap-1.5">
+            {tags.map((tag) => (
+              <Badge key={tag} variant="outline">{tag}</Badge>
+            ))}
+          </div>
+        )}
+      </header>
+      <article className="prose dark:prose-invert max-w-none">
+        <MDXRemote source={parsed.content} components={mdxComponents} />
+      </article>
+    </main>
+  );
+}
--- a/src/app/blog/layout.tsx
+++ b/src/app/blog/layout.tsx
@@ -1,10 +1,3 @@
-'use client'
-export default function RootLayout({
-  children,
-}: Readonly<{ children: React.ReactNode}>) {
-  return (
-    <>
-      {children}
-    </>
-  )
+export default function BlogLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
 }
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,12 +1,45 @@
-'use client'
+import Link from "next/link";
+import { servTrpc } from "~/app/_trpc/ServerClient";
+import { Badge } from "~/components/ui/badge";

-import { usePathname } from "next/navigation"
+export default async function BlogPage() {
+  const posts = await servTrpc.blog.list();

-export default function Page() {
-  const pathName = usePathname()
  return (
-    <div>
-      {pathName}
-    </div>
-  )
+    <main className="mx-auto max-w-2xl px-4 py-12">
+      <h1 className="mb-8 text-3xl font-bold">Blog</h1>
+      {posts.length === 0 ? (
+        <p className="text-muted-foreground">No posts yet.</p>
+      ) : (
+        <ul className="space-y-6">
+          {posts.map((post) => (
+            <li key={post.slug}>
+              <Link href={`/blog/${post.slug}`} className="group block">
+                <h2 className="text-xl font-semibold group-hover:underline">{post.title}</h2>
+                {post.date && (
+                  <time className="text-muted-foreground text-sm">
+                    {new Date(post.date).toLocaleDateString("en-US", {
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric",
+                    })}
+                  </time>
+                )}
+                {post.description && (
+                  <p className="text-muted-foreground mt-1">{post.description}</p>
+                )}
+                {post.tags && post.tags.length > 0 && (
+                  <div className="mt-2 flex flex-wrap gap-1.5">
+                    {post.tags.map((tag) => (
+                      <Badge key={tag} variant="outline">{tag}</Badge>
+                    ))}
+                  </div>
+                )}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
 }
--- a/src/app/chat/_components/AssistantMessage.tsx
+++ b/src/app/chat/_components/AssistantMessage.tsx
@@ -0,0 +1,119 @@
+import type { UIMessage } from "ai";
+import { ClientMdx } from "~/components/ClientMdx";
+
+function toolLabel(type: string) {
+	switch (type) {
+		case "tool-searchSiteContent":
+			return "Searching site content";
+		case "tool-getRelevantExperience":
+			return "Finding relevant experience";
+		case "tool-getProjectDetails":
+			return "Loading project details";
+		case "tool-getAvailability":
+			return "Checking availability";
+		case "tool-cancelMeeting":
+			return "Removing meeting";
+		case "tool-getCurrentUnixTime":
+			return "Checking current time";
+		default:
+			return "Using tool";
+	}
+}
+
+export const AssistantMessage = (props: { message: UIMessage }) => {
+  let message = props.message;
+  return (
+    <div
+      key={message.id}
+      className='flex justify-start'
+    >
+      <div
+        className=
+        'max-w-[80%] min-w-0 px-4 py-2 text-sm space-y-2 bg-muted break-words [overflow-wrap:anywhere] [&_a]:break-all [&_pre]:max-w-full [&_pre]:overflow-x-auto'
+      >
+        {message.parts.map((part, i) => {
+          if (part.type === 'text') {
+            return (
+              <ClientMdx key={i} source={part.text} fallback={part.text} />
+            )
+          }
+	          if (part.type === 'tool-scheduleMeeting') {
+	            const toolPart = part as unknown as {
+	              type: 'tool-scheduleMeeting'
+	              state: string
+	              input: unknown
+	              output?: { success: boolean; error?: string }
+	            }
+            if (toolPart.state === 'input-available' || toolPart.state === 'input-streaming') {
+              return (
+                <p key={i} className="text-xs opacity-70 italic">
+                  Scheduling meeting…
+                </p>
+              )
+	            }
+	            if (toolPart.state === 'output-available' && toolPart.output) {
+	              const result = toolPart.output
+	              if (result.success) return null
+	              return (
+	                <div key={i} className="text-xs mt-1 p-2 bg-background/20 rounded">
+	                  <span>✗ {result.error}</span>
+                </div>
+	              )
+	            }
+	          }
+	          if (part.type === 'tool-cancelMeeting') {
+	            const toolPart = part as unknown as {
+	              type: 'tool-cancelMeeting'
+	              state: string
+	              output?: { success: boolean; error?: string }
+	            }
+	            if (toolPart.state === 'input-available' || toolPart.state === 'input-streaming') {
+	              return (
+	                <p key={i} className="text-xs opacity-70 italic">
+	                  Removing meeting…
+	                </p>
+	              )
+	            }
+	            if (toolPart.state === 'output-available' && toolPart.output) {
+	              if (toolPart.output.success) return null
+	              return (
+	                <div key={i} className="text-xs mt-1 p-2 bg-background/20 rounded">
+	                  <span>✗ {toolPart.output.error}</span>
+	                </div>
+	              )
+	            }
+	          }
+	          if (part.type.startsWith('tool-')) {
+	            const toolPart = part as unknown as {
+	              type: string
+	              state: string
+	              output?: { success?: boolean; results?: unknown[]; matches?: unknown[]; availableSlots?: unknown[]; project?: unknown; error?: string }
+	            }
+	            if (toolPart.state === 'input-available' || toolPart.state === 'input-streaming') {
+	              return (
+	                <p key={i} className="text-xs opacity-70 italic">
+	                  {toolLabel(toolPart.type)}...
+	                </p>
+	              )
+	            }
+	            if (toolPart.state === 'output-available') {
+	              const count = toolPart.output?.results?.length
+	                ?? toolPart.output?.matches?.length
+	                ?? toolPart.output?.availableSlots?.length
+	              return (
+	                <p key={i} className="text-xs opacity-70 italic">
+	                  {toolPart.output?.success === false
+	                    ? (toolPart.output.error ?? `${toolLabel(toolPart.type)} failed`)
+	                    : count != null
+	                      ? `${toolLabel(toolPart.type)} complete (${count})`
+	                      : `${toolLabel(toolPart.type)} complete`}
+	                </p>
+	              )
+	            }
+	          }
+	          return null
+	        })}
+      </div>
+    </div>
+  )
+}
--- a/src/app/chat/_components/ChatInterface.tsx
+++ b/src/app/chat/_components/ChatInterface.tsx
@@ -0,0 +1,173 @@
+'use client'
+import { useState, useEffect, useRef } from 'react'
+import { useChat } from '@ai-sdk/react'
+import { DefaultChatTransport, type UIMessage } from 'ai'
+import { Button } from '~/components/ui/button'
+import { Textarea } from '~/components/ui/textarea'
+import { SignInButton } from '@clerk/nextjs'
+import {
+	useGsapContext,
+} from '~/app/_providers/GsapProvicer';
+import Messages from './Messages'
+import { DeleteIcon } from 'lucide-react';
+import { Spinner } from '~/components/ui/spinner';
+import { useMessages } from '~/app/_providers/MessagesProvider';
+interface DBMessage {
+	id: string
+	role: 'user' | 'assistant'
+	content: string
+}
+
+interface ChatInterfaceProps {
+	sessionId?: string,
+	dbMessages: DBMessage[],
+}
+
+function SignInChatPrompt() {
+	return (
+		<div className="flex h-full w-full flex-col items-center justify-center gap-4 text-center">
+			<div className="space-y-2">
+				<h2 className="text-xl font-semibold">Sign in to use the chat</h2>
+				<p className="text-sm text-muted-foreground">
+					You need to be signed in before you can talk to Gregor's AI assistant.
+				</p>
+			</div>
+			<SignInButton mode="modal">
+				<Button type="button">Sign in</Button>
+			</SignInButton>
+		</div>
+	)
+}
+
+function toUIMessages(dbMessages: DBMessage[]): UIMessage[] {
+	return dbMessages.map((m) => ({
+		id: m.id,
+		role: m.role,
+		parts: [{ type: 'text' as const, text: m.content }],
+	}))
+}
+
+function addInitMessage(messageArray: UIMessage[]) {
+	if (messageArray.at(0)?.id != 'init') {
+		messageArray.unshift({
+			id: "init",
+			role: 'assistant',
+			parts: [{
+				type: 'text',
+				text: "Hi, I'm Gregor's AI assistant. Ask me about his experience, projects, blog posts, or availability for a meeting."
+			}],
+		})
+	}
+}
+
+function AuthenticatedChatInterface({ dbMessages, sessionId }: ChatInterfaceProps & { sessionId: string }) {
+	const [input, setInput] = useState('')
+	const {  clearingChat, clearChat, refetchMessages } = useMessages();
+	const initialMessages = toUIMessages(dbMessages)
+	addInitMessage(initialMessages)
+	const { messages, sendMessage, status, error, clearError, setMessages } = useChat({
+		transport: new DefaultChatTransport({
+			api: '/api/chat', body: { sessionId },
+		}),
+		messages: initialMessages,
+	})
+	useEffect(() => {
+		return () => {
+			refetchMessages()
+		}
+	}, [])
+	const handleSend = () => {
+		const text = input.trim()
+		if (!text || status != 'ready' || clearingChat) return
+		setInput('')
+		sendMessage({ text })
+	}
+	const gsapContext = useGsapContext()
+	const didInitialScroll = useRef(false)
+	useEffect(() => {
+		const scroller = gsapContext?.getScroller()
+		if (!scroller || scroller instanceof Window) {
+			return
+		}
+		// Jump instantly on first open so the chat starts pinned to the bottom;
+		// animate subsequent updates. Defer a frame so the messages have laid out
+		// (and any streaming content has grown) before we measure scrollHeight.
+		const behavior: ScrollBehavior = didInitialScroll.current ? 'smooth' : 'auto'
+		didInitialScroll.current = true
+		requestAnimationFrame(() => {
+			scroller.scrollTo({ behavior, top: scroller.scrollHeight })
+		})
+	}, [messages, status])
+	return (
+		<div className="flex flex-col h-full">
+			{messages &&
+				<Messages status={status} messages={messages} />
+			}
+			{error && (
+				<div className="mx-4 mb-2 flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					<span className="flex-1">
+						{error.message.includes('quota') || error.message.includes('429')
+							? 'OpenAI quota exceeded. Please try again later.'
+							: `Error: ${error.message}`}
+					</span>
+					<Button
+						type="button"
+						onClick={clearError}
+						className="shrink-0 opacity-60 hover:opacity-100"
+						variant='destructive'
+					>
+						<DeleteIcon />
+					</Button>
+				</div>
+			)}
+
+			<div className="p-4 border-t flex flex-row gap-2 shrink-0">
+				<Textarea
+					name='message'
+					value={input}
+					onChange={(e) => setInput(e.target.value)}
+					placeholder="Ask about Gregor's experience or schedule a meeting…"
+					className="resize-none"
+					rows={2}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter' && !e.shiftKey) {
+							e.preventDefault()
+							handleSend()
+						}
+					}}
+				/>
+				<div className='flex flex-col gap-2'>
+					<Button
+						onClick={handleSend}
+						disabled={status != "ready" || !input.trim()}
+					>
+						Send
+					</Button>
+					<Button
+						variant='destructive'
+						onClick={() => {
+							clearChat(() => {
+								let messages: UIMessage[] = [];
+								addInitMessage(messages);
+								setMessages(messages)
+							})
+						}}
+						disabled={status != "ready" || clearingChat}
+					>
+						{clearingChat ?
+							<Spinner /> :
+							"Clear Chat"
+						}
+					</Button>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default function ChatInterface({ dbMessages, sessionId }: ChatInterfaceProps) {
+	if (sessionId == undefined) {
+		return <SignInChatPrompt />
+	}
+	return <AuthenticatedChatInterface sessionId={sessionId} dbMessages={dbMessages} />
+}
--- a/src/app/chat/_components/Messages.tsx
+++ b/src/app/chat/_components/Messages.tsx
@@ -0,0 +1,36 @@
+import { type ChatStatus, type UIMessage } from 'ai'
+import * as Card from "~/components/ui/card"
+import { UserMessage } from './UserMessage';
+import { AssistantMessage } from './AssistantMessage';
+import { ScrollArea } from '~/components/ui/scroll-area';
+import { memo } from 'react';
+const Messages = memo(({messages,status}: { messages: UIMessage[],status:ChatStatus}) => {
+  return (
+    <ScrollArea data-scroller-priority='1' className="w-full flex-1 min-h-0 max-w-4xl mx-auto">
+      {messages.map((message, i) => (
+        <Card.AnimatedCard scrollOnly={true} key={i}>
+          <Card.CardContent>
+            {message.role == 'assistant' && <AssistantMessage message={message} />}
+            {message.role == 'user' && <UserMessage message={message} />}
+          </Card.CardContent>
+        </Card.AnimatedCard>
+      ))}
+      {status == 'submitted' &&
+        <Card.AnimatedCard scrollOnly={true}>
+          <Card.CardContent>
+            <AssistantMessage message={{
+              id:"",
+              role:"assistant",
+              parts:[{
+                type:'text',
+                text:'Thinking ...'
+              }]
+            }}/>
+          </Card.CardContent>
+        </Card.AnimatedCard>
+
+      }
+    </ScrollArea>)
+})
+
+export default Messages;
--- a/src/app/chat/_components/UserMessage.tsx
+++ b/src/app/chat/_components/UserMessage.tsx
@@ -0,0 +1,23 @@
+import type { UIMessage } from "ai"
+
+export const UserMessage = (props:{message: UIMessage}) => {
+  let message = props.message.parts.reduce((acc, part) => {
+    if (part.type == 'text') {
+      return acc + part.text
+    }
+    return acc
+  },"");
+  return (
+    <div
+      key={props.message.id}
+      className='flex justify-end'
+    >
+      <div
+        className=
+        'max-w-[80%] min-w-0 px-4 py-2 text-sm space-y-2 bg-primary break-words whitespace-pre-wrap [overflow-wrap:anywhere]'
+      >
+      {message}
+      </div>
+    </div>
+  )
+}
--- a/src/app/chat/page.tsx
+++ b/src/app/chat/page.tsx
@@ -0,0 +1,29 @@
+'use client'
+import ChatInterface from './_components/ChatInterface'
+import AnimatedPageTitle from '../_components/Animated/AnimatedPageTitle';
+import { useTimeLine } from '../_providers/GsapProvicer';
+import { useMessages } from '../_providers/MessagesProvider';
+import { Spinner } from '~/components/ui/spinner';
+
+export default function ChatPage() {
+	const {messages,session,isLoading,error} = useMessages()
+	useTimeLine(messages)
+	return (
+		<div className="flex flex-col px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10 pb-4">
+					<AnimatedPageTitle position={0}>
+						<span>Talk To My </span> <span> AI-Assistant</span>
+					</AnimatedPageTitle>
+					<div className='flex flex-1 min-h-0 w-full'>
+					{!isLoading &&
+					<ChatInterface sessionId={session?.id} dbMessages={messages ?? []}/>
+					}
+					{isLoading &&
+						<><Spinner/> Loading Messages...</>
+					}
+					{error &&
+						<div> {error} </div>
+					}
+					</div>
+		</div>
+	)
+}
--- a/src/app/cv/_components/CvCategory.tsx
+++ b/src/app/cv/_components/CvCategory.tsx
@@ -1,35 +1,43 @@
-'use client'
-import { trpc } from "~/app/_trpc/Client"
+import type { ReactNode } from "react"
 import CvEntry from "./CvEntry"
-import type { servTrpc } from "~/app/_trpc/ServerClient"
-import type { inferProcedureOutput } from "@trpc/server"
 import type { RouterOutputs } from "~/server/routers/_app"
-import { cn } from "~/lib/utils" 
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
+import { cn } from "~/lib/utils"
+import { AnimatedCard, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 import type { ArrayElement } from "type-fest"
+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",
-  children?: React.ReactElement<Parameters<typeof CvEntry>>
+  category: CvCategoryData,
+  layout: "row" | "col",
+  position?: number,
+  descriptions: Record<string, ReactNode>,
 }
-export default function CvCategory(props:CvCategoryProps)  {
-  const category = trpc.categoryv2.getById.useQuery(props.initialData? props.initialData.id : "");
-		return (
-			<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan")}>
-				<CardHeader>
-					<CardTitle>
-						{category.data?.name}
-					</CardTitle>
-				</CardHeader>
-				{(category.data?.cvEntry.length ? category.data?.cvEntry.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")}>
-						{category.data?.cvEntry.map((entry) => (
-							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined} key={entry.id} initialData={entry}/>
-						))}
-					</CardContent>
-					:
-					<></>
-				} 
-			</Card>
-		) 
+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>
+  )
 }
--- a/src/app/cv/_components/CvEntry.tsx
+++ b/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">
-										<div>
-											<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
-										</div>
-									</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>
 	)
 }
--- a/src/app/cv/_components/Page.tsx
+++ b/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>
+    </>
+  )
+}
--- a/src/app/cv/page.tsx
+++ b/src/app/cv/page.tsx
@@ -1,97 +1,42 @@
-'use client'
-import { useGSAP } from "@gsap/react";
-import { useGsapContext } from "../_providers/GsapProvicer";
-import { trpc } from "../_trpc/Client";
-import { useRef } from "react";
-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");
-  const gsap = useGsapContext()
-  const container = useRef<HTMLDivElement>(null)
-  enum Direction {
-    Left = 1,
-    Up,
-    Right,
-    Down
-  }
-  const nextGsapConf = (direction: Direction) => {
-    switch (direction) {
-      case Direction.Left:
-        return { x: -100, opacity: 0, duration: 0.5 }
-      case Direction.Up:
-        return { y: -100, opacity: 0, duration: 0.5 }
-      case Direction.Right:
-        return { x: 100, opacity: 0, duration: 0.5 }
-      case Direction.Down:
-        return { y: 100, opacity: 0, duration: 0.5 }
+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],
+            },
+          }}
+        />
+      );
    }
  }
-  useGSAP(() => {
-    const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
-    const tl = gsap?.timeline();
-    let dir = Direction.Left;
-    items?.forEach(item => {
-      tl?.from(item, nextGsapConf(dir))
-      if (dir == Direction.Down) {
-        dir = Direction.Left
-      } else {
-        dir = dir + 1
-      }
-    })
-  }, { scope: container, dependencies: [headerCategories.data, sidebarCategories.data], revertOnUpdate: true })
+
  return (
-    <>
-      <SidebarProvider ref={container}>
-        {(sidebarCategories.data?.length ? sidebarCategories.data?.length : 0) > 0 ?
-          <>
-            <SidebarTriggerDisappearsOnMobile />
-            <Sidebar className="gsapan ">
-              <SidebarContent className="p-2 lg:pt-[3.2rem]">
-                {sidebarCategories.data?.map((cat) => {
-                  if (cat !== undefined) {
-                    return (
-                      <CvCategory layout="col" 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) => {
-                return (
-                  <CvCategory layout="row" 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) => {
-                  return (
-                    <CvCategory layout="col" 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) => {
-                  return (
-                    <CvCategory layout="col" initialData={cat} key={cat.id} />
-                  )
-                })}
-              </div>
-            </div>
-          </div>
-        </div>
-      </SidebarProvider>
-    </>
+    <Suspense>
+      <Page cv={cv} descriptions={descriptions} />
+    </Suspense>
  )
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,14 +5,18 @@ import { ClerkProvider } from "@clerk/nextjs";
 import { config } from "@fortawesome/fontawesome-svg-core"
 import "@fortawesome/fontawesome-svg-core/styles.css"
 import TopNav from "./_components/TopNav";
+import ChatFAB from "./_components/ChatFAB";
 import TrpcProvider from "./_trpc/TrpcProvider";
 // import dynamic from "next/dynamic";
 // const ThemeProvider = dynamic(() => import("./_providers/ThemeProvider"),{ssr:true})
 import ThemeProvider from './_providers/ThemeProvider'
 import GsapProvider from "./_providers/GsapProvicer";
+import {MessagesProvider} from "./_providers/MessagesProvider";
+import { MusicPlayerProvider } from "./music/_components/MusicPlayerProvider";
 import { CodeHighlightStyle } from "./_components/CodeHighlightSyle";
 import { cn } from "~/lib/utils";
-
+import AnimatedBackGroundContainer from "./_components/Animated/AnimatedBackGroundContainer";
+import  {SpeedInsights} from "@vercel/speed-insights/next"
 const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });


@@ -28,13 +32,14 @@ const geist = Geist({
 	variable: "--font-geist-sans",
 });

-
 export default async function RootLayout({
 	children,
 	modal
 }: Readonly<{ children: React.ReactNode, modal: React.ReactNode }>) {

 	return (
+		<>
+		<SpeedInsights/>
 		<ClerkProvider>
 			<TrpcProvider>
 				<GsapProvider>
@@ -44,16 +49,24 @@ export default async function RootLayout({
 						</head>
 						<body className="flex flex-col bg-background text-foreground">
 							<ThemeProvider>
-								<TopNav />
-								<main className="absolute lg:top-10 h-screen w-screen">
-									{children}
-								</main>
-								{modal}
+							<MessagesProvider>
+								<MusicPlayerProvider>
+								<AnimatedBackGroundContainer followSpeed={0.003} particleCount={100} orbitRadius={2000}>
+									<TopNav />
+									<main className="absolute lg:top-10 h-[100dvh] lg:h-[calc(100vh-var(--spacing)*10)] w-screen">
+										{children}
+									</main>
+									{modal}
+								</AnimatedBackGroundContainer>
+								<ChatFAB />
+								</MusicPlayerProvider>
+								</MessagesProvider>
 							</ThemeProvider>
 						</body>
 					</html>
 				</GsapProvider>
 			</TrpcProvider>
 		</ClerkProvider>
+		</>
 	);
 }
--- a/src/app/music/_components/AudioPlayer.tsx
+++ b/src/app/music/_components/AudioPlayer.tsx
@@ -0,0 +1,190 @@
+'use client'
+
+import { useEffect, useRef, useState } from "react";
+import { useTheme } from "next-themes";
+import type WaveSurfer from "wavesurfer.js";
+import { Download, Loader2, Pause, Play } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { toast } from "sonner";
+import { useMusicPlayer } from "./MusicPlayerProvider";
+
+function formatTime(seconds: number) {
+	if (!Number.isFinite(seconds)) return "0:00";
+	const m = Math.floor(seconds / 60);
+	const s = Math.floor(seconds % 60);
+	return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+function cssVar(name: string, fallback: string) {
+	if (typeof window === "undefined") return fallback;
+	const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+	return v || fallback;
+}
+
+function waveColors() {
+	return {
+		waveColor: cssVar("--muted-foreground", "#9ca3af"),
+		progressColor: cssVar("--primary", "#e2761b"),
+		cursorColor: cssVar("--foreground", "#111827"),
+	};
+}
+
+/**
+ * Per-track waveform. Playback itself is owned by the shared MusicPlayer engine
+ * (so it keeps running across navigation); this wavesurfer instance is only a
+ * visual + seek surface that mirrors the engine when its track is active.
+ */
+export default function AudioPlayer(props: {
+	id: string;
+	src: string;
+	downloadUrl: string;
+	downloadName: string;
+}) {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const wsRef = useRef<WaveSurfer | null>(null);
+	const [ready, setReady] = useState(false);
+	const [duration, setDuration] = useState(0);
+	const [downloading, setDownloading] = useState(false);
+	const { resolvedTheme } = useTheme();
+
+	const { currentId, isPlaying, currentTime, toggle, seek, subscribeTime } = useMusicPlayer();
+	const isActive = currentId === props.id;
+
+	// Reach live values from the once-created wavesurfer callbacks.
+	const isActiveRef = useRef(isActive);
+	isActiveRef.current = isActive;
+	const currentTimeRef = useRef(currentTime);
+	currentTimeRef.current = currentTime;
+	const toggleRef = useRef(toggle);
+	toggleRef.current = toggle;
+	const seekRef = useRef(seek);
+	seekRef.current = seek;
+
+	useEffect(() => {
+		let ws: WaveSurfer | null = null;
+		let cancelled = false;
+		setReady(false);
+
+		(async () => {
+			const WaveSurferClass = (await import("wavesurfer.js")).default;
+			if (cancelled || !containerRef.current) return;
+			const instance = WaveSurferClass.create({
+				container: containerRef.current,
+				url: props.src,
+				height: 44,
+				barWidth: 2,
+				barGap: 1,
+				barRadius: 2,
+				normalize: true,
+				cursorWidth: 1,
+				...waveColors(),
+			});
+			ws = instance;
+			wsRef.current = instance;
+			instance.on("ready", () => {
+				// This media is for drawing only — never let it make sound.
+				instance.setMuted(true);
+				setReady(true);
+				setDuration(instance.getDuration());
+				if (isActiveRef.current) instance.setTime(currentTimeRef.current);
+			});
+			// Clicking the waveform: start this track if it isn't playing, then seek.
+			instance.on("interaction", (time: number) => {
+				if (!isActiveRef.current) toggleRef.current(props.id);
+				seekRef.current(time);
+			});
+		})();
+
+		return () => {
+			cancelled = true;
+			ws?.destroy();
+			wsRef.current = null;
+		};
+	}, [props.src]);
+
+	// Mirror the engine's playback position onto the cursor while active.
+	useEffect(() => {
+		const ws = wsRef.current;
+		if (!ws || !ready) return;
+		if (!isActive) {
+			ws.setTime(0);
+			return;
+		}
+		ws.setTime(currentTimeRef.current);
+		return subscribeTime((t) => wsRef.current?.setTime(t));
+	}, [isActive, ready, subscribeTime]);
+
+	// Re-tint the waveform when the user toggles light/dark.
+	useEffect(() => {
+		wsRef.current?.setOptions(waveColors());
+	}, [resolvedTheme]);
+
+	async function handleDownload() {
+		setDownloading(true);
+		try {
+			// The download file is cross-origin, so the <a download> attribute is
+			// ignored — fetch it as a blob to force a real download.
+			const res = await fetch(props.downloadUrl);
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			const blob = await res.blob();
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = props.downloadName;
+			document.body.appendChild(a);
+			a.click();
+			a.remove();
+			URL.revokeObjectURL(url);
+		} catch (e) {
+			toast(`Download failed: ${e instanceof Error ? e.message : "unknown error"}`);
+		} finally {
+			setDownloading(false);
+		}
+	}
+
+	const playing = isActive && isPlaying;
+
+	return (
+		<div className="flex items-center gap-3 rounded-lg border bg-transparent px-3 py-2">
+			<Button
+				type="button"
+				size="icon"
+				variant="ghost"
+				aria-label={playing ? "Pause" : "Play"}
+				disabled={!ready}
+				onClick={() => toggle(props.id)}
+			>
+				{playing ? <Pause /> : <Play />}
+			</Button>
+
+			<span className="w-10 shrink-0 text-right font-mono text-xs text-muted-foreground tabular-nums">
+				{formatTime(isActive ? currentTime : 0)}
+			</span>
+
+			<div className="relative flex-1">
+				<div ref={containerRef} className="w-full" />
+				{!ready && (
+					<div className="absolute inset-0 flex items-center">
+						<div className="h-7 w-full animate-pulse rounded bg-muted-foreground/15" />
+					</div>
+				)}
+			</div>
+
+			<span className="w-10 shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
+				{formatTime(duration)}
+			</span>
+
+			<Button
+				type="button"
+				size="icon"
+				variant="ghost"
+				aria-label="Download lossless file"
+				title="Download lossless file"
+				disabled={downloading}
+				onClick={handleDownload}
+			>
+				{downloading ? <Loader2 className="animate-spin" /> : <Download />}
+			</Button>
+		</div>
+	);
+}
--- a/src/app/music/_components/MusicMiniPlayer.tsx
+++ b/src/app/music/_components/MusicMiniPlayer.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { useState } from "react";
+import { Music } from "lucide-react";
+import {
+	Drawer,
+	DrawerContent,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
+} from "~/components/ui/drawer";
+import { Slider } from "~/components/ui/slider";
+import { useMusicPlayer } from "./MusicPlayerProvider";
+import PlayerControls from "./PlayerControls";
+
+function formatTime(seconds: number) {
+	if (!Number.isFinite(seconds)) return "0:00";
+	const m = Math.floor(seconds / 60);
+	const s = Math.floor(seconds % 60);
+	return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Global, persistent mini-player: a floating button (shown once something is
+ * loaded) that opens a drawer with the transport controls and a scrubber, so
+ * playback can be controlled from any page while it keeps running in the
+ * background.
+ */
+export default function MusicMiniPlayer() {
+	const { currentTrack, isPlaying, currentTime, duration, seek } = useMusicPlayer();
+	const [open, setOpen] = useState(false);
+
+	if (!currentTrack) return null;
+
+	return (
+		<Drawer open={open} onOpenChange={setOpen}>
+			<DrawerTrigger asChild>
+				<button
+					type="button"
+					aria-label="Open player"
+					className="fixed bottom-4 left-4 z-40 flex max-w-[60vw] items-center gap-2 rounded-full border bg-background/80 px-4 py-2 shadow-lg backdrop-blur-md transition-colors hover:bg-background"
+				>
+					<Music className={isPlaying ? "animate-pulse" : ""} />
+					<span className="truncate text-sm">{currentTrack.title}</span>
+				</button>
+			</DrawerTrigger>
+			<DrawerContent>
+				<DrawerHeader>
+					<DrawerTitle>{currentTrack.title}</DrawerTitle>
+				</DrawerHeader>
+				<div className="mx-auto flex w-full max-w-md flex-col gap-4 px-4 pb-8">
+					<div className="flex items-center gap-2">
+						<span className="w-10 text-right font-mono text-xs text-muted-foreground tabular-nums">
+							{formatTime(currentTime)}
+						</span>
+						<Slider
+							className="flex-1"
+							min={0}
+							max={duration || 1}
+							step={0.1}
+							value={[currentTime]}
+							onValueChange={([v]) => seek(v ?? 0)}
+						/>
+						<span className="w-10 font-mono text-xs text-muted-foreground tabular-nums">
+							{formatTime(duration)}
+						</span>
+					</div>
+					<PlayerControls />
+				</div>
+			</DrawerContent>
+		</Drawer>
+	);
+}
--- a/src/app/music/_components/MusicPlayerProvider.tsx
+++ b/src/app/music/_components/MusicPlayerProvider.tsx
@@ -0,0 +1,314 @@
+'use client'
+
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+	type ReactNode,
+} from "react";
+import { trpc } from "~/app/_trpc/Client";
+import MusicMiniPlayer from "./MusicMiniPlayer";
+
+export type PlayerTrack = {
+	id: string;
+	title: string;
+	/** Streaming-friendly source actually played. */
+	src: string;
+	/** Original high-quality file for the download button. */
+	downloadUrl: string;
+	downloadName: string;
+};
+
+type MusicPlayerValue = {
+	tracks: PlayerTrack[];
+	currentId: string | null;
+	currentTrack: PlayerTrack | null;
+	isPlaying: boolean;
+	shuffle: boolean;
+	currentTime: number;
+	duration: number;
+	/** Play button on a track: start it, or toggle play/pause if already current. */
+	toggle: (id: string) => void;
+	/** Global play/pause — acts on the current track (or starts the first one). */
+	togglePlayCurrent: () => void;
+	next: () => void;
+	previous: () => void;
+	toggleShuffle: () => void;
+	seek: (seconds: number) => void;
+	/** Subscribe to playback time updates (for waveform cursors). */
+	subscribeTime: (cb: (time: number) => void) => () => void;
+};
+
+const MusicPlayerContext = createContext<MusicPlayerValue | null>(null);
+
+export function useMusicPlayer() {
+	const ctx = useContext(MusicPlayerContext);
+	if (!ctx) throw new Error("useMusicPlayer must be used within a MusicPlayerProvider");
+	return ctx;
+}
+
+export function MusicPlayerProvider({ children }: { children: ReactNode }) {
+	// The provider owns the playlist so playback survives navigating away from
+	// the music page. The query is cached, so the music page shares this request.
+	const { data } = trpc.music.list.useQuery();
+	const tracks = useMemo<PlayerTrack[]>(
+		() =>
+			(data ?? []).map((t) => ({
+				id: t.id,
+				title: t.title,
+				src: t.streamUrl ?? t.fileUrl,
+				downloadUrl: t.fileUrl,
+				downloadName: t.fileName,
+			})),
+		[data],
+	);
+
+	const [currentId, setCurrentId] = useState<string | null>(null);
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [shuffle, setShuffle] = useState(false);
+	const [currentTime, setCurrentTime] = useState(0);
+	const [duration, setDuration] = useState(0);
+
+	const audioRef = useRef<HTMLAudioElement | null>(null);
+	const tracksRef = useRef(tracks);
+	tracksRef.current = tracks;
+
+	// Lightweight pub/sub so each waveform can follow playback time without every
+	// player re-rendering on the audio element's frequent timeupdate.
+	const timeSubs = useRef<Set<(t: number) => void>>(new Set());
+	const subscribeTime = useCallback((cb: (t: number) => void) => {
+		timeSubs.current.add(cb);
+		return () => {
+			timeSubs.current.delete(cb);
+		};
+	}, []);
+	const emitTime = useCallback((t: number) => {
+		timeSubs.current.forEach((cb) => cb(t));
+	}, []);
+
+	const currentTrack = useMemo(
+		() => tracks.find((t) => t.id === currentId) ?? null,
+		[tracks, currentId],
+	);
+
+	const toggle = useCallback((id: string) => {
+		setCurrentId((prev) => {
+			if (prev === id) {
+				setIsPlaying((p) => !p);
+				return prev;
+			}
+			setIsPlaying(true);
+			return id;
+		});
+	}, []);
+
+	const togglePlayCurrent = useCallback(() => {
+		setCurrentId((prev) => {
+			if (prev) {
+				setIsPlaying((p) => !p);
+				return prev;
+			}
+			const first = tracksRef.current[0]?.id ?? null;
+			if (first) setIsPlaying(true);
+			return first;
+		});
+	}, []);
+
+	const step = useCallback((dir: 1 | -1) => {
+		const ids = tracksRef.current.map((t) => t.id);
+		if (ids.length === 0) return;
+		setCurrentId((prev) => {
+			let nextId: string;
+			if (shuffle && dir === 1 && ids.length > 1) {
+				do {
+					nextId = ids[Math.floor(Math.random() * ids.length)]!;
+				} while (nextId === prev);
+			} else {
+				const idx = prev ? ids.indexOf(prev) : -1;
+				nextId = ids[(idx + dir + ids.length) % ids.length]!;
+			}
+			setIsPlaying(true);
+			return nextId;
+		});
+	}, [shuffle]);
+	const next = useCallback(() => step(1), [step]);
+	const previous = useCallback(() => step(-1), [step]);
+	const toggleShuffle = useCallback(() => setShuffle((s) => !s), []);
+
+	const stepRef = useRef(step);
+	stepRef.current = step;
+
+	const seek = useCallback(
+		(s: number) => {
+			if (audioRef.current) audioRef.current.currentTime = s;
+			setCurrentTime(s);
+			emitTime(s);
+		},
+		[emitTime],
+	);
+
+	// Persistent audio element + listeners, created once on the client.
+	useEffect(() => {
+		const audio = new Audio();
+		audio.preload = "metadata";
+		audioRef.current = audio;
+		const onTime = () => {
+			setCurrentTime(audio.currentTime);
+			emitTime(audio.currentTime);
+		};
+		const onMeta = () => setDuration(audio.duration || 0);
+		const onEnded = () => stepRef.current(1);
+		audio.addEventListener("timeupdate", onTime);
+		audio.addEventListener("loadedmetadata", onMeta);
+		audio.addEventListener("ended", onEnded);
+		return () => {
+			audio.pause();
+			audio.removeEventListener("timeupdate", onTime);
+			audio.removeEventListener("loadedmetadata", onMeta);
+			audio.removeEventListener("ended", onEnded);
+			audioRef.current = null;
+		};
+	}, [emitTime]);
+
+	// Swap the source when the current track changes.
+	useEffect(() => {
+		const audio = audioRef.current;
+		if (!audio) return;
+		if (!currentTrack) {
+			audio.removeAttribute("src");
+			audio.load();
+			return;
+		}
+		if (audio.src !== currentTrack.src) {
+			audio.src = currentTrack.src;
+			audio.load();
+			setCurrentTime(0);
+			setDuration(0);
+		}
+	}, [currentTrack]);
+
+	// Reflect the desired play state onto the element.
+	useEffect(() => {
+		const audio = audioRef.current;
+		if (!audio || !currentTrack) return;
+		if (isPlaying) audio.play().catch(() => {});
+		else audio.pause();
+	}, [isPlaying, currentTrack]);
+
+	// OS-level media controls (lock screen, notification shade, media keys, etc.)
+	// via the Media Session API. Wire the transport actions to our state.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		const ms = navigator.mediaSession;
+		const handlers: [MediaSessionAction, MediaSessionActionHandler][] = [
+			["play", () => setIsPlaying(true)],
+			["pause", () => setIsPlaying(false)],
+			["previoustrack", () => stepRef.current(-1)],
+			["nexttrack", () => stepRef.current(1)],
+			[
+				"seekto",
+				(details) => {
+					if (typeof details.seekTime === "number") seek(details.seekTime);
+				},
+			],
+			[
+				"seekbackward",
+				(details) => seek((audioRef.current?.currentTime ?? 0) - (details.seekOffset ?? 10)),
+			],
+			[
+				"seekforward",
+				(details) => seek((audioRef.current?.currentTime ?? 0) + (details.seekOffset ?? 10)),
+			],
+		];
+		for (const [action, handler] of handlers) {
+			try {
+				ms.setActionHandler(action, handler);
+			} catch {
+				// Action unsupported by this browser — ignore.
+			}
+		}
+		return () => {
+			for (const [action] of handlers) {
+				try {
+					ms.setActionHandler(action, null);
+				} catch {
+					// ignore
+				}
+			}
+		};
+	}, [seek]);
+
+	// Keep the OS-visible metadata in sync with the current track.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		navigator.mediaSession.metadata = currentTrack
+			? new MediaMetadata({
+					title: currentTrack.title,
+					artist: "Gregor Lohaus",
+				})
+			: null;
+	}, [currentTrack]);
+
+	// Reflect play/pause state to the OS so the right button is shown.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		navigator.mediaSession.playbackState = currentTrack
+			? isPlaying
+				? "playing"
+				: "paused"
+			: "none";
+	}, [isPlaying, currentTrack]);
+
+	// Keep the scrubber position on the OS controls in sync.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		if (!("setPositionState" in navigator.mediaSession)) return;
+		try {
+			if (duration > 0 && Number.isFinite(duration)) {
+				navigator.mediaSession.setPositionState({
+					duration,
+					position: Math.min(currentTime, duration),
+					playbackRate: audioRef.current?.playbackRate ?? 1,
+				});
+			} else {
+				navigator.mediaSession.setPositionState();
+			}
+		} catch {
+			// Some browsers throw on invalid state — ignore.
+		}
+	}, [currentTime, duration]);
+
+	const value = useMemo<MusicPlayerValue>(
+		() => ({
+			tracks,
+			currentId,
+			currentTrack,
+			isPlaying,
+			shuffle,
+			currentTime,
+			duration,
+			toggle,
+			togglePlayCurrent,
+			next,
+			previous,
+			toggleShuffle,
+			seek,
+			subscribeTime,
+		}),
+		[
+			tracks, currentId, currentTrack, isPlaying, shuffle, currentTime, duration,
+			toggle, togglePlayCurrent, next, previous, toggleShuffle, seek, subscribeTime,
+		],
+	);
+
+	return (
+		<MusicPlayerContext.Provider value={value}>
+			{children}
+			<MusicMiniPlayer />
+		</MusicPlayerContext.Provider>
+	);
+}
--- a/src/app/music/_components/Page.tsx
+++ b/src/app/music/_components/Page.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import * as Card from "~/components/ui/card";
+import { useTimeLine } from "../../_providers/GsapProvicer";
+import AnimatedPageTitle from "../../_components/Animated/AnimatedPageTitle";
+import AnimateTextIn from "../../_components/Animated/AnimateIn";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import AnimatePopUp from "../../_components/Animated/AnimatePopUp";
+import AudioPlayer from "./AudioPlayer";
+import type { RouterOutputs } from "~/server/routers/_app";
+
+export default function MusicPage(props: {
+  tracks: RouterOutputs['music']['list'],
+}) {
+  const { tracks } = props;
+  useTimeLine(tracks)
+  return (
+    <ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
+      <AnimatedPageTitle position={0}><span>Just Some </span> <span>Music I Made</span> </AnimatedPageTitle>
+      <div className="flex flex-wrap h-fit content-center">
+        <AnimateTextIn once className="flex flex-wrap mr-[1em]" position={0.5}>
+          <div><p className="break-after-avoid mr-[1em]">All works on this page are licensed under:</p></div>
+          <div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div>
+        </AnimateTextIn>
+        <AnimatePopUp duration={1} ease='elastic.inOut' position={2} once className="items-center content-center">
+          <div className="flex flex-row">
+            <img className="max-w-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" />
+            <img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" />
+            <img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" />
+            <img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" />
+          </div>
+        </AnimatePopUp>
+      </div>
+      <div className="pt-10" />
+      {tracks && tracks.map((track, i) => (
+        <div key={track.id}>
+          <Card.AnimatedCard position={i + 1}>
+            <Card.CardHeader>
+              <AnimateTextIn once position={i + 1.2} animation="slide">
+                <Card.CardTitle>{track.title}</Card.CardTitle>
+              </AnimateTextIn>
+            </Card.CardHeader>
+            <Card.CardContent className="flex flex-col gap-3">
+              {track.description && (
+                <AnimatePopUp once position={i + 1.25} duration={2}>
+                  <p className="text-sm text-muted-foreground">{track.description}</p>
+                </AnimatePopUp>
+              )}
+              <AnimatePopUp duration={2} ease='elastic.inOut'  position={i + 1.3} once>
+                <AudioPlayer
+                  id={track.id}
+                  src={track.streamUrl ?? track.fileUrl}
+                  downloadUrl={track.fileUrl}
+                  downloadName={track.fileName}
+                />
+              </AnimatePopUp>
+            </Card.CardContent>
+          </Card.AnimatedCard>
+          <div className="pt-5" />
+        </div>
+      ))}
+      {!tracks?.length &&
+        <div className="flex justify-center items-center text-muted-foreground">
+          No music yet.
+        </div>}
+    </ScrollArea>
+  );
+}
--- a/src/app/music/_components/PlayerControls.tsx
+++ b/src/app/music/_components/PlayerControls.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { Pause, Play, Shuffle, SkipBack, SkipForward } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { useMusicPlayer } from "./MusicPlayerProvider";
+
+export default function PlayerControls() {
+	const { isPlaying, shuffle, togglePlayCurrent, next, previous, toggleShuffle } =
+		useMusicPlayer();
+
+	return (
+		<div className="flex items-center justify-center gap-1">
+			<Button type="button" size="icon" variant="ghost" aria-label="Previous track" onClick={previous}>
+				<SkipBack />
+			</Button>
+			<Button
+				type="button"
+				size="icon-lg"
+				variant="secondary"
+				aria-label={isPlaying ? "Pause" : "Play"}
+				onClick={togglePlayCurrent}
+			>
+				{isPlaying ? <Pause /> : <Play />}
+			</Button>
+			<Button type="button" size="icon" variant="ghost" aria-label="Skip to next track" onClick={next}>
+				<SkipForward />
+			</Button>
+			<Button
+				type="button"
+				size="icon"
+				variant={shuffle ? "secondary" : "ghost"}
+				aria-label={shuffle ? "Shuffle on" : "Shuffle off"}
+				aria-pressed={shuffle}
+				onClick={toggleShuffle}
+			>
+				<Shuffle />
+			</Button>
+		</div>
+	);
+}
--- a/src/app/music/page.tsx
+++ b/src/app/music/page.tsx
@@ -0,0 +1,13 @@
+import { Suspense } from "react";
+import { servTrpc as trpc } from "../_trpc/ServerClient";
+import Page from "./_components/Page";
+
+export default async function MusicPage() {
+  const tracks = await trpc.music.list();
+
+  return (
+    <Suspense>
+      <Page tracks={tracks} />
+    </Suspense>
+  );
+}
--- a/src/app/projects/_components/Page.tsx
+++ b/src/app/projects/_components/Page.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import type { ReactNode } from "react";
+import * as Card from "~/components/ui/card";
+import { Badge } from "~/components/ui/badge";
+import { StackBadge } from "~/components/StackBadge";
+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 type { RouterOutputs } from "~/server/routers/_app";
+
+export default function ProjectsPage(props: {
+  projects: RouterOutputs['projectv2']['listWithStack'],
+  descriptions: Record<string, ReactNode>,
+}) {
+  const { projects, descriptions } = props;
+  useTimeLine(projects)
+
+  if (!projects?.length) {
+    return (
+      <div className="flex justify-center items-center min-h-[200px] text-muted-foreground">
+        No projects yet.
+      </div>
+    );
+  }
+
+  return (
+    <ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
+      <AnimatedPageTitle position={0}><span>Projects I've Been</span><span> Working on</span> </AnimatedPageTitle>
+      <div className="pt-10" />
+      {projects.map((project, i) => (
+        <div id={project.id} key={i} className="scroll-mt-10">
+          <Card.AnimatedCard position={i + 1.2} key={project.id}>
+            <Card.CardHeader>
+              <div className="flex items-start justify-between gap-2 flex-wrap">
+                <AnimateTextIn once position={i + 1.4} animation="slide"><Card.CardTitle>{project.title}</Card.CardTitle></AnimateTextIn>
+                <div className="flex gap-2 flex-wrap">
+                  {project.sourceType && (
+                    <AnimatePopUp position={i + 2} duration={2} once>
+                      <Badge variant={project.sourceType === "open" ? "secondary" : "outline"}>
+                        {project.sourceType === "open" ? "Open Source" : "Closed Source"}
+                      </Badge>
+                    </AnimatePopUp>
+                  )}
+                  {project.releaseStatus && (
+                    <Badge variant={project.releaseStatus === "released" ? "default" : "outline"}>
+                      {project.releaseStatus === "released" ? "Released" : "Unreleased"}
+                    </Badge>
+                  )}
+                </div>
+              </div>
+            </Card.CardHeader>
+            {(project.description || project.sourceLink || project.releaseLink || project.techStack?.stackItems?.length) && (
+              <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 once position={i + 1.4} duration={10}>
+                      {descriptions[project.id] ?? project.description}
+                    </AnimatePopUp>
+                  </div>
+                )}
+                <div className="flex flex-row">
+                  {project.techStack?.stackItems && project.techStack.stackItems.length > 0 && (
+                    <div className="flex flex-wrap gap-1.5">
+                      {project.techStack.stackItems.map((item, k) => (
+                        <AnimatePopUp key={k} position={(i + 2) + k * 0.5} once>  <StackBadge key={item} item={item} /> </AnimatePopUp>
+                      ))}
+                    </div>
+                  )}
+                  {(project.sourceLink || project.releaseLink) && (
+                    <div className="ml-auto flex-col lg:flex-row justify-center gap-5">
+                      {project.sourceLink &&
+                        <Button variant='outline' className="cursor-pointer mb-3 lg:mb-0 lg:mr-3 min-w-18">
+                          <a
+                            href={project.sourceLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className='items-center'
+                          >
+                            Source
+                          </a>
+                        </Button>
+                      }
+                      {project.releaseLink &&
+                        <Button variant='default' className="cursor-pointer min-w-18 items-center">
+                          <a
+                            href={project.releaseLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className='items-center'
+                          >
+                            Live
+                          </a>
+                        </Button>
+
+                      }
+                    </div>
+                  )}
+                </div>
+              </Card.CardContent>
+            )}
+          </Card.AnimatedCard>
+          <div className="pt-5" />
+        </div>
+      ))}
+    </ScrollArea>
+  );
+}
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -1,93 +1,40 @@
-'use client'
+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";

-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";
+export default async function ProjectsPage() {
+  const projects = await trpc.projectv2.listWithStack();

-export default function ProjectsPage() {
-  const { data: projects, isLoading } = trpc.projectv2.listWithStack.useQuery();
-
-  if (isLoading) {
-    return (
-      <div className="flex justify-center items-center min-h-[200px] text-muted-foreground">
-        Loading...
-      </div>
-    );
-  }
-
-  if (!projects?.length) {
-    return (
-      <div className="flex justify-center items-center min-h-[200px] text-muted-foreground">
-        No projects yet.
-      </div>
+  // 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 project of projects ?? []) {
+    if (!project.description?.trim()) continue;
+    descriptions[project.id] = (
+      <MDXRemote
+        source={project.description}
+        components={mdxComponents}
+        options={{
+          mdxOptions: {
+            format: "md",
+            remarkPlugins: [remarkGfm],
+            rehypePlugins: [rehypeHighlight],
+          },
+        }}
+      />
    );
  }

  return (
-    <div className="w-full max-w-4xl mx-auto px-4 py-8 flex flex-col gap-4">
-      {projects.map((project) => (
-        <Card.Card key={project.id}>
-          <Card.CardHeader>
-            <div className="flex items-start justify-between gap-2 flex-wrap">
-              <Card.CardTitle>{project.title}</Card.CardTitle>
-              <div className="flex gap-2 flex-wrap">
-                {project.sourceType && (
-                  <Badge variant={project.sourceType === "open" ? "secondary" : "outline"}>
-                    {project.sourceType === "open" ? "Open Source" : "Closed Source"}
-                  </Badge>
-                )}
-                {project.releaseStatus && (
-                  <Badge variant={project.releaseStatus === "released" ? "default" : "outline"}>
-                    {project.releaseStatus === "released" ? "Released" : "Unreleased"}
-                  </Badge>
-                )}
-              </div>
-            </div>
-          </Card.CardHeader>
-          {(project.description || project.sourceLink || project.releaseLink || project.techStack?.stackItems?.length) && (
-            <Card.CardContent className="flex flex-col gap-3">
-              {project.description && (
-                <div className="prose prose-sm dark:prose-invert max-w-none text-muted-foreground">
-                  <Markdown>{project.description}</Markdown>
-                </div>
-              )}
-              {(project.sourceLink || project.releaseLink) && (
-                <div className="flex gap-3 flex-wrap">
-                  {project.sourceLink && (
-                    <a
-                      href={project.sourceLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-sm text-muted-foreground hover:text-foreground underline underline-offset-4 transition-colors"
-                    >
-                      Source
-                    </a>
-                  )}
-                  {project.releaseLink && (
-                    <a
-                      href={project.releaseLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-sm text-muted-foreground hover:text-foreground underline underline-offset-4 transition-colors"
-                    >
-                      Live
-                    </a>
-                  )}
-                </div>
-              )}
-              {project.techStack?.stackItems && project.techStack.stackItems.length > 0 && (
-                <div className="flex flex-wrap gap-1.5">
-                  {project.techStack.stackItems.map((item) => (
-                    <StackBadge key={item} item={item} />
-                  ))}
-                </div>
-              )}
-            </Card.CardContent>
-          )}
-        </Card.Card>
-      ))}
-    </div>
+    <Suspense>
+      <Page projects={projects} descriptions={descriptions} />
+    </Suspense>
  );
 }
--- a/src/components/ClientMdx.tsx
+++ b/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>
+  );
+}
--- a/src/components/StackBadge.tsx
+++ b/src/components/StackBadge.tsx
@@ -125,6 +125,30 @@ const STACK_META: Record<string, { label: string; icon?: SvglIcon }> = {
      dark: "https://svgl.app/library/neon.svg",
    },
  },
+  typescript: {
+    label: "TypeScript",
+    icon: {
+      light: "https://svgl.app/library/typescript.svg",
+      dark: "https://svgl.app/library/typescript.svg",
+    },
+  },
+  javafx: { label: "JavaFX" },
+  x11: { label: "X11" },
+  zig: {
+    label: "Zig",
+    icon: {
+      light: "https://svgl.app/library/zig.svg",
+      dark: "https://svgl.app/library/zig.svg",
+    },
+  },
+  libghostty: { label: "libghostty" },
+  zod: {
+    label: "Zod",
+    icon: {
+      light: "https://svgl.app/library/zod.svg",
+      dark: "https://svgl.app/library/zod.svg",
+    },
+  },
 };

 export function StackBadge({ item }: { item: string }) {
--- a/src/components/mdx-components.tsx
+++ b/src/components/mdx-components.tsx
@@ -0,0 +1,140 @@
+import Link from "next/link";
+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";
+
+type CalloutVariant = "note" | "tip" | "warning";
+
+const calloutStyles: Record<CalloutVariant, string> = {
+  note: "border-sky-500/40 bg-sky-500/10 text-sky-950 dark:text-sky-100",
+  tip: "border-emerald-500/40 bg-emerald-500/10 text-emerald-950 dark:text-emerald-100",
+  warning: "border-amber-500/40 bg-amber-500/10 text-amber-950 dark:text-amber-100",
+};
+
+function Callout({
+  title,
+  variant = "note",
+  children,
+}: {
+  title?: string;
+  variant?: CalloutVariant;
+  children: ReactNode;
+}) {
+  return (
+    <aside className={cn("my-6 rounded-md border px-4 py-3", calloutStyles[variant])}>
+      {title && <p className="mb-2 font-semibold">{title}</p>}
+      <div className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0">{children}</div>
+    </aside>
+  );
+}
+
+function Lead({ children }: { children: ReactNode }) {
+  return <span className="text-muted-foreground my-6 block text-lg leading-8">{children}</span>;
+}
+
+function TagList({ tags }: { tags: string[] }) {
+  return (
+    <div className="my-4 flex flex-wrap gap-1.5">
+      {tags.map((tag) => (
+        <Badge key={tag} variant="outline">
+          {tag}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+function ButtonLink({
+  href,
+  children,
+  variant = "default",
+}: {
+  href: string;
+  children: ReactNode;
+  variant?: ComponentPropsWithoutRef<typeof Button>["variant"];
+}) {
+  const isExternal = /^https?:\/\//.test(href);
+
+  return (
+    <Button asChild variant={variant}>
+      {isExternal ? (
+        <a href={href} target="_blank" rel="noreferrer">
+          {children}
+        </a>
+      ) : (
+        <Link href={href}>{children}</Link>
+      )}
+    </Button>
+  );
+}
+
+function Figure({
+  src,
+  alt,
+  caption,
+}: {
+  src: string;
+  alt: string;
+  caption?: string;
+}) {
+  return (
+    <figure className="my-8">
+      <img src={src} alt={alt} className="w-full rounded-md border object-cover" />
+      {caption && <figcaption className="text-muted-foreground mt-2 text-center text-sm">{caption}</figcaption>}
+    </figure>
+  );
+}
+
+function PullQuote({ children }: { children: ReactNode }) {
+  return (
+    <blockquote className="border-primary my-8 border-l-4 pl-5 text-xl leading-8 font-medium">
+      {children}
+    </blockquote>
+  );
+}
+
+function ExternalLink(props: ComponentPropsWithoutRef<"a">) {
+  const { className, ...rest } = props;
+
+  return (
+    <a
+      {...rest}
+      target="_blank"
+      rel="noreferrer"
+      className={cn(
+        "text-sky-600 underline underline-offset-4 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300",
+        className,
+      )}
+    />
+  );
+}
+
+const blockComponents = new Set<unknown>([Callout, Figure, PullQuote, TagList]);
+
+function Paragraph({ children }: { children: ReactNode }) {
+  const containsBlockComponent = Children.toArray(children).some(
+    (child) => isValidElement(child) && blockComponents.has(child.type),
+  );
+
+  if (containsBlockComponent) return <>{children}</>;
+
+  return <p>{children}</p>;
+}
+
+export const mdxComponents = {
+  a: ExternalLink,
+  p: Paragraph,
+  Badge,
+  ButtonLink,
+  Callout,
+  Figure,
+  Lead,
+  PullQuote,
+  TagList,
+};
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,5 +1,8 @@
+"use client"
 import * as React from "react"
-
+import { useRef } from "react";
+import gsap from 'gsap'
+import { useReveal } from "~/app/_components/Animated/useReveal";
 import { cn } from "~/lib/utils"

 function Card({
@@ -12,7 +15,39 @@ function Card({
      data-slot="card"
      data-size={size}
      className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl bg-opacity-60 backdrop-blur-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AnimatedCard({
+  className,
+  position = 0,
+  size = "default",
+  scrollOnly = false,
+  once = false,
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm", position?: gsap.Position,  scrollOnly?: boolean, once?: boolean }) {
+  const ref = useRef<HTMLDivElement | null>(null)
+  useReveal(ref, {
+    position,
+    scrollOnly,
+    once,
+    debugId: `card-${position}`,
+    // Start hidden via CSS (see className) so the server-rendered card never
+    // flashes visible before GSAP runs; reveal animates *to* the shown state.
+    makeReveal: (el) => gsap.to(el, { x: 0, opacity: 1, duration: 0.5, paused: true }),
+  })
+  return (
+    <div
+      ref={ref}
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "opacity-0 -translate-x-[100px] group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl bg-opacity-60 backdrop-blur-sm",
        className
      )}
      {...props}
@@ -100,4 +135,5 @@ export {
  CardAction,
  CardDescription,
  CardContent,
+  AnimatedCard
 }
--- a/src/components/ui/spinner.tsx
+++ b/src/components/ui/spinner.tsx
@@ -0,0 +1,10 @@
+import { cn } from "~/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+  )
+}
+
+export { Spinner }
--- a/src/env.js
+++ b/src/env.js
@@ -7,6 +7,9 @@ export const env = createEnv({
 	 * isn't built with invalid env vars.
 	 */
 	server: {
+		UPLOADTHING_TOKEN: z.string(),
+		BLOG_MDX_PREFIX: z.string().default("blog"),
+
 		DATABASE_URL: z.string().url(),
 		DATABASE_URL_UNPOOLED: z.string().url(),

@@ -27,6 +30,11 @@ export const env = createEnv({

 		CLERK_SECRET_KEY: z.string(),
 		ADMIN_USER_CLERK_ID: z.string(),
+		OPENAI_API_KEY: z.string(),
+		GOOGLE_SERVICE_ACCOUNT_EMAIL: z.string().email(),
+		GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: z.string(),
+		GOOGLE_CALENDAR_ID: z.string(),
+		GREGOR_MEETING_EMAIL: z.string().email(),
 		NODE_ENV: z
 			.enum(["development", "test", "production"])
 			.default("development"),
@@ -48,6 +56,9 @@ export const env = createEnv({
 	 * middlewares) or client-side so we need to destruct manually.
 	 */
 	runtimeEnv: {
+		UPLOADTHING_TOKEN: process.env.UPLOADTHING_TOKEN,
+		BLOG_MDX_PREFIX: process.env.BLOG_MDX_PREFIX,
+
 		DATABASE_URL: process.env.DATABASE_URL,
 		DATABASE_URL_UNPOOLED: process.env.DATABASE_URL,
 		PGHOST: process.env.PGHOST,
@@ -64,6 +75,11 @@ export const env = createEnv({
 		POSTGRES_URL_NO_SSL: process.env.POSTGRES_URL_NO_SSL,
 		POSTGRES_PRISMA_URL: process.env.POSTGRES_PRISMA_URL,
 		ADMIN_USER_CLERK_ID: process.env.ADMIN_USER_CLERK_ID,
+		OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+		GOOGLE_SERVICE_ACCOUNT_EMAIL: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
+		GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: process.env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY,
+		GOOGLE_CALENDAR_ID: process.env.GOOGLE_CALENDAR_ID,
+		GREGOR_MEETING_EMAIL: process.env.GREGOR_MEETING_EMAIL,
 		NEXT_PUBLIC_ADMIN_USER_CLERK_ID: process.env.NEXT_PUBLIC_ADMIN_USER_CLERK_ID,
 		CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
 		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
--- a/src/lib/ffmpeg/transcode.ts
+++ b/src/lib/ffmpeg/transcode.ts
@@ -0,0 +1,114 @@
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { fetchFile, toBlobURL } from "@ffmpeg/util";
+
+// Single-threaded core: works without SharedArrayBuffer, so no COOP/COEP
+// cross-origin-isolation headers are required. Slower than the MT core, which
+// is fine for occasional admin-side transcodes.
+const CORE_VERSION = "0.12.10";
+// @ffmpeg/ffmpeg 0.12.x always spawns a `type: "module"` worker. A module
+// worker can't `importScripts`, so the worker dynamically `import()`s the core —
+// which means the core must be the ESM build, not UMD.
+const CORE_BASE = `https://unpkg.com/@ffmpeg/core@${CORE_VERSION}/dist/esm`;
+// Self-hosted worker, bundled from @ffmpeg/ffmpeg's ESM `worker.js` via the
+// `build:ffmpeg-worker` package script (rerun it when bumping @ffmpeg/ffmpeg).
+// The shipped UMD worker is unusable here: its
+// dynamic import is webpack-compiled into a stub that throws MODULE_NOT_FOUND,
+// and letting Next bundle the worker hits the same problem. Serving our own
+// same-origin module worker keeps the native `import()` intact.
+// Must be an absolute URL: the library resolves classWorkerURL against
+// `import.meta.url`, which is a file:// base under Next, so a root-relative path
+// would wrongly become `file:///ffmpeg/worker.js`.
+const WORKER_PATH = "/ffmpeg/worker.js";
+
+let instance: FFmpeg | null = null;
+let loadPromise: Promise<FFmpeg> | null = null;
+
+function load(onLog?: (msg: string) => void): Promise<FFmpeg> {
+	if (instance) return Promise.resolve(instance);
+	if (!loadPromise) {
+		loadPromise = (async () => {
+			const ffmpeg = new FFmpeg();
+			ffmpeg.on("log", ({ message }) => {
+				console.debug("[ffmpeg]", message);
+				onLog?.(message);
+			});
+			const ok = await ffmpeg.load({
+				coreURL: await toBlobURL(`${CORE_BASE}/ffmpeg-core.js`, "text/javascript"),
+				wasmURL: await toBlobURL(`${CORE_BASE}/ffmpeg-core.wasm`, "application/wasm"),
+				classWorkerURL: new URL(WORKER_PATH, window.location.origin).href,
+			});
+			if (!ok) throw new Error("ffmpeg.load() returned false — core failed to initialise");
+			instance = ffmpeg;
+			return ffmpeg;
+		})();
+		// If loading fails, clear the cached promise so the next click retries.
+		loadPromise.catch(() => {
+			loadPromise = null;
+		});
+	}
+	return loadPromise;
+}
+
+/**
+ * Transcodes a (FLAC) source URL to a streaming-friendly AAC/m4a file in the
+ * browser. Returns a File ready to hand to UploadThing's startUpload.
+ */
+export async function transcodeToAac(opts: {
+	sourceUrl: string;
+	outputName?: string;
+	bitrate?: string;
+	onProgress?: (ratio: number) => void;
+	onLog?: (msg: string) => void;
+}): Promise<File> {
+	let lastLog = "";
+	const onLog = (msg: string) => {
+		if (msg.trim()) lastLog = msg;
+		opts.onLog?.(msg);
+	};
+	const ffmpeg = await load(onLog);
+	// `load` only wires the persisted instance's log handler on first init; make
+	// sure this call's logs are captured even when the instance was cached.
+	const logHandler = ({ message }: { message: string }) => onLog(message);
+	ffmpeg.on("log", logHandler);
+	const progressHandler = opts.onProgress
+		? ({ progress }: { progress: number }) =>
+				opts.onProgress?.(Math.min(1, Math.max(0, progress)))
+		: null;
+	if (progressHandler) ffmpeg.on("progress", progressHandler);
+	try {
+		// fetchFile pulls the source cross-origin; surface a clear message if the
+		// host (UploadThing) blocks it.
+		let sourceData: Uint8Array;
+		try {
+			sourceData = await fetchFile(opts.sourceUrl);
+		} catch (e) {
+			throw new Error(
+				`Could not fetch source file (CORS or network): ${e instanceof Error ? e.message : String(e)}`,
+			);
+		}
+		await ffmpeg.writeFile("input.flac", sourceData);
+		const code = await ffmpeg.exec([
+			"-i", "input.flac",
+			"-c:a", "aac",
+			"-b:a", opts.bitrate ?? "192k",
+			// Move the moov atom to the front so the player can start before the
+			// whole file has downloaded — the whole point of the stream version.
+			"-movflags", "+faststart",
+			"output.m4a",
+		]);
+		if (code !== 0) {
+			throw new Error(`ffmpeg exited with code ${code}: ${lastLog || "no log output"}`);
+		}
+		const data = await ffmpeg.readFile("output.m4a");
+		await ffmpeg.deleteFile("input.flac");
+		await ffmpeg.deleteFile("output.m4a");
+		// Copy into a fresh ArrayBuffer-backed view so the Blob typing is happy
+		// (readFile may be typed against a SharedArrayBuffer-backed Uint8Array).
+		const bytes = new Uint8Array(data as Uint8Array);
+		const blob = new Blob([bytes], { type: "audio/mp4" });
+		return new File([blob], opts.outputName ?? "stream.m4a", { type: "audio/mp4" });
+	} finally {
+		ffmpeg.off("log", logHandler);
+		if (progressHandler) ffmpeg.off("progress", progressHandler);
+	}
+}
--- a/src/lib/hooks.ts
+++ b/src/lib/hooks.ts
@@ -1,7 +1,7 @@
 'use client'

 import type { UseTRPCQueryResult } from "node_modules/@trpc/react-query/dist/getQueryKey.d-CruH3ncI.mjs"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"

 function useRelationShipSuccess<T extends Record<string,any> & {id:string},K extends keyof T>(
  relationShipData: T[] | undefined,
@@ -56,3 +56,10 @@ export function makeUseRelationShipWithNameIndex<K extends string>(key:K) {
  }
 }

+export function usePrevious<T>(value:T,initialValue:T) {
+  const ref = useRef(initialValue)
+  useEffect(() => {
+    ref.current = value
+  })
+  return ref.current;
+}
--- a/src/lib/trpc/music/schemas.ts
+++ b/src/lib/trpc/music/schemas.ts
@@ -0,0 +1,31 @@
+import z from "zod"
+
+export const createMusicInputSchema = z.object({
+				id: z.string().uuid(),
+				title: z.string().min(1).max(100),
+				description: z.string().optional(),
+				fileUrl: z.string(),
+				fileKey: z.string(),
+				fileName: z.string(),
+				streamUrl: z.string().optional().nullable(),
+				streamKey: z.string().optional().nullable(),
+				streamName: z.string().optional().nullable(),
+			})
+export const updateMusicInputSchema = z.object({
+				id: z.string().uuid(),
+				title: z.string().min(1).max(100).optional(),
+				description: z.string().optional(),
+				fileUrl: z.string().optional(),
+				fileKey: z.string().optional(),
+				fileName: z.string().optional(),
+				streamUrl: z.string().optional().nullable(),
+				streamKey: z.string().optional().nullable(),
+				streamName: z.string().optional().nullable(),
+			})
+
+export const setStreamInputSchema = z.object({
+				id: z.string().uuid(),
+				streamUrl: z.string(),
+				streamKey: z.string(),
+				streamName: z.string(),
+			})
--- a/src/lib/uploadthing.ts
+++ b/src/lib/uploadthing.ts
@@ -0,0 +1,7 @@
+import { generateReactHelpers, generateUploadButton, generateUploadDropzone } from "@uploadthing/react";
+import type { FileRouter } from "~/server/uploadthing";
+
+export const UploadButton = generateUploadButton<FileRouter>();
+export const UploadDropzone = generateUploadDropzone<FileRouter>();
+
+export const { useUploadThing } = generateReactHelpers<FileRouter>();
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -1,13 +1,16 @@
-import { clerkMiddleware, createRouteMatcher, currentUser } from "@clerk/nextjs/server";
+import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
+import { NextResponse } from "next/server";
 import { env } from "~/env";

-const isTenantAdminRoute = createRouteMatcher(['/admin(.*)'])
-export default clerkMiddleware(async (auth,req) => {
+const isTenantAdminRoute = createRouteMatcher(["/admin(.*)"]);
+
+export default clerkMiddleware(async (auth, req) => {
  if (isTenantAdminRoute(req)) {
-    console.log("running clerk middleware");
-    let userid = (await auth()).userId
-    if (userid != env.ADMIN_USER_CLERK_ID) {
-      await auth.protect()
+    await auth.protect();
+
+    const { userId } = await auth();
+    if (userId !== env.ADMIN_USER_CLERK_ID) {
+      return NextResponse.redirect(new URL("/", req.url));
    }
  }
 });
--- a/src/server/ai/tools.ts
+++ b/src/server/ai/tools.ts
@@ -0,0 +1,586 @@
+import "server-only";
+
+import { tool } from "ai";
+import { desc } from "drizzle-orm";
+import { z } from "zod";
+import { cancelMeeting } from "~/app/actions/cancelMeeting";
+import { scheduleMeeting } from "~/app/actions/scheduleMeeting";
+import { db } from "~/server/db";
+import { blogPost, music } from "~/server/dbschema/schema";
+import { getGoogleCalendarClient, getGoogleCalendarId } from "~/server/googleCalendar";
+
+const contentTypeSchema = z.enum(["cv", "project", "blog", "music"]);
+
+type ContentType = z.infer<typeof contentTypeSchema>;
+
+type SearchResult = {
+	type: ContentType;
+	title: string;
+	snippet: string;
+	url: string;
+	score: number;
+	metadata?: Record<string, unknown>;
+};
+
+type ProjectWithStack = Awaited<ReturnType<typeof loadProjects>>[number];
+
+function stripMarkup(value: string | null | undefined) {
+	return (value ?? "")
+		.replace(/```[\s\S]*?```/g, " ")
+		.replace(/`([^`]+)`/g, "$1")
+		.replace(/<[^>]+>/g, " ")
+		.replace(/[#*_~[\]()>-]/g, " ")
+		.replace(/\s+/g, " ")
+		.trim();
+}
+
+function tokenize(value: string) {
+	return Array.from(new Set(value.toLowerCase().match(/[a-z0-9+#.-]+/g) ?? []));
+}
+
+function scoreText(query: string, title: string, body: string, extraTerms: string[] = []) {
+	const normalizedQuery = query.trim().toLowerCase();
+	const titleLower = title.toLowerCase();
+	const bodyLower = body.toLowerCase();
+	const tokens = tokenize(query);
+	let score = 0;
+
+	if (normalizedQuery && titleLower.includes(normalizedQuery)) score += 40;
+	if (normalizedQuery && bodyLower.includes(normalizedQuery)) score += 20;
+
+	for (const token of tokens) {
+		if (titleLower.includes(token)) score += 12;
+		if (bodyLower.includes(token)) score += 6;
+		if (extraTerms.some((term) => term.toLowerCase() === token)) score += 10;
+	}
+
+	return score;
+}
+
+const projectCatalogTerms = new Set(["project", "projects", "portfolio", "work"]);
+const genericQuestionTerms = new Set([
+	"a",
+	"about",
+	"all",
+	"any",
+	"are",
+	"can",
+	"current",
+	"do",
+	"give",
+	"have",
+	"list",
+	"me",
+	"of",
+	"on",
+	"show",
+	"site",
+	"tell",
+	"the",
+	"there",
+	"these",
+	"this",
+	"what",
+	"which",
+	"you",
+]);
+
+function isProjectCatalogQuery(query: string) {
+	const tokens = tokenize(query);
+	if (!tokens.some((token) => projectCatalogTerms.has(token))) return false;
+	return tokens.every((token) => projectCatalogTerms.has(token) || genericQuestionTerms.has(token));
+}
+
+function snippet(value: string, query: string, maxLength = 240) {
+	const text = stripMarkup(value);
+	if (text.length <= maxLength) return text;
+
+	const tokens = tokenize(query);
+	const lower = text.toLowerCase();
+	const firstMatch = tokens
+		.map((token) => lower.indexOf(token))
+		.filter((index) => index >= 0)
+		.sort((a, b) => a - b)[0] ?? 0;
+	const start = Math.max(0, firstMatch - 60);
+	const excerpt = text.slice(start, start + maxLength).trim();
+
+	return `${start > 0 ? "..." : ""}${excerpt}${start + maxLength < text.length ? "..." : ""}`;
+}
+
+function uniqueByUrl(results: SearchResult[]) {
+	const seen = new Set<string>();
+	return results.filter((result) => {
+		const key = `${result.type}:${result.url}:${result.title}`;
+		if (seen.has(key)) return false;
+		seen.add(key);
+		return true;
+	});
+}
+
+async function loadCvEntries() {
+	const categories = await db.query.cvCategory.findMany({
+		orderBy: (fields, { asc }) => [asc(fields.layoutPosition), asc(fields.name)],
+		with: {
+			cvEntry: {
+				orderBy: (fields, { desc }) => [desc(fields.toTime), desc(fields.fromTime)],
+			},
+		},
+	});
+
+	return categories.flatMap((category) =>
+		category.cvEntry.map((entry) => ({
+			...entry,
+			categoryName: category.name ?? "CV",
+		})),
+	);
+}
+
+async function loadProjects() {
+	return db.query.project.findMany({
+		orderBy: (fields, { asc }) => [asc(fields.orderPos), asc(fields.title), asc(fields.id)],
+		with: {
+			techStack: true,
+		},
+	});
+}
+
+async function buildSearchResults(query: string, types: ContentType[]) {
+	const selected = new Set(types);
+	const results: SearchResult[] = [];
+
+	if (selected.has("cv")) {
+		const entries = await loadCvEntries();
+		for (const entry of entries) {
+			const body = stripMarkup(`${entry.categoryName} ${entry.description ?? ""}`);
+			const score = scoreText(query, entry.title, body);
+			if (score > 0 || !query.trim()) {
+				results.push({
+					type: "cv",
+					title: entry.title,
+					snippet: snippet(body, query),
+					url: "/cv",
+					score,
+					metadata: {
+						category: entry.categoryName,
+						fromTime: entry.fromTime,
+						toTime: entry.toTime,
+					},
+				});
+			}
+		}
+	}
+
+	if (selected.has("project")) {
+		const projects = await loadProjects();
+		const catalogQuery = isProjectCatalogQuery(query);
+		for (const [index, item] of projects.entries()) {
+			const stackItems = item.techStack?.stackItems ?? [];
+			const body = stripMarkup(`${item.description ?? ""} ${stackItems.join(" ")}`);
+			const score = catalogQuery ? 1000 - index : scoreText(query, item.title, body, stackItems);
+			if (score > 0 || !query.trim() || catalogQuery) {
+				results.push({
+					type: "project",
+					title: item.title,
+					snippet: snippet(body || item.title, query),
+					url: `/projects#${item.id}`,
+					score,
+					metadata: {
+						id: item.id,
+						stackItems,
+						sourceType: item.sourceType,
+						releaseStatus: item.releaseStatus,
+						sourceLink: item.sourceLink,
+						releaseLink: item.releaseLink,
+					},
+				});
+			}
+		}
+	}
+
+	if (selected.has("blog")) {
+		const posts = await db
+			.select({
+				slug: blogPost.slug,
+				title: blogPost.title,
+				date: blogPost.date,
+				description: blogPost.description,
+				tags: blogPost.tags,
+			})
+			.from(blogPost)
+			.orderBy(desc(blogPost.date), desc(blogPost.createdAt));
+
+		for (const post of posts) {
+			const tags = post.tags ?? [];
+			const body = stripMarkup(`${post.description ?? ""} ${tags.join(" ")}`);
+			const score = scoreText(query, post.title, body, tags);
+			if (score > 0 || !query.trim()) {
+				results.push({
+					type: "blog",
+					title: post.title,
+					snippet: snippet(body || post.title, query),
+					url: `/blog/${post.slug}`,
+					score,
+					metadata: {
+						slug: post.slug,
+						date: post.date,
+						tags,
+					},
+				});
+			}
+		}
+	}
+
+	if (selected.has("music")) {
+		const tracks = await db.select().from(music).orderBy(desc(music.createdAt));
+		for (const track of tracks) {
+			const body = stripMarkup(track.description);
+			const score = scoreText(query, track.title, body);
+			if (score > 0 || !query.trim()) {
+				results.push({
+					type: "music",
+					title: track.title,
+					snippet: snippet(body || track.fileName, query),
+					url: "/music",
+					score,
+					metadata: {
+						id: track.id,
+						fileName: track.fileName,
+						hasStream: Boolean(track.streamUrl),
+					},
+				});
+			}
+		}
+	}
+
+	return uniqueByUrl(results).sort((a, b) => b.score - a.score || a.title.localeCompare(b.title));
+}
+
+function projectMatches(projectItem: ProjectWithStack, idOrTitle: string) {
+	const normalized = idOrTitle.trim().toLowerCase();
+	const title = projectItem.title.toLowerCase();
+	return projectItem.id === idOrTitle || title === normalized || title.includes(normalized);
+}
+
+function matchedTerms(text: string, terms: string[]) {
+	const lower = text.toLowerCase();
+	return terms.filter((term) => lower.includes(term.toLowerCase()));
+}
+
+function parseDate(value: string | undefined, fallback: Date) {
+	if (!value?.trim()) return fallback;
+	const date = new Date(value);
+	return Number.isNaN(date.getTime()) ? fallback : date;
+}
+
+function safeTimeZone(value: string | undefined) {
+	const timeZone = value?.trim() || "Europe/Berlin";
+	try {
+		new Intl.DateTimeFormat("en-US", { timeZone }).format(new Date());
+		return timeZone;
+	} catch {
+		return "Europe/Berlin";
+	}
+}
+
+function isLikelyEmail(value: string) {
+	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+}
+
+function overlaps(
+	start: Date,
+	end: Date,
+	busy: Array<{ start: Date; end: Date }>,
+) {
+	return busy.some((item) => start < item.end && end > item.start);
+}
+
+function getZonedParts(date: Date, timeZone: string) {
+	const formatter = new Intl.DateTimeFormat("en-US", {
+		timeZone,
+		weekday: "short",
+		hourCycle: "h23",
+		hour: "2-digit",
+		minute: "2-digit",
+	});
+	const parts = Object.fromEntries(formatter.formatToParts(date).map((part) => [part.type, part.value]));
+	return {
+		weekday: parts.weekday ?? "",
+		hour: Number(parts.hour ?? 0),
+		minute: Number(parts.minute ?? 0),
+	};
+}
+
+function isInsideWorkingHours(start: Date, end: Date, timeZone: string, workdayStartHour: number, workdayEndHour: number) {
+	const startParts = getZonedParts(start, timeZone);
+	const endParts = getZonedParts(end, timeZone);
+	const weekend = startParts.weekday === "Sat" || startParts.weekday === "Sun";
+	const startMinutes = startParts.hour * 60 + startParts.minute;
+	const endMinutes = endParts.hour * 60 + endParts.minute;
+
+	return !weekend && startMinutes >= workdayStartHour * 60 && endMinutes <= workdayEndHour * 60;
+}
+
+function availabilitySlots({
+	rangeStart,
+	rangeEnd,
+	busy,
+	durationMinutes,
+	timeZone,
+	workdayStartHour,
+	workdayEndHour,
+}: {
+	rangeStart: Date;
+	rangeEnd: Date;
+	busy: Array<{ start: Date; end: Date }>;
+	durationMinutes: number;
+	timeZone: string;
+	workdayStartHour: number;
+	workdayEndHour: number;
+}) {
+	const slots: Array<{ start: string; end: string }> = [];
+	const stepMinutes = 30;
+	const durationMs = durationMinutes * 60 * 1000;
+	const cursor = new Date(Math.ceil(rangeStart.getTime() / (stepMinutes * 60 * 1000)) * stepMinutes * 60 * 1000);
+
+	while (cursor.getTime() + durationMs <= rangeEnd.getTime() && slots.length < 10) {
+		const end = new Date(cursor.getTime() + durationMs);
+		if (
+			isInsideWorkingHours(cursor, end, timeZone, workdayStartHour, workdayEndHour)
+			&& !overlaps(cursor, end, busy)
+		) {
+			slots.push({ start: cursor.toISOString(), end: end.toISOString() });
+		}
+		cursor.setMinutes(cursor.getMinutes() + stepMinutes);
+	}
+
+	return slots;
+}
+
+function logAvailability(requestId: string, message: string, data?: Record<string, unknown>) {
+	console.log(`[ai:getAvailability:${requestId}] ${message}`, data ?? "");
+}
+
+export function createChatTools() {
+	return {
+		scheduleMeeting: tool({
+			description: "Schedule a meeting with Gregor Lohaus and add it to his Google Calendar. Use getAvailability first when the user asks for a meeting at a flexible or uncertain time.",
+			inputSchema: z.object({
+				title: z.string().describe("Meeting title, make something up if not provided"),
+				description: z.string().describe("Meeting description / agenda, make something up if not provided"),
+				dateTime: z
+					.string()
+					.describe("ISO 8601 datetime for the meeting start, e.g. 2026-06-18T10:00:00+02:00"),
+				durationMinutes: z
+					.number()
+					.int()
+					.min(15)
+					.max(120)
+					.describe("Duration of the meeting in minutes, if none provided ask if 20 minutes is ok"),
+				attendeeEmail: z
+					.string()
+					.optional()
+					.describe("Optional email of the visitor to invite, if provided"),
+				attendeeName: z.string().optional().describe("Name of the visitor"),
+			}),
+			execute: async (input) => {
+				if (input.attendeeEmail && !isLikelyEmail(input.attendeeEmail)) {
+					return {
+						success: false,
+						error: "The attendee email does not look valid. Ask the visitor to provide a valid email address before scheduling.",
+					};
+				}
+
+				return scheduleMeeting({ ...input });
+			},
+		}),
+		cancelMeeting: tool({
+			description: "Remove a previously scheduled meeting from Gregor's dedicated availability calendar. Use only when you have the exact eventId returned by scheduleMeeting.",
+			inputSchema: z.object({
+				eventId: z.string().min(1).describe("Google Calendar event id returned by a previous scheduleMeeting tool call."),
+			}),
+			execute: async ({ eventId }) => cancelMeeting({ eventId }),
+		}),
+		searchSiteContent: tool({
+			description: "Search Gregor Lohaus's own website content across CV entries, projects, blog posts, and music. Use this for questions about Gregor's work, skills, writing, projects, or site content. For broad questions about Gregor's projects, use types ['project'] so the tool returns the project catalog.",
+			inputSchema: z.object({
+				query: z.string().describe("Search query, skill, technology, topic, or phrase."),
+				types: z.array(contentTypeSchema).optional().describe("Optional content types to search. Omit to search all site content."),
+				limit: z.number().int().min(1).max(12).optional().describe("Maximum number of results to return."),
+			}),
+			execute: async ({ query, types, limit }) => {
+				const results = await buildSearchResults(query, types?.length ? types : ["cv", "project", "blog", "music"]);
+				return {
+					success: true,
+					query,
+					results: results.slice(0, limit ?? 8).map(({ score, ...result }) => result),
+				};
+			},
+		}),
+		getRelevantExperience: tool({
+			description: "Find Gregor's most relevant CV entries and projects for a role, skill set, seniority, or domain. Use this for recruiter-style qualification questions.",
+			inputSchema: z.object({
+				role: z.string().optional().describe("Role or job title, such as full-stack engineer or React Native developer."),
+				skills: z.array(z.string()).optional().describe("Technologies, tools, or skills to match."),
+				domain: z.string().optional().describe("Product or business domain to match, if any."),
+				seniority: z.string().optional().describe("Seniority or responsibility level to match, if any."),
+				limit: z.number().int().min(1).max(10).optional().describe("Maximum matching entries to return."),
+			}),
+			execute: async ({ role, skills, domain, seniority, limit }) => {
+				const terms = [role, domain, seniority, ...(skills ?? [])].filter((value): value is string => Boolean(value?.trim()));
+				const query = terms.join(" ");
+				const results = await buildSearchResults(query, ["cv", "project"]);
+				const selected = results.slice(0, limit ?? 6);
+
+				return {
+					success: true,
+					query,
+					matches: selected.map(({ score, ...result }) => ({
+						...result,
+						matchedTerms: matchedTerms(`${result.title} ${result.snippet} ${(result.metadata?.stackItems as string[] | undefined)?.join(" ") ?? ""}`, terms),
+						whyRelevant: result.type === "project"
+							? "Project match based on title, description, and technology stack."
+							: "CV match based on experience title, category, and description.",
+					})),
+				};
+			},
+		}),
+		getProjectDetails: tool({
+			description: "Get detailed information for one of Gregor's projects, including description, stack, source link, release link, and project page URL.",
+			inputSchema: z.object({
+				idOrTitle: z.string().min(1).describe("Project id, exact title, or partial project title."),
+			}),
+			execute: async ({ idOrTitle }) => {
+				const projects = await loadProjects();
+				const found = projects.find((item) => projectMatches(item, idOrTitle));
+
+				if (!found) {
+					return {
+						success: false,
+						error: `No project matched "${idOrTitle}".`,
+						suggestions: projects.slice(0, 5).map((item) => ({
+							id: item.id,
+							title: item.title,
+							url: `/projects#${item.id}`,
+						})),
+					};
+				}
+
+				return {
+					success: true,
+					project: {
+						id: found.id,
+						title: found.title,
+						description: stripMarkup(found.description),
+						sourceType: found.sourceType,
+						sourceLink: found.sourceLink,
+						releaseStatus: found.releaseStatus,
+						releaseLink: found.releaseLink,
+						stackItems: found.techStack?.stackItems ?? [],
+						url: `/projects#${found.id}`,
+					},
+				};
+			},
+		}),
+		getAvailability: tool({
+			description: "Check Gregor's Google Calendar availability and suggest open meeting slots. Use this directly for questions like 'when is the next open spot?' or 'what times are available?'. If no date range is provided, it checks from now. Use before scheduling when the requested time is flexible.",
+			inputSchema: z.object({
+				fromDateTime: z.string().optional().describe("ISO 8601 range start. Defaults to now."),
+				toDateTime: z.string().optional().describe("ISO 8601 range end. Defaults to 14 days after the range start."),
+				durationMinutes: z.number().int().min(15).max(120).optional().describe("Desired meeting duration. Defaults to 30 minutes."),
+				timeZone: z.string().optional().describe("IANA time zone for working-hours filtering. Defaults to Europe/Berlin."),
+				workdayStartHour: z.number().int().min(0).max(23).optional().describe("Earliest local start hour. Defaults to 9."),
+				workdayEndHour: z.number().int().min(1).max(24).optional().describe("Latest local end hour. Defaults to 17."),
+			}),
+			execute: async (input) => {
+				const requestId = crypto.randomUUID();
+				logAvailability(requestId, "start", {
+					input,
+				});
+
+				const durationMinutes = input.durationMinutes ?? 30;
+				const timeZone = safeTimeZone(input.timeZone);
+				const workdayStartHour = input.workdayStartHour ?? 9;
+				const workdayEndHour = Math.max(input.workdayEndHour ?? 17, workdayStartHour + 1);
+				const rangeStart = parseDate(input.fromDateTime, new Date());
+				const defaultEnd = new Date(rangeStart.getTime() + 14 * 24 * 60 * 60 * 1000);
+				const requestedEnd = parseDate(input.toDateTime, defaultEnd);
+				const maxEnd = new Date(rangeStart.getTime() + 31 * 24 * 60 * 60 * 1000);
+				const rangeEnd = requestedEnd <= rangeStart ? defaultEnd : requestedEnd > maxEnd ? maxEnd : requestedEnd;
+				logAvailability(requestId, "resolved range", {
+					durationMinutes,
+					timeZone,
+					workdayStartHour,
+					workdayEndHour,
+					rangeStart: rangeStart.toISOString(),
+					rangeEnd: rangeEnd.toISOString(),
+				});
+
+				const calendar = getGoogleCalendarClient();
+				const calendarId = getGoogleCalendarId();
+				logAvailability(requestId, "service account calendar ready", {
+					calendarId,
+				});
+
+				let busy: Array<{ start: Date; end: Date }>;
+				try {
+					logAvailability(requestId, "freebusy request");
+					const response = await calendar.freebusy.query({
+						requestBody: {
+							timeMin: rangeStart.toISOString(),
+							timeMax: rangeEnd.toISOString(),
+							timeZone,
+							items: [{ id: calendarId }],
+						},
+					});
+					busy = (response.data.calendars?.[calendarId]?.busy ?? [])
+						.map((item) => ({
+							start: parseDate(item.start ?? undefined, rangeStart),
+							end: parseDate(item.end ?? undefined, rangeStart),
+						}))
+						.filter((item) => item.end > item.start);
+					logAvailability(requestId, "freebusy response", {
+						busyCount: busy.length,
+					});
+				} catch (error) {
+					console.error(`[ai:getAvailability:${requestId}] freebusy failed`, error);
+					return {
+						success: false,
+						error: "Failed to read Gregor's Google Calendar availability.",
+					};
+				}
+
+				const availableSlots = availabilitySlots({
+					rangeStart,
+					rangeEnd,
+					busy,
+					durationMinutes,
+					timeZone,
+					workdayStartHour,
+					workdayEndHour,
+				});
+				logAvailability(requestId, "complete", {
+					busyCount: busy.length,
+					availableSlotCount: availableSlots.length,
+					firstAvailableSlot: availableSlots[0],
+				});
+				const nextAvailableSlot = availableSlots[0] ?? null;
+
+				return {
+					success: true,
+					range: {
+						start: rangeStart.toISOString(),
+						end: rangeEnd.toISOString(),
+						timeZone,
+					},
+					durationMinutes,
+					busy: busy.map((item) => ({
+						start: item.start.toISOString(),
+						end: item.end.toISOString(),
+					})),
+					nextAvailableSlot,
+					availableSlots,
+				};
+			},
+		}),
+	};
+}
--- a/src/server/dbschema/schema.ts
+++ b/src/server/dbschema/schema.ts
@@ -2,7 +2,7 @@
 // https://orm.drizzle.team/docs/sql-schema-declaration

 import { relations, sql } from "drizzle-orm";
-import { index, pgEnum, pgSchema, pgTableCreator } from "drizzle-orm/pg-core";
+import { index, pgEnum, pgSchema, pgTableCreator, uniqueIndex } from "drizzle-orm/pg-core";

 /**
 * This is an example of how to use the multi-project schema feature of Drizzle ORM. Use the same
@@ -43,6 +43,7 @@ export const cvEntry = createTable(
 			.default(sql`CURRENT_TIMESTAMP`)
 			.notNull().$type<Date>(),
 		updatedAt: d.timestamp({ withTimezone: true }).$onUpdate(() => new Date()).$type<Date>(),
+		position: d.integer(),
 	})
 )

@@ -55,7 +56,7 @@ export const cvEntryRelations = relations(cvEntry, ({one}) => ({

 export const sourceTypeEnum = pgEnum('source_type',['open','closed'])
 export const releaseStatus = pgEnum('release_status',['released','unreleased'])
-export const stackItemEnum = pgEnum('stack_item',['drizzle','postgres','nextjs','react','servercomponents','php','laravel','reactnative','expo','mysql','nginx','protobuf','grpc','java','graalvm','spring','aws','s3','react-native','linux','debian','htmx','neon'])
+export const stackItemEnum = pgEnum('stack_item',['drizzle','postgres','nextjs','react','servercomponents','php','laravel','reactnative','expo','mysql','nginx','protobuf','grpc','java','graalvm','spring','aws','s3','react-native','linux','debian','htmx','neon','typescript','javafx','x11','zig','libghostty','zod'])

 export const project = createTable(
 	"project",
@@ -68,6 +69,7 @@ export const project = createTable(
 		releaseStatus: releaseStatus(),
 		releaseLink: d.varchar({length: 200}),
 		stackId: d.uuid(),
+		orderPos: d.integer(),
 	})
 )

@@ -85,3 +87,95 @@ export const techStack = createTable(
 		stackItems: stackItemEnum().array()
 	})
 )
+
+export const music = createTable(
+	"music",
+	(d) => ({
+		id: d.uuid().primaryKey().notNull(),
+		title: d.varchar({ length: 100 }).notNull(),
+		description: d.text(),
+		// Original high-quality upload (e.g. FLAC), offered as a download.
+		fileUrl: d.varchar("file_url", { length: 500 }).notNull(),
+		fileKey: d.varchar("file_key", { length: 200 }).notNull(),
+		fileName: d.varchar("file_name", { length: 200 }).notNull(),
+		// Lighter, streaming-friendly transcode (e.g. AAC) used by the player.
+		streamUrl: d.varchar("stream_url", { length: 500 }),
+		streamKey: d.varchar("stream_key", { length: 200 }),
+		streamName: d.varchar("stream_name", { length: 200 }),
+		createdAt: d
+			.timestamp({ withTimezone: true })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull()
+			.$type<Date>(),
+		updatedAt: d.timestamp({ withTimezone: true }).$onUpdate(() => new Date()).$type<Date>(),
+	})
+)
+
+export const blogPost = createTable(
+	"blog_post",
+	(d) => ({
+		id: d.uuid().primaryKey().defaultRandom(),
+		slug: d.varchar({ length: 200 }).notNull(),
+		title: d.varchar({ length: 200 }).notNull(),
+		date: d.varchar({ length: 20 }),
+		description: d.text(),
+		tags: d.text().array(),
+		fileKey: d.varchar("file_key", { length: 200 }).notNull(),
+		fileUrl: d.varchar("file_url", { length: 500 }).notNull(),
+		fileName: d.varchar("file_name", { length: 255 }).notNull(),
+		customId: d.varchar("custom_id", { length: 255 }).notNull(),
+		createdAt: d
+			.timestamp({ withTimezone: true })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull()
+			.$type<Date>(),
+		updatedAt: d.timestamp({ withTimezone: true }).$onUpdate(() => new Date()).$type<Date>(),
+	}),
+	(t) => [
+		uniqueIndex("blog_post_slug_idx").on(t.slug),
+		uniqueIndex("blog_post_file_key_idx").on(t.fileKey),
+		uniqueIndex("blog_post_custom_id_idx").on(t.customId),
+	],
+)
+
+export const messageRoleEnum = pgEnum('message_role', ['user', 'assistant'])
+
+export const chatSession = createTable(
+	"chat_session",
+	(d) => ({
+		id: d.uuid().primaryKey().defaultRandom(),
+		userId: d.varchar({ length: 255 }).notNull(),
+		createdAt: d.timestamp({ withTimezone: true }).default(sql`CURRENT_TIMESTAMP`).notNull().$type<Date>(),
+		updatedAt: d.timestamp({ withTimezone: true }).$onUpdate(() => new Date()).$type<Date>(),
+	})
+)
+
+export const chatSessionRelations = relations(chatSession, ({ many }) => ({
+	messages: many(chatMessage),
+}))
+
+export const chatMessage = createTable(
+	"chat_message",
+	(d) => ({
+		id: d.uuid().primaryKey().defaultRandom(),
+		sessionId: d.uuid('session_id').notNull(),
+		role: messageRoleEnum().notNull(),
+		content: d.text().notNull(),
+		createdAt: d.timestamp({ withTimezone: true }).default(sql`CURRENT_TIMESTAMP`).notNull().$type<Date>(),
+	})
+)
+
+export const chatMessageRelations = relations(chatMessage, ({ one }) => ({
+	session: one(chatSession, {
+		fields: [chatMessage.sessionId],
+		references: [chatSession.id],
+	}),
+}))
+
+export const systemSettings = createTable(
+	"systemSetting",
+	(d) => ({
+		systemPropmt: d.text(),
+		model: d.text()
+	})
+)
--- a/src/server/googleCalendar.ts
+++ b/src/server/googleCalendar.ts
@@ -0,0 +1,20 @@
+import "server-only";
+
+import { google } from "googleapis";
+import { env } from "~/env";
+
+const calendarScope = "https://www.googleapis.com/auth/calendar";
+
+export function getGoogleCalendarClient() {
+	const auth = new google.auth.JWT({
+		email: env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
+		key: env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY.replace(/\\n/g, "\n"),
+		scopes: [calendarScope],
+	});
+
+	return google.calendar({ version: "v3", auth });
+}
+
+export function getGoogleCalendarId() {
+	return env.GOOGLE_CALENDAR_ID;
+}
--- a/src/server/routers/_app.ts
+++ b/src/server/routers/_app.ts
@@ -1,14 +1,18 @@
 import type { inferRouterOutputs } from "@trpc/server";
 import { router } from "../trpc";
 import type { inferReactQueryProcedureOptions } from "@trpc/react-query";
+import { blogRouter } from "./blog";
 import { projectRouter } from "./project";
 import { techStackRouter } from "./techStack";
 import { cvCategoryRouter } from "./cvCategory";
 import { cvEntryRouter } from "./cvEntry";
+import { musicRouter } from "./music";
 import { trpcCrudRouterFromDrizzleEntity } from "../lib";
 import { cvCategory } from "../dbschema/schema";
+import { chatRouter } from "./chat";

 export const trpcRouter = router({
+  blog: blogRouter,
  project: trpcCrudRouterFromDrizzleEntity('project').router,
  projectv2: projectRouter,
  techStack: trpcCrudRouterFromDrizzleEntity('techStack').router,
@@ -17,6 +21,8 @@ export const trpcRouter = router({
  categoryv2: cvCategoryRouter,
  entry: trpcCrudRouterFromDrizzleEntity('cvEntry').router,
  entryv2: cvEntryRouter,
+  music: musicRouter,
+  chat: chatRouter
 });

 export type TrpcRouter = typeof trpcRouter;
--- a/src/server/routers/blog.ts
+++ b/src/server/routers/blog.ts
@@ -0,0 +1,379 @@
+import { TRPCError } from "@trpc/server";
+import { desc, eq, or } from "drizzle-orm";
+import matter from "gray-matter";
+import { UTApi, UTFile } from "uploadthing/server";
+import z from "zod";
+import { isAdmin } from "~/app/actions";
+import { env } from "~/env.js";
+import { db } from "~/server/db";
+import { blogPost } from "~/server/dbschema/schema";
+import { publicProcedure, router } from "~/server/trpc";
+
+const utapi = new UTApi({ token: env.UPLOADTHING_TOKEN });
+
+const blogPostInput = z.object({
+  slug: z.string().min(1),
+  title: z.string().min(1),
+  date: z.string().optional(),
+  description: z.string().optional(),
+  tags: z.array(z.string()).optional(),
+  content: z.string(),
+});
+
+type BlogPostInput = z.infer<typeof blogPostInput>;
+
+type UploadThingFile = Awaited<ReturnType<typeof utapi.listFiles>>["files"][number];
+
+function cleanPrefix(): string {
+  return env.BLOG_MDX_PREFIX.trim().replace(/^\/+|\/+$/g, "");
+}
+
+function blogFileName(slug: string): string {
+  const prefix = cleanPrefix();
+  return prefix ? `${prefix}-${slug}.mdx` : `${slug}.mdx`;
+}
+
+function blogCustomId(slug: string): string {
+  const prefix = cleanPrefix();
+  const id = crypto.randomUUID();
+  return prefix ? `${prefix}:${slug}:${id}` : `${slug}:${id}`;
+}
+
+function optionalText(value: string | undefined): string | null {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : null;
+}
+
+function frontmatterText(value: unknown): string | null {
+  if (value instanceof Date) return value.toISOString().slice(0, 10);
+  return optionalText(typeof value === "string" ? value : undefined);
+}
+
+function normalizeTags(tags: unknown): string[] {
+  const values = Array.isArray(tags)
+    ? tags
+    : typeof tags === "string"
+      ? tags.split(",")
+      : [];
+
+  return Array.from(
+    new Set(
+      values
+        .map((tag) => String(tag).trim())
+        .filter(Boolean),
+    ),
+  );
+}
+
+function createMdxContent(input: BlogPostInput): string {
+  const date = optionalText(input.date);
+  const description = optionalText(input.description);
+  const tags = normalizeTags(input.tags);
+  const frontmatter: Record<string, unknown> = { slug: input.slug, title: input.title };
+  if (date) frontmatter.date = date;
+  if (description) frontmatter.description = description;
+  if (tags.length > 0) frontmatter.tags = tags;
+  return matter.stringify(input.content, frontmatter);
+}
+
+function summaryFromInput(input: BlogPostInput) {
+  return {
+    slug: input.slug,
+    title: input.title,
+    date: optionalText(input.date),
+    description: optionalText(input.description),
+    tags: normalizeTags(input.tags),
+  };
+}
+
+async function assertAdmin() {
+  const admin = await isAdmin();
+  if (!admin) throw new TRPCError({ code: "FORBIDDEN", message: "Access denied" });
+}
+
+async function uploadMdx(input: BlogPostInput) {
+  const mdxContent = createMdxContent(input);
+  const customId = blogCustomId(input.slug);
+  const file = new UTFile([mdxContent], blogFileName(input.slug), {
+    customId,
+    type: "text/plain",
+  });
+  const result = await utapi.uploadFiles(file);
+
+  if (result.error) {
+    throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: result.error.message });
+  }
+
+  if (!result.data.ufsUrl) {
+    throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "UploadThing did not return a file URL" });
+  }
+
+  return {
+    fileKey: result.data.key,
+    fileUrl: result.data.ufsUrl,
+    fileName: result.data.name,
+    customId: result.data.customId ?? customId,
+  };
+}
+
+async function fetchMdx(fileUrl: string): Promise<string> {
+  const res = await fetch(fileUrl, { next: { revalidate: 3600 } });
+  if (!res.ok) throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "Failed to fetch MDX file" });
+  return res.text();
+}
+
+function fileUrl(file: Pick<UploadThingFile, "key">): string {
+  return `https://utfs.io/f/${file.key}`;
+}
+
+function slugFromFileName(name: string): string {
+  const prefix = cleanPrefix();
+  const withoutExtension = name.replace(/\.mdx?$/, "");
+  if (prefix && withoutExtension.startsWith(`${prefix}-`)) return withoutExtension.slice(prefix.length + 1);
+  if (prefix && withoutExtension.startsWith(`${prefix}/`)) return withoutExtension.slice(prefix.length + 1);
+  return withoutExtension;
+}
+
+function slugFromCustomId(customId: string): string {
+  const prefix = cleanPrefix();
+  const value = prefix && customId.startsWith(`${prefix}:`)
+    ? customId.slice(prefix.length + 1)
+    : customId;
+  return value.split(":")[0] ?? value;
+}
+
+function fileMatchesPrefix(file: Pick<UploadThingFile, "name">): boolean {
+  if (!/\.mdx?$/.test(file.name)) return false;
+
+  const prefix = cleanPrefix();
+  if (!prefix) return true;
+
+  return file.name.startsWith(`${prefix}-`) || file.name.startsWith(`${prefix}/`);
+}
+
+function metadataFromFile(file: UploadThingFile, raw: string) {
+  const parsed = matter(raw);
+  const fallbackSlug = file.customId ? slugFromCustomId(file.customId) : slugFromFileName(file.name);
+
+  return {
+    slug: String(parsed.data.slug ?? fallbackSlug),
+    title: String(parsed.data.title ?? fallbackSlug),
+    date: frontmatterText(parsed.data.date),
+    description: frontmatterText(parsed.data.description),
+    tags: normalizeTags(parsed.data.tags),
+    fileKey: file.key,
+    fileUrl: fileUrl(file),
+    fileName: file.name,
+    customId: file.customId ?? blogCustomId(fallbackSlug),
+  };
+}
+
+async function listAllFiles(): Promise<readonly UploadThingFile[]> {
+  const files: UploadThingFile[] = [];
+  let offset = 0;
+  const limit = 500;
+  let hasMore = true;
+
+  while (hasMore) {
+    const page = await utapi.listFiles({ limit, offset });
+    files.push(...page.files);
+    hasMore = page.hasMore;
+    offset += limit;
+  }
+
+  return files;
+}
+
+export const blogRouter = router({
+  insert: publicProcedure
+    .input(blogPostInput)
+    .mutation(async ({ input }) => {
+      await assertAdmin();
+
+      const existing = await db.query.blogPost.findFirst({
+        where(fields, operators) {
+          return operators.eq(fields.slug, input.slug);
+        },
+      });
+      if (existing) throw new TRPCError({ code: "CONFLICT", message: `Post "${input.slug}" already exists` });
+
+      const uploaded = await uploadMdx(input);
+
+      try {
+        await db.insert(blogPost).values({
+          slug: input.slug,
+          title: input.title,
+          date: optionalText(input.date),
+          description: optionalText(input.description),
+          tags: normalizeTags(input.tags),
+          ...uploaded,
+        });
+        return [summaryFromInput(input)];
+      } catch (error) {
+        await utapi.deleteFiles(uploaded.fileKey);
+        throw error;
+      }
+    }),
+
+  update: publicProcedure
+    .input(blogPostInput.extend({ originalSlug: z.string().min(1) }))
+    .mutation(async ({ input }) => {
+      await assertAdmin();
+
+      const existing = await db.query.blogPost.findFirst({
+        where(fields, operators) {
+          return operators.eq(fields.slug, input.originalSlug);
+        },
+      });
+      if (!existing) throw new TRPCError({ code: "NOT_FOUND", message: `Post "${input.originalSlug}" not found` });
+
+      if (input.slug !== input.originalSlug) {
+        const slugConflict = await db.query.blogPost.findFirst({
+          where(fields, operators) {
+            return operators.eq(fields.slug, input.slug);
+          },
+        });
+        if (slugConflict) throw new TRPCError({ code: "CONFLICT", message: `Post "${input.slug}" already exists` });
+      }
+
+      const uploaded = await uploadMdx(input);
+
+      try {
+        await db.update(blogPost).set({
+          slug: input.slug,
+          title: input.title,
+          date: optionalText(input.date),
+          description: optionalText(input.description),
+          tags: normalizeTags(input.tags),
+          ...uploaded,
+        }).where(eq(blogPost.id, existing.id));
+
+        await utapi.deleteFiles(existing.fileKey);
+        return [summaryFromInput(input)];
+      } catch (error) {
+        await utapi.deleteFiles(uploaded.fileKey);
+        throw error;
+      }
+    }),
+
+  delete: publicProcedure
+    .input(z.object({ id: z.string() }))
+    .mutation(async ({ input }) => {
+      await assertAdmin();
+
+      const post = await db.query.blogPost.findFirst({
+        where(fields, operators) {
+          return operators.eq(fields.slug, input.id);
+        },
+      });
+      if (!post) throw new TRPCError({ code: "NOT_FOUND", message: `Post "${input.id}" not found` });
+
+      await db.delete(blogPost).where(eq(blogPost.id, post.id));
+      await utapi.deleteFiles(post.fileKey);
+      return [];
+    }),
+
+  list: publicProcedure.query(async () => {
+    return db.select({
+      slug: blogPost.slug,
+      title: blogPost.title,
+      date: blogPost.date,
+      description: blogPost.description,
+      tags: blogPost.tags,
+    }).from(blogPost).orderBy(desc(blogPost.date), desc(blogPost.createdAt));
+  }),
+
+  bySlug: 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` });
+
+    const raw = await fetchMdx(post.fileUrl);
+    const { content, data } = matter(raw);
+
+    return {
+      slug: post.slug,
+      content,
+      title: (data.title as string | undefined) ?? post.title,
+      date: frontmatterText(data.date) ?? post.date,
+      description: frontmatterText(data.description) ?? post.description,
+      tags: normalizeTags(data.tags).length > 0 ? normalizeTags(data.tags) : (post.tags ?? []),
+    };
+  }),
+
+  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();
+
+    const files = (await listAllFiles()).filter(fileMatchesPrefix);
+    const seenFileKeys = new Set<string>();
+    const seenSlugs = new Set<string>();
+    let created = 0;
+    let updated = 0;
+    let skipped = 0;
+    let deleted = 0;
+
+    for (const file of files) {
+      try {
+        const raw = await fetchMdx(fileUrl(file));
+        const metadata = metadataFromFile(file, raw);
+        seenFileKeys.add(file.key);
+        seenSlugs.add(metadata.slug);
+        const existing = await db.query.blogPost.findFirst({
+          where(fields, operators) {
+            return or(operators.eq(fields.fileKey, file.key), operators.eq(fields.slug, metadata.slug));
+          },
+        });
+
+        if (existing) {
+          await db.update(blogPost).set(metadata).where(eq(blogPost.id, existing.id));
+          updated += 1;
+        } else {
+          await db.insert(blogPost).values(metadata);
+          created += 1;
+        }
+      } catch {
+        skipped += 1;
+      }
+    }
+
+    const posts = await db.select({
+      id: blogPost.id,
+      fileKey: blogPost.fileKey,
+      slug: blogPost.slug,
+    }).from(blogPost);
+
+    const stalePostIds = posts
+      .filter((post) => !seenFileKeys.has(post.fileKey) && !seenSlugs.has(post.slug))
+      .map((post) => post.id);
+
+    for (const id of stalePostIds) {
+      await db.delete(blogPost).where(eq(blogPost.id, id));
+      deleted += 1;
+    }
+
+    return { created, updated, skipped, deleted };
+  }),
+});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Gregor Lohaus	85af4aec77	make meeting creation user level	2026-06-18 04:55:25 +02:00
Gregor Lohaus	05740e122e	Add AI assistant tools for site search, project details, experience matching, and calendar availability	2026-06-18 03:37:22 +02:00
Gregor Lohaus	95666e20e9	Merge branch 'chat-scroll-behaiviour'	2026-06-18 02:53:20 +02:00
Gregor Lohaus	993137068e	chat scroll to bottom by default	2026-06-18 02:53:06 +02:00
Gregor Lohaus	5755bd3184	fix chat mobile cutoff	2026-06-18 02:49:05 +02:00
Gregor Lohaus	ca29bd5003	Merge branch 'project-music-srr'	2026-06-18 02:47:15 +02:00
Gregor Lohaus	62f808b0cf	animated components hidden default	2026-06-18 02:47:03 +02:00
Gregor Lohaus	cb3ece4f99	ssr	2026-06-18 02:39:45 +02:00
Gregor Lohaus	c5faf8fa57	same mde editor in all admin forms	2026-06-18 02:12:37 +02:00
Gregor Lohaus	a7354ad774	Merge branch 'fix-cv-animations'	2026-06-18 01:59:00 +02:00
Gregor Lohaus	c742b8e457	fix height problems	2026-06-18 01:58:53 +02:00
Gregor Lohaus	4ce93a0466	Merge branch 'fix-cv-animations'	2026-06-18 01:43:35 +02:00
Gregor Lohaus	0d79adb104	fix cv animations	2026-06-18 01:41:25 +02:00
Gregor Lohaus	3e5be46503	Merge branch 'mdx-refactor'	2026-06-18 01:33:00 +02:00
Gregor Lohaus	73ba2b573d	cleanup markdown	2026-06-18 01:32:05 +02:00
Gregor Lohaus	c1fe73dbd0	remove stupid spacer	2026-06-16 19:55:38 +02:00
Gregor Lohaus	af4ff18917	Merge branch 'fix-cv-animations'	2026-06-16 19:16:37 +02:00
Gregor Lohaus	b59fb2b3af	fetch on render instead of fetch as you render	2026-06-16 19:16:31 +02:00
Gregor Lohaus	58dc4ce53f	Merge branch 'background-music-playback'	2026-06-16 19:13:44 +02:00
Gregor Lohaus	53bc70ab05	use audio session api	2026-06-16 19:13:32 +02:00
Gregor Lohaus	1b3f30cc90	Merge branch 'fix-cv-animations'	2026-06-16 19:10:33 +02:00
Gregor Lohaus	fd5063d1c4	cv entry uses animated components	2026-06-16 19:10:28 +02:00
Gregor Lohaus	303ac83fe2	Merge branch 'backround-music-playback'	2026-06-16 19:01:21 +02:00
Gregor Lohaus	91315730ac	background playback	2026-06-16 19:00:59 +02:00
Gregor Lohaus	13649cd6dc	Merge branch 'fix-cv-animations'	2026-06-16 18:56:05 +02:00
Gregor Lohaus	1e0f033d07	refactor to use existing animated components	2026-06-16 18:56:02 +02:00
Gregor Lohaus	39563b6740	Merge branch 'fix-cv-animations'	2026-06-16 18:42:19 +02:00
Gregor Lohaus	dcc4f47ccf	fix cv animations	2026-06-16 18:42:06 +02:00
Gregor Lohaus	c8a9ab5984	Merge branch 'ai-model-select'	2026-06-16 18:40:14 +02:00
Gregor Lohaus	54f108ac8d	model selector	2026-06-16 18:40:08 +02:00
Gregor Lohaus	865ef0b316	refactor animations once again	2026-06-16 15:41:03 +02:00
Gregor Lohaus	63b0405a7a	display waveform	2026-06-16 13:07:41 +02:00
Gregor Lohaus	7aa1746f97	convert flacs to aac for streaming	2026-06-16 12:49:30 +02:00
Gregor Lohaus	f5e8b87846	package updates, minor bug fixes, stack items, background animation fixes	2026-06-06 12:15:01 +02:00
Gregor Lohaus	65b9184a22	refactor animated background, fix type	2026-04-24 14:23:52 +02:00
Gregor Lohaus	ea7ddb8e51	fix admin redirect loop	2026-04-24 12:41:27 +02:00
Gregor Lohaus	bcefe397ca	speedinsights next	2026-04-24 12:26:44 +02:00
Gregor Lohaus	8ce95f2b5c	add speed insides	2026-04-24 12:23:31 +02:00
Gregor Lohaus	da43b31aa3	chat interface, validate user id	2026-04-24 12:11:29 +02:00
Gregor Lohaus	538d896b0e	Merge branch 'blog'	2026-04-24 11:58:34 +02:00
Gregor Lohaus	be6df0c8ad	blog editor	2026-04-24 11:58:19 +02:00
Gregor Lohaus	daab745c13	slop	2026-04-23 11:10:35 +02:00
Gregor Lohaus	c527391259	Merge branch 'projectpage'	2026-04-23 11:06:24 +02:00
Gregor Lohaus	404062904f	finish up project page	2026-04-23 11:04:59 +02:00
Gregor Lohaus	4e8538552e	Merge branch 'aiassistant'	2026-04-22 21:19:48 +02:00
Gregor Lohaus	64bd5c429e	logged out chat modal, call to action	2026-04-22 21:05:53 +02:00
Gregor Lohaus	52e0a65113	hide google sign in	2026-04-22 19:31:09 +02:00
Gregor Lohaus	30e3dbb42b	chat interface	2026-04-21 14:19:50 +02:00
Gregor Lohaus	caa9604704	early return on no sessionid	2026-03-31 15:47:41 +02:00
Gregor Lohaus	c62ee37538	prooompt engineering	2026-03-31 15:30:42 +02:00
Gregor Lohaus	ead9548744	server auth stuff, prooompt engineering	2026-03-31 15:29:47 +02:00
Gregor Lohaus	c5b3ee3875	get session by userid	2026-03-31 14:44:08 +02:00
Gregor Lohaus	2b5c105abb	current time tool	2026-03-31 14:39:56 +02:00
Gregor Lohaus	e25fc39bac	current time tool	2026-03-31 14:23:04 +02:00
Gregor Lohaus	e481fa66cd	reapply layout effect fix for timeline cleanup	2026-03-31 14:16:26 +02:00
Gregor Lohaus	009d2b8d60	drop multitimeline support from gsap provider but keep scroller priority feature	2026-03-31 14:12:29 +02:00
Gregor Lohaus	d567fa3e02	fix chat	2026-03-31 14:03:41 +02:00
Gregor Lohaus	399d78e508	reset timeline cleanup needs to be returned from layout effect	2026-03-30 19:04:20 +02:00
Gregor Lohaus	bfc2bb1501	reset gsap provider to music page version	2026-03-30 18:54:19 +02:00
Gregor Lohaus	d7a9e53d9a	revert some gsap provider changes	2026-03-30 18:50:05 +02:00
Gregor Lohaus	18abc4b3f7	chat fab	2026-03-30 18:10:09 +02:00
Gregor Lohaus	34dc53a8e9	ai modal	2026-03-30 18:09:55 +02:00
Gregor Lohaus	10b3f989c8	log userid	2026-03-30 17:06:15 +02:00
Gregor Lohaus	348ed790e2	Admin, cant 'use server'	2026-03-30 14:34:28 +02:00
Gregor Lohaus	c7de58a4b8	Admin sidebar cant be async	2026-03-30 14:28:45 +02:00
Gregor Lohaus	a51b313aba	force admin dynamic	2026-03-30 14:23:57 +02:00
Gregor Lohaus	363a91dd7d	Merge branch 'projectpage'	2026-03-30 14:14:30 +02:00
Gregor Lohaus	dfaba3a24e	animation stuff	2026-03-30 14:13:04 +02:00
Gregor Lohaus	9c5aec01e0	fix create techstack form	2026-03-14 18:40:23 +01:00
Gregor Lohaus	03399de14f	Merge branch 'musicpage'	2026-03-14 18:38:10 +01:00
Gregor Lohaus	095acc216a	remove example data	2026-03-14 18:37:58 +01:00
Gregor Lohaus	288616548a	no scroll trigger markers	2026-03-14 18:37:02 +01:00
Gregor Lohaus	57978d81e1	scroll triggers	2026-03-14 18:35:04 +01:00
Gregor Lohaus	b5291caa6e	working animations	2026-03-13 22:24:12 +01:00
Gregor Lohaus	4293eef824	working animations	2026-03-13 22:18:44 +01:00
Gregor Lohaus	d71bb5d26e	css reset	2026-03-13 19:44:49 +01:00
Gregor Lohaus	e0e32d16e2	reasonable animation system	2026-03-13 19:42:22 +01:00
Gregor Lohaus	166ae50c49	music and animation system	2026-03-13 15:49:53 +01:00
Gregor Lohaus	9b48661a6a	update readme	2026-03-13 10:37:47 +01:00
Gregor Lohaus	4916a2fc7b	Merge branch 'projectpage'	2026-03-10 21:01:36 +01:00
Gregor Lohaus	b0fb481cf2	gitignore worktrees	2026-03-10 21:00:39 +01:00
				`@@ -0,0 +1 @@`
				var C="https://unpkg.com/@ffmpeg/core@0.12.9/dist/umd/ffmpeg-core.js",N;(function(E){E.LOAD="LOAD",E.EXEC="EXEC",E.FFPROBE="FFPROBE",E.WRITE_FILE="WRITE_FILE",E.READ_FILE="READ_FILE",E.DELETE_FILE="DELETE_FILE",E.RENAME="RENAME",E.CREATE_DIR="CREATE_DIR",E.LIST_DIR="LIST_DIR",E.DELETE_DIR="DELETE_DIR",E.ERROR="ERROR",E.DOWNLOAD="DOWNLOAD",E.PROGRESS="PROGRESS",E.LOG="LOG",E.MOUNT="MOUNT",E.UNMOUNT="UNMOUNT"})(N\|\|(N={}));var G=Error("unknown message type"),V=Error("ffmpeg is not loaded, call `await ffmpeg.load()` first"),b=Error("called FFmpeg.terminate()"),v=Error("failed to import ffmpeg-core.js");var I,X=async({coreURL:E,wasmURL:D,workerURL:O})=>{let S=!I;try{if(!E)E=C;importScripts(E)}catch{if(!E\|\|E===C)E=C.replace("/umd/","/esm/");if(self.createFFmpegCore=(await import(E)).default,!self.createFFmpegCore)throw v}let A=E,x=D?D:E.replace(/.js$/g,".wasm"),B=O?O:E.replace(/.js$/g,".worker.js");return I=await self.createFFmpegCore({mainScriptUrlOrBlob:`${A}#${btoa(JSON.stringify({wasmURL:x,workerURL:B}))}`}),I.setLogger((W)=>self.postMessage({type:N.LOG,data:W})),I.setProgress((W)=>self.postMessage({type:N.PROGRESS,data:W})),S},Y=({args:E,timeout:D=-1})=>{I.setTimeout(D),I.exec(...E);let O=I.ret;return I.reset(),O},j=({args:E,timeout:D=-1})=>{I.setTimeout(D),I.ffprobe(...E);let O=I.ret;return I.reset(),O},J=({path:E,data:D})=>{return I.FS.writeFile(E,D),!0},$=({path:E,encoding:D})=>I.FS.readFile(E,{encoding:D}),q=({path:E})=>{return I.FS.unlink(E),!0},z=({oldPath:E,newPath:D})=>{return I.FS.rename(E,D),!0},H=({path:E})=>{return I.FS.mkdir(E),!0},K=({path:E})=>{let D=I.FS.readdir(E),O=[];for(let S of D){let A=I.FS.stat(`${E}/${S}`),x=I.FS.isDir(A.mode);O.push({name:S,isDir:x})}return O},Q=({path:E})=>{return I.FS.rmdir(E),!0},R=({fsType:E,options:D,mountPoint:O})=>{let S=E,A=I.FS.filesystems[S];if(!A)return!1;return I.FS.mount(A,D,O),!0},Z=({mountPoint:E})=>{return I.FS.unmount(E),!0};self.onmessage=async({data:{id:E,type:D,data:O}})=>{let S=[],A;try{if(D!==N.LOAD&&!I)throw V;switch(D){case N.LOAD:A=await X(O);break;case N.EXEC:A=Y(O);break;case N.FFPROBE:A=j(O);break;case N.WRITE_FILE:A=J(O);break;case N.READ_FILE:A=$(O);break;case N.DELETE_FILE:A=q(O);break;case N.RENAME:A=z(O);break;case N.CREATE_DIR:A=H(O);break;case N.LIST_DIR:A=K(O);break;case N.DELETE_DIR:A=Q(O);break;case N.MOUNT:A=R(O);break;case N.UNMOUNT:A=Z(O);break;default:throw G}}catch(x){self.postMessage({id:E,type:N.ERROR,data:x.toString()});return}if(A instanceof Uint8Array)S.push(A.buffer);self.postMessage({id:E,type:D,data:A},S)};