Benjamin Haddad

Développeur Senior IA, React, QA | Chanel, L'Oréal, YSL | Design System, Accessibilité, SEO, Web Vitals, Performance, Craftman | 9 ans d'expériences

Portfolio IA - 2026

À propos

L'amour du métier

Je suis passionné par l'informatique.

Le besoin d'apprendre

Pour comprendre, assimiler et évoluer.

Attiré par l'excellence

Rendre un travail dans les temps et paufiné est mon objectif.

La communication

Remonter les informations dans le but de se synchroniser.

Développeur front-end senior avec 9 ans d'expérience dans les secteurs luxe, e-commerce et banque. Parmi mes références : Chanel (120 M visites/an), ManoMano, Société Générale, Kering, L'Oréal.

Expert React / NextJS, avec une attention particulière à l'accessibilité, la performance, le SEO, les Web Vitals et le craftmanship.

Je développe mes propres outils, workflows et multi-agents IA, et j'utilise quotidiennement Claude Code Pro avec des artefacts, l'injection de contexte, skills, multi-agents, plan, commandes, review et prompting structuré, le tout connecté aux MCP Atlassian (Jira), GitHub (lecture de PR, review et retours), Figma.

À l'aise dans des environnements variés, j'ai travaillé en contexte international (anglais écrit et parlé), en tant que lead développeur, sur des projets from scratch comme sur des bases de code existantes.

J'interviens aussi sur la revue de code, la documentation, le pair programming et la formation — et je n'hésite pas à challenger les besoins techniques et fonctionnels.

Mon Offre

🤖

IA

