✨ 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>
2026-02-06 11:14:32 +01:00
parent cfc9cca34f
commit e5eb9d0e78
7 changed files with 364 additions and 46 deletions
--- a/frontend/app/components/feature/TimelineItem.vue
+++ b/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>
--- a/frontend/app/composables/useIntersectionObserver.ts
+++ b/frontend/app/composables/useIntersectionObserver.ts
@@ -0,0 +1,57 @@
+export interface UseIntersectionObserverOptions {
+  threshold?: number
+  rootMargin?: string
+  once?: boolean
+}
+
+export function useIntersectionObserver(
+  target: Ref<HTMLElement | null>,
+  options: UseIntersectionObserverOptions = {}
+) {
+  const { threshold = 0.1, rootMargin = '0px', once = true } = options
+
+  const isVisible = ref(false)
+
+  if (import.meta.client) {
+    let observer: IntersectionObserver | null = null
+
+    const cleanup = () => {
+      if (observer) {
+        observer.disconnect()
+        observer = null
+      }
+    }
+
+    watch(
+      target,
+      (el) => {
+        cleanup()
+
+        if (!el) return
+
+        observer = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                isVisible.value = true
+                if (once && observer) {
+                  observer.unobserve(entry.target)
+                }
+              } else if (!once) {
+                isVisible.value = false
+              }
+            })
+          },
+          { threshold, rootMargin }
+        )
+
+        observer.observe(el)
+      },
+      { immediate: true }
+    )
+
+    onUnmounted(cleanup)
+  }
+
+  return { isVisible: readonly(isVisible) }
+}
--- a/frontend/app/pages/parcours.vue
+++ b/frontend/app/pages/parcours.vue
@@ -1,16 +1,73 @@
 <template>
-  <div class="min-h-screen p-8">
-    <h1 class="text-3xl font-narrative text-sky-text">{{ $t('pages.journey.title') }}</h1>
-    <p class="mt-4 text-sky-text/70">{{ $t('pages.journey.description') }}</p>
+  <div class="min-h-screen">
+    <!-- Hero section -->
+    <section class="relative overflow-hidden bg-gradient-to-b from-sky-dark to-sky-darker py-16">
+      <div class="container mx-auto px-4">
+        <h1 class="text-center text-4xl font-narrative font-bold text-white md:text-5xl">
+          {{ $t('journey.title') }}
+        </h1>
+        <p class="mx-auto mt-4 max-w-2xl text-center text-lg text-gray-400">
+          {{ $t('journey.page_description') }}
+        </p>
+      </div>
+
+      <!-- Decorative elements -->
+      <div class="absolute -left-20 top-20 h-40 w-40 rounded-full bg-sky-500/5 blur-3xl" />
+      <div class="absolute -right-20 bottom-10 h-60 w-60 rounded-full bg-emerald-500/5 blur-3xl" />
+    </section>
+
+    <!-- Timeline section -->
+    <section class="container mx-auto px-4 py-16">
+      <div class="relative">
+        <!-- Ligne centrale verticale -->
+        <div class="absolute bottom-0 left-2 top-0 w-0.5 bg-gradient-to-b from-sky-500/50 via-sky-dark to-sky-500/50 md:left-1/2 md:-translate-x-1/2" />
+
+        <!-- Étapes -->
+        <div class="space-y-12">
+          <TimelineItem
+            v-for="(milestone, index) in milestones"
+            :key="index"
+            :milestone="milestone"
+            :index="index"
+            :is-left="index % 2 === 0"
+          />
+        </div>
+      </div>
+    </section>
+
+    <!-- Message de fin -->
+    <section class="container mx-auto px-4 pb-16">
+      <div class="mx-auto max-w-2xl rounded-xl bg-gradient-to-r from-sky-500/10 to-emerald-500/10 p-8 text-center">
+        <p class="font-narrative text-xl italic text-gray-300">
+          {{ $t('journey.end_message') }}
+        </p>
+      </div>
+    </section>
  </div>
 </template>

 <script setup lang="ts">
+import type { Milestone } from '~/components/feature/TimelineItem.vue'
+
 const { setPageMeta } = useSeo()
-const { t } = useI18n()
+const { t, tm } = useI18n()
+const progressStore = useProgressStore()

 setPageMeta({
-  title: t('pages.journey.title'),
-  description: t('pages.journey.description'),
+  title: t('journey.page_title'),
+  description: t('journey.page_description'),
+})
+
+onMounted(() => {
+  progressStore.visitSection('journey')
+})
+
+// Charger les milestones depuis i18n
+const milestones = computed<Milestone[]>(() => {
+  const data = tm('journey.milestones')
+  if (Array.isArray(data)) {
+    return data as Milestone[]
+  }
+  return []
 })
 </script>
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -125,6 +125,56 @@
    "go_to": "Go to testimonial",
    "keyboard_hint": "Use \u2190 \u2192 arrows to navigate, Space to speed up"
  },
