diff --git a/.coderabbit.yml b/.coderabbit.yml
index bbe4eaa..31b49da 100644
--- a/.coderabbit.yml
+++ b/.coderabbit.yml
@@ -143,6 +143,15 @@ reviews:
         ### Nuxt Config
         - Module-driven architecture. Check module docs before modifying module options.
 
+    - path: "app/components/OgImage/**/*.vue"
+      instructions: |
+        OG image components are rendered by Satori (not a browser). Special rules:
+        - Use inline styles only (no Tailwind, no `<style>` blocks). Hardcode hex colors.
+        - Use `<img>` for photos, inline `<svg>` for icons (never `<Icon>`, `<NuxtImg>`, or data URI `<img>`).
+        - Set icon `width`/`height` both as HTML attributes AND in `:style`.
+        - CRITICAL: nuxt-og-image's flex plugin overrides `flexDirection` to `column` on any `<div>` whose children include block elements (div, p, ul, ol, li, blockquote, pre, hr, table, dl). To preserve `flexDirection: 'row'`, add `class="flex-row"` (any class containing "flex-") to the container. Use `<span>` instead of `<div>` for text inside row containers.
+        - The flex plugin also forces `flexWrap: 'wrap'` and `gap: '0.2em'` on elements without a class containing "flex-".
+
     - path: "**/*.vue"
       instructions: |
         Verify: SFC block order, `<NuxtLink>` instead of `<a>`, `<NuxtImg>` instead of `<img>`, no nested links (stretched-link pattern).
diff --git a/README.md b/README.md
index 561ae0b..20b8539 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ _(excluding those listed in `./package.json`)_
 **Assets & Materials Used:**<br>
 _(including images & 3D models; mostly only those requiring attribution)_
 
