portfolio/.planning/phases/03-pages-ship/03-RESEARCH.md

# Phase 3: Pages & Ship - Research

**Researched:** 2026-04-08
**Domain:** Nuxt 4 pages, Nuxt UI v3 composants interactifs, Nodemailer SMTP, Docker SSR
**Confidence:** HIGH

---

<user_constraints>
## User Constraints (from CONTEXT.md)

### Locked Decisions

- **D-01:** 6 sections sur la landing : Hero → Projets vedettes → Services → Témoignages → FAQ → CTA final
- **D-02:** Hero texte seul (titre + sous-titre + 3 boutons CTA), pas d'image ni animation
- **D-03:** 3 projets vedettes sur la landing (ceux avec `featured: true`)
- **D-04:** Filtres projects = barre de recherche texte + boutons catégorie — comme l'actuel
- **D-05:** UModal + UCarousel (Nuxt UI v3 natifs) pour la galerie
- **D-06:** Bande de thumbnails cliquables sous l'image principale
- **D-07:** Navigation clavier conservée : flèches gauche/droite + Escape pour fermer
- **D-08:** 3 champs formulaire seulement : Nom, Email, Message
- **D-09:** Validation Zod côté client avant envoi
- **D-10:** Feedback via UToast en haut à droite — succès ou erreur
- **D-11:** Envoi via SMTP direct (OVH) — `server/api/contact.post.ts` avec nodemailer, credentials dans runtimeConfig privé
- **D-12:** SSR node:22-alpine build + node:22-alpine runtime, copie `.output/`
- **D-13:** Variables d'environnement via runtimeConfig (NUXT_PUBLIC_*) — pas de rebuild pour changer les valeurs
- **D-14:** docker-compose.yml existant avec Traefik — mettre à jour le port loadbalancer de 80 vers 3000
- **D-15:** GA4 via nuxt-gtag, activé uniquement en production via runtimeConfig
- **D-16:** Migration fidèle des pages existantes depuis src/views/ — mêmes sections et contenu, composants Nuxt UI
- **D-17:** Page About : bio + tech stack badges (TechBadge.vue à migrer)
- **D-18:** Page Fiverr : hero + service cards + FAQ accordion (UAccordion) + CTA
- **D-19:** Page Formation SUPPRIMÉE
- **D-20:** Page 404 : error.vue Nuxt avec message et lien retour accueil

### Claude's Discretion

- Design exact des cards projets, services, témoignages
- Animations et transitions entre pages/sections
- Espacement, tailles de police, responsive breakpoints
- Structure interne des composants (découpage en sous-composants)
- Ordre des tâches d'implémentation et découpage en plans

### Deferred Ideas (OUT OF SCOPE)

None — discussion stayed within phase scope
</user_constraints>

---

<phase_requirements>
## Phase Requirements

| ID | Description | Research Support |
|----|-------------|------------------|
| PAGE-01 | Page Landing `/` — hero, projets vedettes, services, CTA | useFeaturedProjects() + UCard + UButton — patterns établis Phase 2 |
| PAGE-02 | Page Projects `/projects` — liste avec filtres (recherche + catégorie) | useProjects() composable déjà migré avec search() + filterByCategory() |
| PAGE-03 | Page Project Detail `/project/[id]` — détail + galerie modale d'images | Route dynamique `[id].vue` + UModal + UCarousel avec emblaApi.scrollTo() |
| PAGE-04 | Page About `/about` — biographie, tech stack badges | Données techstack.ts déjà migrées + UBadge ou UCard pour badges |
| PAGE-05 | Page Contact `/contact` — formulaire validation + envoi SMTP | UForm + Zod + nodemailer dans server/api/contact.post.ts |
| PAGE-06 | Page Fiverr `/fiverr` — landing services, cards, FAQ accordion, CTA | UAccordion avec items array + clés i18n |
| PAGE-07 | Page Formation `/formation` — SUPPRIMÉE (D-19) | Créer une redirection vers `/` ou stub vide |
| PAGE-08 | Page 404 — `error.vue` avec lien retour accueil | error.vue à la racine `app/`, prop `error.status`, clearError({ redirect: '/' }) |
| COMP-01 | Galerie modale — UModal + UCarousel + navigation clavier | UModal v-model:open + UCarousel ref + keydown listener |
| COMP-02 | Formulaire contact — UForm + Zod + envoi SMTP | schema Zod + state reactive + defineEventHandler + readBody + nodemailer |
| COMP-03 | FAQ accordion — UAccordion localisé FR/EN | UAccordion :items avec questionKey/answerKey résolus via t() |
| COMP-04 | Section témoignages — UCard par témoignage | testimonials.ts déjà migré, UCard avec slots header/body |
| INFRA-01 | Dockerfile production multi-stage node:22-alpine | Build stage : npm install + nuxt build ; Runtime : copie .output/, node server/index.mjs |
| INFRA-04 | GA4 via nuxt-gtag, actif uniquement en production | nuxt-gtag v4.1.0 déjà installé ; enabled: process.env.NODE_ENV === 'production' |
</phase_requirements>

