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

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
01-foundation	01	execute	1		nuxt.config.ts package.json pnpm-lock.yaml tsconfig.json app/app.vue shared/types/index.ts .gitignore	true	SSR-01 SSR-02 SSR-03 INFRA-02 INFRA-03	truths artifacts key_links 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 path provides contains nuxt.config.ts Configuration principale Nuxt 4 avec tous les modules compatibilityVersion: 4 path provides app/app.vue Composant racine Nuxt path provides exports shared/types/index.ts Interfaces TypeScript resserrees Project ProjectButton Technology TechStack Testimonial FAQ path provides package.json Dependances Nuxt 4 + tous modules from to via pattern nuxt.config.ts app/app.vue Nuxt srcDir convention compatibilityVersion.*4

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.

<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>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/01-foundation/01-CONTEXT.md @.planning/phases/01-foundation/01-RESEARCH.md 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:

   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:

   <template>
     <div>
       <NuxtRouteAnnouncer />
       <NuxtPage />
     </div>
   </template>
   

6. Creer app/pages/index.vue minimal pour que le serveur demarre sans erreur:

   <template>
     <div>
       <h1>Portfolio Killian Dalcin</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 cd C:/Users/minit/Desktop/portfolio/portfolio && pnpm dev --port 3000 & 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 <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> Projet Nuxt 4 demarre sur localhost:3000 avec tous les modules installes, TypeScript strict actif

Task 2: Definir les interfaces TypeScript resserrees et configurer ESLint shared/types/index.ts - 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) 1. Creer `shared/types/index.ts` avec les interfaces resserrees (per D-03 — rendre obligatoires technologies, category, date):

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). cd C:/Users/minit/Desktop/portfolio/portfolio && npx nuxi typecheck 2>&1 | tail -5 <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> Toutes les interfaces TypeScript resserrees existent dans shared/types/index.ts, typecheck et eslint passent sans erreur

<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>

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

<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>

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