portfolio/.planning/phases/01-foundation/01-01-PLAN.md

---
phase: 01-foundation
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - nuxt.config.ts
  - package.json
  - pnpm-lock.yaml
  - tsconfig.json
  - app/app.vue
  - shared/types/index.ts
  - .gitignore
autonomous: true
requirements:
  - SSR-01
  - SSR-02
  - SSR-03
  - INFRA-02
  - INFRA-03

must_haves:
  truths:
    - "nuxt dev demarre sans erreur et sert localhost:3000"
    - "La structure app/ est utilisee (Nuxt 4 compatibilityVersion 4)"
    - "Tous les modules sont installes dans nuxt.config.ts"
    - "TypeScript strict mode est actif"
    - "ESLint via @nuxt/eslint fonctionne sans erreur"
  artifacts:
    - path: "nuxt.config.ts"
      provides: "Configuration principale Nuxt 4 avec tous les modules"
      contains: "compatibilityVersion: 4"
    - path: "app/app.vue"
      provides: "Composant racine Nuxt"
    - path: "shared/types/index.ts"
      provides: "Interfaces TypeScript resserrees"
      exports: ["Project", "ProjectButton", "Technology", "TechStack", "Testimonial", "FAQ"]
    - path: "package.json"
      provides: "Dependances Nuxt 4 + tous modules"
  key_links:
    - from: "nuxt.config.ts"
      to: "app/app.vue"
      via: "Nuxt srcDir convention"
      pattern: "compatibilityVersion.*4"
---

<objective>
Initialiser le projet Nuxt 4 avec pnpm, installer tous les modules, configurer TypeScript strict et ESLint, et definir les interfaces TypeScript resserrees.

Purpose: Creer le squelette technique Nuxt 4 sur lequel toute la migration repose.
Output: Projet Nuxt 4 fonctionnel avec `pnpm dev` qui demarre, tous modules configures, types definis.
</objective>

<execution_context>
@C:/Users/minit/.claude/get-shit-done/workflows/execute-plan.md
@C:/Users/minit/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/phases/01-foundation/01-CONTEXT.md
@.planning/phases/01-foundation/01-RESEARCH.md

<interfaces>
<!-- Types existants a migrer et resserrer depuis src/types/index.ts -->
From src/types/index.ts:
```typescript
export interface Project {
  id: string
  title: string
  image: string
  description: string
  longDescription?: string
  technologies?: string[]
  category?: string
  featured?: boolean
  buttons?: ProjectButton[]
  date?: string
  demoUrl?: string
  githubUrl?: string
  features?: string[]
  gallery?: string[]
  status?: string
}

export interface ProjectButton {
  title: string
  link: string
}

export interface Technology {
  name: string
  level: 'Beginner' | 'Intermediate' | 'Advanced'
  image: string
}

export interface TechStack {
  programming: Technology[]
  front: Technology[]
  database: Technology[]
  devtools: Technology[]
  operating_systems: Technology[]
  socials: Technology[]
}
```
</interfaces>
</context>

<tasks>

<task type="auto">
  <name>Task 1: Initialiser le projet Nuxt 4 avec pnpm et tous les modules</name>
  <files>nuxt.config.ts, package.json, pnpm-lock.yaml, app/app.vue, .gitignore, tsconfig.json</files>
  <read_first>
    - src/types/index.ts (types existants pour reference)
    - package.json (dependances actuelles Vue 3)
    - .gitignore (regles existantes)
  </read_first>
  <action>