---

## Summary

La Phase 3 construit et livre les 8 pages du portfolio avec leurs composants interactifs (galerie modale, formulaire contact, FAQ) et package le tout dans une image Docker SSR prête pour Traefik.

La base technique est solide : Nuxt 4 avec `app/` directory, Nuxt UI v3, i18n, color-mode et sitemap sont tous opérationnels depuis la Phase 2. Les données (`app/data/*.ts`) et le composable `useProjects()` sont déjà migrés. Les stubs de pages existent dans `app/pages/`. Il s'agit donc principalement de **remplir le contenu** des pages existantes et d'ajouter les composants manquants.

Les deux zones de risque technique sont : (1) la galerie modale UCarousel avec thumbnails — la navigation programmatique via `emblaApi` est légèrement non-standard et requiert `useTemplateRef` ; (2) le Dockerfile SSR qui doit switcher de nginx/static vers node/SSR — l'actuel `Dockerfile` copie `dist/` vers nginx, il faut le réécrire entièrement pour copier `.output/` et lancer `node server/index.mjs`.

**Recommandation principale :** Procéder par ordre logique — d'abord les pages statiques simples (Landing, About, Fiverr, Projects), puis les composants interactifs (galerie, formulaire), enfin Docker et GA4. Installer nodemailer (`npm install nodemailer`) et zod (`npm install zod`) avant d'attaquer le formulaire.

---

## Standard Stack

### Core (déjà installé)

| Library | Version installée | Purpose | Source |
|---------|-------------------|---------|--------|
| @nuxt/ui | ^3.0.0 | UModal, UCarousel, UForm, UAccordion, UToast | [VERIFIED: package.json] |
| @nuxt/image | ^2.0.0 | NuxtImg lazy loading + WebP | [VERIFIED: package.json] |
| nuxt-gtag | ^4.1.0 | GA4 production-only | [VERIFIED: package.json] |
| nuxt | ^4.0.0 | error.vue, defineEventHandler, useRuntimeConfig | [VERIFIED: package.json] |

### À installer

| Library | Version actuelle | Purpose | Source |
|---------|-----------------|---------|--------|
| nodemailer | 8.0.5 | SMTP OVH dans server/api route | [VERIFIED: npm registry] |
| zod | 4.3.6 | Validation Zod côté client UForm | [VERIFIED: npm registry] |
| @types/nodemailer | latest | Types TypeScript pour nodemailer | [ASSUMED] |

**Installation :**
```bash
npm install nodemailer zod
npm install --save-dev @types/nodemailer
```

### Alternatives considérées

| Au lieu de | Pourrait utiliser | Compromis |
|------------|------------------|-----------|
| nodemailer direct | nuxt-mail module | nuxt-mail ajoute une couche d'abstraction — inutile pour un seul endpoint |
| Zod | Valibot | Zod est standard avec Nuxt UI v3 UForm (schéma accepté nativement) |
| node:22-alpine | node:22-slim (Debian) | Alpine peut poser des problèmes de musl ABI pour native deps ; nodemailer n'a pas de native deps donc alpine est OK ici |

