Hamid Djennaoui

Je suis développeur Front/UI avec plus de 9 ans d'expérience, spécialisé en intégration web, conception de Design Systems et mise en place de solutions front robustes, performantes et évolutives. Avec HDJN Works, j'interviens en tant qu’indépendant ou en sous-traitance pour accompagner des équipes tech sur des projets stratégiques. Mon approche est centrée sur la qualité du code, l'efficacité des workflows, et une vraie sensibilité UX/UI. 🛠️ Ce que je fais : Création et évolution de Design Systems (Atomic Design, Storybook, NPM packages, theming avancé) Intégration pixel perfect et responsive (HTML5, CSS3, SCSS, TailwindCSS, Angular, VueJS…) Optimisation front-end, accessibilité, performance Mise en place de pipelines CI/CD (GitlabCI, Docker, BackstopJS) Accompagnement des équipes sur les bonnes pratiques, la structuration des projets et les outils collaboratifs 💡 Développement d’une stack Design System complète, modulaire et personnalisable – intégrable clé en main dans n’importe quel produit. Basée sur des Web Components, alimentée par des Design Tokens Figma, documentée avec Storybook, cette stack est conçue pour allier scalabilité, cohérence UI, et efficacité dev. Théming avancé, composants agnostiques, CI/CD, packaging NPM… tout est pensé pour un déploiement rapide et une adoption fluide par les équipes. 🚀 Exemples récents : Intégration de composants via Storybook dans un contexte de démo technique sensible Développement d’un Design System complet utilisé à l’échelle internationale Refonte UI d’une application web en mode “Marque Blanche” avec un front ultra-flexible

Au sein du pôle UX, ma mission principale est de développer une bibliothèque de composants et de styles optimisée pour les projets Web de la compagnie, rattachée au Design System de l’entreprise. - Analyse stratégique : Étude approfondie des produits existants et des besoins métiers pour aligner la solution sur les objectifs de l’entreprise. - Refonte complète : Création d'une solution sur-mesure, sans framework externe, garantissant simplicité, adaptabilité et maintenabilité des interfaces. - Approche Atomic Design : Mise en œuvre d’une architecture orientée composant, permettant une évolutivité fluide du composant atomique à des organismes complexes, optimisant ainsi la réutilisation du code. - Théming avancé : Utilisation des Custom Properties CSS pour un theming dynamique, permettant une gestion centralisée des styles et une transition rapide entre les thèmes (Dark, Light, etc.). - Documentation interactive : Déploiement d'un Storybook pour présenter, documenter et tester les composants en temps réel, améliorant ainsi la collaboration entre les équipes. - UI Tests automatisés : Mise en place de tests visuels automatisés via BackstopJS, assurant la stabilité visuelle des composants à chaque mise à jour. - Intégration continue : Création de pipelines CI/CD avec GitlabCI & Jfrog, réduisant les temps de déploiement et augmentant la fiabilité des livraisons.. - Communication et leadership : Organisation de réunions mensuelles avec stakeholders, anticipation proactive des besoins, démonstration régulière des avancées et alignement stratégique sur les priorités du projet. - Accompagnement des équipes de développement : Bootstrap de projets front-end, support à l'intégration des interfaces utilisateur, initiation à l'usage de la bibliothèque de composants, ainsi qu'un accompagnement sur le design (UX/UI) des applications clientes. - Ateliers UX : Contribution aux recherches utilisateurs (UR) pour ajuster les interfaces aux besoins réels des utilisateurs finaux.

Rejoint l’équipe Tech de Valorissimo, une ancienne division interne de Bouygues Immo devenue une filiale / startup semi-autonome pivotant vers une plateforme web type Marketplace et produit SAAS. L’équipe tech jusque là en maintenance de l’existant entame une profonde refonte du back-end monolithique en divers micro-services et mon rôle sur le front-end est de le mettre à niveau et le préparer à recevoir les nouvelles fonctionnalités ainsi que de mettre en place les outils et les méthodologies pour améliorer la productivité, l'homogénéité et le confort de développement. - Nettoyage et/ou remplacement des librairies dépréciées et/ou inutiles à l’avancement du projet ainsi que celles bloquantes à la migration d’Angular - Migration step-by-step d’Angular v8 à Angular v13 - Quasi-totale suppression du CSS existant pour un remplacement par Tailwind CSS : gain énorme en performances, lisibilité, évolutivité et maintenabilité des vues et composants de l’application. - Création des nouvelles vues et des nouveaux composants - Mises en place d’animations et responsive design - Découpage et refactorisation des éléments l’application en composants basé sur le modèle Atomic Design - Mise en place d’une strategie pour permettre le theming et la flexibilité pour le chartage de l’application pour en faire un produit “Marque Blanche” de la partie SAAS du produit. Notamment grâce aux facilités de configuration de Tailwind et les variables CSS. - Participation à la mise en place de la méthodologie de travail collaboratif de l’équipe et de ses interlocuteurs, en fonction des spécificités du projet, de l’équipe et du contexte en général. Reflexion et adoption de principes issus de l’Agilité, Scrum, Kanban. Durées des Sprints, les diverses cérémonies et réunions, leur utilités et les sujets à aborder à chacunes d’elles etc…