1. Installer pnpm globalement si absent: `npm install -g pnpm`
2. Initialiser le projet Nuxt 4: `pnpm dlx nuxi@latest init . --force` (force car le dossier n'est pas vide). Si nuxi init ne supporte pas --force dans un repo existant, creer dans un sous-dossier temp et copier les fichiers generes.
3. Installer tous les modules (per D-08, D-09):
   ```bash
   pnpm add @nuxt/ui @nuxtjs/i18n @nuxt/eslint @nuxtjs/sitemap nuxt-gtag @nuxt/image
   ```
   NOTE: Ne PAS installer @nuxtjs/color-mode — deja inclus dans @nuxt/ui.

4. Configurer nuxt.config.ts avec ce contenu exact:
   ```typescript
   export default defineNuxtConfig({
     future: {
       compatibilityVersion: 4
     },
     ssr: true,
     modules: [
       '@nuxt/ui',
       '@nuxtjs/i18n',
       '@nuxt/eslint',
       '@nuxtjs/sitemap',
       'nuxt-gtag',
       '@nuxt/image'
     ],
     typescript: {
       strict: true
     },
     i18n: {
       locales: ['fr', 'en'],
       defaultLocale: 'fr'
     },
     gtag: {
       id: 'G-CDVVNFY6MV',
       enabled: false
     }
   })
   ```

5. Creer `app/app.vue` minimal:
   ```vue
   <template>
     <div>
       <NuxtRouteAnnouncer />
       <NuxtPage />
     </div>
   </template>
   ```

6. Creer `app/pages/index.vue` minimal pour que le serveur demarre sans erreur:
   ```vue
   <template>
     <div>
       <h1>Portfolio Killian' DAL-CIN</h1>
       <p>Nuxt 4 Foundation</p>
     </div>
   </template>
   ```

7. Mettre a jour .gitignore pour inclure: `node_modules`, `.nuxt`, `.output`, `dist`, `.env`

8. Verifier que `pnpm dev` demarre sans erreur sur localhost:3000
  </action>
  <verify>
    <automated>cd C:/Users/minit/Desktop/portfolio/portfolio && pnpm dev --port 3000 &amp; sleep 15 && curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 | grep -q "200" && echo "PASS" || echo "FAIL"; kill %1 2>/dev/null</automated>
  </verify>
  <acceptance_criteria>
    - nuxt.config.ts contains `compatibilityVersion: 4`
    - nuxt.config.ts contains `'@nuxt/ui'` in modules array
    - nuxt.config.ts contains `'@nuxtjs/i18n'` in modules array
    - nuxt.config.ts contains `'@nuxt/eslint'` in modules array
    - nuxt.config.ts contains `'@nuxtjs/sitemap'` in modules array
    - nuxt.config.ts contains `'nuxt-gtag'` in modules array
    - nuxt.config.ts contains `'@nuxt/image'` in modules array
    - nuxt.config.ts contains `strict: true`
    - package.json contains `@nuxt/ui` in dependencies
    - package.json contains `@nuxtjs/i18n` in dependencies
    - app/app.vue exists with NuxtPage component
    - pnpm dev starts and localhost:3000 returns HTTP 200
  </acceptance_criteria>
  <done>Projet Nuxt 4 demarre sur localhost:3000 avec tous les modules installes, TypeScript strict actif</done>
</task>

<task type="auto">
  <name>Task 2: Definir les interfaces TypeScript resserrees et configurer ESLint</name>
  <files>shared/types/index.ts</files>
  <read_first>
    - src/types/index.ts (types existants a resserrer per D-03)
    - src/data/testimonials.ts (interface Testimonial existante)
    - src/data/faq.ts (interface FAQ existante)
    - nuxt.config.ts (verifier @nuxt/eslint present)
  </read_first>
  <action>
1. Creer `shared/types/index.ts` avec les interfaces resserrees (per D-03 — rendre obligatoires technologies, category, date):

```typescript
export interface ProjectButton {
  title: string
  link: string
}

export interface Project {
  id: string
  image: string                  // URL /images/xxx.webp
  technologies: string[]         // OBLIGATOIRE (etait optionnel)
  category: string               // OBLIGATOIRE (etait optionnel)
  date: string                   // OBLIGATOIRE (etait optionnel)
  featured?: boolean
  buttons?: ProjectButton[]
  gallery?: string[]
  demoUrl?: string
  githubUrl?: string
  features?: string[]
  // Pas de title/description/longDescription/status — i18n via cles
}

export interface Technology {
  name: string
  level: 'Beginner' | 'Intermediate' | 'Advanced'
  image: string
}

export interface TechStack {
  programming: Technology[]
  front: Technology[]
  database: Technology[]
  devtools: Technology[]
  operating_systems: Technology[]
  socials: Technology[]
}

export interface Testimonial {
  name: string
  role: string
  company: string
  avatar: string
  rating: number
  content: string
  date: string
  platform: string
  featured?: boolean
  project_type: string
  results?: string[]
}

export interface TestimonialsStats {
  totalReviews: number
  averageRating: number
  projectsCompleted: number
}

export interface FAQ {
  questionKey: string
  answerKey: string
  featuresKey: string
}
```

Note: FAQ utilise des cles i18n (per D-02) au lieu de texte direct. L'ancienne interface avait `question: string` (texte), la nouvelle a `questionKey: string` (cle de traduction).

2. Verifier que `pnpm nuxi typecheck` passe (les types sont auto-importes depuis shared/ en Nuxt 4).

3. Verifier que `pnpm eslint .` passe sans erreur (ESLint configure via @nuxt/eslint dans les modules).
  </action>
  <verify>
    <automated>cd C:/Users/minit/Desktop/portfolio/portfolio && npx nuxi typecheck 2>&1 | tail -5</automated>
  </verify>
  <acceptance_criteria>
    - shared/types/index.ts contains `technologies: string[]` (not optional)
    - shared/types/index.ts contains `category: string` (not optional)
    - shared/types/index.ts contains `date: string` (not optional, in Project interface)
    - shared/types/index.ts contains `export interface Project`
    - shared/types/index.ts contains `export interface Technology`
    - shared/types/index.ts contains `export interface TechStack`
    - shared/types/index.ts contains `export interface Testimonial`
    - shared/types/index.ts contains `export interface FAQ`
    - shared/types/index.ts contains `questionKey: string`
    - npx nuxi typecheck exits with code 0
  </acceptance_criteria>
  <done>Toutes les interfaces TypeScript resserrees existent dans shared/types/index.ts, typecheck et eslint passent sans erreur</done>
</task>

</tasks>

<threat_model>
## Trust Boundaries

| Boundary | Description |
|----------|-------------|
| Aucune | Phase 1 est une initialisation technique sans surface d'attaque |

## STRIDE Threat Register

| Threat ID | Category | Component | Disposition | Mitigation Plan |
|-----------|----------|-----------|-------------|-----------------|
| T-01-01 | I (Information Disclosure) | nuxt.config.ts | mitigate | gtag.enabled: false — pas de tracking en dev |
| T-01-02 | T (Tampering) | pnpm dependencies | accept | lockfile pnpm-lock.yaml tracke dans git |
</threat_model>

<verification>
1. `pnpm dev` demarre sans erreur sur localhost:3000
2. `npx nuxi typecheck` exit 0
3. `pnpm eslint .` exit 0 (si le script existe, sinon `npx eslint .`)
4. nuxt.config.ts contient les 6 modules et compatibilityVersion 4
5. shared/types/index.ts exporte Project, Technology, TechStack, Testimonial, FAQ
</verification>

<success_criteria>
- Le projet Nuxt 4 demarre localement
- Tous les modules sont installes et declares
- TypeScript strict mode actif
- Interfaces resserrees per D-03
- ESLint fonctionne via @nuxt/eslint
</success_criteria>

<output>
After completion, create `.planning/phases/01-foundation/01-01-SUMMARY.md`
</output>