[{"data":1,"prerenderedAt":364},["ShallowReactive",2],{"navigation":3,"projectsPage-fr":26,"projects-fr":42,"mdc--be2ppt-key":199,"mdc--3im6f6-key":255,"mdc--kph8hx-key":320},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","\u002Fblog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"From Mockup to Market: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market","blog\u002Ffrom-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch","blog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"The Psychology of Color in UI Design","\u002Fblog\u002Fpsychology-of-color-in-ui-design","blog\u002Fpsychology-of-color-in-ui-design",{"title":22,"path":23,"stem":24},"The Case for Slow Design in a Fast-Paced Digital World","\u002Fblog\u002Fslow-design-in-fast-paced-digital-world","blog\u002Fslow-design-in-fast-paced-digital-world",false,{"id":27,"title":28,"body":29,"description":30,"extension":31,"links":32,"meta":36,"navigation":37,"path":38,"seo":39,"stem":40,"__hash__":41},"projectsPage_fr\u002Fprojects.json","Construire des systèmes, façonner des expériences.",null,"J'ai travaillé sur une variété de projets — des applications web aux solutions mobiles — en me concentrant sur des produits rapides, fiables et agréables à utiliser. Mon travail fait le lien entre la précision front-end et la logique back-end, en donnant vie aux idées grâce à une architecture propre, un code réfléchi et une attention à la performance. Voici quelques points forts qui illustrent mon approche de la conception au déploiement.","json",[33],{"label":34,"to":35},"Discutons","\u002Fcontact",{},true,"\u002Fprojects",{"title":28,"description":30},"projects","o3axHV5anCCq87pUZuAaQKulH2-qj2aouWTd_MlWtY8",[43,96,111,168,186],{"id":44,"title":45,"category":46,"date":47,"description":48,"extension":31,"gallery":49,"image":80,"logo":81,"meta":82,"stem":83,"tags":84,"url":94,"__hash__":95},"projects_fr\u002Fprojects\u002Fjarvis-crisis.json","Jarvis Crisis","web","2025-01-01","Un projet privé développé pour un client. Il s'agit d'une plateforme **alimentée par l'IA** conçue pour aider les organisations à **gérer les crises** et la communication en temps réel.\nElle permet aux équipes de coordonner les opérations, réagir plus vite et maintenir une communication sécurisée lors de situations critiques.\nL'**assistance IA** intégrée prend en charge la **génération automatique de rapports**, l'**analyse de situation** et la **prise de décision** — aidant les organisations à agir plus intelligemment quand chaque instant compte.",[50,53,56,59,62,65,68,71,74,77],{"src":51,"alt":52},"\u002Fimages\u002Fprojects\u002Fjarvis\u002Fscreen1.png","Jarvis Crisis écran 1",{"src":54,"alt":55},"\u002Fimages\u002Fprojects\u002Fjarvis\u002Fscreen3.png","Jarvis Crisis écran 3",{"src":57,"alt":58},"\u002Fimages\u002Fprojects\u002Fjarvis\u002Fscreen4.png","Jarvis Crisis écran 4",{"src":60,"alt":61},"\u002Fimages\u002Fprojects\u002Fjarvis\u002Fscreen5.png","Jarvis Crisis écran 5",{"src":63,"alt":64},"\u002Fimages\u002Fprojects\u002Fjarvis\u002Fscreen6.png","Jarvis Crisis écran 6",{"src":66,"alt":67},"\u002Fimages\u002Fprojects\u002Fjarvis\u002Fscreen7.png","Jarvis Crisis écran 7",{"src":69,"alt":70},"\u002Fimages\u002Fprojects\u002Fjarvis\u002Fscreen8.png","Jarvis Crisis écran 8",{"src":72,"alt":73},"\u002Fimages\u002Fprojects\u002Fjarvis\u002Fscreen9.png","Jarvis Crisis écran 9",{"src":75,"alt":76},"\u002Fimages\u002Fprojects\u002Fjarvis\u002Fscreen10.png","Jarvis Crisis écran 10",{"src":78,"alt":79},"\u002Fimages\u002Fprojects\u002Fjarvis\u002Fscreen11.png","Jarvis Crisis écran 11","\u002Fimages\u002Fjarvis.png","\u002Fimages\u002Fjarvis-logo.png",{},"projects\u002Fjarvis-crisis",[85,86,87,88,89,90,91,92,93],"React","Next.js","Firebase","Docker","GCP","OpenAI","Gemini","Spring","Netlify","","kMq_YGeDqYkqomDO52XeHB0yKiEFXsU-Hqge8__z8Sg",{"id":97,"title":98,"category":99,"date":100,"description":101,"extension":31,"gallery":29,"image":102,"logo":103,"meta":104,"stem":105,"tags":106,"url":94,"__hash__":110},"projects_fr\u002Fprojects\u002Forb.json","Orb","mobile","2024-01-01","Un projet privé né du besoin d'un **gestionnaire de mots de passe** sécurisé et minimal qui respecte vraiment la vie privée.\nJe voulais un moyen simple de garder tous mes identifiants organisés et protégés, avec des données **entièrement chiffrées** et accessibles uniquement via une passphrase locale.\nAu-delà de la sécurité, j'ai mis l'accent sur une expérience soignée — **animations fluides**, une **interface épurée** et une **organisation intelligente** via recherche, filtres et regroupement par marque.","\u002Fimages\u002Forb.png","\u002Fimages\u002Forb-logo.png",{},"projects\u002Forb",[107,108,87,109],"Flutter","Dart","Google Playstore","burHHWbmg4iXOs3FGKXm-E7UdHASvqZjNmHjJ8fR_l4",{"id":112,"title":113,"category":46,"date":47,"description":114,"extension":31,"gallery":115,"image":155,"logo":156,"meta":157,"stem":158,"tags":159,"url":94,"__hash__":167},"projects_fr\u002Fprojects\u002Ftdnms.json","TDNMS","Stream NMS est une application web pour gérer l'infrastructure réseau fibre et PON. Les opérateurs utilisent des **tableaux de bord** et des **graphes de topologie interactifs** pour surveiller la santé du réseau, **suivre les alertes et statistiques**, et **explorer les rapports par modèle et fournisseur** pour les **micronœuds, CNU et CPE**. Le graphe de topologie visualise les connexions entre micronœuds, CNU et CPE, facilitant la détection des problèmes. Des **flux de configuration et formulaires structurés** prennent en charge les paramètres des appareils, avec des **opérations en masse pour les grands déploiements** et un **thème spécifique par client** pour différentes installations.",[116,119,122,125,128,131,134,137,140,143,146,149,152],{"src":117,"alt":118},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen1.png","TDNMS écran 1",{"src":120,"alt":121},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen3.png","TDNMS écran 3",{"src":123,"alt":124},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen4.png","TDNMS écran 4",{"src":126,"alt":127},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen5.png","TDNMS écran 5",{"src":129,"alt":130},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen6.png","TDNMS écran 6",{"src":132,"alt":133},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen7.png","TDNMS écran 7",{"src":135,"alt":136},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen8.png","TDNMS écran 8",{"src":138,"alt":139},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen9.png","TDNMS écran 9",{"src":141,"alt":142},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen10.png","TDNMS écran 10",{"src":144,"alt":145},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen11.png","TDNMS écran 11",{"src":147,"alt":148},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen12.png","TDNMS écran 12",{"src":150,"alt":151},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen13.png","TDNMS écran 13",{"src":153,"alt":154},"\u002Fimages\u002Fprojects\u002Ftdnms\u002Fscreen14.png","TDNMS écran 14","\u002Fimages\u002Ftdnms.png","\u002Fimages\u002Ftdnms-logo.png",{},"projects\u002Ftdnms",[160,161,162,88,163,164,165,166],"Vue","Django","PostgreSQL","Jenkins","Gitlab CI\u002FCD","Primevue","TailwindCSS","9N_p5dEppwzu5Md1thSuuUci-A7OWY9e4psk5PvHZcY",{"id":169,"title":170,"category":99,"date":171,"description":172,"extension":31,"gallery":29,"image":173,"logo":174,"meta":175,"stem":176,"tags":177,"url":184,"__hash__":185},"projects_fr\u002Fprojects\u002Fvialistv.json","VialisTV","2023-01-01","Une application de streaming multiplateforme développée pour Android, iOS et le Web pour un client média via mon entreprise.\nEn tant que développeur principal, j'ai construit le projet de A à Z, créant une expérience fluide pour la télévision en direct et à la demande.\nL'application combine la flexibilité multiplateforme de **Flutter** avec des **lecteurs vidéo natifs** pour des performances et une fiabilité optimales, et a été conçue pour l'évolutivité, le streaming sécurisé et la maintenabilité à long terme.","\u002Fimages\u002Fvialistv.png","\u002Fimages\u002Fvialis-logo.png",{},"projects\u002Fvialistv",[107,178,179,180,181,161,109,182,183],"Kotlin","Swift","JavaScript","Swagger","Apple Store","Web","https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdetails?id=com.td_tcl.vialisapp&hl=en","w0BFhRfEjeBUo2uEzuXZFkwAF87oiQsLjJg9Iy9kksc",{"id":187,"title":188,"category":99,"date":189,"description":190,"extension":31,"gallery":29,"image":191,"logo":192,"meta":193,"stem":194,"tags":195,"url":197,"__hash__":198},"projects_fr\u002Fprojects\u002Fwilayat.json","Wilayat","2022-01-01","Une **application mobile interactive** avec plus de **100 000 installations** sur le Play Store. Conçue pour aider les utilisateurs à explorer et apprendre sur les 58 wilayas (départements) d'Algérie.\nJe l'ai développée comme projet d'apprentissage personnel et pour offrir aux locaux et touristes un moyen simple et fiable de découvrir les informations régionales.\nLes utilisateurs peuvent **visualiser chaque région**, **calculer les distances** et **accéder à des données locales détaillées** — même **hors ligne**.\nL'application prend en charge l'**arabe**, l'**anglais** et le **français**, la rendant accessible à un large public.","\u002Fimages\u002Fwilayat.png","\u002Fimages\u002Fwilayat-logo.png",{},"projects\u002Fwilayat",[107,108,196,109],"Google Maps API","https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdetails?id=com.wilayat.app&hl=en","1eHW7nANhLanWlMPRQqwJJnWER8qGg_TRoNPSQbZDCY",{"data":200,"body":201},{},{"type":202,"children":203},"root",[204],{"type":205,"tag":206,"props":207,"children":208},"element","p",{},[209,212,218,220,225,227,232,234,239,241,246,248,253],{"type":210,"value":211},"text","Un projet privé développé pour un client. Il s'agit d'une plateforme ",{"type":205,"tag":213,"props":214,"children":215},"strong",{},[216],{"type":210,"value":217},"alimentée par l'IA",{"type":210,"value":219}," conçue pour aider les organisations à ",{"type":205,"tag":213,"props":221,"children":222},{},[223],{"type":210,"value":224},"gérer les crises",{"type":210,"value":226}," et la communication en temps réel.\nElle permet aux équipes de coordonner les opérations, réagir plus vite et maintenir une communication sécurisée lors de situations critiques.\nL'",{"type":205,"tag":213,"props":228,"children":229},{},[230],{"type":210,"value":231},"assistance IA",{"type":210,"value":233}," intégrée prend en charge la ",{"type":205,"tag":213,"props":235,"children":236},{},[237],{"type":210,"value":238},"génération automatique de rapports",{"type":210,"value":240},", l'",{"type":205,"tag":213,"props":242,"children":243},{},[244],{"type":210,"value":245},"analyse de situation",{"type":210,"value":247}," et la ",{"type":205,"tag":213,"props":249,"children":250},{},[251],{"type":210,"value":252},"prise de décision",{"type":210,"value":254}," — aidant les organisations à agir plus intelligemment quand chaque instant compte.",{"data":256,"body":257},{},{"type":202,"children":258},[259],{"type":205,"tag":206,"props":260,"children":261},{},[262,264,269,271,276,278,283,285,290,292,297,299,304,306,311,313,318],{"type":210,"value":263},"Stream NMS est une application web pour gérer l'infrastructure réseau fibre et PON. Les opérateurs utilisent des ",{"type":205,"tag":213,"props":265,"children":266},{},[267],{"type":210,"value":268},"tableaux de bord",{"type":210,"value":270}," et des ",{"type":205,"tag":213,"props":272,"children":273},{},[274],{"type":210,"value":275},"graphes de topologie interactifs",{"type":210,"value":277}," pour surveiller la santé du réseau, ",{"type":205,"tag":213,"props":279,"children":280},{},[281],{"type":210,"value":282},"suivre les alertes et statistiques",{"type":210,"value":284},", et ",{"type":205,"tag":213,"props":286,"children":287},{},[288],{"type":210,"value":289},"explorer les rapports par modèle et fournisseur",{"type":210,"value":291}," pour les ",{"type":205,"tag":213,"props":293,"children":294},{},[295],{"type":210,"value":296},"micronœuds, CNU et CPE",{"type":210,"value":298},". Le graphe de topologie visualise les connexions entre micronœuds, CNU et CPE, facilitant la détection des problèmes. Des ",{"type":205,"tag":213,"props":300,"children":301},{},[302],{"type":210,"value":303},"flux de configuration et formulaires structurés",{"type":210,"value":305}," prennent en charge les paramètres des appareils, avec des ",{"type":205,"tag":213,"props":307,"children":308},{},[309],{"type":210,"value":310},"opérations en masse pour les grands déploiements",{"type":210,"value":312}," et un ",{"type":205,"tag":213,"props":314,"children":315},{},[316],{"type":210,"value":317},"thème spécifique par client",{"type":210,"value":319}," pour différentes installations.",{"data":321,"body":322},{},{"type":202,"children":323},[324],{"type":205,"tag":206,"props":325,"children":326},{},[327,329,334,336,341,343,348,350,355,357,362],{"type":210,"value":328},"Un projet privé né du besoin d'un ",{"type":205,"tag":213,"props":330,"children":331},{},[332],{"type":210,"value":333},"gestionnaire de mots de passe",{"type":210,"value":335}," sécurisé et minimal qui respecte vraiment la vie privée.\nJe voulais un moyen simple de garder tous mes identifiants organisés et protégés, avec des données ",{"type":205,"tag":213,"props":337,"children":338},{},[339],{"type":210,"value":340},"entièrement chiffrées",{"type":210,"value":342}," et accessibles uniquement via une passphrase locale.\nAu-delà de la sécurité, j'ai mis l'accent sur une expérience soignée — ",{"type":205,"tag":213,"props":344,"children":345},{},[346],{"type":210,"value":347},"animations fluides",{"type":210,"value":349},", une ",{"type":205,"tag":213,"props":351,"children":352},{},[353],{"type":210,"value":354},"interface épurée",{"type":210,"value":356}," et une ",{"type":205,"tag":213,"props":358,"children":359},{},[360],{"type":210,"value":361},"organisation intelligente",{"type":210,"value":363}," via recherche, filtres et regroupement par marque.",1781201733317]