-- Image `avatar-thorsten-seyschab.webp` by [Franziska Kestel](https://franziskakestel.de/).
+- Image `avatar-thorsten-seyschab.jpg` by [Franziska Kestel](https://franziskakestel.de/).
 
 ## License
 
diff --git a/app/components/OgImage/OgImageHome.vue b/app/components/OgImage/OgImageHome.vue
index 5c823b2..4bff910 100755
--- a/app/components/OgImage/OgImageHome.vue
+++ b/app/components/OgImage/OgImageHome.vue
@@ -29,31 +29,8 @@ withDefaults(defineProps<{
       overflow: 'hidden',
     }"
   >
-    <!-- Radial accent glow (top-right, behind avatar) -->
-    <div
-      :style="{
-        position: 'absolute',
-        top: '-80px',
-        right: '100px',
-        width: '700px',
-        height: '700px',
-        borderRadius: '50%',
-        background: 'radial-gradient(circle, rgba(0,220,130,0.25) 0%, transparent 65%)',
-      }"
-    />
-
-    <!-- Secondary glow (bottom-left) -->
-    <div
-      :style="{
-        position: 'absolute',
-        bottom: '-200px',
-        left: '-100px',
-        width: '500px',
-        height: '500px',
-        borderRadius: '50%',
-        background: 'radial-gradient(circle, rgba(0,220,130,0.18) 0%, transparent 65%)',
-      }"
-    />
+    <!-- Ambient glow effects -->
+    <OgImageGlow />
 
     <!-- Subtle horizontal rule -->
     <div
@@ -111,11 +88,12 @@ withDefaults(defineProps<{
         borderRadius: '50%',
         background: 'linear-gradient(135deg, #00dc82, #00c474)',
         padding: '5px',
+        flexWrap: 'nowrap',
       }"
     >
       <img
         alt="Thorsten Seyschab"
-        src="/avatar-thorsten-seyschab.webp"
+        src="/avatar-thorsten-seyschab.jpg"
         :style="{
           width: '340px',
           height: '340px',
@@ -125,16 +103,7 @@ withDefaults(defineProps<{
       >
     </div>
 
-    <!-- Footer (absolute to stay at bottom despite centered content) -->
-    <div
-      :style="{
-        position: 'absolute',
-        bottom: '60px',
-        left: '60px',
-        right: '60px',
-      }"
-    >
-      <OgImageFooter />
-    </div>
+    <!-- Footer -->
+    <OgImageFooter />
   </div>
 </template>
diff --git a/app/components/OgImage/OgImageTalk.vue b/app/components/OgImage/OgImageTalk.vue
new file mode 100755
index 0000000..2c24b52
--- /dev/null
+++ b/app/components/OgImage/OgImageTalk.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+/**
+ * OG image component for talk pages.
+ * Rendered by Satori (not a browser) - must use inline styles and hardcoded colors.
+ */
+defineProps<{
+  title?: string
+  event?: string
+  date?: string
+  location?: string
+}>()
+
+const iconColor = '#71717a'
+</script>
+
+<template>
+  <div
+    :style="{
+      width: '1200px',
+      height: '630px',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      backgroundColor: '#0a0a0b',
+      fontFamily: 'Inter, system-ui, sans-serif',
+      padding: '60px 80px',
+      position: 'relative',
+      overflow: 'hidden',
+    }"
+  >
+    <!-- Ambient glow effects -->
+    <OgImageGlow />
+
+    <!-- Avatar - top right -->
+    <OgImageAvatar />
+
+    <!-- Main content -->
+    <div
+      :style="{
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'nowrap',
+        maxWidth: '960px',
+      }"
+    >
+      <!-- Category label -->
+      <div
+        :style="{
+          fontSize: '16px',
+          fontWeight: 600,
+          color: '#00dc82',
+          letterSpacing: '0.08em',
+          textTransform: 'uppercase',
+          marginBottom: '20px',
+        }"
+      >
+        Talk
+      </div>
+
+      <!-- Title -->
+      <div
+        :style="{
+          fontSize: '64px',
+          fontWeight: 800,
+          color: '#fafafa',
+          lineHeight: 1.05,
+          letterSpacing: '-0.03em',
+          marginBottom: '24px',
+        }"
+      >
+        {{ title || 'Conference Talk' }}
+      </div>
+
+      <!-- Event name -->
+      <div
+        v-if="event"
+        :style="{
+          fontSize: '26px',
+          fontWeight: 500,
+          color: '#a1a1aa',
+          lineHeight: 1.3,
+        }"
+      >
+        {{ event }}
+      </div>
+
+      <!-- Date and location row -->
+      <!--
+        class="flex-row" prevents nuxt-og-image's flex plugin from overriding
+        flexDirection to 'column' (it does so for any div containing div children
+        unless the parent has a class containing "flex-").
+        Text nodes use <span> to avoid being classified as block elements.
+      -->
+      <div
+        v-if="date || location"
+        class="flex-row"
+        :style="{
+          display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'nowrap',
+          alignItems: 'center',
+          marginTop: '20px',
+        }"
+      >
+        <!-- Phosphor calendar-blank icon (regular weight) -->
+        <svg
+          v-if="date"
+          height="18"
+          :style="{ width: '18px', height: '18px', marginRight: '8px' }"
+          viewBox="0 0 256 256"
+          width="18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16M72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160z"
+            :fill="iconColor"
+          />
+        </svg>
+        <span
+          v-if="date"
+          :style="{
+            fontSize: '18px',
+            color: '#71717a',
+            fontFamily: 'monospace',
+            marginRight: location ? '32px' : '0',
+          }"
+        >
+          {{ date }}
+        </span>
+        <!-- Phosphor map-pin icon (regular weight) -->
+        <svg
+          v-if="location"
+          height="18"
+          :style="{ width: '18px', height: '18px', marginRight: '8px' }"
+          viewBox="0 0 256 256"
+          width="18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M128 64a40 40 0 1 0 40 40a40 40 0 0 0-40-40m0 64a24 24 0 1 1 24-24a24 24 0 0 1-24 24m0-112a88.1 88.1 0 0 0-88 88c0 31.4 14.51 64.68 42 96.25a254.2 254.2 0 0 0 41.45 38.3a8 8 0 0 0 9.18 0a254.2 254.2 0 0 0 41.37-38.3c27.45-31.57 42-64.85 42-96.25a88.1 88.1 0 0 0-88-88m0 206c-16.53-13-72-60.75-72-118a72 72 0 0 1 144 0c0 57.23-55.47 105-72 118"
+            :fill="iconColor"
+          />
+        </svg>
+        <span
+          v-if="location"
+          :style="{
+            fontSize: '18px',
+            color: '#71717a',
+          }"
+        >
+          {{ location }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <OgImageFooter />
+  </div>
+</template>
diff --git a/app/components/OgImage/components/OgImageAvatar.vue b/app/components/OgImage/components/OgImageAvatar.vue
new file mode 100644
index 0000000..66452ce
--- /dev/null
+++ b/app/components/OgImage/components/OgImageAvatar.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/**
+ * Shared avatar for non-Home OG image components.
+ * Renders a circular avatar with accent gradient border in the top-right corner.
+ * Satori constraints: inline styles only, no Tailwind, hardcoded colors.
+ */
+</script>
+
+<template>
+  <div
+    :style="{
+      position: 'absolute',
+      top: '48px',
+      right: '80px',
+      width: '130px',
+      height: '130px',
+      borderRadius: '50%',
+      background: 'linear-gradient(135deg, #00dc82, #27272a)',
+      padding: '4px',
+      flexWrap: 'nowrap',
+    }"
+  >
+    <img
+      alt="Thorsten Seyschab"
+      src="/avatar-thorsten-seyschab.jpg"
+      :style="{
+        width: '120px',
+        height: '120px',
+        borderRadius: '50%',
+        objectFit: 'cover',
+      }"
+    >
+  </div>
+</template>
diff --git a/app/components/OgImage/components/OgImageFooter.vue b/app/components/OgImage/components/OgImageFooter.vue
index 72c0791..92516a3 100644
--- a/app/components/OgImage/components/OgImageFooter.vue
+++ b/app/components/OgImage/components/OgImageFooter.vue
@@ -7,44 +7,55 @@
 </script>
 
 <template>
-  <!-- Author name and site URL -->
   <div
     :style="{
-      display: 'flex',
-      flexWrap: 'nowrap',
-      justifyContent: 'space-between',
-      alignItems: 'flex-end',
+      position: 'absolute',
+      bottom: '60px',
+      left: '60px',
+      right: '60px',
     }"
   >
+    <!-- Author name and site URL -->
     <div
+      class="flex-row"
       :style="{
-        fontSize: '24px',
-        fontWeight: 600,
-        color: '#00dc82',
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+        justifyContent: 'space-between',
+        alignItems: 'flex-end',
       }"
     >
-      Thorsten Seyschab
+      <span
+        :style="{
+          fontSize: '24px',
+          fontWeight: 600,
+          color: '#00dc82',
+        }"
+      >
+        Thorsten Seyschab
+      </span>
+      <span
+        :style="{
+          fontSize: '22px',
+          fontWeight: 400,
+          color: '#71717a',
+        }"
+      >
+        todde.tv
+      </span>
     </div>
+
+    <!-- Bottom gradient accent line -->
     <div
       :style="{