---

## Architecture Patterns

### Structure projet Phase 3

```
app/
├── pages/
│   ├── index.vue              # Landing — à enrichir (stub existant)
│   ├── projects.vue           # Projets — à enrichir (stub existant)
│   ├── about.vue              # About — à enrichir (stub existant)
│   ├── contact.vue            # Contact — à enrichir (stub existant)
│   ├── fiverr.vue             # Fiverr — à enrichir (stub existant)
│   └── project/
│       └── [id].vue           # Détail projet — À CRÉER
├── components/
│   ├── sections/
│   │   ├── HeroSection.vue    # À CRÉER
│   │   ├── FeaturedProjectsSection.vue   # À CRÉER
│   │   ├── ServicesSection.vue           # À CRÉER
│   │   ├── TestimonialsSection.vue       # À CRÉER
│   │   ├── FAQSection.vue               # À CRÉER
│   │   └── CTASection.vue               # À CRÉER
│   ├── ProjectCard.vue        # À CRÉER
│   ├── ProjectGallery.vue     # À CRÉER (UModal + UCarousel)
│   ├── ContactForm.vue        # À CRÉER (UForm + Zod)
│   └── TechBadge.vue          # À CRÉER
├── error.vue                  # À CRÉER (racine app/)
server/
└── api/
    └── contact.post.ts        # À CRÉER
```

### Pattern 1 : UModal + UCarousel galerie avec thumbnails

UModal utilise `v-model:open` pour l'état d'ouverture. UCarousel expose son instance Embla via `useTemplateRef` pour permettre la navigation programmatique depuis les thumbnails.

```vue
<!-- Source : ui.nuxt.com/components/modal + ui.nuxt.com/components/carousel -->
<script setup lang="ts">
const isOpen = ref(false)
const currentIndex = ref(0)
const carouselRef = useTemplateRef('carousel')

function openGallery(index: number) {
  currentIndex.value = index
  isOpen.value = true
  // Scroll to correct slide after modal opens
  nextTick(() => {
    carouselRef.value?.emblaApi?.scrollTo(index, true)
  })
}

function goTo(index: number) {
  currentIndex.value = index
  carouselRef.value?.emblaApi?.scrollTo(index, true)
}

// Navigation clavier (D-07)
function onKeydown(e: KeyboardEvent) {
  if (!isOpen.value) return
  if (e.key === 'ArrowRight') carouselRef.value?.emblaApi?.scrollNext()
  if (e.key === 'ArrowLeft') carouselRef.value?.emblaApi?.scrollPrev()
  if (e.key === 'Escape') isOpen.value = false
}

onMounted(() => document.addEventListener('keydown', onKeydown))
onUnmounted(() => document.removeEventListener('keydown', onKeydown))
</script>

<template>
  <UModal v-model:open="isOpen" fullscreen>
    <template #content>
      <UCarousel
        ref="carousel"
        v-slot="{ item }"
        :items="gallery"
        arrows
        loop
        @select="(i) => (currentIndex = i)"
      >
        <NuxtImg :src="item" loading="lazy" />
      </UCarousel>
      <!-- Thumbnails -->
      <div class="flex gap-2 mt-4 justify-center">
        <button
          v-for="(img, i) in gallery"
          :key="i"
          :class="{ 'ring-2 ring-primary': i === currentIndex }"
          @click="goTo(i)"
        >
          <NuxtImg :src="img" width="80" height="60" />
        </button>
      </div>
    </template>
  </UModal>
</template>
```

### Pattern 2 : UForm + Zod pour le formulaire contact

