diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e03fca..da2c6e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -55,8 +55,33 @@ migrates `[Unreleased]` into that file and empties this one — see
   diagonal stripes and the subtitle retypes like the titles. Still under
   `prefers-reduced-motion`.
 
+- **A journey page, `/experience`**
+  ([#78](https://github.com/kbrdn1/kbrdn.dev/issues/78)). Laid out like an
+  editorial spread (after isrod.eu): an intro, a strip of every role and
+  degree, then one spread each, the story on the left and the stack and
+  missions on the right, with "show more". Then the open source work, every
+  item linked to its pull request or issue: the projects I maintain (gwm,
+  vellum, LazyCurl, herdr-plugin-gwm, claude-crosstalk, kbrdn-docs), the
+  contributions (winget, aqua-registry and awesome-ratatui merged, nixpkgs in
+  review) and the bugs reported upstream. On the home page, the Parcours
+  accordions give way to a one-line-per-role teaser linking to it.
+
+- **An apps page, `/apps`**
+  ([#79](https://github.com/kbrdn1/kbrdn.dev/issues/79)). gwm (available),
+  vellum (in development) and LazyCurl (archived), each with its features and
+  licence, links to its site, repository and releases, and for gwm the install
+  commands of its README. The latest release is read from GitHub instead of
+  written down.
+
 ### Changed
 
+- **The navigation leads to pages**
+  ([#80](https://github.com/kbrdn1/kbrdn.dev/issues/80)). Journey, Apps and
+  Blog, on every page and on mobile, instead of the home page's anchors; one
+  list shared by the header, the blog header and the footer, with the current
+  page marked. On wide screens (1700px and up), the home page gets a table of
+  contents in the margin, like an article's, following the section being read.
+
 - **A new logo**
   ([#74](https://github.com/kbrdn1/kbrdn.dev/issues/74)). A K drawn from a
   rising bar and two orange pieces, redrawn as SVG on a 45° grid, replaces the
diff --git a/app/assets/css/components.css b/app/assets/css/components.css
index c7721ab..0fab0f4 100644
--- a/app/assets/css/components.css
+++ b/app/assets/css/components.css
@@ -61,19 +61,6 @@
   background-color: var(--color-primary-500);
 }
 
-/* Accordion +/- icon animation */
-.accordion-icon-bar {
-  transition: transform 300ms ease !important;
-}
-
-.accordion-icon-bar.is-collapsed {
-  transform: rotate(90deg);
-}
-
-.accordion-icon-bar.is-expanded {
-  transform: rotate(0deg);
-}
-
 /* Disabled button with subtle diagonal striped background */
 .btn-disabled-striped {
   background-image: repeating-linear-gradient(
diff --git a/app/assets/css/transitions.css b/app/assets/css/transitions.css
index 24ddeed..5103263 100644
--- a/app/assets/css/transitions.css
+++ b/app/assets/css/transitions.css
@@ -2,25 +2,6 @@
    Animations & Transitions
    ═══════════════════════════════════════════════════ */
 
-/* Accordion animation */
-.accordion-wrapper {
-  display: grid;
-  grid-template-rows: 0fr;
-  opacity: 0;
-  transition:
-    grid-template-rows 400ms cubic-bezier(0.4, 0, 0.2, 1),
-    opacity 300ms ease !important;
-}
-
-.accordion-wrapper.is-open {
-  grid-template-rows: 1fr;
-  opacity: 1;
-}
-
-.accordion-wrapper > .accordion-inner {
-  overflow: hidden;
-}
-
 /* Nav entrance animation */
 @keyframes nav-fade-in {
   from {
diff --git a/app/components/experience/Spread.vue b/app/components/experience/Spread.vue
new file mode 100644
index 0000000..5e28b93
--- /dev/null
+++ b/app/components/experience/Spread.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+// One role or degree on /experience, laid out like an editorial spread (after
+// isrod.eu/fr/experience): the story on the left, a rail on the right with the stack and
+// the first missions; "Show more" unfolds the rest.
+import { useI18n } from '#imports'
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    index: number
+    title: string
+    meta: string
+    summary: string
+    logo?: string
+    stack: string[]
+    itemsLabel: string
+    items: string[]
+    /** Missions shown before "Show more". */
+    preview?: number
+  }>(),
+  { logo: undefined, preview: 2 },
+)
+
+const { t } = useI18n()
+const open = ref(false)
+const hasMore = computed(() => props.items.length > props.preview)
+const shown = computed(() => (open.value ? props.items : props.items.slice(0, props.preview)))
+</script>
+
+<template>
+  <article
+    :id="id"
+    class="grid scroll-mt-24 gap-8 border-t border-neutral-200 py-10 md:grid-cols-12 dark:border-neutral-800"
+  >
+    <header class="md:col-span-7">
+      <span class="block font-mono text-[11px] tracking-widest text-neutral-500">
+        {{ String(index).padStart(2, '0') }}
+      </span>
+      <div class="mt-2 flex items-center gap-3">
+        <NuxtImg
+          v-if="logo"
+          :src="logo"
+          alt=""
+          width="36"
+          height="36"
+          class="size-9 shrink-0 object-contain"
+        />
+        <h3 class="text-2xl font-semibold text-neutral-900 sm:text-3xl dark:text-neutral-100">
+          <UiScrambleText :text="title" />
+        </h3>
+      </div>
+      <p class="mt-3 font-mono text-xs uppercase tracking-wider text-primary-500">{{ meta }}</p>
+      <p class="mt-5 max-w-xl text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
+        {{ summary }}
+      </p>
+      <button
+        v-if="hasMore"
+        type="button"
+        :aria-expanded="open"
+        :aria-controls="`${id}-items`"
+        class="relative isolate mt-6 inline-flex items-center gap-2 overflow-hidden border border-neutral-300 px-3 py-1.5 font-mono text-xs uppercase tracking-wider text-neutral-700 transition-colors hover:border-primary-500/60 hover:text-primary-500 dark:border-neutral-700 dark:text-neutral-300"
+        @click="open = !open"
+      >
+        <UiPixelCanvas />
+        {{ open ? t('experiencePage.less') : t('experiencePage.more') }}
+        <span aria-hidden="true">{{ open ? '−' : '+' }}</span>
+      </button>
+    </header>
+
+    <aside
+      class="space-y-6 border-neutral-200 md:col-span-5 md:border-l md:pl-8 dark:border-neutral-800"
+    >
+      <div>
+        <h4 class="font-mono text-[11px] uppercase tracking-widest text-neutral-500">
+          {{ t('experiencePage.stack') }}
+        </h4>
+        <p
+          class="mt-2 font-mono text-xs uppercase leading-relaxed tracking-wider text-neutral-700 dark:text-neutral-300"
+        >
+          {{ stack.join(' · ') }}
+        </p>
+      </div>
+      <div>
+        <h4 class="font-mono text-[11px] uppercase tracking-widest text-neutral-500">
+          {{ itemsLabel }}
+        </h4>
+        <ul
+          :id="`${id}-items`"
+          class="mt-2 space-y-2 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400"
+        >
+          <li v-for="item in shown" :key="item" class="flex gap-2">
+            <span class="mt-2 size-1.5 shrink-0 bg-primary-500" aria-hidden="true" />
+            <span>{{ item }}</span>
+          </li>
+        </ul>
+      </div>
+    </aside>
+  </article>
+</template>
diff --git a/app/components/home/Experiences.vue b/app/components/home/Experiences.vue
deleted file mode 100644
index 34fd9da..0000000
--- a/app/components/home/Experiences.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from '#imports'
-
-const { t, locale } = useI18n()
-
-interface Experience {
-  id: string
-  key: string
-  company: string
-  logo: string
-  startDate: string
-  endDate: string | null
-  current: boolean
-  technologies: string[]
-  tasksCount: number
-}
-
-const experiences: Experience[] = [
-  {
-    id: 'flippad',
-    key: 'flippad',
-    company: 'Jewely x Flippad',
-    logo: '/images/logos/jewely-x-flippad.png',
-    startDate: '2023-10',
-    endDate: '2026-09',
-    current: false,
-    technologies: [
-      'Laravel',
-      'Vue',
-      'Nuxt',
-      'AWS',
-      'React',
-      'Symfony',
-      'Redis',
-      'Stripe',
-      'Hono.js',
-      'Prisma',
-    ],
-    tasksCount: 5,
-  },
-  {
-    id: 'virtual-immersion',
-    key: 'virtualImmersion',
-    company: 'Virtual Immersion',
-    logo: '/images/logos/virtual-immersion.png',
-    startDate: '2022-11',
-    endDate: '2023-09',
-    current: false,
-    technologies: ['Symfony', 'Laravel', 'React', 'WordPress', 'MySQL', 'Tailwind CSS'],
-    tasksCount: 4,
-  },
-]
-
-const expandedId = ref<string | null>(experiences[0]?.id ?? null)
-const logoError = ref<Record<string, boolean>>({})
-
-function toggleExpand(id: string) {
-  expandedId.value = expandedId.value === id ? null : id
-}
-
-function getExperienceContent(exp: Experience) {
-  const tasks = Array.from({ length: exp.tasksCount }, (_, i) =>
-    t(`experiences.${exp.key}.tasks.${i}`),
-  )
-  return {
-    role: t(`experiences.${exp.key}.role`),
-    type: t(`experiences.${exp.key}.type`),
-    tasks,
-  }
-}
-
-function formatDate(dateStr: string): string {
-  const date = new Date(dateStr)
-  return date.toLocaleDateString(locale.value === 'fr' ? 'fr-FR' : 'en-US', {
-    month: 'short',
-    year: 'numeric',
-  })
-}
-
-function getInitials(name: string): string {
-  return name
-    .split(' ')
-    .map((n) => n[0])
-    .join('')
-    .toUpperCase()
-    .slice(0, 2)
-}
-</script>
-
-<template>
-  <div>
-    <!-- Accordions with Stagger Animation -->
-    <UiStaggerContainer :stagger-delay="100" :base-delay="0" class="space-y-4">
-      <UiStaggerItem
-        v-for="(exp, index) in experiences"
-        :key="exp.id"
-        :index="index"
-        class="border border-neutral-200 dark:border-neutral-800 overflow-hidden transition-colors duration-200 hover:bg-neutral-50 dark:hover:bg-neutral-900/50"
-      >
-        <!-- Accordion Header -->
-        <button
-          :id="'exp-header-' + exp.id"
-          type="button"
-          :aria-expanded="expandedId === exp.id"
-          :aria-controls="'exp-panel-' + exp.id"
-          :class="
-            cn(
-              'group/header relative isolate w-full flex items-center gap-4 overflow-hidden p-5 text-left transition-all duration-300',
-              expandedId === exp.id ? 'bg-primary-500/5 border-b border-primary-500/20' : '',
-            )
-          "
-          @click="toggleExpand(exp.id)"
-        >
-          <UiPixelCanvas />
-          <!-- Logo -->
-          <div class="w-10 h-10 flex-shrink-0 flex items-center justify-center">
-            <NuxtImg
-              v-if="!logoError[exp.id]"
-              :src="exp.logo"
-              :alt="exp.company"
-              width="40"
-              height="40"
-              class="w-10 h-10 object-contain"
-              @error="logoError[exp.id] = true"
-            />
-            <span
-              v-else
-              class="w-10 h-10 flex items-center justify-center text-sm font-bold bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"
-            >
-              {{ getInitials(exp.company) }}
-            </span>
-          </div>
-
-          <!-- Company & Role -->
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2.5">
-              <span class="text-lg font-medium text-neutral-900 dark:text-neutral-100">{{
-                exp.company
-              }}</span>
-              <UiTag v-if="exp.current" :label="t('experiences.current')" variant="primary" />
-            </div>
-            <p class="text-sm text-neutral-400 truncate">
-              {{ getExperienceContent(exp).role }}
-            </p>
-          </div>
-
-          <!-- Date & Chevron -->
-          <div class="flex items-center gap-3">
-            <span
-              class="hidden sm:inline font-mono text-xs uppercase tracking-wider text-neutral-500"
-            >
-              {{ formatDate(exp.startDate) }} -
-              {{ exp.current ? t('experiences.present') : formatDate(exp.endDate!) }}
-            </span>
-            <div
-              class="relative w-5 h-5 text-neutral-400 group-hover/header:text-primary-500"
-              aria-hidden="true"
-            >
-              <span class="absolute inset-0 flex items-center justify-center">
-                <span class="block w-3 h-0.5 bg-current" />
-              </span>
-              <span
-                class="absolute inset-0 flex items-center justify-center accordion-icon-bar"
-                :class="expandedId === exp.id ? 'is-expanded' : 'is-collapsed'"
-              >
-                <span class="block w-3 h-0.5 bg-current" />
-              </span>
-            </div>
-          </div>
-        </button>
-
-        <!-- Accordion Content -->
-        <div
-          :id="'exp-panel-' + exp.id"
-          role="region"
-          :aria-labelledby="'exp-header-' + exp.id"
-          :aria-hidden="expandedId !== exp.id"
-          class="accordion-wrapper"
-          :class="{ 'is-open': expandedId === exp.id }"
-        >
-          <div class="accordion-inner">
-            <div class="p-5 pt-4 space-y-4 bg-primary-500/5">
-              <!-- Type & Date (mobile) -->
-              <p class="font-mono text-xs uppercase tracking-wider text-neutral-500 sm:hidden">
-                {{ getExperienceContent(exp).type }} · {{ formatDate(exp.startDate) }} -
-                {{ exp.current ? t('experiences.present') : formatDate(exp.endDate!) }}
-              </p>
-
-              <!-- Technologies -->
-              <div class="flex flex-wrap gap-2">
-                <span
-                  v-for="tech in exp.technologies"
-                  :key="tech"
-                  :class="
-                    cn(
-                      'px-2.5 py-1 text-xs font-mono',
-                      'bg-neutral-200 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-700',
-                      'hover:bg-primary-500/10 hover:text-primary-400 hover:border-primary-500/30',
-                      'transition-colors duration-150 cursor-default',
-                    )
-                  "
-                >
-                  {{ tech }}
-                </span>
-              </div>
-
-              <!-- Tasks -->
-              <ul class="space-y-2.5">
-                <li
-                  v-for="(task, taskIndex) in getExperienceContent(exp).tasks"
-                  :key="taskIndex"
-                  class="flex items-start gap-2.5 text-neutral-600 dark:text-neutral-400"
-                >
-                  <UIcon
-                    name="i-heroicons-check"
-                    class="w-4 h-4 text-primary-500 flex-shrink-0 mt-0.5"
-                  />
-                  <span class="text-sm leading-relaxed">{{ task }}</span>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </UiStaggerItem>
-    </UiStaggerContainer>
-  </div>
-</template>
diff --git a/app/components/home/Parcours.vue b/app/components/home/Parcours.vue
new file mode 100644
index 0000000..e7927ba
--- /dev/null
+++ b/app/components/home/Parcours.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+// The home's Parcours section, now a short teaser: one line per role and degree,
+// the full story and the open source work live on /experience.
+import { useI18n } from '#imports'
+
+const { t } = useI18n()
+
+const rows = computed(() => [
+  ...EXPERIENCES.map((e) => ({
+    id: e.id,
+    years: `${e.startDate.slice(0, 4)}–${e.endDate?.slice(0, 4) ?? ''}`,
+    name: e.company,
+    detail: t(`experiences.${e.key}.role`),
+  })),
+  ...STUDIES.map((s) => ({
+    id: s.id,
+    years: `${s.startDate.slice(0, 4)}–${s.endDate?.slice(0, 4) ?? ''}`,
+    name: s.school,
+    detail: `${s.level} · ${t(`studies.${s.key}.degree`)}`,
+  })),
+])
+</script>
+
+<template>
+  <div>
+    <p class="max-w-2xl text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
+      {{ t('experiencePage.teaser') }}
+    </p>
+    <ul class="mt-4 divide-y divide-neutral-200 dark:divide-neutral-800">
+      <li v-for="row in rows" :key="row.id">
+        <NuxtLink
+          :to="`/experience#${row.id}`"
+          class="group relative isolate -mx-3 flex items-center gap-6 overflow-hidden px-3 py-3 transition-colors"
+        >
+          <UiPixelCanvas />
+          <span class="w-24 shrink-0 font-mono text-xs text-neutral-500">{{ row.years }}</span>
+          <span
+            class="min-w-0 truncate text-sm font-medium text-neutral-900 group-hover:text-primary-500 dark:text-neutral-100"
+          >
+            {{ row.name }}
+          </span>
+          <span class="ml-auto hidden truncate text-xs text-neutral-500 sm:block">
+            {{ row.detail }}
+          </span>
+        </NuxtLink>
+      </li>
+    </ul>
+    <NuxtLink
+      to="/experience"
+      class="mt-5 inline-flex items-center gap-2 font-mono text-xs uppercase tracking-wider text-primary-500 hover:text-primary-400"
+    >
+      <UiScrambleText :text="t('experiencePage.teaserCta')" effect="link" /> →
+    </NuxtLink>
+  </div>
+</template>
diff --git a/app/components/home/Studies.vue b/app/components/home/Studies.vue
deleted file mode 100644
index 933b3f7..0000000
--- a/app/components/home/Studies.vue
+++ /dev/null
@@ -1,268 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from '#imports'
-
-const { t, locale } = useI18n()
-
-interface Study {
-  id: string
-  key: string
-  school: string
-  logo: string
-  level: string
-  startDate: string
-  endDate: string | null
-  current: boolean
-  technologies: string[]
-  skillsCount: number
-}
-
-const studies: Study[] = [
-  {
-    id: 'mns-master',
-    key: 'mnsMaster',
-    school: 'Metz Numeric School',
-    logo: '/images/logos/mns.jpeg',
-    level: 'Master',
-    startDate: '2023-10',
-    endDate: '2025-10',
-    current: false,
-    technologies: [
-      'C#/.NET',
-      'TypeScript',
-      'Node',
-      'Git',
-      'Docker',
-      'Kubernetes',
-      'Flutter',
-      'Hono.js',
-      'Prisma',
-      'Drizzle',
-      'Adonis.js',
-    ],
-    skillsCount: 5,
-  },
-  {
-    id: 'mns-licence',
-    key: 'mnsLicence',
-    school: 'Metz Numeric School',
-    logo: '/images/logos/mns.jpeg',
-    level: 'Licence',
-    startDate: '2022-10',
-    endDate: '2023-09',
-    current: false,
-    technologies: [
-      'Figma',
-      'Java',
-      'Symfony',
-      'React',
-      'MongoDB',
-      'TypeScript',
-      'Node',
-      'Git',
-      'Docker',
-      'Vue',
-      'Angular',
-    ],
-    skillsCount: 4,
-  },
-  {
-    id: 'cci-bac2',
-    key: 'cciBac2',
-    school: 'CCI Longwy EESC',
-    logo: '/images/logos/cci.jpg',
-    level: 'BAC+2',
-    startDate: '2020-10',
-    endDate: '2022-06',
-    current: false,
-    technologies: [
-      'HTML',
-      'CSS',
-      'PHP',
-      'JavaScript',
-      'SASS',
-      'jQuery',
-      'Symfony',
-      'Adobe XD',
-      'Photoshop',
-      'Illustrator',
-      'MySQL',
-      'Bootstrap',
-      'Git',
-    ],
-    skillsCount: 5,
-  },
-]
-
-const expandedId = ref<string | null>(studies[0]?.id ?? null)
-const logoError = ref<Record<string, boolean>>({})
-
-function toggleExpand(id: string) {
-  expandedId.value = expandedId.value === id ? null : id
-}
-
-function getStudyContent(study: Study) {
-  const skills = Array.from({ length: study.skillsCount }, (_, i) =>
-    t(`studies.${study.key}.skills.${i}`),
-  )
-  return {
-    degree: t(`studies.${study.key}.degree`),
-    skills,
-  }
-}
-
-function formatDate(dateStr: string): string {
-  const date = new Date(dateStr)
-  return date.toLocaleDateString(locale.value === 'fr' ? 'fr-FR' : 'en-US', {
-    month: 'short',
-    year: 'numeric',
-  })
-}
-
-function getInitials(name: string): string {
-  return name
-    .split(' ')
-    .map((n) => n[0])
-    .join('')
-    .toUpperCase()
-    .slice(0, 2)
-}
-</script>
-
-<template>
-  <div>
-    <!-- Accordions with Stagger Animation -->
-    <UiStaggerContainer :stagger-delay="100" :base-delay="0" class="space-y-4">
-      <UiStaggerItem
-        v-for="(study, index) in studies"
-        :key="study.id"
-        :index="index"
-        class="border border-neutral-200 dark:border-neutral-800 overflow-hidden transition-colors duration-200 hover:bg-neutral-50 dark:hover:bg-neutral-900/50"
-      >
-        <!-- Accordion Header -->
-        <button
-          :id="'study-header-' + study.id"
-          type="button"
-          :aria-expanded="expandedId === study.id"
-          :aria-controls="'study-panel-' + study.id"
-          :class="
-            cn(
-              'group/header relative isolate w-full flex items-center gap-4 overflow-hidden p-5 text-left transition-all duration-300',
-              expandedId === study.id ? 'bg-primary-500/5 border-b border-primary-500/20' : '',
-            )
-          "
-          @click="toggleExpand(study.id)"
-        >
-          <UiPixelCanvas />
-          <!-- Logo -->
-          <div class="w-10 h-10 flex-shrink-0 flex items-center justify-center">
-            <NuxtImg
-              v-if="!logoError[study.id]"
-              :src="study.logo"
-              :alt="study.school"
-              width="40"
-              height="40"
-              class="w-10 h-10 object-contain"
-              @error="logoError[study.id] = true"
-            />
-            <span
-              v-else
-              class="w-10 h-10 flex items-center justify-center text-sm font-bold bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"
-            >
-              {{ getInitials(study.school) }}
-            </span>
-          </div>
-
-          <!-- School & Degree -->
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2.5">
-              <span class="text-lg font-medium text-neutral-900 dark:text-neutral-100">{{
-                study.school
-              }}</span>
-              <UiTag :label="study.level" variant="default" />
-            </div>
-            <p class="text-sm text-neutral-400 truncate">
-              {{ getStudyContent(study).degree }}
-            </p>
-          </div>
-
-          <!-- Date & Chevron -->
-          <div class="flex items-center gap-3">
-            <span
-              class="hidden sm:inline font-mono text-xs uppercase tracking-wider text-neutral-500"
-            >
-              {{ formatDate(study.startDate) }} -
-              {{ study.current ? t('studies.present') : formatDate(study.endDate!) }}
-            </span>
-            <div
-              class="relative w-5 h-5 text-neutral-400 group-hover/header:text-primary-500"
-              aria-hidden="true"
-            >
-              <span class="absolute inset-0 flex items-center justify-center">
-                <span class="block w-3 h-0.5 bg-current" />
-              </span>
-              <span
-                class="absolute inset-0 flex items-center justify-center accordion-icon-bar"
-                :class="expandedId === study.id ? 'is-expanded' : 'is-collapsed'"
-              >
-                <span class="block w-3 h-0.5 bg-current" />
-              </span>
-            </div>
-          </div>
-        </button>
-
-        <!-- Accordion Content -->
-        <div
-          :id="'study-panel-' + study.id"
-          role="region"
-          :aria-labelledby="'study-header-' + study.id"
-          :aria-hidden="expandedId !== study.id"
-          class="accordion-wrapper"
-          :class="{ 'is-open': expandedId === study.id }"
-        >
-          <div class="accordion-inner">
-            <div class="p-5 pt-4 space-y-4 bg-primary-500/5">
-              <!-- Date (mobile) -->
-              <p class="font-mono text-xs uppercase tracking-wider text-neutral-500 sm:hidden">
-                {{ formatDate(study.startDate) }} -
-                {{ study.current ? t('studies.present') : formatDate(study.endDate!) }}
-              </p>
-
-              <!-- Technologies -->
-              <div class="flex flex-wrap gap-2">
-                <span
-                  v-for="tech in study.technologies"
-                  :key="tech"
-                  :class="
-                    cn(
-                      'px-2.5 py-1 text-xs font-mono',
-                      'bg-neutral-200 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-700',
-                      'hover:bg-primary-500/10 hover:text-primary-400 hover:border-primary-500/30',
-                      'transition-colors duration-150 cursor-default',
-                    )
-                  "
-                >
-                  {{ tech }}
-                </span>
-              </div>
-
-              <!-- Skills -->
-              <ul class="space-y-2.5">
-                <li
-                  v-for="(skill, skillIndex) in getStudyContent(study).skills"
-                  :key="skillIndex"
-                  class="flex items-start gap-2.5 text-neutral-600 dark:text-neutral-400"
-                >
-                  <UIcon
-                    name="i-heroicons-check"
-                    class="w-4 h-4 text-primary-500 flex-shrink-0 mt-0.5"
-                  />
-                  <span class="text-sm leading-relaxed">{{ skill }}</span>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </UiStaggerItem>
-    </UiStaggerContainer>
-  </div>
-</template>
diff --git a/app/components/home/Toc.vue b/app/components/home/Toc.vue
new file mode 100644
index 0000000..fe02a4f
--- /dev/null
+++ b/app/components/home/Toc.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+// The home page's table of contents: the same box as an article's (BlogToc), set in the
+// margin outside the 80rem column, so only where that margin can hold it (>= 1700px
+// leaves 210px). The section the reader is in follows the scroll, like the header's
+// tabs used to before they became page links.
+import { useI18n } from '#imports'
+
+const { t } = useI18n()
+const reducedMotion = useReducedMotion()
+
+const items = computed(() => [
+  { id: 'about', text: t('sections.about'), level: 2 },
+  { id: 'latest-posts', text: t('sections.blog'), level: 2 },
+  { id: 'skills', text: t('sections.skills'), level: 2 },
+  { id: 'projects', text: t('sections.projects'), level: 2 },
+  { id: 'activity', text: t('sections.activity'), level: 3 },
+  { id: 'experience', text: t('sections.parcours'), level: 2 },
+])
+
+const active = ref('')
+const progress = ref(0)
+const HEADER_OFFSET = 72 // fixed header (56px) and some air
+
+function scrollToSection(id: string) {
+  const el = document.getElementById(id)
+  if (!el) return
+  window.scrollTo({
+    top: el.getBoundingClientRect().top + window.scrollY - HEADER_OFFSET,
+    behavior: reducedMotion.value ? 'auto' : 'smooth',
+  })
+}
+
+let cleanup: (() => void) | undefined
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) if (entry.isIntersecting) active.value = entry.target.id
+    },
+    { rootMargin: '-20% 0px -70% 0px' },
+  )
+  for (const { id } of items.value) {
+    const el = document.getElementById(id)
+    if (el) observer.observe(el)
+  }
+
+  let frame = 0
+  const onScroll = () => {
+    cancelAnimationFrame(frame)
+    frame = requestAnimationFrame(() => {
+      const max = document.documentElement.scrollHeight - window.innerHeight
+      progress.value = max > 0 ? Math.round((window.scrollY / max) * 100) : 0
+    })
+  }
+  onScroll()
+  window.addEventListener('scroll', onScroll, { passive: true })
+
+  cleanup = () => {
+    observer.disconnect()
+    cancelAnimationFrame(frame)
+    window.removeEventListener('scroll', onScroll)
+  }
+})
+
+onUnmounted(() => cleanup?.())
+</script>
+
+<template>
+  <div
+    class="pointer-events-auto fixed top-24 z-20 hidden w-44 min-[1700px]:block"
+    style="left: calc(50% + 40rem + 1.25rem)"
+  >
+    <BlogToc
+      :items="items"
+      :active-heading="active"
+      :progress="progress"
+      @scroll-to="scrollToSection"
+    />
+  </div>
+</template>
diff --git a/app/components/layout/BlogHeader.vue b/app/components/layout/BlogHeader.vue
index eed6eab..5ba50d6 100644
--- a/app/components/layout/BlogHeader.vue
+++ b/app/components/layout/BlogHeader.vue
@@ -2,7 +2,6 @@
 import { useI18n } from '#imports'
 
 const { t } = useI18n()
-const route = useRoute()
 
 const showBrandMenu = ref(false)
 
@@ -30,17 +29,8 @@ onUnmounted(() => {
   document.removeEventListener('keydown', handleKeydown)
 })
 
-const navLinks = computed(() => [{ to: '/blog', label: t('blogNav.articles') }])
-
-const isActive = (to: string) => {
-  if (to === '/blog') {
-    return (
-      route.path === '/blog' ||
-      (route.path.startsWith('/blog/') && !route.path.startsWith('/blog/tags'))
-    )
-  }
-  return route.path.startsWith(to)
-}
+// The site's pages, shared with the portfolio header and the footer
+const { links: navLinks, isActive } = useSiteNav()
 
 const isMobileMenuOpen = ref(false)
 </script>
@@ -107,7 +97,7 @@ const isMobileMenuOpen = ref(false)
         </div>
 
         <!-- Desktop Navigation -->
-        <nav class="flex items-stretch flex-1" aria-label="Blog navigation">
+        <nav class="flex items-stretch flex-1" aria-label="Site navigation">
           <NuxtLink
             v-for="link in navLinks"
             :key="link.to"
@@ -244,7 +234,7 @@ const isMobileMenuOpen = ref(false)
           v-if="isMobileMenuOpen"
           id="blog-mobile-nav"
           class="md:hidden py-3 border-t border-neutral-200 dark:border-neutral-800"
-          aria-label="Mobile blog navigation"
+          aria-label="Mobile site navigation"
         >
           <NuxtLink
             v-for="link in navLinks"
diff --git a/app/components/layout/Footer.vue b/app/components/layout/Footer.vue
index 5d6f663..d15ac57 100644
--- a/app/components/layout/Footer.vue
+++ b/app/components/layout/Footer.vue
@@ -2,13 +2,11 @@
 import { useI18n } from '#imports'
 
 const { t } = useI18n()
-// Categorized navigation links
+// Categorized navigation links: the home page and the site's pages, the blog apart
+const { links } = useSiteNav()
 const portfolioLinks = computed(() => [
-  { href: '/#about', label: t('footer.nav.about') },
-  { href: '/#skills', label: t('footer.nav.skills') },
-  { href: '/#projects', label: t('footer.nav.projects') },
-  { href: '/#experience', label: t('footer.nav.experience') },
-  { href: '/#education', label: t('footer.nav.education') },
+  { href: '/', label: t('nav.home') },
+  ...links.value.filter((l) => l.to !== '/blog').map((l) => ({ href: l.to, label: l.label })),
 ])
 
 const blogLinks = computed(() => [{ href: '/blog', label: t('footer.nav.articles') }])
diff --git a/app/components/layout/Header.vue b/app/components/layout/Header.vue
index d8fe27b..6d44fce 100644
--- a/app/components/layout/Header.vue
+++ b/app/components/layout/Header.vue
@@ -2,7 +2,7 @@
 import { useI18n } from '#imports'
 
 const { t } = useI18n()
-const route = useRoute()
+const { links, isActive } = useSiteNav()
 
 const showBrandMenu = ref(false)
 
@@ -31,64 +31,6 @@ onUnmounted(() => {
   document.removeEventListener('keydown', handleKeydown)
 })
 
-const navLinks = computed(() => [
-  { href: '#about', label: t('sections.about') },
-  { href: '#skills', label: t('sections.skills') },
-  { href: '#projects', label: t('sections.projects') },
-  { href: '#experience', label: t('sections.parcours') },
-])
-
-const activeSection = ref('')
-const isHomepage = computed(() => route.path === '/')
-
-function scrollToSection(event: Event, href: string) {
-  event.preventDefault()
-  const id = href.replace('#', '')
-  const el = document.getElementById(id)
-  if (el) {
-    const headerOffset = 56 // h-14 = 3.5rem = 56px
-    const elementPosition = el.getBoundingClientRect().top + window.scrollY
-    window.scrollTo({
-      top: elementPosition - headerOffset,
-      behavior: 'smooth',
-    })
-  }
-}
-
-onMounted(() => {
-  if (!isHomepage.value) return
-
-  const sectionIds = ['about', 'skills', 'projects', 'experience', 'education']
-  const observers: IntersectionObserver[] = []
-
-  const observer = new IntersectionObserver(
-    (entries) => {
-      for (const entry of entries) {
-        if (entry.isIntersecting) {
-          activeSection.value = entry.target.id
-        }
-      }
-    },
-    {
-      rootMargin: '-20% 0px -70% 0px',
-    },
-  )
-
-  for (const id of sectionIds) {
-    const el = document.getElementById(id)
-    if (el) {
-      observer.observe(el)
-      observers.push(observer)
-    }
-  }
-
-  onUnmounted(() => {
-    for (const obs of observers) {
-      obs.disconnect()
-    }
-  })
-})
-
 const isMobileMenuOpen = ref(false)
 </script>
 
@@ -153,40 +95,24 @@ const isMobileMenuOpen = ref(false)
           </Transition>
         </div>
 
-        <!-- Desktop Navigation -->
-        <nav v-if="isHomepage" class="flex items-stretch flex-1" aria-label="Section navigation">
-          <a
-            v-for="link in navLinks"
-            :key="link.href"
-            :href="link.href"
-            :aria-current="activeSection === link.href.replace('#', '') ? 'true' : undefined"
+        <!-- Desktop Navigation: the site's pages -->
+        <nav class="flex items-stretch flex-1" aria-label="Site navigation">
+          <NuxtLink
+            v-for="link in links"
+            :key="link.to"
+            :to="link.to"
+            :aria-current="isActive(link.to) ? 'page' : undefined"
             :class="
               cn(
                 'flex-1 px-6 flex items-center justify-center text-[10px] font-mono uppercase tracking-wider transition-all whitespace-nowrap',
                 'border-r border-neutral-200 dark:border-neutral-700',
-                activeSection === link.href.replace('#', '')
+                isActive(link.to)
                   ? 'text-primary-500 bg-primary-500/5 nav-tab-active'
                   : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50',
               )
             "
-            @click="scrollToSection($event, link.href)"
           >
             <UiScrambleText :text="link.label" effect="link" />
-          </a>
-
-          <!-- Blog link -->
-          <NuxtLink
-            to="/blog"
-            :class="
-              cn(
-                'flex-1 px-6 flex items-center justify-center gap-1.5 text-[10px] font-mono uppercase tracking-wider transition-all whitespace-nowrap',
-                'border-r border-neutral-200 dark:border-neutral-700',
-                'text-neutral-500 dark:text-neutral-400 hover:text-sky-400 hover:bg-sky-400/5',
-              )
-            "
-          >
-            <UiScrambleText :text="t('sections.blog')" effect="link" />
-            <UIcon name="i-heroicons-arrow-right-20-solid" class="w-3 h-3" aria-hidden="true" />
           </NuxtLink>
         </nav>
 
@@ -255,7 +181,6 @@ const isMobileMenuOpen = ref(false)
 
           <!-- Mobile menu toggle -->
           <button
-            v-if="isHomepage"
             type="button"
             :class="
               cn(
@@ -294,41 +219,27 @@ const isMobileMenuOpen = ref(false)
         leave-to-class="opacity-0 -translate-y-2"
       >
         <nav
-          v-if="isMobileMenuOpen && isHomepage"
+          v-if="isMobileMenuOpen"
           id="mobile-nav"
           class="md:hidden py-3 border-t border-neutral-200 dark:border-neutral-800"
-          aria-label="Mobile section navigation"
+          aria-label="Mobile site navigation"
         >
-          <a
-            v-for="link in navLinks"
-            :key="link.href"
-            :href="link.href"
-            :aria-current="activeSection === link.href.replace('#', '') ? 'true' : undefined"
+          <NuxtLink
+            v-for="link in links"
+            :key="link.to"
+            :to="link.to"
+            :aria-current="isActive(link.to) ? 'page' : undefined"
             :class="
               cn(
                 'flex items-center px-3 py-2 text-xs font-mono uppercase tracking-wider transition-colors',
-                activeSection === link.href.replace('#', '')
+                isActive(link.to)
                   ? 'text-primary-500 bg-neutral-100 dark:bg-neutral-900'
                   : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100/50 dark:hover:bg-neutral-900/50',
               )
             "
-            @click="
-              (e: Event) => {
-                scrollToSection(e, link.href)
-                isMobileMenuOpen = false
-              }
-            "
-          >
-            {{ link.label }}
-          </a>
-          <!-- Blog link mobile -->
-          <NuxtLink
-            to="/blog"
-            class="flex items-center gap-1.5 px-3 py-2 text-xs font-mono uppercase tracking-wider text-neutral-500 dark:text-neutral-400 hover:text-sky-400 hover:bg-sky-400/5 transition-colors"
             @click="isMobileMenuOpen = false"
           >
-            {{ t('sections.blog') }}
-            <UIcon name="i-heroicons-arrow-right-20-solid" class="w-3 h-3" aria-hidden="true" />
+            {{ link.label }}
           </NuxtLink>
         </nav>
       </Transition>
diff --git a/app/composables/useSiteNav.ts b/app/composables/useSiteNav.ts
new file mode 100644
index 0000000..39eae26
--- /dev/null
+++ b/app/composables/useSiteNav.ts
@@ -0,0 +1,21 @@
+import { useI18n } from '#imports'
+
+/**
+ * The site's pages, as listed by the header, the blog header and the footer, and which
+ * one the current route belongs to (a blog post belongs to /blog). The home page is the
+ * brand link; its sections have their own table of contents (HomeToc).
+ */
+export function useSiteNav() {
+  const { t } = useI18n()
+  const route = useRoute()
+
+  const links = computed(() => [
+    { to: '/experience', label: t('nav.experience') },
+    { to: '/apps', label: t('nav.apps') },
+    { to: '/blog', label: t('nav.blog') },
+  ])
+
+  const isActive = (to: string) => route.path === to || route.path.startsWith(`${to}/`)
+
+  return { links, isActive }
+}
diff --git a/app/pages/apps.vue b/app/pages/apps.vue
new file mode 100644
index 0000000..a9315c6
--- /dev/null
+++ b/app/pages/apps.vue
@@ -0,0 +1,256 @@
+<script setup lang="ts">
+// /apps: the terminal apps, with their status as the site states it (LazyCurl is
+// "archived" here, its repository is untouched) and their latest release read live
+// from GitHub. Features and install commands come from each README.
+import { useI18n } from '#imports'
+
+const { t } = useI18n()
+
+useSeoMeta({
+  title: () => t('appsPage.seoTitle'),
+  description: () => t('appsPage.seoDescription'),
+  ogTitle: () => t('appsPage.seoTitle'),
+  ogDescription: () => t('appsPage.seoDescription'),
+  twitterCard: 'summary_large_image',
+})
+
+if (import.meta.server) {
+  defineOgImage('Default', {
+    title: t('appsPage.ogTitle'),
+    subtitle: t('appsPage.ogSubtitle'),
+    statusText: t('hero.availableForHire'),
+    avatarUrl: `${useRequestURL().origin}/images/avatar.png`,
+  })
+}
+
+const RAW = 'https://raw.githubusercontent.com/kbrdn1'
+const APPS = [
+  {
+    key: 'gwm',
+    name: 'gwm',
+    repo: 'gwm-cli',
+    language: 'Rust',
+    license: 'MIT OR Apache-2.0',
+    status: 'released',
+    site: 'https://gwm.kbrdn.dev',
+    logo: {
+      dark: `${RAW}/gwm-cli/HEAD/docs/_assets/logo.svg`,
+      light: `${RAW}/gwm-cli/HEAD/docs/_assets/logo-light.svg`,
+    },
+    icon: 'i-simple-icons-rust',
+    features: 4,
+    // docs/2.tui/_assets/hero.png and docs/_capture/demo.gif of gwm-cli, as webp and mp4
+    image: '/images/apps/gwm.webp',
+    video: '/images/apps/gwm-demo.mp4',
+    // From the gwm-cli README's install table
+    install: [
+      'brew tap kbrdn1/tap && brew install gwm',
+      'cargo install gwm-cli',
+      'scoop bucket add gwm https://github.com/kbrdn1/scoop-gwm; scoop install gwm',
+      'nix profile install github:kbrdn1/gwm-cli',
+      'aqua g -i kbrdn1/gwm-cli',
+    ],
+  },
+  {
+    key: 'vellum',
+    name: 'vellum',
+    repo: 'vellum',
+    language: 'Rust',
+    license: 'MIT',
+    status: 'inDevelopment',
+    icon: 'i-simple-icons-rust',
+    features: 3,
+  },
+  {
+    key: 'lazycurl',
+    name: 'LazyCurl',
+    repo: 'LazyCurl',
+    language: 'Go',
+    license: 'MIT',
+    status: 'archived',
+    icon: 'i-simple-icons-go',
+    features: 4,
+    // preview-app.png of LazyCurl, as webp
+    image: '/images/apps/lazycurl.webp',
+  },
+] as const
+
+const { data: releases } = useFetch<Record<string, { version: string } | null>>(
+  '/api/github/releases',
+  { server: false, lazy: true, default: () => ({}) },
+)
+
+// The demo plays only while on screen, and not at all under prefers-reduced-motion
+// (the screenshot stays as its poster, with the controls to start it by hand).
+const reducedMotion = useReducedMotion()
+let videoObserver: IntersectionObserver | undefined
+onMounted(() => {
+  videoObserver = new IntersectionObserver((entries) => {
+    for (const { target, isIntersecting } of entries) {
+      const video = target as HTMLVideoElement
+      if (isIntersecting && !reducedMotion.value) video.play().catch(() => {})
+      else video.pause()
+    }
+  })
+  document
+    .querySelectorAll<HTMLVideoElement>('video[data-demo]')
+    .forEach((v) => videoObserver!.observe(v))
+})
+onUnmounted(() => videoObserver?.disconnect())
+
+const STATUS_CLASS: Record<string, string> = {
+  released:
+    'text-green-700 dark:text-green-500 border-green-600/40 dark:border-green-500/30 bg-green-600/5 dark:bg-green-500/5',
+  inDevelopment: 'text-primary-500 border-primary-500/40 bg-primary-500/5',
+  archived: 'text-neutral-500 border-neutral-300 dark:border-neutral-700 bg-neutral-500/5',
+}
+</script>
+
+<template>
+  <div class="mx-auto w-full max-w-5xl px-6 pb-20">
+    <section class="pt-14 pb-10">
+      <p class="font-mono text-[11px] uppercase tracking-widest text-primary-500">
+        {{ t('appsPage.eyebrow') }}
+      </p>
+      <h1
+        class="mt-4 max-w-3xl text-4xl font-bold leading-tight text-neutral-900 sm:text-5xl dark:text-neutral-100"
+        :aria-label="t('appsPage.title')"
+      >
+        <UiScrambleText :text="t('appsPage.title')" />
+      </h1>
+      <p class="mt-6 max-w-2xl text-base leading-relaxed text-neutral-600 dark:text-neutral-400">
+        {{ t('appsPage.intro') }}
+      </p>
+    </section>
+
+    <div class="space-y-6">
+      <article
+        v-for="app in APPS"
+        :id="app.key"
+        :key="app.key"
+        class="relative isolate grid scroll-mt-24 gap-8 overflow-hidden border border-neutral-200 bg-white/50 p-6 transition-colors hover:border-primary-500/50 sm:p-8 md:grid-cols-12 dark:border-neutral-800 dark:bg-neutral-950/50"
+        :class="{ 'opacity-80': app.status === 'archived' }"
+      >
+        <UiPixelCanvas />
+
+        <header class="md:col-span-5">
+          <div class="flex items-center gap-3">
+            <template v-if="'logo' in app">
+              <img
+                :src="app.logo.light"
+                alt=""
+                width="40"
+                height="40"
+                class="size-10 dark:hidden"
+              />
+              <img
+                :src="app.logo.dark"
+                alt=""
+                width="40"
+                height="40"
+                class="hidden size-10 dark:block"
+              />
+            </template>
+            <UIcon v-else :name="app.icon" class="size-10 text-neutral-500" aria-hidden="true" />
+            <h2 class="font-mono text-3xl font-semibold text-neutral-900 dark:text-neutral-100">
+              <UiScrambleText :text="app.name" />
+            </h2>
+          </div>
+          <p class="mt-4 text-sm text-neutral-600 dark:text-neutral-400">
+            {{ t(`appsPage.apps.${app.key}.tagline`) }}
+          </p>
+          <div
+            class="mt-4 flex flex-wrap items-center gap-2 font-mono text-[10px] uppercase tracking-wider"
+          >
+            <span :class="cn('border px-2 py-0.5', STATUS_CLASS[app.status])">
+              {{ t(`appsPage.status.${app.status}`) }}
+            </span>
+            <span
+              v-if="releases?.[app.repo]?.version"
+              class="border border-neutral-300 px-2 py-0.5 text-neutral-600 dark:border-neutral-700 dark:text-neutral-400"
+            >
+              {{ releases[app.repo]!.version }}
+            </span>
+            <span class="text-neutral-500">{{ app.language }} · {{ app.license }}</span>
+          </div>
+          <div class="mt-6 flex flex-wrap gap-4 font-mono text-xs uppercase tracking-wider">
+            <a
+              v-if="'site' in app"
+              :href="app.site"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="relative z-10 text-primary-500 hover:text-primary-400"
+            >
+              <UiScrambleText :text="t('appsPage.site')" effect="link" /> ↗
+            </a>
+            <a
+              :href="`https://github.com/kbrdn1/${app.repo}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="relative z-10 text-neutral-500 hover:text-primary-500"
+            >
+              <UiScrambleText :text="t('appsPage.repo')" effect="link" /> ↗
+            </a>
+            <a
+              v-if="app.status !== 'inDevelopment'"
+              :href="`https://github.com/kbrdn1/${app.repo}/releases`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="relative z-10 text-neutral-500 hover:text-primary-500"
+            >
+              <UiScrambleText :text="t('appsPage.releases')" effect="link" /> ↗
+            </a>
+          </div>
+        </header>
+
+        <div class="space-y-6 md:col-span-7">
+          <p class="text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
+            {{ t(`appsPage.apps.${app.key}.description`) }}
+          </p>
+          <ul class="space-y-2 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
+            <li v-for="i in app.features" :key="i" class="flex gap-2">
+              <span class="mt-2 size-1.5 shrink-0 bg-primary-500" aria-hidden="true" />
+              <span>{{ t(`appsPage.apps.${app.key}.features.${i - 1}`) }}</span>
+            </li>
+          </ul>
+          <div v-if="'install' in app">
+            <h3 class="font-mono text-[11px] uppercase tracking-widest text-neutral-500">
+              {{ t('appsPage.install') }}
+            </h3>
+            <pre
+              class="relative z-10 mt-2 overflow-x-auto border border-neutral-200 bg-neutral-50 p-4 font-mono text-xs leading-relaxed text-neutral-700 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-300"
+            ><code><span v-for="line in app.install" :key="line" class="block"><span class="select-none text-primary-500">$ </span>{{ line }}</span></code></pre>
+          </div>
+        </div>
+
+        <figure
+          v-if="'image' in app"
+          class="relative z-10 overflow-hidden border border-neutral-200 bg-neutral-950 md:col-span-12 dark:border-neutral-800"
+        >
+          <video
+            v-if="'video' in app"
+            data-demo
+            :poster="app.image"
+            :controls="reducedMotion"
+            :aria-label="t(`appsPage.apps.${app.key}.illustration`)"
+            muted
+            loop
+            playsinline
+            preload="none"
+            class="block w-full"
+          >
+            <source :src="app.video" type="video/mp4" />
+          </video>
+          <NuxtImg
+            v-else
+            :src="app.image"
+            :alt="t(`appsPage.apps.${app.key}.illustration`)"
+            width="1600"
+            loading="lazy"
+            class="block w-full"
+          />
+        </figure>
+      </article>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/experience.vue b/app/pages/experience.vue
new file mode 100644
index 0000000..9321447
--- /dev/null
+++ b/app/pages/experience.vue
@@ -0,0 +1,330 @@
+<script setup lang="ts">
+// /experience: the career laid out like isrod.eu/fr/experience (intro, a strip of every
+// role and degree, one spread each), then the open source work, all from checked facts
+// (app/utils/career.ts and the experiences.* / studies.* texts).
+import { useI18n } from '#imports'
+
+const { t, locale } = useI18n()
+
+useSeoMeta({
+  title: () => t('experiencePage.seoTitle'),
+  description: () => t('experiencePage.seoDescription'),
+  ogTitle: () => t('experiencePage.seoTitle'),
+  ogDescription: () => t('experiencePage.seoDescription'),
+  twitterCard: 'summary_large_image',
+})
+
+if (import.meta.server) {
+  defineOgImage('Default', {
+    title: t('experiencePage.ogTitle'),
+    subtitle: t('experiencePage.ogSubtitle'),
+    statusText: t('hero.availableForHire'),
+    avatarUrl: `${useRequestURL().origin}/images/avatar.png`,
+  })
+}
+
+const period = (start: string, end: string | null) =>
+  `${formatMonth(start, locale.value)} — ${end ? formatMonth(end, locale.value) : t('experiences.present')}`
+
+// Every role and degree, most recent first, for the strip at the top.
+const timeline = computed(() =>
+  [
+    ...EXPERIENCES.map((e) => ({
+      id: e.id,
+      start: e.startDate,
+      end: e.endDate,
+      name: e.company,
+      detail: t(`experiences.${e.key}.role`),
+    })),
+    ...STUDIES.map((s) => ({
+      id: s.id,
+      start: s.startDate,
+      end: s.endDate,
+      name: s.school,
+      detail: t(`studies.${s.key}.degree`),
+    })),
+  ].sort((a, b) => b.start.localeCompare(a.start)),
+)
+
+const list = (key: string, count: number) =>
+  Array.from({ length: count }, (_, i) => t(`${key}.${i}`))
+
+const projects = OPEN_SOURCE_PROJECTS
+const contributions = UPSTREAM.filter((u) => u.kind !== 'report')
+const reports = UPSTREAM.filter((u) => u.kind === 'report')
+
+const STATUS_CLASS: Record<string, string> = {
+  released:
+    'text-green-700 dark:text-green-500 border-green-600/40 dark:border-green-500/30 bg-green-600/5 dark:bg-green-500/5',
+  merged:
+    'text-green-700 dark:text-green-500 border-green-600/40 dark:border-green-500/30 bg-green-600/5 dark:bg-green-500/5',
+  inDevelopment: 'text-primary-500 border-primary-500/40 bg-primary-500/5',
+  review: 'text-primary-500 border-primary-500/40 bg-primary-500/5',
+  archived: 'text-neutral-500 border-neutral-300 dark:border-neutral-700 bg-neutral-500/5',
+  report: 'text-sky-500 border-sky-500/40 bg-sky-500/5',
+}
+</script>
+
+<template>
+  <div class="mx-auto w-full max-w-5xl px-6 pb-20">
+    <!-- Intro -->
+    <section class="pt-14 pb-10">
+      <p class="font-mono text-[11px] uppercase tracking-widest text-primary-500">
+        {{ t('experiencePage.eyebrow') }}
+      </p>
+      <h1
+        class="mt-4 max-w-3xl text-4xl font-bold leading-tight text-neutral-900 sm:text-5xl dark:text-neutral-100"
+        :aria-label="t('experiencePage.title')"
+      >
+        <UiScrambleText :text="t('experiencePage.title')" />
+      </h1>
+      <p class="mt-6 max-w-2xl text-base leading-relaxed text-neutral-600 dark:text-neutral-400">
+        {{ t('experiencePage.intro') }}
+      </p>
+      <div class="mt-8 flex flex-wrap gap-3">
+        <a
+          href="#open-source"
+          class="inline-flex items-center gap-2 bg-primary-500 px-4 py-2 font-mono text-xs uppercase tracking-wider text-white transition-colors hover:bg-primary-600"
+        >
+          {{ t('experiencePage.ctaOpenSource') }}
+        </a>
+        <NuxtLink
+          to="/blog"
+          class="inline-flex items-center gap-2 px-4 py-2 font-mono text-xs uppercase tracking-wider text-sky-500 transition-colors hover:text-sky-400"
+        >
+          <UiScrambleText :text="t('experiencePage.ctaBlog')" effect="link" /> →
+        </NuxtLink>
+      </div>
+    </section>
+
+    <!-- Strip: every role and degree -->
+    <nav
+      :aria-label="t('experiencePage.timeline')"
+      class="-mx-6 overflow-x-auto border-y border-neutral-200 px-6 dark:border-neutral-800"
+    >
+      <ol class="flex min-w-max divide-x divide-neutral-200 dark:divide-neutral-800">
+        <li v-for="(item, i) in timeline" :key="item.id">
+          <a
+            :href="`#${item.id}`"
+            class="group block w-48 px-4 py-4 transition-colors hover:bg-primary-500/5"
+          >
+            <span class="block font-mono text-[10px] tracking-widest text-neutral-500">
+              {{ String(i + 1).padStart(2, '0') }} · {{ item.start.slice(0, 4) }}–{{
+                item.end ? item.end.slice(0, 4) : ''
+              }}
+            </span>
+            <span
+              class="mt-1 block truncate text-sm font-medium text-neutral-900 group-hover:text-primary-500 dark:text-neutral-100"
+            >
+              {{ item.name }}
+            </span>
+            <span class="block truncate text-xs text-neutral-500">{{ item.detail }}</span>
+          </a>
+        </li>
+      </ol>
+    </nav>
+
+    <!-- Experience -->
+    <section id="experience" aria-labelledby="experience-heading" class="scroll-mt-24 pt-14">
+      <h2
+        id="experience-heading"
+        class="font-mono text-[11px] uppercase tracking-[0.2em] text-neutral-500"
+      >
+        <UiScrambleText :text="t('experiencePage.experienceLabel')" />
+      </h2>
+      <ExperienceSpread
+        v-for="(exp, i) in EXPERIENCES"
+        :id="exp.id"
+        :key="exp.id"
+        :index="i + 1"
+        :title="exp.company"
+        :logo="exp.logo"
+        :meta="`${period(exp.startDate, exp.endDate)} · ${t(`experiences.${exp.key}.role`)} · ${t(`experiences.${exp.key}.type`)}`"
+        :summary="t(`experiencePage.summaries.${exp.key}`)"
+        :stack="exp.technologies"
+        :items-label="t('experiencePage.missions')"
+        :items="list(`experiences.${exp.key}.tasks`, exp.tasksCount)"
+      />
+    </section>
+
+    <!-- Education -->
+    <section id="education" aria-labelledby="education-heading" class="scroll-mt-24 pt-14">
+      <h2
+        id="education-heading"
+        class="font-mono text-[11px] uppercase tracking-[0.2em] text-neutral-500"
+      >
+        <UiScrambleText :text="t('experiencePage.educationLabel')" />
+      </h2>
+      <ExperienceSpread
+        v-for="(study, i) in STUDIES"
+        :id="study.id"
+        :key="study.id"
+        :index="i + 1"
+        :title="study.school"
+        :logo="study.logo"
+        :meta="`${period(study.startDate, study.endDate)} · ${study.level} · ${t(`studies.${study.key}.degree`)}`"
+        :summary="t(`experiencePage.summaries.${study.key}`)"
+        :stack="study.technologies"
+        :items-label="t('experiencePage.skills')"
+        :items="list(`studies.${study.key}.skills`, study.skillsCount)"
+      />
+    </section>
+
+    <!-- Open source -->
+    <section id="open-source" aria-labelledby="open-source-heading" class="scroll-mt-24 pt-20">
+      <p class="font-mono text-[11px] uppercase tracking-widest text-primary-500">
+        {{ t('experiencePage.openSource.eyebrow') }}
+      </p>
+      <h2
+        id="open-source-heading"
+        class="mt-3 max-w-2xl text-3xl font-semibold text-neutral-900 dark:text-neutral-100"
+      >
+        <UiScrambleText :text="t('experiencePage.openSource.title')" />
+      </h2>
+      <p class="mt-4 max-w-2xl text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
+        {{ t('experiencePage.openSource.intro') }}
+      </p>
+
+      <h3 class="mt-10 font-mono text-[11px] uppercase tracking-widest text-neutral-500">
+        {{ t('experiencePage.openSource.projectsLabel') }}
+      </h3>
+      <ul class="mt-4 grid gap-3 sm:grid-cols-2">
+        <li
+          v-for="(project, i) in projects"
+          :key="project.key"
+          class="relative isolate flex flex-col gap-3 overflow-hidden border border-neutral-200 bg-white/50 p-5 transition-colors hover:border-primary-500/50 dark:border-neutral-800 dark:bg-neutral-950/50"
+        >
+          <UiPixelCanvas />
+          <div class="flex items-center justify-between gap-3">
+            <span class="font-mono text-[10px] tracking-widest text-neutral-500">
+              {{ t('experiencePage.openSource.lot') }} {{ String(i + 1).padStart(2, '0') }} ·
+              {{ project.language }}
+            </span>
+            <span
+              :class="
+                cn(
+                  'border px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider',
+                  STATUS_CLASS[project.status],
+                )
+              "
+            >
+              {{ t(`experiencePage.openSource.status.${project.status}`) }}
+            </span>
+          </div>
+          <h4 class="font-mono text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+            {{ project.name }}
+          </h4>
+          <p class="text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
+            {{ t(`experiencePage.openSource.projects.${project.key}`) }}
+          </p>
+          <p
+            v-if="'channels' in project"
+            class="font-mono text-[11px] leading-relaxed text-neutral-500"
+          >
+            {{ t('experiencePage.openSource.install') }} {{ project.channels.join(' · ') }}
+          </p>
+          <div class="mt-auto flex gap-4 pt-1 font-mono text-xs uppercase tracking-wider">
+            <a
+              v-if="'site' in project"
+              :href="project.site"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="relative z-10 text-primary-500 hover:text-primary-400"
+            >
+              <UiScrambleText :text="t('experiencePage.openSource.site')" effect="link" /> ↗
+            </a>
+            <a
+              :href="project.repo"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="relative z-10 text-neutral-500 hover:text-primary-500"
+            >
+              <UiScrambleText :text="t('experiencePage.openSource.repo')" effect="link" /> ↗
+            </a>
+          </div>
+        </li>
+      </ul>
+
+      <div class="mt-12 grid gap-10 md:grid-cols-2">
+        <div
+          v-for="group in [
+            { key: 'upstreamLabel', items: contributions },
+            { key: 'reportsLabel', items: reports },
+          ]"
+          :key="group.key"
+        >
+          <h3 class="font-mono text-[11px] uppercase tracking-widest text-neutral-500">
+            {{ t(`experiencePage.openSource.${group.key}`) }}
+          </h3>
+          <ul class="mt-3 divide-y divide-neutral-200 dark:divide-neutral-800">
+            <li v-for="item in group.items" :key="item.key">
+              <a
+                :href="item.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="group flex items-start justify-between gap-4 py-3"
+              >
+                <span class="min-w-0">
+                  <span
+                    class="block font-mono text-xs text-neutral-900 group-hover:text-primary-500 dark:text-neutral-100"
+                  >
+                    {{ item.repo }}
+                  </span>
+                  <span class="mt-0.5 block text-sm text-neutral-600 dark:text-neutral-400">
+                    {{ t(`experiencePage.openSource.upstream.${item.key}`) }}
+                  </span>
+                </span>
+                <span
+                  :class="
+                    cn(
+                      'shrink-0 border px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider',
+                      STATUS_CLASS[item.kind],
+                    )
+                  "
+                >
+                  {{ t(`experiencePage.openSource.status.${item.kind}`) }}
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <a
+        href="https://github.com/kbrdn1"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="mt-8 inline-flex items-center gap-2 font-mono text-xs uppercase tracking-wider text-neutral-500 hover:text-primary-500"
+      >
+        <UIcon name="i-simple-icons-github" class="size-4" aria-hidden="true" />
+        <UiScrambleText :text="t('experiencePage.openSource.viewAll')" effect="link" />
+      </a>
+    </section>
+
+    <!-- Availability -->
+    <section
+      class="mt-20 flex flex-col gap-6 border border-neutral-200 p-8 sm:flex-row sm:items-center sm:justify-between dark:border-neutral-800"
+    >
+      <div class="flex items-center gap-5">
+        <UiMascot mood="hoodie-cool" :size="72" />
+        <div>
+          <span
+            class="inline-flex items-center gap-2 border border-green-600/40 bg-green-600/5 px-3 py-1 font-mono text-xs uppercase tracking-wider text-green-700 dark:border-green-500/30 dark:bg-green-500/5 dark:text-green-500"
+          >
+            <span class="size-1.5 rounded-full bg-green-600 dark:bg-green-500" aria-hidden="true" />
+            {{ t('hero.availableForHire') }}
+          </span>
+          <p class="mt-3 text-sm text-neutral-600 dark:text-neutral-400">
+            {{ t('experiencePage.availability') }}
+          </p>
+        </div>
+      </div>
+      <a
+        href="mailto:hello@kbrdn.dev"
+        class="inline-flex items-center justify-center gap-2 bg-primary-500 px-4 py-2 font-mono text-xs uppercase tracking-wider text-white transition-colors hover:bg-primary-600"
+      >
+        hello@kbrdn.dev
+      </a>
+    </section>
+  </div>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 02fb5fc..0de387a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -98,6 +98,9 @@ const content = computed(() => {
 
 <template>
   <div class="flex justify-center overflow-x-clip">
+    <!-- Table of contents, in the margin outside the column (wide screens only) -->
+    <HomeToc />
+
     <!-- Main content -->
     <div class="w-full flex flex-col items-center relative z-10">
       <!-- Banner -->
@@ -130,7 +133,13 @@ const content = computed(() => {
         </UiAnimatedSection>
 
         <!-- Latest Blog Posts -->
-        <UiAnimatedSection as="section" animation="fadeInUp" :delay="200" :duration="500">
+        <UiAnimatedSection
+          id="latest-posts"
+          as="section"
+          animation="fadeInUp"
+          :delay="200"
+          :duration="500"
+        >
           <div class="flex items-center justify-between mb-3">
             <h2 class="text-[11px] font-mono uppercase tracking-widest text-sky-400">
               {{ t('sections.blog') }}
@@ -185,7 +194,7 @@ const content = computed(() => {
             <HomeProjects />
 
             <!-- GitHub Activity -->
-            <div class="mt-8">
+            <div id="activity" class="mt-8 scroll-mt-20">
               <HomeSectionLabel :label="t('sections.activity')" />
               <HomeGitHubChart username="kbrdn1" />
             </div>
@@ -196,26 +205,9 @@ const content = computed(() => {
       <!-- Parcours (Experience + Education) - Full width -->
       <section id="experience" class="p-6 w-full">
         <UiAnimatedSection :delay="0" :duration="500">
-          <div class="max-w-5xl mx-auto min-md:px-6 space-y-8">
+          <div class="max-w-5xl mx-auto min-md:px-6">
             <HomeSectionLabel :label="t('sections.parcours')" />
-
-            <div>
-              <h3
-                class="block text-[11px] font-mono uppercase tracking-widest text-primary-500 mb-2"
-              >
-                {{ t('sections.experience') }}
-              </h3>
-              <HomeExperiences />
-            </div>
-
-            <div id="education">
-              <h3
-                class="block text-[11px] font-mono uppercase tracking-widest text-primary-500 mb-2"
-              >
-                {{ t('sections.education') }}
-              </h3>
-              <HomeStudies />
-            </div>
+            <HomeParcours />
           </div>
         </UiAnimatedSection>
       </section>
diff --git a/app/utils/career.ts b/app/utils/career.ts
new file mode 100644
index 0000000..ce4d8b6
--- /dev/null
+++ b/app/utils/career.ts
@@ -0,0 +1,244 @@
+// The career and open source facts behind /experience and the home's Parcours teaser.
+// Text lives in i18n (experiences.*, studies.*, experiencePage.openSource.*); this file
+// only holds what does not translate: ids, dates, stacks, links. Open source entries are
+// facts checked on GitHub: `merged` and `review` are pull requests, `report` an issue.
+
+export interface Experience {
+  id: string
+  key: string
+  company: string
+  logo: string
+  startDate: string
+  endDate: string | null
+  technologies: string[]
+  tasksCount: number
+}
+
+export interface Study {
+  id: string
+  key: string
+  school: string
+  logo: string
+  level: string
+  startDate: string
+  endDate: string | null
+  technologies: string[]
+  skillsCount: number
+}
+
+export const EXPERIENCES: Experience[] = [
+  {
+    id: 'flippad',
+    key: 'flippad',
+    company: 'Jewely x Flippad',
+    logo: '/images/logos/jewely-x-flippad.png',
+    startDate: '2023-10',
+    endDate: '2026-09',
+    technologies: [
+      'Laravel',
+      'Vue',
+      'Nuxt',
+      'AWS',
+      'React',
+      'Symfony',
+      'Redis',
+      'Stripe',
+      'Hono.js',
+      'Prisma',
+    ],
+    tasksCount: 5,
+  },
+  {
+    id: 'virtual-immersion',
+    key: 'virtualImmersion',
+    company: 'Virtual Immersion',
+    logo: '/images/logos/virtual-immersion.png',
+    startDate: '2022-11',
+    endDate: '2023-09',
+    technologies: ['Symfony', 'Laravel', 'React', 'WordPress', 'MySQL', 'Tailwind CSS'],
+    tasksCount: 4,
+  },
+]
+
+export const STUDIES: Study[] = [
+  {
+    id: 'mns-master',
+    key: 'mnsMaster',
+    school: 'Metz Numeric School',
+    logo: '/images/logos/mns.jpeg',
+    level: 'Master',
+    startDate: '2023-10',
+    endDate: '2025-10',
+    technologies: [
+      'C#/.NET',
+      'TypeScript',
+      'Node',
+      'Git',
+      'Docker',
+      'Kubernetes',
+      'Flutter',
+      'Hono.js',
+      'Prisma',
+      'Drizzle',
+      'Adonis.js',
+    ],
+    skillsCount: 5,
+  },
+  {
+    id: 'mns-licence',
+    key: 'mnsLicence',
+    school: 'Metz Numeric School',
+    logo: '/images/logos/mns.jpeg',
+    level: 'Licence',
+    startDate: '2022-10',
+    endDate: '2023-09',
+    technologies: [
+      'Figma',
+      'Java',
+      'Symfony',
+      'React',
+      'MongoDB',
+      'TypeScript',
+      'Node',
+      'Git',
+      'Docker',
+      'Vue',
+      'Angular',
+    ],
+    skillsCount: 4,
+  },
+  {
+    id: 'cci-bac2',
+    key: 'cciBac2',
+    school: 'CCI Longwy EESC',
+    logo: '/images/logos/cci.jpg',
+    level: 'BAC+2',
+    startDate: '2020-10',
+    endDate: '2022-06',
+    technologies: [
+      'HTML',
+      'CSS',
+      'PHP',
+      'JavaScript',
+      'SASS',
+      'jQuery',
+      'Symfony',
+      'Adobe XD',
+      'Photoshop',
+      'Illustrator',
+      'MySQL',
+      'Bootstrap',
+      'Git',
+    ],
+    skillsCount: 5,
+  },
+]
+
+/** Projects I maintain on GitHub; `status` is the site's label, not the repository's. */
+export const OPEN_SOURCE_PROJECTS = [
+  {
+    key: 'gwm',
+    name: 'gwm',
+    language: 'Rust',
+    status: 'released',
+    repo: 'https://github.com/kbrdn1/gwm-cli',
+    site: 'https://gwm.kbrdn.dev',
+    // Install channels listed in the gwm-cli README
+    channels: ['crates.io', 'Homebrew', 'Scoop', 'aqua', 'Nix', '.deb', '.rpm', 'AUR'],
+  },
+  {
+    key: 'vellum',
+    name: 'vellum',
+    language: 'Rust',
+    status: 'inDevelopment',
+    repo: 'https://github.com/kbrdn1/vellum',
+  },
+  {
+    key: 'lazycurl',
+    name: 'LazyCurl',
+    language: 'Go',
+    status: 'archived',
+    repo: 'https://github.com/kbrdn1/LazyCurl',
+  },
+  {
+    key: 'herdrPluginGwm',
+    name: 'herdr-plugin-gwm',
+    language: 'Shell',
+    status: 'released',
+    repo: 'https://github.com/kbrdn1/herdr-plugin-gwm',
+  },
+  {
+    key: 'claudeCrosstalk',
+    name: 'claude-crosstalk',
+    language: 'TypeScript',
+    status: 'released',
+    repo: 'https://github.com/kbrdn1/claude-crosstalk',
+  },
+  {
+    key: 'kbrdnDocs',
+    name: 'kbrdn-docs',
+    language: 'Astro',
+    status: 'released',
+    repo: 'https://github.com/kbrdn1/kbrdn-docs',
+  },
+] as const
+
+/** Pull requests and issues sent to projects I don't maintain, checked on GitHub. */
+export const UPSTREAM = [
+  {
+    key: 'winget',
+    repo: 'microsoft/winget-pkgs',
+    kind: 'merged',
+    url: 'https://github.com/microsoft/winget-pkgs/pull/403295',
+  },
+  {
+    key: 'aqua',
+    repo: 'aquaproj/aqua-registry',
+    kind: 'merged',
+    url: 'https://github.com/aquaproj/aqua-registry/pull/57117',
+  },
+  {
+    key: 'awesomeRatatui',
+    repo: 'ratatui/awesome-ratatui',
+    kind: 'merged',
+    url: 'https://github.com/ratatui/awesome-ratatui/pull/403',
+  },
+  {
+    key: 'nixpkgs',
+    repo: 'NixOS/nixpkgs',
+    kind: 'review',
+    url: 'https://github.com/NixOS/nixpkgs/pull/545222',
+  },
+  {
+    key: 'snacks',
+    repo: 'folke/snacks.nvim',
+    kind: 'report',
+    url: 'https://github.com/folke/snacks.nvim/issues/2689',
+  },
+  {
+    key: 'codexbar',
+    repo: 'steipete/CodexBar',
+    kind: 'report',
+    url: 'https://github.com/steipete/CodexBar/issues/420',
+  },
+  {
+    key: 'terminalBrowser',
+    repo: 'zenbu-labs/terminal-browser',
+    kind: 'report',
+    url: 'https://github.com/zenbu-labs/terminal-browser/issues/85',
+  },
+  {
+    key: 'elasticlens',
+    repo: 'pdphilip/elasticlens',
+    kind: 'report',
+    url: 'https://github.com/pdphilip/elasticlens/issues/16',
+  },
+] as const
+
+/** "oct. 2023" / "Oct 2023" */
+export function formatMonth(date: string, locale: string): string {
+  return new Date(date).toLocaleDateString(locale === 'fr' ? 'fr-FR' : 'en-US', {
+    month: 'short',
+    year: 'numeric',
+  })
+}
diff --git a/i18n/locales/en.ts b/i18n/locales/en.ts
index 0dcb168..06fabd7 100644
--- a/i18n/locales/en.ts
+++ b/i18n/locales/en.ts
@@ -33,6 +33,10 @@ export default {
 
   // Navigation
   nav: {
+    home: 'Home',
+    experience: 'Journey',
+    apps: 'Apps',
+    blog: 'Blog',
     skipToContent: 'Skip to content',
     openMenu: 'Open menu',
     closeMenu: 'Close menu',
@@ -50,8 +54,6 @@ export default {
     about: 'ABOUT',
     projects: 'PROJECTS',
     skills: 'STACK & SKILLS',
-    experience: 'EXPERIENCE',
-    education: 'EDUCATION',
     parcours: 'JOURNEY',
     activity: 'ACTIVITY',
     blog: 'BLOG',
@@ -267,8 +269,146 @@ export default {
   },
 
   // Blog Navigation
+  // /experience
+  experiencePage: {
+    seoTitle: 'Journey and open source · Kylian Bardini',
+    seoDescription:
+      'The journey of Kylian Bardini, full stack developer: Jewely x Flippad, Virtual Immersion, Metz Numeric School, and the open source tools he publishes (gwm, vellum, LazyCurl).',
+    ogTitle: 'Journey',
+    ogSubtitle: 'Experience, education and open source',
+    eyebrow: 'JOURNEY',
+    title: 'Full stack developer, from code to production.',
+    intro:
+      'Nearly four years in companies, starting as a work-study student: an ERP and back offices in Laravel and Symfony, front ends in Vue, Nuxt and React, deployed on AWS and Heroku. On the side, open source tools for the terminal, in Rust and Go.',
+    ctaOpenSource: 'See the open source',
+    ctaBlog: 'Read the blog',
+    timeline: 'Roles and education',
+    experienceLabel: 'EXPERIENCE',
+    educationLabel: 'EDUCATION',
+    stack: 'Stack',
+    missions: 'Missions',
+    skills: 'Learned',
+    more: 'Show more',
+    less: 'Show less',
+    summaries: {
+      flippad:
+        'Three years at Jewely x Flippad, first as a work-study student, then full time: an ERP for luxury jewellers, a multi-brand jewellery configurator, the Assmat-Facile back office and the Fiches Pédagogiques rebuild, deployed on AWS and Heroku through GitHub Actions.',
+      virtualImmersion:
+        'A work-study year at Virtual Immersion: a file management API in Symfony, mixed reality on WordPress and the map navigation of an animal park in React.',
+      mnsMaster:
+        'Software engineering: advanced software architecture and microservices, testing at every level, continuous integration and delivery, and two years of project management for the degree.',
+      mnsLicence:
+        'Full stack developer: UI and UX with Figma, web, mobile and desktop frameworks, software architecture principles, and a year of project management for the degree.',
+      cciBac2:
+        'Web and mobile web developer: programming and web basics, MVC architecture, UI and UX with the Adobe suite, and an internship at House & Garden.',
+    },
+    openSource: {
+      eyebrow: 'OPEN SOURCE',
+      title: 'Tools for the terminal, published and maintained.',
+      intro:
+        'What I publish on GitHub, and what I send back to the projects I use: packages to ship gwm, and bugs reported upstream.',
+      projectsLabel: 'Maintained projects',
+      upstreamLabel: 'Contributions',
+      reportsLabel: 'Reports',
+      lot: 'LOT',
+      install: 'Install:',
+      site: 'Site',
+      repo: 'Repository',
+      viewAll: 'See everything on GitHub',
+      status: {
+        released: 'Released',
+        inDevelopment: 'In development',
+        archived: 'Archived',
+        merged: 'Merged',
+        review: 'In review',
+        report: 'Issue',
+      },
+      projects: {
+        gwm: 'Git worktree manager for the terminal, CLI and TUI in Rust: it creates the worktree, runs the project setup, links the issue and shows which AI agent is working where. A single binary, no git CLI needed.',
+        vellum:
+          'TUI SQL client: browse, query and edit a database in the terminal, with a GitHub-like diff for every write. Rust and ratatui, local-first.',
+        lazycurl: 'TUI HTTP client in Go, in the spirit of lazygit.',
+        herdrPluginGwm:
+          'herdr plugin that drives gwm for worktree management: gwm stays the source of truth, herdr follows.',
+        claudeCrosstalk:
+          'A Claude mod to read and join the conversations between several Claude Code sessions.',
+        kbrdnDocs: 'Multi-product documentation monorepo, Astro Starlight and Bun workspaces.',
+      },
+      upstream: {
+        winget: "gwm's manifest in the winget repository",
+        aqua: 'gwm added to the aqua registry',
+        awesomeRatatui: 'gwm in the awesome-ratatui list',
+        nixpkgs: 'The gwm package for nixpkgs',
+        snacks: 'gh_start_review fails with HTTP 422 when headRefOid is empty',
+        codexbar: 'Helium browser cookies are not found',
+        terminalBrowser: 'Let a TUI host provide a target rectangle instead of a whole pane',
+        elasticlens: 'Laravel 13 support blocked by a pdphilip/omniterm constraint',
+      },
+    },
+    availability: 'A project, a role, a question: a message is enough.',
+    teaser: 'Experience, education and open source: the details are on the journey page.',
+    teaserCta: 'See the journey',
+  },
+
+  // /apps
+  appsPage: {
+    seoTitle: 'Apps · Kylian Bardini',
+    seoDescription:
+      "Kylian Bardini's terminal apps: gwm (git worktree manager), vellum (TUI SQL client, in development) and LazyCurl (TUI HTTP client, archived).",
+    ogTitle: 'Apps',
+    ogSubtitle: 'gwm, vellum and LazyCurl',
+    eyebrow: 'APPS',
+    title: 'Tools for the terminal.',
+    intro:
+      "What I ship, what I'm building and what I've put away. All open source, the code is on GitHub.",
+    site: 'Site',
+    repo: 'Repository',
+    releases: 'Releases',
+    install: 'Install',
+    status: {
+      released: 'Available',
+      inDevelopment: 'In development',
+      archived: 'Archived',
+    },
+    apps: {
+      gwm: {
+        illustration:
+          "gwm's TUI: the repository's worktrees with their branch and state, the selected worktree's details and its latest commits",
+        tagline: 'Git worktree manager for the terminal, CLI and TUI.',
+        description:
+          'gwm creates the worktree, runs the project setup, links the issue and shows which AI agent is working where. A single binary, no git CLI needed.',
+        features: [
+          'One command to create the worktree, set the project up and link its issue.',
+          'Knows which AI agent works where: Claude Code, Codex, opencode and Mistral Vibe.',
+          'A machine surface: JSON output, a JSON-RPC daemon and a statusline for your prompt.',
+          'gwm undo and gwm history recover a worktree removed by mistake.',
+        ],
+      },
+      vellum: {
+        tagline: 'TUI SQL client, with a diff for every write.',
+        description:
+          'Browse, query and edit a database from the terminal, seeing every write as a GitHub-like diff before it applies. Pre-0.1: not usable yet.',
+        features: [
+          'Browse, query and edit a database without leaving the terminal.',
+          'A GitHub-like diff before every write.',
+          'Rust and ratatui: a single binary, no account, no telemetry.',
+        ],
+      },
+      lazycurl: {
+        illustration: "LazyCurl's interface: collections, request and response side by side",
+        tagline: 'TUI HTTP client, between lazygit and Postman.',
+        description: "Test an API from the terminal, with lazygit's interface and Postman's tools.",
+        features: [
+          'Lazygit-style interface: multiple panels and vim motions.',
+          'JavaScript pre- and post-request scripts, and 16 test assertions.',
+          'Request collections and environment variables.',
+          'cURL, OpenAPI 3 and Postman import and export.',
+        ],
+      },
+    },
+  },
+
   blogNav: {
-    articles: 'Articles',
     tags: 'Tags',
     portfolio: 'Portfolio',
     sponsor: 'Sponsor',
@@ -305,11 +445,6 @@ export default {
   // Footer Section
   footer: {
     nav: {
-      about: 'About',
-      skills: 'Stack & Skills',
-      projects: 'Projects',
-      experience: 'Experience',
-      education: 'Education',
       articles: 'Articles',
       tags: 'Tags',
     },
diff --git a/i18n/locales/fr.ts b/i18n/locales/fr.ts
index 30011cb..a3c5ca6 100644
--- a/i18n/locales/fr.ts
+++ b/i18n/locales/fr.ts
@@ -33,6 +33,10 @@ export default {
 
   // Navigation
   nav: {
+    home: 'Accueil',
+    experience: 'Parcours',
+    apps: 'Apps',
+    blog: 'Blog',
     skipToContent: 'Aller au contenu',
     openMenu: 'Ouvrir le menu',
     closeMenu: 'Fermer le menu',
@@ -50,8 +54,6 @@ export default {
     about: 'A PROPOS',
     projects: 'PROJETS',
     skills: 'STACK & COMPÉTENCES',
-    experience: 'EXPERIENCE',
-    education: 'FORMATION',
     parcours: 'PARCOURS',
     activity: 'ACTIVITE',
     blog: 'BLOG',
@@ -267,8 +269,147 @@ export default {
   },
 
   // Blog Navigation
+  // /experience
+  experiencePage: {
+    seoTitle: 'Parcours et open source · Kylian Bardini',
+    seoDescription:
+      "Le parcours de Kylian Bardini, développeur full stack : Jewely x Flippad, Virtual Immersion, Metz Numeric School, et les outils open source qu'il publie (gwm, vellum, LazyCurl).",
+    ogTitle: 'Parcours',
+    ogSubtitle: 'Expériences, formations et open source',
+    eyebrow: 'PARCOURS',
+    title: 'Développeur full stack, du code à la production.',
+    intro:
+      "Près de quatre ans en entreprise, d'abord en alternance : un ERP et des back-offices en Laravel et Symfony, des fronts en Vue, Nuxt et React, déployés sur AWS et Heroku. À côté, des outils open source pour le terminal, en Rust et en Go.",
+    ctaOpenSource: "Voir l'open source",
+    ctaBlog: 'Lire le blog',
+    timeline: 'Postes et formations',
+    experienceLabel: 'EXPÉRIENCE',
+    educationLabel: 'FORMATION',
+    stack: 'Stack',
+    missions: 'Missions',
+    skills: 'Acquis',
+    more: 'En savoir plus',
+    less: 'Réduire',
+    summaries: {
+      flippad:
+        "Trois ans chez Jewely x Flippad, d'abord en alternance puis en CDI : un ERP pour les bijouteries de luxe, un configurateur de bijoux multi-marques, le back-office d'Assmat-Facile et la refonte de Fiches Pédagogiques, déployés sur AWS et Heroku par GitHub Actions.",
+      virtualImmersion:
+        "Un an d'alternance chez Virtual Immersion : une API de gestion de fichiers en Symfony, de la réalité mixte sur WordPress et la navigation sur la carte d'un parc animalier en React.",
+      mnsMaster:
+        'Ingénierie informatique : architecture logicielle avancée et micro-services, tests à tous les niveaux, intégration et déploiement continus, et deux ans de gestion de projet pour le diplôme.',
+      mnsLicence:
+        "Développeur full stack : UI et UX avec Figma, frameworks web, mobile et desktop, principes d'architecture logicielle, et un an de gestion de projet pour le diplôme.",
+      cciBac2:
+        'Développeur web et web mobile : bases de la programmation et du web, architecture MVC, UI et UX avec la suite Adobe, et un stage chez House & Garden.',
+    },
+    openSource: {
+      eyebrow: 'OPEN SOURCE',
+      title: 'Des outils pour le terminal, publiés et maintenus.',
+      intro:
+        "Ce que je publie sur GitHub, et ce que je remonte aux projets que j'utilise : des paquets pour distribuer gwm, et des bugs signalés en amont.",
+      projectsLabel: 'Projets maintenus',
+      upstreamLabel: 'Contributions',
+      reportsLabel: 'Signalements',
+      lot: 'LOT',
+      install: 'Installation :',
+      site: 'Site',
+      repo: 'Dépôt',
+      viewAll: 'Tout voir sur GitHub',
+      status: {
+        released: 'Publié',
+        inDevelopment: 'En développement',
+        archived: 'Archivé',
+        merged: 'Fusionnée',
+        review: 'En revue',
+        report: 'Issue',
+      },
+      projects: {
+        gwm: "Gestionnaire de worktrees git pour le terminal, CLI et TUI en Rust : il crée le worktree, lance l'installation du projet, relie l'issue et montre quel agent IA travaille où. Un seul binaire, sans la CLI git.",
+        vellum:
+          "Client SQL en TUI : parcourir, requêter et éditer une base dans le terminal, avec un diff à la GitHub pour chaque écriture. Rust et ratatui, local d'abord.",
+        lazycurl: "Client HTTP en TUI, en Go, dans l'esprit de lazygit.",
+        herdrPluginGwm:
+          'Plugin herdr qui pilote gwm pour gérer les worktrees : gwm reste la source de vérité, herdr suit.',
+        claudeCrosstalk:
+          'Un mod Claude pour lire et rejoindre les conversations entre plusieurs sessions Claude Code.',
+        kbrdnDocs: 'Monorepo de documentation multi-produits, Astro Starlight et Bun workspaces.',
+      },
+      upstream: {
+        winget: 'Le manifeste de gwm dans le dépôt winget',
+        aqua: 'gwm ajouté au registre aqua',
+        awesomeRatatui: 'gwm dans la liste awesome-ratatui',
+        nixpkgs: 'Le paquet gwm pour nixpkgs',
+        snacks: 'gh_start_review échoue en HTTP 422 quand headRefOid est vide',
+        codexbar: 'Les cookies du navigateur Helium ne sont pas trouvés',
+        terminalBrowser: "Laisser un hôte TUI fournir un rectangle cible plutôt qu'un pane entier",
+        elasticlens: 'Le support de Laravel 13 bloqué par une contrainte de pdphilip/omniterm',
+      },
+    },
+    availability: 'Un projet, un poste, une question : un message suffit.',
+    teaser: 'Expériences, formations et open source : le détail est sur la page parcours.',
+    teaserCta: 'Voir le parcours',
+  },
+
+  // /apps
+  appsPage: {
+    seoTitle: 'Apps · Kylian Bardini',
+    seoDescription:
+      'Les apps pour le terminal de Kylian Bardini : gwm (gestionnaire de worktrees git), vellum (client SQL en TUI, en développement) et LazyCurl (client HTTP en TUI, archivé).',
+    ogTitle: 'Apps',
+    ogSubtitle: 'gwm, vellum et LazyCurl',
+    eyebrow: 'APPS',
+    title: 'Des outils pour le terminal.',
+    intro:
+      "Ce que je publie, ce que je construis et ce que j'ai rangé. Tout est open source, le code est sur GitHub.",
+    site: 'Site',
+    repo: 'Dépôt',
+    releases: 'Versions',
+    install: 'Installer',
+    status: {
+      released: 'Disponible',
+      inDevelopment: 'En développement',
+      archived: 'Archivé',
+    },
+    apps: {
+      gwm: {
+        illustration:
+          'La TUI de gwm : les worktrees du dépôt avec leur branche et leur état, le détail du worktree sélectionné et ses derniers commits',
+        tagline: 'Gestionnaire de worktrees git pour le terminal, CLI et TUI.',
+        description:
+          "gwm crée le worktree, lance l'installation du projet, relie l'issue et montre quel agent IA travaille où. Un seul binaire, sans la CLI git.",
+        features: [
+          'Une commande pour créer le worktree, installer le projet et relier son issue.',
+          'Sait quel agent IA travaille où : Claude Code, Codex, opencode et Mistral Vibe.',
+          'Une surface machine : sortie JSON, un daemon JSON-RPC et une ligne de statut pour le prompt.',
+          'gwm undo et gwm history rattrapent un worktree supprimé par erreur.',
+        ],
+      },
+      vellum: {
+        tagline: 'Client SQL en TUI, avec un diff pour chaque écriture.',
+        description:
+          "Parcourir, requêter et éditer une base depuis le terminal, en voyant chaque écriture comme un diff GitHub avant de l'appliquer. Pré-0.1 : pas encore utilisable.",
+        features: [
+          'Parcourir, requêter et éditer une base sans quitter le terminal.',
+          'Un diff à la GitHub avant chaque écriture.',
+          'Rust et ratatui : un seul binaire, sans compte ni télémétrie.',
+        ],
+      },
+      lazycurl: {
+        illustration: "L'interface de LazyCurl : collections, requête et réponse côte à côte",
+        tagline: 'Client HTTP en TUI, entre lazygit et Postman.',
+        description:
+          "Tester une API depuis le terminal, avec l'interface de lazygit et les outils de Postman.",
+        features: [
+          'Interface à la lazygit : panneaux multiples et déplacements vim.',
+          'Scripts JavaScript avant et après chaque requête, et 16 assertions de test.',
+          "Collections de requêtes et variables d'environnement.",
+          'Import et export cURL, OpenAPI 3 et Postman.',
+        ],
+      },
+    },
+  },
+
   blogNav: {
-    articles: 'Articles',
     tags: 'Tags',
     portfolio: 'Portfolio',
     sponsor: 'Sponsoriser',
@@ -305,11 +446,6 @@ export default {
   // Footer Section
   footer: {
     nav: {
-      about: 'A propos',
-      skills: 'Stack & Compétences',
-      projects: 'Projets',
-      experience: 'Expérience',
-      education: 'Formation',
       articles: 'Articles',
       tags: 'Tags',
     },
diff --git a/public/images/apps/gwm-demo.mp4 b/public/images/apps/gwm-demo.mp4
new file mode 100644
index 0000000..b961f1f
Binary files /dev/null and b/public/images/apps/gwm-demo.mp4 differ
diff --git a/public/images/apps/gwm.webp b/public/images/apps/gwm.webp
new file mode 100644
index 0000000..194c58b
Binary files /dev/null and b/public/images/apps/gwm.webp differ
diff --git a/public/images/apps/lazycurl.webp b/public/images/apps/lazycurl.webp
new file mode 100644
index 0000000..c1cd24b
Binary files /dev/null and b/public/images/apps/lazycurl.webp differ
diff --git a/server/api/github/releases.get.ts b/server/api/github/releases.get.ts
new file mode 100644
index 0000000..aea82e5
--- /dev/null
+++ b/server/api/github/releases.get.ts
@@ -0,0 +1,45 @@
+import { createError, defineEventHandler, setResponseHeader } from 'h3'
+
+// Latest published release of each app on /apps, so the page never shows a stale
+// version. A fixed list: the route takes no input. GraphQL needs a token (githubToken).
+
+const APPS = ['gwm-cli', 'vellum', 'LazyCurl'] as const
+
+interface ReleasesResponse {
+  data?: Record<string, { latestRelease: { tagName: string; publishedAt: string } | null } | null>
+  errors?: Array<{ message: string }>
+}
+
+export default defineEventHandler(async (event) => {
+  const token = githubToken()
+  if (!token) throw createError({ statusCode: 503, statusMessage: 'GitHub token not configured' })
+
+  // One aliased field per repository: r0, r1, …
+  const fields = APPS.map(
+    (name, i) =>
+      `r${i}: repository(owner: "kbrdn1", name: "${name}") { latestRelease { tagName publishedAt } }`,
+  ).join('\n')
+
+  const response = await $fetch<ReleasesResponse>('https://api.github.com/graphql', {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}`, 'User-Agent': 'kbrdn.dev-portfolio' },
+    body: { query: `query { ${fields} }` },
+  }).catch((error) => {
+    console.error('GitHub releases request failed:', error)
+    throw createError({ statusCode: 502, statusMessage: 'GitHub API error' })
+  })
+
+  if (response.errors?.length || !response.data) {
+    console.error('GitHub releases errors:', response.errors)
+    throw createError({ statusCode: 502, statusMessage: 'GitHub API error' })
+  }
+
+  setResponseHeader(event, 'Cache-Control', 'public, max-age=3600, s-maxage=3600')
+
+  return Object.fromEntries(
+    APPS.map((name, i) => {
+      const release = response.data![`r${i}`]?.latestRelease
+      return [name, release ? { version: release.tagName, publishedAt: release.publishedAt } : null]
+    }),
+  ) as Record<(typeof APPS)[number], { version: string; publishedAt: string } | null>
+})