Présentation & maquette de la solution web

1. Objectifs

• Valoriser mon profil de développeur fullstack en alternance.
• Centraliser mes réalisations (projets, compétences, expériences).
• Offrir un canal de contact fiable avec suivi par email.
• Maintenir un index de documentation projet accessible en ligne.

2. Public cible

Je m'adresse aux responsables techniques et recruteurs en recherche d'alternants capables d'intervenir sur le front-end et le back-end d'une application web, avec une forte sensibilité qualité / déploiement.

3. Architecture fonctionnelle

• Accueil structuré autour d'un hero, d'un aperçu du parcours et d'un call-to-action.
• Sections dédiées : À propos, Points forts, Projets, Galerie, Documentation, Contact.
• Formulaire de contact branché sur Resend ou sur `/api/contact` (hébergement Node).
• Documentation publique accessible via `/docs/*`.

4. Maquette & navigation

La maquette haute fidélité illustre un parcours vertical avec des ancres de navigation. Les blocs respectent une grille 12 colonnes, une palette à fort contraste (#0a0a0a / #ffdd00) et une typographie linéale.

5. Schéma technique

• Nuxt 3 (Vue 3) pour le rendu côté client et l'hébergement des API Nitro.
• Tailwind CSS 4 (plugin Vite) pour le design system.
• `useContactForm` pilote l'appel à Resend ou à l'endpoint configuré via `NUXT_PUBLIC_CONTACT_FORM_ENDPOINT`.
• Runtime Config gère les secrets SMTP/Resend (`MAIL_*`, `RESEND_*`) et les variables publiques (`NUXT_PUBLIC_*`).
• Déploiements cibles : Vercel (Resend + `/tmp/portfolio-data`) ou hébergement Node (Render, Railway, VPS).

6. Collaboration & outillage

• Gestion de versions via Git et GitHub (branches feature, pull requests).
• Suivi de tâches avec Trello (colonne Backlog → Doing → Review → Done).
• Communication asynchrone : Discord et email.
• Documentation produite dans le dossier docs/ du dépôt.

7. Conformité aux attendus

• Accroche & identité : Hero avec ma photo, ma phrase d’introduction, ma localisation, CV téléchargeable.
• Coordonnées & contact : email, téléphone, formulaire connecté à Resend ou à `/api/contact`.
• Travaux regroupés : projets détaillés + galerie modale.
• Suivi compétences RNCP : matrice dédiée reliant chaque bloc à mes preuves.
• Documentation : `/docs/*` centralise présentation, tests, guide, améliorations.

8. Approche hybride

• Face présentation : sections publiques Hero, À propos, Points forts, Projets, Galerie.
• Face apprentissage : documentation accessible listant mes analyses QA, mon suivi RNCP et mon monitoring.
• Mise à jour continue : backlog Trello + revues hebdo, docs synchronisées avec la prod.

9. Analyse RNCP