```vue
<!-- Source : ui.nuxt.com/components/form -->
<script setup lang="ts">
import { z } from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'

const schema = z.object({
  name: z.string().min(2, 'Minimum 2 caractères'),
  email: z.string().email('Email invalide'),
  message: z.string().min(10, 'Minimum 10 caractères'),
})

type Schema = z.output<typeof schema>

const state = reactive<Partial<Schema>>({
  name: undefined,
  email: undefined,
  message: undefined,
})

const toast = useToast()
const loading = ref(false)

async function onSubmit(event: FormSubmitEvent<Schema>) {
  loading.value = true
  try {
    await $fetch('/api/contact', { method: 'POST', body: event.data })
    toast.add({ title: 'Message envoyé !', color: 'success', icon: 'i-lucide-check' })
  } catch {
    toast.add({ title: 'Erreur envoi', color: 'error', icon: 'i-lucide-alert-circle' })
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <UForm :schema="schema" :state="state" @submit="onSubmit">
    <UFormField label="Nom" name="name">
      <UInput v-model="state.name" />
    </UFormField>
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" type="email" />
    </UFormField>
    <UFormField label="Message" name="message">
      <UTextarea v-model="state.message" rows="5" />
    </UFormField>
    <UButton type="submit" :loading="loading">Envoyer</UButton>
  </UForm>
</template>
```

### Pattern 3 : Nodemailer dans server/api/contact.post.ts

```typescript
// Source : nuxt.com/docs/guide/directory-structure/server + GitHub thaikolja/nuxt-nodemailer-example
import nodemailer from 'nodemailer'

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const config = useRuntimeConfig(event) // Passer event pour que les env vars runtime soient appliquées

  const transporter = nodemailer.createTransport({
    host: config.smtpHost,
    port: 465,
    secure: true,
    auth: {
      user: config.smtpUser,
      pass: config.smtpPass,
    },
  })

  await transporter.sendMail({
    from: `"Portfolio" <${config.smtpUser}>`,
    to: config.smtpTo,
    subject: `Contact portfolio — ${body.name}`,
    text: `De: ${body.name} <${body.email}>\n\n${body.message}`,
    html: `<p><strong>De:</strong> ${body.name} &lt;${body.email}&gt;</p><p>${body.message}</p>`,
  })

  return { success: true }
})
```

**Configuration nuxt.config.ts à ajouter :**

```typescript
runtimeConfig: {
  // Privé — jamais exposé au client
  smtpHost: '',    // NUXT_SMTP_HOST
  smtpUser: '',    // NUXT_SMTP_USER
  smtpPass: '',    // NUXT_SMTP_PASS
  smtpTo: '',      // NUXT_SMTP_TO
  public: {
    gtag: { id: '' }, // NUXT_PUBLIC_GTAG_ID (déjà en place)
  },
},
```

**Variables d'environnement `.env` (non commité) :**
```ini
NUXT_SMTP_HOST=ssl0.ovh.net
NUXT_SMTP_USER=contact@killiandalcin.fr
NUXT_SMTP_PASS=xxxx
NUXT_SMTP_TO=contact@killiandalcin.fr
NUXT_PUBLIC_GTAG_ID=G-CDVVNFY6MV
```

### Pattern 4 : UAccordion pour FAQ (D-18)

```vue
<!-- Source : ui.nuxt.com/components/accordion -->
<script setup lang="ts">
import { homeFAQs } from '~/data/faq'
const { t } = useI18n()

const items = computed(() =>
  homeFAQs.map((faq) => ({
    label: t(faq.questionKey),
    content: t(faq.answerKey),
    value: faq.questionKey,
  }))
)
</script>

<template>
  <UAccordion :items="items" type="single" collapsible />
</template>
```

### Pattern 5 : error.vue (PAGE-08 / D-20)

```vue
<!-- Emplacement : app/error.vue — Source : nuxt.com/docs/guide/directory-structure/error -->
<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{ error: NuxtError }>()

function handleError() {
  clearError({ redirect: '/' })
}
</script>

<template>
  <div class="min-h-screen flex flex-col items-center justify-center gap-6">
    <h1 class="text-6xl font-bold">{{ error.status }}</h1>
    <p class="text-xl text-gray-500">
      {{ error.status === 404 ? 'Page introuvable' : 'Une erreur est survenue' }}
    </p>
    <UButton @click="handleError">Retour à l'accueil</UButton>
  </div>
</template>
```

