skycel
e5eb9d0e78
- 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>
107 lines
2.4 KiB
Vue
107 lines
2.4 KiB
Vue
<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>
|