›Accompagnement complet dans l'adoption de l'IA : audit, intégration, automatisation des workflows et formation des équipes.
›
Automatisation des workflows IA pour les développeurs en les connectant aux différents outils du quotidien :
- –GitHub : relecture automatique des Pull Requests et suggestion intelligente de commentaires.
- –Atlassian (Jira) : lecture et analyse des tickets pour une meilleure compréhension du contexte.
- –Figma : récupération et interprétation des maquettes pour aligner le code avec le design.
- –Navigateur (Chrome) : capacité de l'IA à naviguer, tester et valider visuellement les interfaces.
›Mise en place d'un contexte projet riche et adapté, conçu en lazyloading pour optimiser la consommation de tokens tout en maximisant la pertinence des réponses de l'IA.
›
Création de commandes, skills et agents réutilisables permettant d'automatiser :
- –La suggestion de commentaires lors des reviews de code.
- –La prise en compte et le traitement des commentaires sur les Pull Requests.
- –La génération automatisée de tests (unitaires, d'intégration et E2E).
- –L'amélioration continue des scores de qualité du code, accessibilité, Web Vitals, SEO et performance.

Optimisation de la consommation de tokens via une stratégie multicouche

GraphifyRTK QueryClaude MemoryCavemanlazyloading des fichiers de contexteskills et agents intelligents

›Automatisation de workflows complets de développement, de la prise de ticket à la mise en production.

⚡

Front

›
Garantie de la qualité du code grâce à :
- –Une architecture solide (Domain Design, Atomic Design, Monorepo avec séparation Tools / Design System / WebApp).
- –Outils et bonnes pratiques (ESLint, Husky, Fallow, React Doctor, etc.)
- –Revue de code systématique, pairing, documentation et sessions de formation.
›Mise en place des composants et du Design System avec Storybook + Chromatic.
›Garantir des bons scores d'accessibilité, Web Vitals, SEO et performance.
›Maintenance applicative et support continu des applications en production.
›Capacité QA intégrée : tests manuels et automatisés pour garantir la fiabilité et la conformité des fonctionnalités délivrées.
›Utilisation de Headless CMS pour une gestion flexible et découplée des contenus et données du projet.

📚

Formateur

›Cours en ligne sur Superprof : formation individuelle à l'IA — LLMs, écosystème Claude, agents, prompting et intégration concrète dans tes projets.

Mise en place documentationsformationsrevue de codepairing

Compétences

🌐

IA

IA — CLAUDE & ANTHROPIC

OUTILS

CodeManaged AgentsChromeSecurityDesignOfficeCowork

MCP / PLUGINS / SKILLS / HOOKS

GitHubAtlassianFigmaClaude MemRTKSuperpowersPlaywrightFrontend DesignClaude SEOContext?

UTILISATION

API ClaudeskillspluginscommandesMCP/plan/review

IA — GOOGLE

Nano BananaStitchCode Wiki

AGENTS DE CODE

Claude CodeCursorAntigravityCodex

IA POUR LA PROD

Langfuse (observabilité)LiteLLM (qu'une API)AI Gateway (proxy)

CRÉATION DE

Contexteskillsmulti-agentscommandesartefacts

BONNES PRATIQUES

Optimisation de la consommation de tokens (lazy load contexte/skills, graphify, RTK, caveman skill). Prompting structuré.

AUTRES

SuperWhisper (audio), TLDV (réunions), n8n (automatisation de workflows), GPT Image.

⚡

Front

TECHNOLOGIES

ReactReact NativeTypeScriptNextJSGatsbyJavaScriptStrapi

ÉTAT GLOBAL

Redux Saga - Thunk - ToolkitApollo (GraphQL)React Query

TESTS

JestReact TestingPlaywrightCypressFakerRedux Saga Test Plan

FORMULAIRES

React Hook FormFormikYupZod

LIBRAIRIES

StorybookLodashAxiosQSi18nextReact Router

STYLES

SASSCSSShadcnStyled ComponentsTailwindMUI

GRAPHIQUES

Framer MotionReact IconsAmChartsHighchartsAG Grid

OUTILS DE DÉVELOPPEMENT

PrettierESLintStyleLintCommitLintHuskyVitest

MÉTHODOLOGIES

ScrumAgileGit Flow

CLEAN CODE

Domain DesignAtomic DesignMonorepoESLintFallowReact DoctorSonarQube

ACCESSIBILITÉ

React ARIARadix UILighthouseaxe DevToolspa11yChromatic (axe-core)NVDAVoiceOverWebAIM

SEO

Google Search ConsoleLighthouseskills

WEB VITALS & PERFORMANCES

PageSpeed InsightsLighthouseChrome DevToolsweb-vitalswebpack-bundle-analyzer

Projets

Vous pouvez filtrer les projets qui vous intéressent par type, par domaine et par année de réalisation grâce aux boutons ci-dessous. Vous avez accès au projet, à une description plus complète, une galerie d'images et une vidéo en survolant les projets.

Le domaine des projets

L'année de réalisation :2015—2026

Le type des projets

Rechercher un projet

Nombre de projets trouvés : 64

Intégration CSS de Diablo II - Ressurected

Projet personel ⁃ 2021

HTMLCSSjQuery

Développeur React à la Société Générale

Expérience professionnelle ⁃ 2019-2020

ReactTypescriptRedux ObservableJestReact testingRedux mock storeLodashAxiosReact Hook FormYupRxJSImmerTypescript fsaQSTDDBDDRESTFULGit FlowScrumInVision

Portfolio

Projet personnel ⁃ 2017-2020

AngularjQueryJSBootstrapHTMLCSSGrunt

Petit réseau social

Projet personnel ⁃ 2018

ReactRedux ObservableImmerLodashAxiosQS

Intégration HTML & CSS de Netflix

Projet personel ⁃ 2021

HTMLCSSjQuery

Développement d'un formulaire

Projet personnel ⁃ 2021

JSHTMLCSS

Développement d'une application mobile

Projet personnel ⁃ 2021

React NativeHTMLCSS

Développeur React & Next

Expérience professionnelle ⁃ 2024-2025

ReactNextTypescriptSASSJestAtomic DesignMonorepo

Discord minimaliste

Projet personnel ⁃ 2021

ReactSocket.IOHTMLCSS

Développeur React chez ManoMano

Expérience professionnelle ⁃ 2021-2022

ReactNextJSTypescriptSASSRedux SagaJestReact testingRedux Saga Test PlanAxiosFormikYupQSScrumFigma

Moteur de jeu

Projet étudiant de 2ème année ⁃ 2015

C++QtOpenGL

Blood Of Evil

Projet personnel ⁃ 2016

UnityC#Linq

Intégration de maquettes

Projet personnel ⁃ 2020

HTMLCSS

Forum

Projet personnel ⁃ 2021

CMS

Naraa - Ping Award du meilleur jeu étudiant 2017

Projet étudiant de fin d'étude ⁃ 2017

UnityC#VuforiaLinq

LazZzy Bot

Game Jam ⁃ 2016

UnityC#

Développeur React et Next chez Kering

Expérience professionnelle ⁃ 2023-2024

ReactTypeScriptNextJSStoryBookStyled ComponentsYupReact Hook FormJestFigma

Conseil et formation en React front-end

Expérience professionnelle ⁃ 2025

ReactMUIHighchartsAG GridReact IconsClaude Code ProFramer Motion

Intégration HTML & CSS d'un menu de l'iPhone

Projet personnel ⁃ 2021

HTMLCSS

Site d'un jeu

Projet personnel ⁃ 2015

CMS

4 Images 1 Mot

Projet personnel ⁃ 2025

React NativeAxios

Blissim ⁃ Entretien technique

Projet personnel ⁃ 2025

NextJS

Automatisation de l'envoi d'invitation sur LinkedIn

Projet personnel ⁃ 2021

JSCypress

Lead Développeur React chez Infogreffe

Expérience professionnelle ⁃ 2022-2023

ReactTypeScriptGatsbyStoryBookSASSReact QueryRedux ThunkGraphQLYupFormikCypressJestReact TestingInVisionEslintstylelint

Assistant en programmation chez Isart Digital

Expérience professionnelle ⁃ 2016

C++CGitréseaumultithreadingarchitecture

Chat en 'temps réel'

Projet personnel ⁃ 2019

React

Pousser React, Redux et les tests

Projet personnel ⁃ 2021

ReactReduxRedux sagaRedux saga test planJestReact testingAxios

Développeur React chez Wibilong

Expérience professionnelle ⁃ 2018

ReactSASSJSJestReact TestingSeleniumFormikYupHTMLCSSFigma

Développement d'une librairie de composants

Expérience Personnel ⁃ 2023

ReactTSStorybookSASSHTML

Développeur React chez 2Be-FFICIENT

Expérience professionnelle ⁃ 2017-2018

ReactJSjQueryJestReact TestingFormikYupHTMLCSSFigma

Développeur VR et C# chez Owl Perception

Expérience professionnelle ⁃ 2015

UnityC#Linq

That's The Question ! Prix du respect du thème

Game Jam ⁃ 2017

UnityC#

Jeu Passif

Projet personnel ⁃ 2016

UnityC#

Skyrim

Projet étudiant de 2ème année ⁃ 2015

UnityC#Linq

Mario Kart

Projet étudiant de 2ème année ⁃ 2015

UnityC#

IA d'un jeu d'échec

Projet étudiant de 3ème année ⁃ 2016

Unreal EngineC++

Démo sur les animations IK

Projet étudiant de 4ème année ⁃ 2017

UnityC#

YouTube Transcript & Summary Prompt

Extension Chrome ⁃ 2026

JSChrome ExtensionClaude API

Workflows & agents IA - N8N

Automatisation IA ⁃ 2026

N8NAutomationAI AgentsWhatsApp API

Rendre les réponses de l'IA plus humaine

Projet personnel ⁃ 2026

ClaudeArtifactClaude API

Contexte d'injection - Claude API

Projet personnel ⁃ 2026

Claude APIContexte d'injectionPrompt Engineering

Formatter du texte sur LinkedIn avec Claude

Projet personnel ⋅ 2026

ClaudeClaude ArtifactClaude API

Générateur de prompts

Outil du quotidien ⋅ 2026

Claude ArtifactNetlify

Repas de la semaine, idées de repas, comment cuisiner

Outil du quotidien ⋅ 2026

Claude ArtifactNetlify

Course de la semaine

Outil du quotidien ⋅ 2026

Claude Artifact

Où est-ce qu'on mange ?

Sortie ⋅ 2026

Claude ArtifactNetlify

Comment tout nettoyer et mon ménage

Outil du quotidien ⋅ 2026

Claude ArtifactNetlify

Youtube2Text

Outil du quotidien ⋅ 2026

Claude Artifact

Actualités

Informations ⋅ 2026

Claude Artifact

Cinéma

Sortie ⋅ 2026

Claude Artifact

Course

Sport ⋅ 2026

Claude ArtifactOCR

Recherche d'emploi

Travail ⋅ 2026

Claude Artifact

Portfolio IA - 2026

Outil du quotidien ⋅ 2026

Claude Artifact

Les gens — Mes relations et organisation personnelle

Espace d'organisation moderne ⋅ 2026

Claude ArtifactTailwindReact

Déplacements

Outil du quotidien ⋅ 2026

Claude Artifact

Réseau neuronal

Projet étudiant de 3ème année ⁃ 2016

UnityC#

Éditeur de jeu

Projet étudiant de 2ème année ⁃ 2015

C++QtOpenGL

Forum

Projet personnel ⁃ 2016

CMS

Le site de mon jeu

Projet personnel ⁃ 2016

CMS

Site d'un jeu

Projet personnel ⁃ 2015

CMS

Le site d'une avocate

Projet personnel ⁃ 2016

CMS

Mon process créatif IA

Projet personnel ⋅ 2026

IA GénérativeProcess créatif

Agent - Course Auchan

Projet personnel ⋅ 2026

Claude AgentWeb ScrapingAutomatisation

Tools - PDF

Outil du quotidien ⋅ 2026

Claude ArtifactPDF

CV

Dossier de compétences - Front - PDF Dossier de compétences - Front - Word Dossier de compétences - Full Stack - PDF Dossier de compétences - Full Stack - Word

Certifications

Certifications obtenues, vérifiables en ligne. Chaque attestation est consultable en PDF.

Anthropic
Introduction to Claude Cowork
juin 2026
Vérifier PDF
Anthropic
AI Capabilities and Limitations
juin 2026
Vérifier PDF
Anthropic
AI Fluency For Small Businesses
juin 2026
Vérifier PDF
Anthropic
Claude Code 101
mai 2026
Vérifier PDF
Anthropic
Sub Agents
mai 2026
Vérifier PDF
HackerRank
Node (Basic)
février 2025
Vérifier PDF

Contact

Travailler avec moi vous intéresse ? N'hésitez pas à me laisser un message, je serai ravi de vous répondre.

30 Rue Anatole France
94300 Vincennes

06 15 69 80 71

haddad.b.pro@gmail.com