### Pattern 6 : Dockerfile SSR (INFRA-01 / D-12)

```dockerfile
# Source : nuxt.com/docs/deploy/docker + marcusn.dev article 2025-11
# Note: Alpine utilisé car nodemailer n'a pas de native deps liées à glibc

# Stage 1: Build
FROM node:22-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Stage 2: Runtime — copie uniquement .output/
FROM node:22-alpine AS runner
ENV NODE_ENV=production
ENV HOST=0.0.0.0
ENV PORT=3000
WORKDIR /app

COPY --from=builder /app/.output /app/.output

EXPOSE 3000
CMD ["node", "/app/.output/server/index.mjs"]
```

**docker-compose.yml — modification requise (D-14) :**
```yaml
# Ligne à changer :
- 'traefik.http.services.portfolio.loadbalancer.server.port=3000'  # était 80
```

### Pattern 7 : nuxt-gtag production-only (INFRA-04 / D-15)

```typescript
// nuxt.config.ts — Source : nuxt.com/modules/gtag
gtag: {
  id: '',                                               // Surchargé par NUXT_PUBLIC_GTAG_ID au runtime
  enabled: process.env.NODE_ENV === 'production',       // Off en dev
},
runtimeConfig: {
  public: {
    gtag: { id: '' },  // NUXT_PUBLIC_GTAG_ID — pas de rebuild nécessaire
  },
},
```

### Pattern 8 : NuxtImg pour les images projets

```vue
<!-- Source : image.nuxt.com/usage/nuxt-img -->
<NuxtImg
  :src="project.image"
  :alt="project.title"
  loading="lazy"
  format="webp"
  width="800"
  height="450"
/>
```

### Anti-patterns à éviter

- **Ne pas utiliser `localStorage`** pour persister état modal/gallery — toujours refs Vue
- **Ne pas appeler `emblaApi.scrollTo()` directement après `isOpen = true`** — passer par `nextTick()` pour attendre le rendu du modal
- **Ne pas exposer les credentials SMTP via `runtimeConfig.public`** — les mettre dans la section privée de runtimeConfig uniquement
- **Ne pas hardcoder le port 80 dans docker-compose** — le changer à 3000 (D-14)
- **Ne pas copier `dist/` dans le Dockerfile** — le build Nuxt SSR produit `.output/`, pas `dist/`

---

## Don't Hand-Roll

| Problème | Ne pas construire | Utiliser | Pourquoi |
|---------|------------------|---------|----------|
| Modal + carousel | Custom overlay + swiper CSS | UModal + UCarousel | Nuxt UI gère a11y, focus trap, transition, dismiss on escape |
| Validation formulaire | Regex maison ou conditions if/else | Zod + UForm | UForm consomme nativement le schéma Zod, affiche les erreurs sur les champs |
| Notifications toast | div flottant custom | useToast() + UApp | Nuxt UI gère la pile de toasts, position, durée, icônes |
| FAQ accordion | div + show/hide custom | UAccordion | Gère a11y ARIA, animation, type single/multiple |
| SMTP transport | fetch directe vers OVH | nodemailer | nodemailer gère TLS, retry, pooling — critique pour OVH port 465 |

---

## Common Pitfalls

### Pitfall 1 : UToast sans `<UApp>`

**Ce qui se passe :** `useToast().add()` est appelé mais aucune notification n'apparaît.
**Pourquoi :** Le rendu des toasts requiert `<UApp>` comme wrapper — il est normalement dans `app/app.vue`.
**Comment éviter :** Vérifier que `app/app.vue` contient `<UApp><NuxtLayout>...</NuxtLayout></UApp>`.
**Signe d'alerte :** Aucune erreur console, mais les toasts silencieux.

### Pitfall 2 : emblaApi null au moment du scrollTo