+  "journey": {
+    "title": "My Journey",
+    "page_title": "Journey | Skycel",
+    "page_description": "Discover C\u00e9lian's professional journey, from the beginning to today.",
+    "end_message": "The adventure continues... Who knows where code will take me tomorrow?",
+    "milestones": [
+      {
+        "date": "2018",
+        "title": "First steps in development",
+        "description": "Discovering code through personal projects. HTML, CSS, JavaScript became my new travel companions. The spark was there.",
+        "icon": "\ud83d\ude80"
+      },
+      {
+        "date": "2019",
+        "title": "Intensive training",
+        "description": "Deep dive into professional web development. Learning modern frameworks, best practices, and agile methodologies.",
+        "icon": "\ud83d\udcda"
+      },
+      {
+        "date": "2020",
+        "title": "First clients",
+        "description": "Starting as a freelancer. First real projects, first real challenges. Each client teaches me something new.",
+        "icon": "\ud83d\udcbc"
+      },
+      {
+        "date": "2021",
+        "title": "Specialization in Vue.js & Laravel",
+        "description": "The game-changing duo. Vue.js on the front, Laravel on the back. A stack that allows me to create complete, performant web experiences.",
+        "icon": "\u26a1"
+      },
+      {
+        "date": "2022",
+        "title": "Creating the micro-enterprise",
+        "description": "Making the entrepreneurial adventure official. The spider becomes the mascot, the Bug becomes the guide. The Skycel identity takes shape.",
+        "icon": "\ud83d\udd77\ufe0f"
+      },
+      {
+        "date": "2023-2024",
+        "title": "Ambitious projects",
+        "description": "From complex web applications to e-commerce sites, each project pushes boundaries. TypeScript, Nuxt 4, and an obsession with quality.",
+        "icon": "\ud83c\udfaf"
+      },
+      {
+        "date": "2025",
+        "title": "Today",
+        "description": "This portfolio you're exploring. An adventure in itself, reflecting my passion for creating memorable web experiences. And this is just the beginning...",
+        "icon": "\u2728"
+      }
+    ]
+  },
  "pages": {
    "projects": {
      "title": "Projects",
--- a/frontend/i18n/fr.json
+++ b/frontend/i18n/fr.json
@@ -125,6 +125,56 @@
    "go_to": "Aller au t\u00e9moignage",
    "keyboard_hint": "Utilisez les fl\u00e8ches \u2190 \u2192 pour naviguer, Espace pour acc\u00e9l\u00e9rer"
  },
+  "journey": {
+    "title": "Mon Parcours",
+    "page_title": "Parcours | Skycel",
+    "page_description": "D\u00e9couvrez le parcours professionnel de C\u00e9lian, de ses d\u00e9buts \u00e0 aujourd'hui.",
+    "end_message": "L'aventure continue... Qui sait o\u00f9 le code me m\u00e8nera demain ?",
+    "milestones": [
+      {
+        "date": "2018",
+        "title": "Premiers pas en d\u00e9veloppement",
+        "description": "D\u00e9couverte du code \u00e0 travers des projets personnels. HTML, CSS, JavaScript deviennent mes nouveaux compagnons de route. L'\u00e9tincelle est l\u00e0.",
+        "icon": "\ud83d\ude80"
+      },
+      {
+        "date": "2019",
+        "title": "Formation intensive",
+        "description": "Plong\u00e9e dans le monde du d\u00e9veloppement web professionnel. Apprentissage de frameworks modernes, bonnes pratiques, et m\u00e9thodologies agiles.",
+        "icon": "\ud83d\udcda"
+      },
+      {
+        "date": "2020",
+        "title": "Premiers clients",
+        "description": "Lancement en freelance. Premiers projets concrets, premiers d\u00e9fis r\u00e9els. Chaque client m'apprend quelque chose de nouveau.",
+        "icon": "\ud83d\udcbc"
+      },
+      {
+        "date": "2021",
+        "title": "Sp\u00e9cialisation Vue.js & Laravel",
+        "description": "Le duo qui change tout. Vue.js c\u00f4t\u00e9 front, Laravel c\u00f4t\u00e9 back. Une stack qui me permet de cr\u00e9er des exp\u00e9riences web compl\u00e8tes et performantes.",
+        "icon": "\u26a1"
+      },
+      {
+        "date": "2022",
+        "title": "Cr\u00e9ation de la micro-entreprise",
+        "description": "Officialisation de l'aventure entrepreneuriale. L'araign\u00e9e devient la mascotte, le Bug devient le guide. L'identit\u00e9 Skycel prend forme.",
+        "icon": "\ud83d\udd77\ufe0f"
+      },
+      {
+        "date": "2023-2024",
+        "title": "Projets ambitieux",
+        "description": "Des applications web complexes aux sites e-commerce, chaque projet repousse les limites. TypeScript, Nuxt 4, et une obsession pour la qualit\u00e9.",
+        "icon": "\ud83c\udfaf"
+      },
+      {
+        "date": "2025",
+        "title": "Aujourd'hui",
+        "description": "Ce portfolio que vous explorez. Une aventure en soi, qui refl\u00e8te ma passion pour cr\u00e9er des exp\u00e9riences web m\u00e9morables. Et ce n'est que le d\u00e9but...",
+        "icon": "\u2728"
+      }
+    ]
+  },
  "pages": {
    "projects": {
      "title": "Projets",