feat(gallery): ajout d'un modal de galerie et de nouvelles images

- Création du composant GalleryModal pour afficher les images en plein écran avec navigation. - Ajout de styles CSS pour le modal de galerie. - Intégration de la logique de gestion de la galerie dans le composable useGallery. - Ajout de nouvelles images WebP pour le projet FlowBoard. - Mise à jour des pages Home et ProjectDetail pour utiliser le nouveau composant de galerie.
2025-06-23 00:20:16 +02:00
parent da79d5e2da
commit 06172aae62
15 changed files with 681 additions and 157 deletions
@@ -2,10 +2,11 @@
 import { computed } from 'vue'
 import { useSeo } from '@/composables/useSeo'
 import { useI18n } from '@/composables/useI18n'
-import { projects } from '@/data/projects'
+import { useProjects } from '@/composables/useProjects'
 import ProjectCard from '@/components/ProjectCard.vue'

 const { t } = useI18n()
+const { projects } = useProjects()

 // Enhanced SEO with structured data
 useSeo({
@@ -39,7 +40,7 @@ useSeo({

 // Featured projects
 const featuredProjects = computed(() => {
-  return projects.filter(project => project.featured).slice(0, 3)
+  return projects.value.filter(project => project.featured).slice(0, 3)
 })

 // Services data
@@ -3,24 +3,30 @@ import { computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useSeo } from '@/composables/useSeo'
 import { useAssets } from '@/composables/useAssets'
-import { projects } from '@/data/projects'
+import { useProjects } from '@/composables/useProjects'
+import { useI18n } from '@/composables/useI18n'
+import { useGallery } from '@/composables/useGallery'
 import TechBadge from '@/components/TechBadge.vue'
+import GalleryModal from '@/components/GalleryModal.vue'

 const route = useRoute()
 const router = useRouter()
 const { getImageUrl } = useAssets()
+const { projects } = useProjects()
+const { t } = useI18n()
+const gallery = useGallery()

 // Find project by ID
 const project = computed(() => {
  const id = route.params.id as string
-  return projects.find(p => p.id === id)
+  return projects.value.find(p => p.id === id)
 })

 // Related projects
 const relatedProjects = computed(() => {
  if (!project.value) return []

-  return projects
+  return projects.value
    .filter(p => p.id !== project.value?.id && p.category === project.value?.category)
    .slice(0, 3)
 })
@@ -72,7 +78,7 @@ onMounted(() => {
              <svg class="breadcrumb-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
              </svg>
-              Retour aux projets
+              {{ t('projects.projectDetail.backToProjects') }}
            </button>
          </nav>

@@ -101,7 +107,7 @@ onMounted(() => {
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                  </svg>
-                  Voir la démo
+                  {{ t('projects.projectDetail.viewDemo') }}
                </a>

                <a v-if="project.githubUrl" :href="project.githubUrl" target="_blank" rel="noopener noreferrer"
@@ -110,7 +116,7 @@ onMounted(() => {
                    <path
                      d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                  </svg>
-                  Code source
+                  {{ t('projects.projectDetail.sourceCode') }}
                </a>

                <!-- Buttons from project data -->
@@ -129,7 +135,7 @@ onMounted(() => {
                      d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z">
                    </path>
                  </svg>
-                  Partager
+                  {{ t('projects.projectDetail.share') }}
                </button>
              </div>
            </div>
@@ -146,7 +152,7 @@ onMounted(() => {
          <div class="main-content">
            <!-- Project Details -->
            <div class="content-section">
-              <h2 class="section-title">À propos du projet</h2>
+              <h2 class="section-title">{{ t('projects.projectDetail.aboutProject') }}</h2>
              <div class="section-content">
                <p class="project-long-description">
                  {{ project.longDescription || project.description }}
@@ -154,7 +160,7 @@ onMounted(() => {

                <!-- Features -->
                <div v-if="project.features" class="features-list">
-                  <h3 class="features-title">Fonctionnalités principales</h3>
+                  <h3 class="features-title">{{ t('projects.projectDetail.keyFeatures') }}</h3>
                  <ul class="features">
                    <li v-for="feature in project.features" :key="feature" class="feature-item">
                      <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -169,7 +175,7 @@ onMounted(() => {

            <!-- Technologies -->
            <div v-if="project.technologies" class="content-section">
-              <h2 class="section-title">Technologies utilisées</h2>
+              <h2 class="section-title">{{ t('projects.projectDetail.technologiesUsed') }}</h2>
              <div class="section-content">
                <div class="tech-grid">
                  <TechBadge v-for="tech in project.technologies" :key="tech" :tech="tech" class="tech-item" />
@@ -179,11 +185,20 @@ onMounted(() => {

            <!-- Gallery -->
            <div v-if="project.gallery" class="content-section">
-              <h2 class="section-title">Galerie</h2>
+              <h2 class="section-title">{{ t('projects.projectDetail.gallery') }}</h2>
              <div class="section-content">
                <div class="gallery-grid">
-                  <div v-for="(image, index) in project.gallery" :key="index" class="gallery-item">
+                  <div v-for="(image, index) in project.gallery" :key="index" class="gallery-item"
+                    @click="gallery.openGallery(project.gallery, index)">
                    <img :src="getImageUrl(image)" :alt="`${project.title} - Image ${index + 1}`" class="gallery-image">
+                    <div class="gallery-overlay">
+                      <svg class="gallery-expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                      </svg>
+                    </div>
                  </div>
                </div>
              </div>
@@ -194,20 +209,20 @@ onMounted(() => {
          <aside class="sidebar">
            <!-- Project Info Card -->
            <div class="info-card">
-              <h3 class="info-title">Informations du projet</h3>
+              <h3 class="info-title">{{ t('projects.projectDetail.projectInfo') }}</h3>
              <div class="info-list">
                <div v-if="project.date" class="info-item">
-                  <span class="info-label">Date</span>
+                  <span class="info-label">{{ t('projects.projectDetail.date') }}</span>
                  <span class="info-value">{{ project.date }}</span>
                </div>

                <div v-if="project.category" class="info-item">
-                  <span class="info-label">Catégorie</span>
+                  <span class="info-label">{{ t('projects.projectDetail.category') }}</span>
                  <span class="info-value">{{ project.category }}</span>
                </div>

                <div v-if="project.status" class="info-item">
-                  <span class="info-label">Statut</span>
+                  <span class="info-label">{{ t('projects.projectDetail.status') }}</span>
                  <span class="info-value">{{ project.status }}</span>
                </div>

@@ -220,10 +235,10 @@ onMounted(() => {

            <!-- Related Projects -->
            <div v-if="relatedProjects.length > 0" class="related-projects">
-              <h3 class="related-title">Projets similaires</h3>
+              <h3 class="related-title">{{ t('projects.projectDetail.relatedProjects') }}</h3>
              <div class="related-list">
                <router-link v-for="relatedProject in relatedProjects" :key="relatedProject.id"
-                  :to="`/projects/${relatedProject.id}`" class="related-item">
+                  :to="`/project/${relatedProject.id}`" class="related-item">
                  <img v-if="relatedProject.image" :src="getImageUrl(relatedProject.image)" :alt="relatedProject.title"
                    class="related-image">
                  <div class="related-content">
@@ -237,6 +252,13 @@ onMounted(() => {
        </div>
      </div>
    </section>
+
+    <!-- Gallery Modal -->
+    <GalleryModal :is-open="gallery.isOpen.value" :current-image="gallery.currentImage.value"
+      :current-index="gallery.currentIndex.value" :total-images="gallery.images.value.length"
+      :has-next="gallery.hasNext.value" :has-previous="gallery.hasPrevious.value" :project-title="project?.title || ''"
+      @close="gallery.closeGallery" @next="gallery.nextImage" @previous="gallery.previousImage"
+      @go-to="gallery.goToImage" />
  </main>
 </template>

@@ -2,10 +2,11 @@
 import { ref, computed } from 'vue'
 import { useSeo } from '@/composables/useSeo'
 import { useI18n } from '@/composables/useI18n'
-import { projects } from '@/data/projects'
+import { useProjects } from '@/composables/useProjects'
 import ProjectCard from '@/components/ProjectCard.vue'

 const { t } = useI18n()
+const { projects } = useProjects()

 // SEO
 useSeo({
@@ -19,7 +20,7 @@ useSeo({
    'name': 'Web Development Portfolio Projects',
    'description': 'Browse professional web development projects including Vue.js applications, React websites, Node.js APIs, and Discord bots',
    'url': 'https://killiandalcin.fr/projects',
-    'hasPart': projects.map(project => ({
+    'hasPart': projects.value.map(project => ({
      '@type': 'CreativeWork',
      'name': project.title,
      'description': project.description,
@@ -36,13 +37,13 @@ const sortBy = ref('date')

 // Get unique categories
 const categories = computed(() => {
-  const cats = ['all', ...new Set(projects.map(p => p.category).filter(Boolean))]
+  const cats = ['all', ...new Set(projects.value.map(p => p.category).filter(Boolean))]
  return cats
 })

 // Filtered and sorted projects
 const filteredProjects = computed(() => {
-  let filtered = projects
+  let filtered = projects.value

  // Filter by search query
  if (searchQuery.value) {
@@ -74,8 +75,8 @@ const filteredProjects = computed(() => {
 })

 // Stats
-const totalProjects = computed(() => projects.length)
-const featuredProjects = computed(() => projects.filter(p => p.featured).length)
+const totalProjects = computed(() => projects.value.length)
+const featuredProjects = computed(() => projects.value.filter(p => p.featured).length)
 </script>

 <template>
@@ -273,6 +273,8 @@
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-fast);
  background: var(--bg-secondary);
+  position: relative;
+  cursor: pointer;
 }

 .gallery-item:hover {
@@ -280,10 +282,41 @@
  box-shadow: var(--shadow-xl);
 }

+.gallery-item:hover .gallery-overlay {
+  opacity: 1;
+}
+
 .gallery-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
+  transition: transform var(--transition-normal);
+}
+
+.gallery-item:hover .gallery-image {
+  transform: scale(1.05);
+}
+
+.gallery-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity var(--transition-normal);
+  backdrop-filter: blur(2px);
+}
+
+.gallery-expand-icon {
+  width: 2rem;
+  height: 2rem;
+  color: white;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
 }

 /* Sidebar */