Aller au contenu principal

Ajout de Coachi au portfolio

Date : 2026-05-22 Scope : Ajouter le projet coachi.fr au portfolio Good Vibe Coding.

Contexte​

Le portfolio du site est centralisé dans src/components/Portfolio/index.js via un tableau projects. Cette source unique alimente trois surfaces :

  • Home (PortfolioSection — cartes compactes)
  • /portfolio (PortfolioCards — version simple)
  • /portfolio-cases (PortfolioCaseStudies — version détaillée case-study)

Ajouter un projet = ajouter un objet au tableau + déposer une image dans static/portfolio/. Aucune modification de composant nécessaire.

Nouvelle entrée​

Position dans le tableau : après familles (en dernière position).

{
  id: 'coachi',
  name: 'Coachi',
  tagline: 'Coach IA personnel',
  category: 'App Web IA',
  year: '2026',
  description: 'Compagnon IA qui transforme tes intentions en 2-3 actions quotidiennes. Récompenses personnalisées et journal narratif multimodal.',
  fullDescription: 'Coachi n\'est pas un tracker de plus. L\'app décompose les objectifs en micro-actions calibrées, s\'adapte au rythme de l\'utilisateur et garde mémoire de la progression via un journal narratif (texte, photo, audio).',
  challenge: 'Sortir de la rigidité des apps de suivi classiques : proposer un coaching qui dose, qui s\'adapte aux émotions et au rythme réel — sans surcharge cognitive.',
  solution: 'App Next.js avec moteur IA pour la décomposition d\'objectifs, système de récompenses personnalisables, journal multimodal et boîte à outils cognitifs (décision, recadrage, bilan).',
  results: [
    'MVP livré en quelques semaines',
    'Onboarding 100% guidé par IA',
    'PWA installable, journal multimodal'
  ],
  tech: ['Next.js', 'Supabase', 'OpenAI/Gemini/Claude', 'Tailwind', 'Vercel'],
  color: '#06b6d4',
  url: 'https://coachi.fr',
  image: '/portfolio/coachi.webp'
}

Image​

Screenshot du site https://coachi.fr via Puppeteer (déjà installé en v24.33.0 dans node_modules).

  • Viewport : 1440×900 (cohérent avec les autres mockups)
  • Format de sortie : WebP (+ PNG fallback comme les autres entrées : coachi.png + coachi.webp)
  • Conversion : via cwebp ou sharp selon ce qui est dispo localement
  • Emplacement : static/portfolio/coachi.webp et static/portfolio/coachi.png
  • Script jetable : scripts/screenshot-coachi.js (one-shot, peut être conservé ou supprimé après usage)

Out of scope​

  • Pas de refactor du composant Portfolio
  • Pas de modification des autres entrées
  • Pas d'ajout de tests (le repo n'en a pas pour les pages marketing)
  • Pas de mise à jour de SEO/sitemap (Docusaurus le gère via le routing automatique)

Vérification​

  1. npm start — lancer le dev server
  2. Vérifier visuellement :
    • / (section portfolio sur la home)
    • /portfolio
    • /portfolio-cases
  3. Vérifier que l'image se charge (DevTools Network)
  4. Vérifier le link https://coachi.fr (ouverture nouvel onglet)

Risques / points d'attention​

  • Si cwebp n'est pas installé localement, fallback sur sharp (dépendance npm déjà présente via Docusaurus).
  • Le badge tech OpenAI/Gemini/Claude apparaîtra comme une seule pastille (choix assumé par l'utilisateur).
  • La couleur #06b6d4 complète la palette existante (emerald, violet, amber) sans collision.