✨ Add journey timeline page with scroll animations (Story 2.8)

- Create useIntersectionObserver composable for scroll-triggered animations
- Add TimelineItem component with alternating layout (desktop)
- Implement journey page with i18n-based milestones data
- Add 7 career milestones (2018-2025) in FR and EN
- Gradient timeline line with animated connection points
- Glassmorphism card design with hover effects
- Respect prefers-reduced-motion for all animations

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/app/components/feature/TimelineItem.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+export interface Milestone {
+  date: string
+  title: string
+  description: string
+  icon: string
+}
+
+interface Props {
+  milestone: Milestone
+  index: number
+  isLeft: boolean
+}
+
+const props = defineProps<Props>()
+
+const itemRef = ref<HTMLElement | null>(null)
+const reducedMotion = useReducedMotion()
+
+const { isVisible } = useIntersectionObserver(itemRef, {
+  threshold: 0.2,
+  rootMargin: '-50px',
+})
+
+const shouldAnimate = computed(() => !reducedMotion.value)
+</script>
+
+<template>
+  <div
+    ref="itemRef"
+    class="timeline-item relative flex"
+    :class="isLeft ? 'md:flex-row-reverse' : 'md:flex-row'"
+  >
+    <!-- Contenu de l'étape -->
+    <div
+      class="timeline-content w-full md:w-1/2 pl-10 md:px-8"
+      :class="[
+        shouldAnimate && isVisible ? 'animate-in' : '',
+        shouldAnimate && !isVisible ? 'opacity-0 translate-y-4' : '',
+      ]"
+    >
+      <div
+        class="relative rounded-xl border border-sky-dark/50 bg-sky-dark/30 p-6 shadow-lg backdrop-blur-sm transition-all hover:border-sky-500/30 hover:shadow-sky-500/5"
+      >
+        <!-- Icône -->
+        <div class="mb-3 text-4xl">
+          {{ milestone.icon }}
+        </div>
+
+        <!-- Date badge -->
+        <span class="mb-3 inline-block rounded-full bg-sky-500/20 px-3 py-1 text-sm font-medium text-sky-400">
+          {{ milestone.date }}
+        </span>
+
+        <!-- Titre -->
+        <h3 class="mb-2 text-xl font-bold text-white">
+          {{ milestone.title }}
+        </h3>
+
+        <!-- Description -->
+        <p class="font-narrative leading-relaxed text-gray-400">
+          {{ milestone.description }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Point sur la ligne -->
+    <div class="timeline-dot absolute left-0 top-8 z-10 md:left-1/2 md:-translate-x-1/2">
+      <div
+        class="h-4 w-4 rounded-full ring-4 ring-sky-darker transition-all"
+        :class="isVisible ? 'bg-sky-400 scale-110' : 'bg-sky-dark'"
+      />
+    </div>
+
+    <!-- Espace pour le côté vide (desktop) -->
+    <div class="hidden w-1/2 md:block" />
+  </div>
+</template>
+
+<style scoped>
+.animate-in {
+  animation: fadeSlideUp 0.6s ease-out forwards;
+}
+
+@keyframes fadeSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .timeline-content {
+    opacity: 1 !important;
+    transform: none !important;
+  }
+
+  .animate-in {
+    animation: none;
+  }
+}
+</style>