■ Maintenance et évolution de l’existant ■ Création des nouvelles vues et des nouveaux composants ■ Mises en place d’animations et responsive design ■ Optimisations et livraison pour la MEP ■ Factorisation complète et optimisation du CSS des applications beaucoup trop lourd par ses réplications de code et utilisation non optimale des mixins SCSS ■ Découpage et factorisation des éléments l’application en composants basé sur le modèle Atomic Design ■ Intégration des vues et des nouveaux composants en respectant la nomenclature BEM (Block, Element, Modifier) ■ Début de la mise en place de la gestion externalisée (par rapport au projet) des assets statiques, afin d’alléger les apps mais surtout d’avoir une source unique et partagée pour ces ressources, à ne maintenir qu’a un endroit et limiter les tâches répétitives évitables. ■ Mise en place d’un système de theming décorrélé de la base de CSS pour pouvoir créer et gérer des declinaisons de l’application avec leur propre charte. ■ Extension de la solution de theming a l’ensemble des projets front de l’entreprise via une librairie NPM commune privée. ■ Évolution de la lib NPM vers des composants UI partagés par l’ensemble des projets front ■ Mise en place d’une solution de génération de mail via un framework basé sur Handlebars & NodeJS : division en composants, syntaxe de templating simplifiée, delais de création et de mise en prod des templates mail drastiquement réduits ■ Prise en charge de l’extension, l’application et l’homogénéisation des solutions d’industrialisation et de productivité a l’ensemble des projets UI/front de l’entreprise. ■ Analyse des pratiques et bugs via SonarQube notamment, assignation de taches relatives aux corrections / optimisations aux équipes ■ Soutient sur le bootstraping de nouveaux projets ■ Mise en place / remplacement des frameworks CSS par TailwindCSS sur l’ensemble des projets, temps de dev accéléré, poids et perfs des app améliorés.

- Création et intégration de nouvelles pages ou mises à jour sur les différents sites du groupe Aviva France. - Mise en place d'une architecture basée sur SASS et Gulp pour une automatisation des tâches unifiée et versionning sous SVN (héritage interne) avec Tortoise. Formation de l'équipe interne de Visual Designers et d'intégrateurs sur ces pratiques. - Évolution de la librairie de composants sketch vers un pseudo Design System traduit en composants HTML / SASS pour une évolution plus simple du site et une meilleure maintenance. - Refactorisation du CSS qui était lourd, dont l'évolution était entravée par un grand nombre de mauvaises pratiques. - Rencontre des différents acteurs des projets pour identifier les besoins clients et utilisateurs, traduction en wireframes lors d'ateliers collaboratifs puis en maquettes hifi sous sketch avant intégration HTML / SASS. - Accent mis sur la compatibilité multi-navigateurs et multi-devices, responsive, composants avec de l'HTML et du CSS les moins spécifiques possible pour pouvoir être réutilisables partout ailleurs avec le minimum de modification possible et ainsi obtenir un gain substantiel de productivité. Compétences : HTML5, SCSS, CSS3, jQuery, Bootstrap, SVN, Sketch, Design UX UI

Reprise du développement en cours sur le MVP du BO de gestion d'activité. Réflexion UX, prototyping et intégration sur le template actuel. Focus sur l'intuitivité, une expérience adaptée aux besoin et usages des utilisateurs, une interface amicale et soignée. Découpage des feuilles de style en modules et composants SASS selon le modèle SMACSS, pour plus de clarté et une meilleure maintenabilité du code. Compétences : HTML5, SCSS, CSS3, jQuery Bootstrap, SVN, Adobe XD, Wireframing, Design UX UI

Evaluation des besoins clients, formulation de propositions en fonction des possibilités offertes par le produit et des chartes graphiques des clients via Wireframes & Maquettes HiFi, voire intégration directe. Collecte des besoins redondants et des problèmes rencontrés sur la plateforme, recherche et formulation de solutions pour améliorer le produit en termes d’expérience utilisateurs, autant côté client que côté power user. Brainstormings, Sketch, Mockups (Adobe Illustrator & Photoshop, Implémentation au sein de l'existant en React.js, HTML, CSS (Less, Sass).

Audit & évaluation de l'existant : problématique du projet, besoins à solutionner, cible visée, angle d'attaque, réponse apportée et valeur ajoutée, expérience utilisateur, ergonomie et style des interfaces. Mise en place d'un environnement SCSS et d'une organisation SMACSS (styles découpés en modules et composants pour une plus grande lisibilité et une plus grande simplification de la navigation, de la maintenance et de l'édition du code). Maquettage et intégration de l'interface client (plugin responsive en iframe implémentée via un snippet Javascript autogénéré pour chaque projet), de l'interface admin (back office) et d'une interface utilisateur indépendante.

Refonte Site Web & Blog, Illustrations & Graphisme de publications print, Brainstorms & soutiens en UX/UI Design sur du dev interne

Conception d'applications Mobile & Design de Sites Web