skycel/Portfolio-Game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Add layouts, routing, transitions & pages (Story 1.4)

Browse Source 
Default layout with sticky AppHeader (nav, LanguageSwitcher, mobile hamburger),
AppFooter with social links. Minimal layout for express mode. 7 placeholder pages
with localized EN routes. Page transitions (fade+slide), prefers-reduced-motion
support, custom scroll behavior, error.vue, useSeo composable, SVG favicon.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
skycel
2026-02-05 18:35:31 +01:00
parent 262242c7df
commit ca828d86b4
22 changed files with 682 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/app/assets/css/transitions.css Normal file
View File

@@ -0,0 +1,60 @@
/* Transition de page - effet "changement de zone" */
.page-enter-active,
.page-leave-active {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.page-enter-from {
opacity: 0;
transform: translateY(10px);
}
.page-leave-to {
opacity: 0;
transform: translateY(-10px);
}
/* Transition de layout */
.layout-enter-active,
.layout-leave-active {
transition: opacity 0.2s ease;
}
.layout-enter-from,
.layout-leave-to {
opacity: 0;
}
/* Mobile menu slide */
.slide-down-enter-active,
.slide-down-leave-active {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.slide-down-enter-from,
.slide-down-leave-to {
opacity: 0;
transform: translateY(-8px);
}
/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.page-enter-active,
.page-leave-active,
.layout-enter-active,
.layout-leave-active,
.slide-down-enter-active,
.slide-down-leave-active {
transition: none;
}
.page-enter-from,
.page-leave-to,
.layout-enter-from,
.layout-leave-to,
.slide-down-enter-from,
.slide-down-leave-to {
opacity: 1;
transform: none;
}
}