-        fontSize: '22px',
-        fontWeight: 400,
-        color: '#71717a',
+        position: 'absolute',
+        bottom: '0',
+        left: '0',
+        right: '0',
+        height: '4px',
+        background: 'linear-gradient(90deg, #00dc82, #00c474, transparent)',
       }"
-    >
-      todde.tv
-    </div>
+    />
   </div>
-
-  <!-- Bottom gradient accent line -->
-  <div
-    :style="{
-      position: 'absolute',
-      bottom: '0',
-      left: '0',
-      right: '0',
-      height: '4px',
-      background: 'linear-gradient(90deg, #00dc82, #00c474, transparent)',
-    }"
-  />
 </template>
diff --git a/app/components/OgImage/components/OgImageGlow.vue b/app/components/OgImage/components/OgImageGlow.vue
new file mode 100644
index 0000000..e874c60
--- /dev/null
+++ b/app/components/OgImage/components/OgImageGlow.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/**
+ * Shared ambient glow effects for all OG image components.
+ * Renders two radial gradient spotlights: top-right and bottom-left.
+ * Satori constraints: inline styles only, no Tailwind, hardcoded colors.
+ */
+</script>
+
+<template>
+  <!-- Radial accent glow (top-right) -->
+  <div
+    :style="{
+      position: 'absolute',
+      top: '-180px',
+      right: '-120px',
+      width: '700px',
+      height: '700px',
+      borderRadius: '50%',
+      background: 'radial-gradient(circle, rgba(0,220,130,0.25) 0%, transparent 65%)',
+    }"
+  />
+
+  <!-- Secondary glow (bottom-left) -->
+  <div
+    :style="{
+      position: 'absolute',
+      bottom: '-200px',
+      left: '-100px',
+      width: '500px',
+      height: '500px',
+      borderRadius: '50%',
+      background: 'radial-gradient(circle, rgba(0,220,130,0.18) 0%, transparent 65%)',
+    }"
+  />
+</template>
diff --git a/app/components/content/TalkCard.vue b/app/components/content/TalkCard.vue
new file mode 100755
index 0000000..3747bee
--- /dev/null
+++ b/app/components/content/TalkCard.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+const props = defineProps<{
+  talk: {
+    path: string
+    date: string
+    title: string
+    event: string
+    location?: string
+    slidesUrl?: string
+    videoUrl?: string
+    repoUrl?: string
+  }
+}>()
+
+const today = useTodayDate()
+const isUpcoming = computed(() => props.talk.date >= today.value)
+</script>
+
+<template>
+  <AppCard class="relative cursor-pointer" gap="2" interactive>
+    <div class="flex items-center gap-4 text-xs">
+      <time class="flex items-center gap-1 font-mono text-text-dim" :datetime="talk.date">
+        <Icon name="ph:calendar-blank" :size="14" />
+        {{ talk.date }}
+      </time>
+      <span v-if="talk.location" class="flex items-center gap-1 text-text-dim">
+        <Icon name="ph:map-pin" :size="14" />
+        {{ talk.location }}
+      </span>
+      <span
+        v-if="isUpcoming"
+        class="rounded-full bg-accent/15 px-2 py-0.5 text-[10px] font-bold tracking-wider text-accent uppercase"
+      >
+        Upcoming
+      </span>
+    </div>
+    <h3>
+      <NuxtLink class="card-link" :to="talk.path">
+        {{ talk.title }}
+      </NuxtLink>
+    </h3>
+    <p class="text-sm">
+      {{ talk.event }}
+    </p>
+    <div v-if="talk.slidesUrl || talk.videoUrl || talk.repoUrl" class="relative z-10 mt-1 flex gap-4">
+      <NuxtLink
+        v-if="talk.slidesUrl"
+        class="flex items-center gap-1.5 text-xs font-medium text-accent hover:text-accent-hover"
+        target="_blank"
+        :to="talk.slidesUrl"
+      >
+        <Icon name="ph:presentation" :size="16" />
+        Slides
+      </NuxtLink>
+      <NuxtLink
+        v-if="talk.videoUrl"
+        class="flex items-center gap-1.5 text-xs font-medium text-accent hover:text-accent-hover"
+        target="_blank"
+        :to="talk.videoUrl"
+      >
+        <Icon name="ph:play-circle" :size="16" />
+        Video
+      </NuxtLink>
+      <NuxtLink
+        v-if="talk.repoUrl"
+        class="flex items-center gap-1.5 text-xs font-medium text-accent hover:text-accent-hover"
+        target="_blank"
+        :to="talk.repoUrl"
+      >
+        <Icon name="ph:github-logo" :size="16" />
+        Repo
+      </NuxtLink>
+    </div>
+  </AppCard>
+</template>
+
+<style scoped>
+@reference "~/assets/css/main.css";
+
+.card-link {
+  @apply text-inherit no-underline;
+}
+
+.card-link::after {
+  @apply absolute inset-0;
+  content: '';
+}
+</style>
diff --git a/app/components/content/TestimonialCard.vue b/app/components/content/TestimonialCard.vue
new file mode 100755
index 0000000..6a89830
--- /dev/null
+++ b/app/components/content/TestimonialCard.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps<{
+  testimonial: {
+    quote: string
+    author: string
+    role: string
+    linkTo?: string
+  }
+}>()
+
+const linkTo = computed(() => props.testimonial.linkTo)
+</script>
+
+<template>
+  <AppCard :full-height="true" :to="linkTo">
+    <Icon class="text-accent" name="ph:quotes" :size="24" />
+    <p class="flex-1 leading-relaxed">
+      {{ testimonial.quote }}
+    </p>
+    <div>
+      <span class="font-semibold text-text">{{ testimonial.author }}</span>
+      <span class="text-text-dim"> · {{ testimonial.role }}</span>
+    </div>
+  </AppCard>
+</template>
diff --git a/app/components/content/TestimonialCarousel.vue b/app/components/content/TestimonialCarousel.vue
new file mode 100755
index 0000000..0eee347
--- /dev/null
+++ b/app/components/content/TestimonialCarousel.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+const props = defineProps<{
+  testimonials: Array<{
+    quote: string
+    author: string
+    role: string
+    linkTo?: string
+  }>
+}>()
+
+const scrollContainer = ref<HTMLElement>()
+const activeIndex = ref(0)
+
+const canScrollLeft = ref(false)
+const canScrollRight = ref(true)
+
+function onScroll() {
+  const el = scrollContainer.value
+  if (!el) return
+  const children = el.children
+  if (!children.length) return
+
+  const containerRect = el.getBoundingClientRect()
+  const containerCenter = containerRect.left + containerRect.width / 2
+  let closest = 0
+  let closestDist = Infinity
+
+  for (let i = 0; i < children.length; i++) {
+    const childRect = (children[i] as HTMLElement).getBoundingClientRect()
+    let dist: number
+    if (i === 0) {
+      dist = Math.abs(childRect.left - containerRect.left)
+    }
+    else if (i === children.length - 1) {
+      dist = Math.abs(childRect.right - containerRect.right)
+    }
+    else {
+      dist = Math.abs(childRect.left + childRect.width / 2 - containerCenter)
+    }
+    if (dist < closestDist) {
+      closestDist = dist
+      closest = i
+    }
+  }
+  activeIndex.value = closest
+
+  canScrollLeft.value = el.scrollLeft > 0
+  canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 1
+}
+
+const DRAG_THRESHOLD = 5
+let isPointerDown = false
+let hasDragged = false
+let startX = 0
+let startScrollLeft = 0
+
+function onPointerDown(e: PointerEvent) {
+  if (e.pointerType === 'touch') return
+  const el = scrollContainer.value
+  if (!el) return
+  e.preventDefault()
+  isPointerDown = true
+  hasDragged = false
+  startX = e.clientX
+  startScrollLeft = el.scrollLeft
+  el.setPointerCapture(e.pointerId)
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (!isPointerDown) return
+  const el = scrollContainer.value
+  if (!el) return
+  const dx = e.clientX - startX
+  if (!hasDragged && Math.abs(dx) >= DRAG_THRESHOLD) {
+    hasDragged = true
+    el.style.scrollSnapType = 'none'
+    el.style.scrollBehavior = 'auto'
+  }
+  if (hasDragged) {
+    el.scrollLeft = startScrollLeft - dx
+  }
+}
+
+function onPointerUp(e: PointerEvent) {
+  if (!isPointerDown) return
+  isPointerDown = false
+  const el = scrollContainer.value
+  if (!el) return
+  el.releasePointerCapture(e.pointerId)
+  el.style.scrollBehavior = ''
+  el.style.scrollSnapType = ''
+}
+
+function onClickCapture(e: MouseEvent) {
+  if (hasDragged) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+}
+
+function scrollTo(index: number) {
+  const el = scrollContainer.value
+  if (!el) return
+  const child = el.children[index] as HTMLElement | undefined
+  if (!child) return
+  const childRect = child.getBoundingClientRect()
+  const containerRect = el.getBoundingClientRect()
+  let target: number
+  if (index === 0) {
+    target = el.scrollLeft + childRect.left - containerRect.left
+  }
+  else if (index === props.testimonials.length - 1) {
+    target = el.scrollLeft + childRect.right - containerRect.right
+  }
+  else {
+    target = el.scrollLeft + (childRect.left + childRect.width / 2) - (containerRect.left + containerRect.width / 2)
+  }
+  el.scrollTo({ left: target, behavior: 'smooth' })
+}
+</script>
+
+<template>
+  <div>
+    <div class="relative">
+      <div
+        v-if="canScrollLeft"
+        class="pointer-events-none absolute inset-y-0 left-0 z-10 w-8 bg-gradient-to-r from-bg to-transparent"
+      />
+      <div
+        v-if="canScrollRight && testimonials.length > 1"
+        class="pointer-events-none absolute inset-y-0 right-0 z-10 w-8 bg-gradient-to-l from-bg to-transparent"
+      />
+      <div
+        ref="scrollContainer"
+        class="scrollbar-hide flex cursor-grab snap-x snap-mandatory gap-4 overflow-x-auto scroll-smooth
+               select-none active:cursor-grabbing"
+        @click.capture="onClickCapture"
+        @dragstart.prevent
+        @pointercancel="onPointerUp"
+        @pointerdown="onPointerDown"
+        @pointermove="onPointerMove"
+        @pointerup="onPointerUp"
+        @scroll.passive="onScroll"
+      >
+        <div
+          v-for="(t, i) in testimonials"
+          :key="i"
+          class="w-[85%] flex-shrink-0 sm:w-[70%]"
+          :class="i === 0 ? 'snap-start' : i === testimonials.length - 1 ? 'snap-end' : 'snap-center'"
+        >
+          <TestimonialCard :testimonial="t" />
+        </div>
+      </div>
+    </div>
+    <div v-if="testimonials.length > 1" class="mt-4 flex justify-center gap-2">
+      <button
+        v-for="(_, i) in testimonials"
+        :key="i"
+        :aria-label="`Go to testimonial ${i + 1}`"
+        class="h-2.5 w-2.5 cursor-pointer touch-manipulation rounded-full border-0 p-0 transition-colors"
+        :class="i === activeIndex ? 'bg-accent' : 'bg-border hover:bg-text-dim'"
+        @click="scrollTo(i)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@reference "~/assets/css/main.css";
+
+.scrollbar-hide {
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  @apply hidden;
+}
+</style>
diff --git a/app/components/ui/AppCard.vue b/app/components/ui/AppCard.vue
index 5e3b7ce..df5ba61 100755
--- a/app/components/ui/AppCard.vue
+++ b/app/components/ui/AppCard.vue
@@ -4,9 +4,9 @@
  * Renders as a NuxtLink when `to` or `href` is provided, otherwise a plain div.
  */
 const props = defineProps<{
-  /** Internal route path — makes card a clickable link */
+  /** Internal route path - makes card a clickable link */
   to?: string
-  /** External URL — makes card an anchor link */
+  /** External URL - makes card an anchor link */
   href?: string
   /** Vertical gap between card children. Default: '3' */
   gap?: '2' | '3'
@@ -32,7 +32,7 @@ const gapClass = computed(() => {
 <template>
   <NuxtLink
     v-if="to || href"
-    class="app-card p-4 sm:p-6"
+    class="app-card app-card-base app-card-hover p-4 sm:p-6"
     :class="[gapClass, { 'h-full': fullHeight }]"
     :to="linkTarget"
     v-bind="linkAttrs"
@@ -41,9 +41,9 @@ const gapClass = computed(() => {
   </NuxtLink>
   <div
     v-else
-    class="p-4 sm:p-6"
+    class="app-card-base p-4 sm:p-6"
     :class="[
-      interactive ? 'app-card-interactive' : 'app-card-static',
+      interactive ? 'app-card-hover' : '',
       gapClass,
       { 'h-full': fullHeight },
     ]"
@@ -63,17 +63,7 @@ const gapClass = computed(() => {
   @apply transition-colors hover:border-accent hover:bg-surface-hover;
 }
 
-/* --- */
-
 .app-card {
-  @apply app-card-base app-card-hover no-underline text-inherit;
-}
-
-.app-card-static {
-  @apply app-card-base;
-}
-
-.app-card-interactive {
-  @apply app-card-base app-card-hover;
+  @apply no-underline text-inherit;
 }
 </style>
diff --git a/app/pages/talks/[slug].vue b/app/pages/talks/[slug].vue
new file mode 100755
index 0000000..3f883e7
--- /dev/null
+++ b/app/pages/talks/[slug].vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const { data: talk } = await useAsyncData(`talk-${route.params.slug}`, () =>
+  queryCollection('talks').path(`/talks/${route.params.slug}`).first(),
+)
+
+if (!talk.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Talk not found' })
+}
+
+const today = useTodayDate()
+const isUpcoming = computed(() => talk.value!.date >= today.value)
+
+useSeoMeta({
+  title: `${talk.value.title} - Thorsten Seyschab`,
+  description: talk.value.description || `${talk.value.title} at ${talk.value.event} in ${talk.value.location}.`,
+})
+
+defineOgImageComponent('Talk', {
+  title: talk.value.title,
+  event: talk.value.event,
+  date: talk.value.date,
+  location: talk.value.location,
+})
+</script>
+
+<template>
+  <div v-if="talk">
+    <AppSection>
+      <AppBackLink label="All Talks" to="/talks" />
+
+      <div class="mb-4 flex items-center gap-4 text-sm text-text-dim">
+        <time class="flex items-center gap-1 font-mono">
+          <Icon name="ph:calendar-blank" :size="14" />
+          {{ talk.date }}
+        </time>
+        <span class="flex items-center gap-1">
+          <Icon name="ph:map-pin" :size="14" />
+          {{ talk.location }}
+        </span>
+        <span
+          v-if="isUpcoming"
+          class="rounded-full bg-accent/15 px-2.5 py-0.5 text-xs font-bold tracking-wider text-accent uppercase"
+        >
+          Upcoming
+        </span>
+      </div>
+
+      <h1 class="mb-3">
+        {{ talk.title }}
+      </h1>
+      <p class="mb-6 text-lg font-medium text-accent">
+        {{ talk.event }}
+      </p>
+
+      <div v-if="talk.description" class="mb-8 text-lg leading-relaxed text-text-muted">
+        <ContentRenderer :value="talk" />
+      </div>
+
+      <div v-if="talk.slidesUrl || talk.videoUrl || talk.repoUrl" class="flex flex-wrap gap-3">
+        <AppButton
+          v-if="talk.slidesUrl"
+          :href="talk.slidesUrl"
+          icon="ph:presentation"
+          label="View Slides"
+        />
+        <AppButton
+          v-if="talk.videoUrl"
+          :href="talk.videoUrl"
+          icon="ph:play-circle"
+          label="Watch Video"
+        />
+        <AppButton
+          v-if="talk.repoUrl"
+          :href="talk.repoUrl"
+          icon="ph:github-logo"
+          label="Source Code"
+        />
+      </div>
+    </AppSection>
+
+    <AppSeparator v-if="talk.testimonials?.length" />
+    <AppSection v-if="talk.testimonials?.length" heading="Testimonials">
+      <TestimonialCarousel :testimonials="talk.testimonials!" />
+    </AppSection>
+  </div>
+</template>
diff --git a/app/pages/talks/index.vue b/app/pages/talks/index.vue
new file mode 100755
index 0000000..4e2776a
--- /dev/null
+++ b/app/pages/talks/index.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+useSeoMeta({
+  title: 'Talks - Thorsten Seyschab',
+  description: 'Conference talks and speaking engagements by Thorsten Seyschab (toddeTV) on '
+    + 'tech and life topics - from Vue.js, Nuxt, and Vite plugins to 3D on the web.',
+})
+
+defineOgImageComponent('Talk', {
+  title: 'Talks',
+  event: 'Conference talks & speaking engagements',
+})
+
+const { data: allTalks } = await useAsyncData('talks', () =>
+  queryCollection('talks').order('date', 'DESC').all(),
+)
+
+const today = useTodayDate()
+
+const upcomingTalks = computed(() =>
+  (allTalks.value ?? []).filter(t => t.date >= today.value).sort((a, b) => a.date.localeCompare(b.date)),
+)
+
+const pastTalks = computed(() =>
+  (allTalks.value ?? []).filter(t => t.date < today.value),
+)
+
+const years = computed(() => {
+  const grouped = new Map<string, typeof pastTalks.value>()
+  for (const talk of pastTalks.value) {
+    const year = talk.date.slice(0, 4)
+    if (!grouped.has(year)) grouped.set(year, [])
+    grouped.get(year)!.push(talk)
+  }
+  return Array.from(grouped.entries())
+})
+</script>
+
+<template>
+  <div>
+    <AppPageHeader
+      description="I speak at conferences and meetups about tech and non-tech topics - from Vue.js,
+          Nuxt, and Vite plugins to 3D on the web and beyond. Here's a chronological list of my talks."
+      title="Talks"
+    />
+
+    <AppSeparator v-if="upcomingTalks.length" />
+    <AppSection v-if="upcomingTalks.length" spacing="md">
+      <h2 class="mb-6 font-mono text-lg font-medium text-accent">
+        Upcoming
+      </h2>
+      <div class="flex flex-col gap-4">
+        <TalkCard v-for="talk in upcomingTalks" :key="talk.path" :talk="talk" />
+      </div>
+    </AppSection>
+
+    <template v-for="[year, yearTalks] in years" :key="year">
+      <AppSeparator />
+      <AppSection spacing="md">
+        <h2 class="mb-6 font-mono text-lg font-medium text-accent">
+          {{ year }}
+        </h2>
+        <div class="flex flex-col gap-4">
+          <TalkCard v-for="talk in yearTalks" :key="talk.path" :talk="talk" />
+        </div>
+      </AppSection>
+    </template>
+  </div>
+</template>
diff --git a/content.config.ts b/content.config.ts
index 2c5bd71..bf1504d 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -7,16 +7,23 @@ import { defineContentConfig, defineCollection } from '@nuxt/content'
 import { asSeoCollection } from '@nuxtjs/seo/content'
 import { z } from 'zod'
 
+const testimonialSchema = z.object({
+  /** The testimonial text. */
+  quote: z.string(),
+  /** Name of the person who gave the testimonial. */
+  author: z.string(),
+  /** Role or affiliation of the author (e.g. "Project Lead / Company"). */
+  role: z.string(),
+})
+
 export default defineContentConfig({
   collections: {
     content: defineCollection(
       asSeoCollection({
         type: 'page',
         source: {
-          include: '**',
-          exclude: [
-            'socials/**',
-          ],
+          include: 'pages/**',
+          prefix: '/',
         },
       }),
     ),
@@ -41,5 +48,26 @@ export default defineContentConfig({
         handle: z.string(),
       }),
     }),
+
+    talks: defineCollection({
+      type: 'page',
+      source: 'talks/**',
+      schema: z.object({
+        /** Date of the talk in ISO 8601 format (e.g. "2024-11-12"). */
+        date: z.iso.date(),
+        /** Name of the event or conference (e.g. "NuxtNation 2024"). */
+        event: z.string(),
+        /** Location of the event (e.g. "Online" or city name). */
+        location: z.string(),
+        /** URL to the companion source code repository. */
+        repoUrl: z.url().optional(),
+        /** URL to the published slides. */
+        slidesUrl: z.url().optional(),
+        /** URL to the recorded video. */
+        videoUrl: z.url().optional(),
+        /** Audience or organizer testimonials for this talk. */
+        testimonials: z.array(testimonialSchema).optional(),
+      }),
+    }),
   },
 })
diff --git a/content/example.md b/content/pages/example.md
similarity index 100%
rename from content/example.md
rename to content/pages/example.md
diff --git a/content/talks/2022-10-28-musiktheorie-symposium.md b/content/talks/2022-10-28-musiktheorie-symposium.md
new file mode 100755
index 0000000..fd7528b
--- /dev/null
+++ b/content/talks/2022-10-28-musiktheorie-symposium.md
@@ -0,0 +1,11 @@
+---
+title: FMADB - Film Music Analysis Database
+date: 2022-10-28
+event: Musiktheorie Symposium
+location: Dresden, Germany
+repoUrl: https://github.com/toddeTV/talk_2022-10-28_musiktheorie-symposium
+---
+
+Presenting the FMADB\* project at the Musiktheorie Symposium, HfM Dresden\*\*, showcasing how structured databases can support the analysis of film music.<br>
+<br> \* "Film Music Analysis Database"<br>
+\*\* "Hochschule für Musik Carl Maria von Weber Dresden"
diff --git a/content/talks/2023-01-25-masters-thesis-defense.md b/content/talks/2023-01-25-masters-thesis-defense.md
new file mode 100755
index 0000000..bbcc853
--- /dev/null
+++ b/content/talks/2023-01-25-masters-thesis-defense.md
@@ -0,0 +1,11 @@
+---
+title: "Master's Thesis Defense: FMADB"
+date: 2023-01-25
+event: TUD Dresden University of Technology
+location: Dresden, Germany
+repoUrl: https://github.com/toddeTV/talk_2023-01-25_masters-thesis-defense
+slidesUrl: https://toddetv-masters-thesis-defense.netlify.app/1
+---
+
+Defense of the master's thesis on FMADB\* - a system enabling detailed music-theoretical analysis of film soundtracks using structured data.<br>
+<br> \* "Film Music Analysis Database"
diff --git a/content/talks/2024-09-17-pragvue.md b/content/talks/2024-09-17-pragvue.md
new file mode 100755
index 0000000..23c28b1
--- /dev/null
+++ b/content/talks/2024-09-17-pragvue.md
@@ -0,0 +1,9 @@
+---
+title: Moving Vue to 3D
+date: 2024-09-17
+event: PragVue 2024
+location: Prague, Czech Republic
+# repoUrl: https://github.com/toddeTV/talk_2024-09-17_PragVue-conference # TODO publish it
+---
+
+Presenting the journey of bringing 3D capabilities to Vue.js applications at the PragVue conference.
diff --git a/content/talks/2024-11-12-nuxtnation.md b/content/talks/2024-11-12-nuxtnation.md
new file mode 100755
index 0000000..573684a
--- /dev/null
+++ b/content/talks/2024-11-12-nuxtnation.md
@@ -0,0 +1,12 @@
+---
+title: Playing with Nuxt in 3D
+date: 2024-11-12
+event: NuxtNation 2024
+location: Online
+repoUrl: https://github.com/toddeTV/talk_2024-11-12_NuxtNation-conference
+slidesUrl: https://talk2024-11-12nuxtnation-conference.vercel.app/1
+# videoUrl: https://vi.to/hubs/nuxtnation
+videoUrl: https://www.youtube.com/watch?v=o5zTGtHb5-o
+---
+
+Demonstrating how to integrate 3D experiences into Nuxt applications using TresJS, covering setup, rendering, and interactive scenes.
diff --git a/content/talks/2025-01-29-vue-js-nation.md b/content/talks/2025-01-29-vue-js-nation.md
new file mode 100755
index 0000000..150a5e4
--- /dev/null
+++ b/content/talks/2025-01-29-vue-js-nation.md
@@ -0,0 +1,11 @@
+---
+title: Your Own Vite Plugin? That's as easy as 1 2 3(D)
+date: 2025-01-29
+event: Vue.js Nation 2025
+location: Online
+repoUrl: https://github.com/toddeTV/talk_2025-01-29_vue-js-nation-conference
+slidesUrl: https://talk-2025-01-29-vue-js-nation-conference.vercel.app/1
+videoUrl: https://www.youtube.com/watch?v=EbvvwWgJNpo
+---
+
+A hands-on guide to creating custom Vite plugins, with a focus on 3D web development use cases, including type-safe `*.gltf` file parsing.
diff --git a/content/talks/2025-02-13-hamburg-vue-js-meetup.md b/content/talks/2025-02-13-hamburg-vue-js-meetup.md
new file mode 100755
index 0000000..96d8bb4
--- /dev/null
+++ b/content/talks/2025-02-13-hamburg-vue-js-meetup.md
@@ -0,0 +1,10 @@
+---
+title: 3D or Not 3D? Vue and Beyond!
+date: 2025-02-13
+event: Hamburg Vue.js Meetup
+location: Hamburg, Germany
+repoUrl: https://github.com/toddeTV/talk-2025-02-13-hamburg-vue-js-meetup
+slidesUrl: https://talk-2025-02-13-hamburg-vue-js-meetup.vercel.app/1
+---
+
+Exploring the possibilities of 3D rendering within the Vue.js ecosystem at the Hamburg Vue.js Meetup.
diff --git a/content/talks/2025-04-08-dev-day.md b/content/talks/2025-04-08-dev-day.md
new file mode 100755
index 0000000..609b8c6
--- /dev/null
+++ b/content/talks/2025-04-08-dev-day.md
@@ -0,0 +1,10 @@
+---
+title: Playing with 3D on the Web & Beyond
+date: 2025-04-08
+event: Dev Day 2025
+location: Dresden, Germany
+repoUrl: https://github.com/toddeTV/talk-2025-04-08-dev-day-conference
+slidesUrl: https://talk-2025-04-08-dev-day-conference.vercel.app/1
+---
+
+An overview of 3D web technologies - from Three.js and TresJS to WebGL and beyond - showcasing what's possible with 3D in the browser.
diff --git a/content/talks/2025-05-22-printed-europe.md b/content/talks/2025-05-22-printed-europe.md
new file mode 100755
index 0000000..2e6dbbf
--- /dev/null
+++ b/content/talks/2025-05-22-printed-europe.md
@@ -0,0 +1,11 @@
+---
+title: Web 101 with ❤️ from a Web-Dev for 3D Printing Pros
+date: 2025-05-22
+event: Printed Europe 2025
+location: Amsterdam, Netherlands
+repoUrl: https://github.com/toddeTV/talk-2025-05-22-printed-europe-conference
+slidesUrl: https://talk-2025-05-22-printed-europe-conference.vercel.app/1
+videoUrl: https://www.youtube.com/watch?v=AUYFrQmK0Kw
+---
+
+An introduction to modern web technologies tailored for professionals in the 3D printing industry, bridging the gap between web development and additive manufacturing.
diff --git a/content/talks/2025-06-04-frontend-nation.md b/content/talks/2025-06-04-frontend-nation.md
new file mode 100755
index 0000000..3bb43b9
--- /dev/null
+++ b/content/talks/2025-06-04-frontend-nation.md
@@ -0,0 +1,11 @@
+---
+title: Your Own Build Tool Agnostic Web-Plugin? That's as easy as 1 2 3(D)
+date: 2025-06-04
+event: Frontend Nation 2025
+location: Online
+repoUrl: https://github.com/toddeTV/talk-2025-06-04-frontend-nation
+slidesUrl: https://talk-2025-06-04-frontend-nation.vercel.app/1
+videoUrl: https://www.youtube.com/watch?v=7Y8MbIAqweE
+---
+
+Building cross-bundler plugins with Unplugin - creating plugins that work seamlessly across Vite, Rollup, Webpack, esbuild, and Rspack.
diff --git a/content/talks/2025-09-23-prag-vue.md b/content/talks/2025-09-23-prag-vue.md
new file mode 100755
index 0000000..7ea0201
--- /dev/null
+++ b/content/talks/2025-09-23-prag-vue.md
@@ -0,0 +1,11 @@
+---
+title: How to Nuxt Modules
+date: 2025-09-23
+event: PragVue 2025
+location: Prague, Czech Republic
+repoUrl: https://github.com/toddeTV/talk-2025-09-23-prag-vue
+slidesUrl: https://talk-2025-09-23-prag-vue.vercel.app/1
+videoUrl: https://slideslive.com/39045696/how-to-nuxt-modules?ref=folder-185349
+---
+
+A deep dive into creating Nuxt modules - from scaffolding to publishing, covering the module API, hooks, and best practices for extending Nuxt.
diff --git a/content/talks/2025-10-08-pre-vite-conf.md b/content/talks/2025-10-08-pre-vite-conf.md
new file mode 100755
index 0000000..fdb8cdf
--- /dev/null
+++ b/content/talks/2025-10-08-pre-vite-conf.md
@@ -0,0 +1,9 @@
+---
+title: The Small(er) Vite Quiz
+date: 2025-10-08
+event: Pre-ViteConf 2025
+location: Amsterdam, Netherlands
+# repoUrl: https://github.com/toddeTV/talk-2025-10-08-pre-vite-conf # TODO, repo currently empty, I need to upload the slides
+---
+
+A pre-conference talk kicking off ViteConf 2025 in Amsterdam.
diff --git a/content/talks/2025-10-10-vite-conf.md b/content/talks/2025-10-10-vite-conf.md
new file mode 100755
index 0000000..94cd6ff
--- /dev/null
+++ b/content/talks/2025-10-10-vite-conf.md
@@ -0,0 +1,9 @@
+---
+title: The Ultimate Vite Quiz
+date: 2025-10-10
+event: ViteConf 2025
+location: Amsterdam, Netherlands
+# repoUrl: https://github.com/toddeTV/talk-2025-10-10-vite-conf # TODO, repo currently empty, I need to upload the slides
+---
+
+Presenting at ViteConf 2025, the annual conference for the Vite ecosystem.
diff --git a/content/talks/2025-10-25-vue-fes-japan.md b/content/talks/2025-10-25-vue-fes-japan.md
new file mode 100755
index 0000000..707a7a1
--- /dev/null
+++ b/content/talks/2025-10-25-vue-fes-japan.md
@@ -0,0 +1,14 @@
+---
+title: Playing with Vue in 3D
+date: 2025-10-25
+event: Vue Fes Japan 2025
+location: Tokyo, Japan
+repoUrl: https://github.com/toddeTV/talk-2025-10-25-vue-fes-japan
+slidesUrl: https://talk-2025-10-25-vue-fes-japan.vercel.app/1
+testimonials:
+  - quote: One of the most engaging conference talks I've attended. Thorsten made 3D on the web feel approachable and exciting for the entire audience.
+    author: Attendee
+    role: Vue Fes Japan 2025
+---
+
+Exploring 3D rendering in Vue.js applications using TresJS and Three.js - bringing immersive 3D experiences to the web with the Vue ecosystem.
diff --git a/content/talks/2026-03-13-vuejs-amsterdam.md b/content/talks/2026-03-13-vuejs-amsterdam.md
new file mode 100755
index 0000000..c09964a
--- /dev/null
+++ b/content/talks/2026-03-13-vuejs-amsterdam.md
@@ -0,0 +1,8 @@
+---
+title: Vue Think You Know It All? The Ultimate Vue Live Quiz
+date: 2026-03-13
+event: Vue.js Amsterdam 2026
+location: Amsterdam, Netherlands
+---
+
+An interactive live quiz challenging the audience on their Vue.js knowledge - from fundamentals to advanced internals.
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 105151f..1d91a8f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -202,7 +202,7 @@ export default defineNuxtConfig({
       type: 'Person',
       name: 'Thorsten Seyschab',
       url: 'https://todde.tv',
-      image: '/avatar-thorsten-seyschab.webp',
+      image: '/avatar-thorsten-seyschab.jpg',
       // logo: '/favicon.svg', // not a standard Schema.org property for Person, but some tools check for it.
       // `sameAs` and `email` are populated at runtime from the `socials` content collection (see `app.vue`).
     },
diff --git a/public/avatar-thorsten-seyschab.jpg b/public/avatar-thorsten-seyschab.jpg
new file mode 100755
index 0000000..727dbfa
Binary files /dev/null and b/public/avatar-thorsten-seyschab.jpg differ
diff --git a/public/avatar-thorsten-seyschab.webp b/public/avatar-thorsten-seyschab.webp
deleted file mode 100755
index 50ec632..0000000
Binary files a/public/avatar-thorsten-seyschab.webp and /dev/null differ