chore(initial): ajout de la structure de base du projet avec Vite et Vue 3

- 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

src/components/layout/AppHeader.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useAssets } from '@/composables/useAssets'
+import { useI18n } from '@/composables/useI18n'
+import ThemeToggle from '@/components/ThemeToggle.vue'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
+
+const { getImageUrl } = useAssets()
+const { t } = useI18n()
+const isMenuOpen = ref(false)
+
+const navigation = computed(() => [
+  { name: t('nav.home'), path: '/' },
+  { name: t('nav.projects'), path: '/projects' },
+  { name: t('nav.about'), path: '/about' },
+  { name: t('nav.contact'), path: '/contact' },
+])
+
+const toggleMenu = () => {
+  isMenuOpen.value = !isMenuOpen.value
+}
+</script>
+
+<template>
+  <header class="header">
+    <div class="container">
+      <div class="header-content">
+        <!-- Logo -->
+        <RouterLink to="/" class="logo">
+          <img :src="getImageUrl('@/assets/images/logo.png')" alt="Killian" class="logo-image">
+          <span>Killian</span>
+        </RouterLink>
+
+        <!-- Desktop Navigation -->
+        <nav class="nav hidden md:flex">
+          <RouterLink v-for="item in navigation" :key="item.name" :to="item.path" class="nav-link"
+            :class="{ 'active': $route.path === item.path }">
+            {{ item.name }}
+          </RouterLink>
+        </nav>
+
+        <!-- Right side controls -->
+        <div class="header-actions">
+          <!-- Language switcher -->
+          <LanguageSwitcher />
+
+          <!-- Theme toggle -->
+          <ThemeToggle />
+
+          <!-- Mobile menu button -->
+          <button @click="toggleMenu" class="md:hidden btn btn-ghost p-2" aria-label="Toggle menu">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path v-if="!isMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M4 6h16M4 12h16M4 18h16" />
+              <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile Navigation -->
+    <div class="mobile-menu md:hidden" :class="{ 'open': isMenuOpen }">
+      <nav class="mobile-menu-nav">
+        <RouterLink v-for="item in navigation" :key="item.name" :to="item.path" class="nav-link"
+          @click="isMenuOpen = false">
+          {{ item.name }}
+        </RouterLink>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+/* Header actions */
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+/* Logo styling */
+.logo-image {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  border-radius: var(--border-radius-md);
+}
+
+/* Mobile responsive utilities */
+@media (min-width: 768px) {
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+/* Navigation active state */
+.nav-link.router-link-active {
+  color: var(--color-primary);
+}
+
+.nav-link.router-link-active::after {
+  width: 100%;
+}
+</style>