portfolio/.planning/phases/03-pages-ship/03-03-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
03-pages-ship	03	execute	2	03-01	app/pages/about.vue app/pages/contact.vue app/pages/fiverr.vue app/error.vue	true	PAGE-04 PAGE-05 PAGE-06 PAGE-08	truths artifacts key_links About page affiche bio + tech stack badges par categorie Contact page affiche formulaire 3 champs + infos contact + reseaux sociaux Fiverr page affiche hero + service cards + FAQ accordion + CTA 404 page affiche code erreur + message + bouton retour accueil path provides app/pages/about.vue Page about avec bio et tech stack path provides app/pages/contact.vue Page contact avec formulaire path provides app/pages/fiverr.vue Page fiverr avec services path provides app/error.vue Page 404 custom from to via pattern app/pages/contact.vue app/components/ContactForm.vue auto-import ContactForm from to via pattern app/pages/fiverr.vue app/components/sections/FAQSection.vue auto-import FAQSection

Construire les 4 pages restantes : About, Contact, Fiverr, et error.vue (404). Ces pages consomment les composants partages du Plan 01.

Purpose: Complete le portfolio avec toutes les pages necessaires — About pour la credibilite, Contact pour la conversion, Fiverr pour les services, 404 pour l'UX. Output: 4 pages fonctionnelles.

<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/phases/03-pages-ship/03-CONTEXT.md @.planning/phases/03-pages-ship/03-RESEARCH.md @.planning/phases/03-pages-ship/03-01-SUMMARY.md

@src/views/AboutPage.vue @src/views/ContactPage.vue @src/views/FiverrPage.vue @app/data/techstack.ts @app/data/faq.ts @src/config/site.ts

Composants disponibles (auto-importes, crees en Plan 01): - ContactForm — pas de props (formulaire autonome avec Zod + useToast) - FAQSection — props: faqs (FAQ[]), title, subtitle - TechBadge — props: tech (Technology | string), showLevel?, showImage?

From app/data/site.ts (cree en Plan 01):

export const siteConfig: SiteConfig
// siteConfig.contact: { email, phone, location }
// siteConfig.social: SocialLink[]
// siteConfig.fiverr: { profileUrl, services: FiverrService[] }

From app/data/techstack.ts:

export const techStack: TechStack
// .programming, .front, .database, .devtools, .operating_systems, .socials

From app/data/faq.ts:

export const homeFAQs: FAQ[]

Task 1: Pages About + Contact app/pages/about.vue, app/pages/contact.vue **about.vue** (per D-16, D-17, PAGE-04) : Migrer depuis src/views/AboutPage.vue.

1. Section hero : titre t('about.title'), sous-titre, intro content (2 paragraphes bio)
2. Section Skills : 4 categories tech (programming, front, database, devtools) en grille 2x2 avec UCard. Chaque card : icone, titre categorie, grille TechBadge avec showLevel. Section OS separee en bas.
3. Section Approach : 4 cards (performance, architecture, quality, collaboration) avec UCard, icones lucide.
4. Section CTA : titre + 2 boutons (Contact, Projets) via UButton.
5. useSeoMeta() avec titre/description about.

contact.vue (per D-08, D-10, D-16, PAGE-05) : Migrer depuis src/views/ContactPage.vue.

1. Section hero : titre t('contact.title'), sous-titre, stats (24-48h response, 100% satisfaction, Remote)
2. Layout 2 colonnes :
   • Colonne gauche : <ContactForm /> (auto-importe du Plan 01, gere tout seul — Zod, $fetch, UToast)
   • Colonne droite : Infos contact (UCard avec email cliquable, telephone, localisation depuis siteConfig.contact) + Reseaux sociaux (UCard avec liens siteConfig.social — icones pour Gitea/LinkedIn/Discord)
3. Section FAQ en bas : 3 cards info (temps reponse, types projets, collaboration) avec UCard.
4. useSeoMeta() specifique contact.

Importer siteConfig depuis ~/data/site. cd C:/Users/minit/Desktop/portfolio/portfolio && grep -q "TechBadge" app/pages/about.vue && grep -q "techStack" app/pages/about.vue && grep -q "ContactForm" app/pages/contact.vue && grep -q "siteConfig" app/pages/contact.vue && echo "PASS" About page avec bio + 5 categories tech stack badges, Contact page avec ContactForm + infos contact + reseaux sociaux

Task 2: Page Fiverr avec hero + services + FAQ accordion + CTA app/pages/fiverr.vue Migrer depuis src/views/FiverrPage.vue (per D-18, PAGE-06).

