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:
2026-02-06 11:14:32 +01:00
parent cfc9cca34f
commit e5eb9d0e78
7 changed files with 364 additions and 46 deletions

View File

@@ -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",