cc7368b550
- Création des fichiers de configuration pour ESLint, Prettier, et Tailwind CSS - Ajout de la configuration de l'éditeur avec .editorconfig - Mise en place de la structure de répertoires pour les composants, les pages, et les données - Intégration de la gestion des langues avec vue-i18n - Ajout de la configuration de Vite et des dépendances nécessaires - Création des fichiers de localisation pour l'anglais et le français - Ajout de la structure de base pour le portfolio avec des exemples de projets - Mise en place des composants de base pour l'interface utilisateur
54 lines
1.3 KiB
Vue
54 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { RouterView, useRoute } from 'vue-router'
|
|
import { watch, nextTick } from 'vue'
|
|
import AppHeader from '@/components/layout/AppHeader.vue'
|
|
import AppFooter from '@/components/layout/AppFooter.vue'
|
|
import { useTheme } from '@/composables/useTheme'
|
|
|
|
const route = useRoute()
|
|
|
|
// Initialize theme
|
|
useTheme()
|
|
|
|
// Force scroll to top on route change (backup solution)
|
|
watch(() => route.fullPath, () => {
|
|
nextTick(() => {
|
|
window.scrollTo({ top: 0, behavior: 'auto' })
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div id="app" class="min-h-screen flex flex-col">
|
|
<AppHeader />
|
|
|
|
<div class="flex-grow">
|
|
<RouterView v-slot="{ Component }" :key="$route.fullPath">
|
|
<transition mode="out-in" enter-active-class="transition duration-300 ease-out"
|
|
enter-from-class="transform opacity-0" enter-to-class="transform opacity-100"
|
|
leave-active-class="transition duration-200 ease-in" leave-from-class="transform opacity-100"
|
|
leave-to-class="transform opacity-0">
|
|
<component :is="Component" />
|
|
</transition>
|
|
</RouterView>
|
|
</div>
|
|
|
|
<AppFooter />
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
/* Remove default margins */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Focus styles */
|
|
:focus-visible {
|
|
outline: 2px solid #2563eb;
|
|
outline-offset: 2px;
|
|
}
|
|
</style>
|