1. Script setup : Importer siteConfig depuis ~/data/site. Computed services = siteConfig.fiverr.services. Computed heroStats avec nombre services dispo + rating "5 etoiles".

2. Section Hero : titre t('fiverr.title'), sous-titre, stats (services count, rating), bouton CTA UButton vers siteConfig.fiverr.profileUrl (external link, target blank).

3. Section Services : grille de service cards. Pour chaque service dans siteConfig.fiverr.services, utiliser UCard avec :

   • Image service via NuxtImg :src="service.image"
   • Badge prix : t('fiverr.pricing.startingAt') + ' ' + service.price
   • Badge statut : "Disponible" (vert) si url !== '#', "Bientot" (jaune) sinon
   • Titre et description via t('fiverr.serviceData.${service.id}.title/description')
   • Features liste via i18n (recuperer du fichier de traduction comme dans src/views/FiverrPage.vue)
   • Bouton commander / en savoir plus

4. Section FAQ (per D-18) : Utiliser <FAQSection> du Plan 01 avec les FAQs fiverr. Creer un array computed de FAQ fiverr depuis les cles i18n fiverr.faq.* si elles existent, sinon reutiliser homeFAQs.

5. Section CTA finale : titre t('fiverr.cta.title'), sous-titre, bouton vers profil Fiverr.

6. useSeoMeta() specifique fiverr. cd C:/Users/minit/Desktop/portfolio/portfolio && grep -q "siteConfig" app/pages/fiverr.vue && grep -q "fiverr" app/pages/fiverr.vue && grep -q "FAQSection|UAccordion" app/pages/fiverr.vue && echo "PASS" Page Fiverr avec hero stats, service cards, FAQ accordion UAccordion, CTA vers profil Fiverr

Task 3: Page 404 (error.vue) app/error.vue Creer `app/error.vue` (per D-20, PAGE-08). IMPORTANT : dans `app/`, PAS dans `app/pages/` (per RESEARCH.md Pitfall 6).

Implementation exacte du RESEARCH.md Pattern 5 :

<script setup lang="ts">
import type { NuxtError } from '#app'

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

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

<template>
  <div class="min-h-screen flex flex-col items-center justify-center gap-6 px-4">
    <h1 class="text-8xl font-bold text-primary">{{ error.statusCode }}</h1>
    <p class="text-xl text-gray-500 dark:text-gray-400 text-center max-w-md">
      {{ error.statusCode === 404 ? t('error.notFound') : t('error.generic') }}
    </p>
    <UButton size="lg" @click="handleError">
      {{ t('error.backHome') }}
    </UButton>
  </div>
</template>

Ajouter les cles i18n manquantes si necessaire : error.notFound ("Page introuvable"), error.generic ("Une erreur est survenue"), error.backHome ("Retour a l'accueil") dans les fichiers de traduction FR/EN. Si les cles n'existent pas encore, les ajouter dans i18n/locales/fr.json et i18n/locales/en.json. cd C:/Users/minit/Desktop/portfolio/portfolio && test -f app/error.vue && grep -q "clearError" app/error.vue && grep -q "statusCode" app/error.vue && echo "PASS" error.vue dans app/ avec affichage code erreur, message i18n, bouton retour accueil via clearError

<threat_model>

Trust Boundaries

Boundary	Description
Aucune nouvelle	Les pages About/Fiverr/404 ne traitent pas de donnees utilisateur. Contact est gere par ContactForm du Plan 01.

STRIDE Threat Register

Threat ID	Category	Component	Disposition	Mitigation Plan
T-03-06	Information Disclosure	contact.vue	accept	email/telephone affiches publiquement — voulu par le proprietaire du site
</threat_model>

- `npx nuxi dev` puis naviguer vers `/about` — bio + 5 categories tech visible - `/contact` — formulaire 3 champs fonctionnel + infos contact visibles - `/fiverr` — 4 services, FAQ accordion, boutons CTA - `/une-page-inexistante` — page 404 custom avec bouton retour - `curl http://localhost:3000/about` — HTML complet avec meta tags

<success_criteria>

• About affiche bio + tech stack par categorie avec TechBadge (per D-17)
• Contact affiche ContactForm (3 champs) + infos contact + reseaux (per D-08)
• Fiverr affiche hero + services + FAQ accordion + CTA (per D-18)
• error.vue dans app/ (pas pages/), affiche 404, bouton clearError (per D-20)
• Toutes les pages ont useSeoMeta() </success_criteria>

After completion, create `.planning/phases/03-pages-ship/03-03-SUMMARY.md`