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>
74 lines
2.3 KiB
Vue
74 lines
2.3 KiB
Vue
<template>
|
|
<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, tm } = useI18n()
|
|
const progressStore = useProgressStore()
|
|
|
|
setPageMeta({
|
|
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>
|