**Ce qui se passe :** `carouselRef.value?.emblaApi?.scrollTo(index)` ne fait rien lors de l'ouverture de la galerie.
**Pourquoi :** Le modal vient d'être monté, Embla n'est pas encore initialisé au même tick.
**Comment éviter :** Entourer l'appel dans `nextTick(() => { ... })` après avoir mis `isOpen.value = true`.
**Signe d'alerte :** La galerie s'ouvre toujours à l'index 0 même si on clique sur l'image 3.

### Pitfall 3 : Dockerfile copie dist/ au lieu de .output/

**Ce qui se passe :** `docker build` réussit mais `docker run` échoue avec "Cannot find module".
**Pourquoi :** L'ancien Dockerfile (SPA nginx) copie `dist/`. Nuxt SSR produit `.output/server/index.mjs`.
**Comment éviter :** Le nouveau Dockerfile doit `COPY --from=builder /app/.output /app/.output` et lancer `node /app/.output/server/index.mjs`.
**Signe d'alerte :** `docker run` montre "Error: Cannot find module '/app/server/index.mjs'".

### Pitfall 4 : runtimeConfig SMTP exposé côté client

**Ce qui se passe :** Les credentials SMTP apparaissent dans le HTML rendu ou les DevTools network.
**Pourquoi :** Si mis dans `runtimeConfig.public`, ils sont sérialisés dans le payload Nuxt visible côté client.
**Comment éviter :** `smtpHost/User/Pass` doivent être dans la section privée de `runtimeConfig` (pas sous `public`).
**Signe d'alerte :** `window.__NUXT__` contient les credentials SMTP.

### Pitfall 5 : server/api route non trouvée en développement

**Ce qui se passe :** `$fetch('/api/contact', ...)` retourne 404.
**Pourquoi :** Nuxt doit détecter automatiquement les fichiers dans `server/api/` — s'assurer que le répertoire `server/` est à la racine du projet, pas dans `app/`.
**Comment éviter :** Créer `server/api/contact.post.ts` à la racine (même niveau que `app/`, `nuxt.config.ts`).
**Signe d'alerte :** 404 sur `POST /api/contact` alors que le fichier existe.

### Pitfall 6 : error.vue dans le mauvais répertoire

**Ce qui se passe :** Les erreurs 404 affichent la page Nuxt par défaut, pas la page custom.
**Pourquoi :** `error.vue` doit être dans `app/` (pas dans `app/pages/`).
**Comment éviter :** Créer `app/error.vue` (non dans pages/).
**Signe d'alerte :** La page 404 montre le design Nuxt par défaut gris.

---

## Code Examples

### Route dynamique project/[id].vue

```vue
<!-- app/pages/project/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const { findById } = useProjects()
const project = findById(route.params.id as string)

// 404 si projet non trouvé
if (!project.value) {
  throw createError({ status: 404, statusText: 'Project not found' })
}

useSeoMeta({
  title: () => project.value?.title ?? '',
  description: () => project.value?.description ?? '',
})
</script>
```

### Filtre projets (PAGE-02)

```vue
<script setup lang="ts">
const { projects, filterByCategory, search } = useProjects()
const searchQuery = ref('')
const activeCategory = ref<string | null>(null)

const filtered = computed(() => {
  let result = projects.value
  if (activeCategory.value) {
    result = result.filter((p) => p.category === activeCategory.value)
  }
  if (searchQuery.value) {
    const q = searchQuery.value.toLowerCase()
    result = result.filter(
      (p) =>
        p.title.toLowerCase().includes(q) ||
        p.description.toLowerCase().includes(q) ||
        p.technologies.some((t) => t.toLowerCase().includes(q))
    )
  }
  return result
})

const categories = computed(() => [...new Set(projects.value.map((p) => p.category))])
</script>
```

---

## Environment Availability

