✨ 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>
This commit is contained in:
106
frontend/app/components/feature/TimelineItem.vue
Normal file
106
frontend/app/components/feature/TimelineItem.vue
Normal file
@@ -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>
|
||||
57
frontend/app/composables/useIntersectionObserver.ts
Normal file
57
frontend/app/composables/useIntersectionObserver.ts
Normal file
@@ -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) }
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user