| Dependency | Required By | Available | Version | Fallback |
|------------|------------|-----------|---------|----------|
| Node.js | Build + runtime Docker | ✓ | v25.2.1 (local) / v22 dans Docker | — |
| Docker | INFRA-01 | [ASSUMED] | — | Tester manuellement |
| nodemailer | COMP-02 SMTP | ✗ (à installer) | 8.0.5 sur npm | — |
| zod | COMP-02 validation | ✗ (à installer) | 4.3.6 sur npm | — |
| OVH SMTP (ssl0.ovh.net:465) | COMP-02 envoi email | [ASSUMED] | — | Tester avec `NUXT_SMTP_HOST` réel |

**Dépendances manquantes sans fallback :**
- OVH SMTP credentials — doivent être fournis par l'utilisateur dans `.env` avant test du formulaire

**Dépendances manquantes avec fallback :**
- Aucune

---

## Validation Architecture

Tests automatisés exclus du scope (REQUIREMENTS.md Out of Scope : "Tests automatisés — Migration d'abord"). Validation manuelle uniquement.

**Critères de succès Phase 3 (vérification manuelle) :**

| Critère | Commande de vérification |
|---------|-------------------------|
| 8 routes SSR | `curl http://localhost:3000/` — vérifie HTML complet |
| Galerie clavier | Ouvrir modal → flèches → Escape dans navigateur |
| Formulaire envoi | Soumettre formulaire → vérifier réception email + toast succès |
| Docker build | `docker build -t portfolio .` |
| Docker run | `docker run -p 3000:3000 portfolio` → `curl localhost:3000` |
| GA4 DebugView | Naviguer en production → vérifier events dans GA4 DebugView |

---

## Security Domain

### Applicable ASVS Categories

| ASVS Category | Applies | Standard Control |
|---------------|---------|-----------------|
| V2 Authentication | Non | Pas d'auth sur le portfolio |
| V3 Session Management | Non | Pas de session |
| V4 Access Control | Non | Toutes les pages sont publiques |
| V5 Input Validation | Oui | Zod côté client + validation côté serveur recommandée |
| V6 Cryptography | Non | SMTP TLS géré par nodemailer |

### Threat Patterns pour le stack formulaire

| Pattern | STRIDE | Mitigation standard |
|---------|--------|---------------------|
| Spam SMTP via API ouverte | Spoofing | Rate limiting Nitro ou validation honeypot |
| XSS dans corps email | Tampering | Échapper le HTML dans `html:` nodemailer (pas de `innerHTML` direct) |
| Credentials SMTP leakés | Information disclosure | Section privée runtimeConfig uniquement (jamais `public`) |

**Note importante :** `server/api/contact.post.ts` est un endpoint public sans auth. Sans rate limiting, il peut être utilisé pour spammer l'adresse OVH. Pour Phase 3, ajouter une simple validation côté serveur (longueur champs) à défaut d'un vrai rate limiter.

**Validation côté serveur minimale à inclure dans contact.post.ts :**
```typescript
const { name, email, message } = await readBody(event)
if (!name || !email || !message || message.length > 5000) {
  throw createError({ statusCode: 400, message: 'Invalid input' })
}
```

---

## State of the Art

| Ancienne approche | Approche actuelle | Quand changé | Impact |
|-------------------|------------------|--------------|--------|
| nginx + dist/ (SPA) | node + .output/ (SSR) | Ce projet | Le Dockerfile entier à réécrire |
| Custom GalleryModal.vue | UModal + UCarousel | Phase 3 | Moins de code, a11y gratuit |
| useSeo() composable custom | useSeoMeta() Nuxt builtin | Phase 2 | Déjà migré |
| localStorage thème | Cookie color-mode | Phase 2 | Déjà migré |

---

## Assumptions Log

| # | Claim | Section | Risk si faux |
|---|-------|---------|-------------|
| A1 | `@types/nodemailer` est le package de types correct pour nodemailer 8.x | Standard Stack | Types manquants — TypeScript strict échouera ; vérifier avec `npm view @types/nodemailer` |
| A2 | OVH SMTP fonctionne sur ssl0.ovh.net:465 avec auth PLAIN | Pattern 3 | L'envoi échoue — tester avec les vraies credentials avant de fermer la phase |
| A3 | Docker est disponible sur la machine de déploiement de Killian'| Environment Availability | INFRA-01 bloqué — confirmer avec `docker --version` |
| A4 | `UCarousel` expose `emblaApi` directement via `useTemplateRef` dans Nuxt UI v3 | Pattern 1 | Navigation thumbnail cassée — fallback : gérer index manuellement avec `watch` |

---

## Open Questions

1. **Port OVH SMTP**
   - Ce qu'on sait : OVH supporte 465 (SSL) et 587 (STARTTLS)
   - Ce qui est flou : lequel utiliser avec les credentials Killian
   - Recommandation : tester les deux ; 465 avec `secure: true` en premier

2. **Page Formation (D-19 supprimée)**
   - Ce qu'on sait : la page est supprimée du contenu, mais un stub `fiverr.vue` + route `/fiverr` existent
   - Ce qui est flou : faut-il une redirection `/formation` → `/` ou laisser une 404
   - Recommandation : ajouter un middleware ou `definePageMeta({ redirect: '/' })` dans formation.vue si le stub existe encore

3. **UApp dans app.vue Phase 2**
   - Ce qu'on sait : UToast requiert `<UApp>` wrapper
   - Ce qui est flou : est-ce que `app/app.vue` de Phase 2 l'a déjà inclus
   - Recommandation : vérifier `app/app.vue` avant d'implémenter le formulaire toast

---

## Sources

### Primary (HIGH confidence)
- [ui.nuxt.com/components/modal](https://ui.nuxt.com/components/modal) — Props UModal, v-model:open, slots
- [ui.nuxt.com/components/carousel](https://ui.nuxt.com/components/carousel) — Props UCarousel, emblaApi.scrollTo pattern
- [ui.nuxt.com/components/form](https://ui.nuxt.com/components/form) — UForm + Zod schema, FormSubmitEvent
- [ui.nuxt.com/components/accordion](https://ui.nuxt.com/components/accordion) — UAccordion items array + slots
- [ui.nuxt.com/components/toast](https://ui.nuxt.com/components/toast) — useToast() API + UApp
- [nuxt.com/docs/guide/directory-structure/error](https://nuxt.com/docs/guide/directory-structure/error) — error.vue pattern + clearError
- [nuxt.com/docs/guide/directory-structure/server](https://nuxt.com/docs/guide/directory-structure/server) — defineEventHandler, readBody, useRuntimeConfig(event)
- [image.nuxt.com/usage/nuxt-img](https://image.nuxt.com/usage/nuxt-img) — NuxtImg props loading, format, width/height
- package.json du projet — versions installées vérifiées

### Secondary (MEDIUM confidence)
- [nuxt.com/modules/gtag](https://nuxt.com/modules/gtag) — nuxt-gtag v4 runtimeConfig + enabled production
- [marcusn.dev/articles/2025-11/ultraslim-multistage-image-for-ssr-nuxt-4-typescript-docker](https://marcusn.dev/articles/2025-11/ultraslim-multistage-image-for-ssr-nuxt-4-typescript-docker) — Dockerfile SSR Nuxt 4 (pattern node-server)
- [github.com/thaikolja/nuxt-nodemailer-example](https://github.com/thaikolja/nuxt-nodemailer-example) — Nodemailer dans Nuxt 4 server route

### Tertiary (LOW confidence)
- A1 à A4 dans Assumptions Log — non vérifiés en session

---

## Metadata

**Confidence breakdown:**
- Standard Stack : HIGH — packages vérifiés npm registry + package.json existant
- Architecture patterns : HIGH — APIs vérifiées docs officielles Nuxt UI v3 + Nuxt 4
- Nodemailer SMTP : MEDIUM — pattern confirmé par GitHub example, credentials OVH non testés
- Dockerfile SSR : MEDIUM — pattern node-server confirmé par article 2025, non testé localement
- Pitfalls : HIGH — basés sur les APIs vérifiées + erreurs connues

**Research date:** 2026-04-08
**Valid until:** 2026-05-08 (stack stable, Nuxt UI v3 en GA)