[{"data":1,"prerenderedAt":496},["ShallowReactive",2],{"projects":3},[4,79,129,179,228,270,346,390,446],{"id":5,"title":6,"body":7,"category":52,"context":53,"cover":54,"date":55,"demo":56,"description":57,"duration":58,"extension":59,"featured":60,"github":61,"meta":62,"navigation":63,"objective":64,"order":65,"path":66,"result":67,"seo":68,"stack":69,"status":76,"stem":77,"__hash__":78},"projects\u002Fprojects\u002Falertgeo.md","AlertGeo — Système d'alerte géopolitique précoce",{"type":8,"value":9,"toc":45},"minimark",[10,15,19,22,26,29,32,36,39,42],[11,12,14],"h2",{"id":13},"_01-le-contexte","01 | Le contexte",[16,17,18],"p",{},"Face à la fragmentation de l'information, comment détecter les prémices d'une crise géopolitique avant qu'elle ne fasse la Une des médias ? Les sources primaires (diplomatie, institutions) sont noyées dans le bruit médiatique, et les marchés financiers réagissent souvent avant les annonces officielles.",[16,20,21],{},"L'objectif de ce projet était de construire un outil souverain de veille stratégique : un système capable de repérer ces \"signaux faibles\" en temps réel et d'alerter instantanément, le tout avec une contrainte forte : 100% gratuit et indépendant (zéro abonnement cloud ou API payante).",[11,23,25],{"id":24},"_02-le-projet","02 | Le projet",[16,27,28],{},"Pour valider le concept, j'ai développé un MVP fonctionnel en 8 heures. J'ai architecturé un pipeline modulaire qui collecte l'information, génère un score de risque global, et utilise un LLM local pour rédiger une synthèse envoyée sur Telegram.",[16,30,31],{},"Aujourd'hui, l'architecture technique tourne en continu de manière robuste sur un Raspberry Pi. Mon défi actuel n'est plus technique, mais analytique : la modélisation du risque. Le vrai challenge d'AlertGeo est de déterminer les bons indicateurs et leur poids mathématique. Comment équilibrer l'impact d'une alerte diplomatique RSS avec une soudaine fermeture d'espace aérien ou un pic de volatilité sur le VIX ? J'itère actuellement sur cet algorithme de pondération pour que le score final reflète réellement l'imminence d'une crise.",[11,33,35],{"id":34},"_03-les-apprentissages","03 | Les apprentissages",[16,37,38],{},"J'ai réalisé que l'ingénierie logicielle n'est que la moitié du chemin. La véritable complexité réside dans la compréhension du domaine (la géopolitique et la finance) : sélectionner les bons indicateurs prédictifs et créer des z-scores pertinents pour comparer des pommes (chute des marchés) et des oranges (mouvements militaires).",[16,40,41],{},"Penser le projet avec des \"collecteurs\" indépendants s'est révélé être un choix crucial. Cela me permet aujourd'hui d'ajouter de nouvelles sources ou d'en désactiver d'autres très facilement, sans casser le moteur de scoring principal.",[16,43,44],{},"J'ai validé la faisabilité d'intégrer un LLM local pour analyser des dépêches complexes sans dépendre des API de la Big Tech, avec un coût d'exploitation maintenu à 0€.",{"title":46,"searchDepth":47,"depth":47,"links":48},"",2,[49,50,51],{"id":13,"depth":47,"text":14},{"id":24,"depth":47,"text":25},{"id":34,"depth":47,"text":35},"Automatisation & LLM","Projet personnel","\u002Fimg\u002Falertgeo-systeme-alerte-geopolitique-osint-dashboard.png","2025-01",null,"Système de veille stratégique qui détecte des signaux faibles géopolitiques en temps réel. Pipeline modulaire : collecte → scoring de risque → synthèse LLM local → alerte Telegram. Tourne en continu sur Raspberry Pi. Zéro coût cloud.","En itération","md",false,"https:\u002F\u002Fgithub.com\u002Faant-code\u002FAlertGeo-presentation",{},true,"Construire un outil souverain de veille géopolitique temps réel, zéro coût cloud.",99,"\u002Fprojects\u002Falertgeo","Pipeline fonctionnel sur Raspberry Pi, itération active sur l'algorithme de scoring de risque.",{"title":6,"description":57},[70,71,72,73,74,75],"Python","Ollama","APIs financières","Flux RSS","Telegram","Raspberry Pi","En cours","projects\u002Falertgeo","qEDtFzgQsgwf0Kj-rTH3ErLDP8yrPJ_umNw2gLgR7-Y",{"id":80,"title":81,"body":82,"category":113,"context":56,"cover":114,"date":56,"demo":56,"description":115,"duration":56,"extension":59,"featured":60,"github":116,"meta":117,"navigation":63,"objective":118,"order":65,"path":119,"result":120,"seo":121,"stack":122,"status":126,"stem":127,"__hash__":128},"projects\u002Fprojects\u002Farchitecture-bdd-streaming.md","Architecture BDD — Plateforme de streaming",{"type":8,"value":83,"toc":108},[84,86,89,91,94,97,99,102,105],[11,85,14],{"id":13},[16,87,88],{},"Face à la nécessité de comprendre comment les géants du divertissement gèrent des millions d'utilisateurs, le défi de ce projet était de concevoir l'architecture de données complète d'une plateforme de streaming vidéo. L'objectif n'était pas simplement de lister des films, mais de structurer un système complexe capable de supporter des règles métier strictes : profils avec restrictions d'âge, gestion d'abonnements sans chevauchement, et traçabilité des visionnages sur de multiples appareils.",[11,90,25],{"id":24},[16,92,93],{},"Pour garantir une base solide, j'ai d'abord traduit les besoins fonctionnels en modèles conceptuels visuels (MCD\u002FMLD) afin de valider la logique globale avec mon binôme avant d'écrire la moindre ligne de code.",[16,95,96],{},"Le cœur du défi technique résidait dans la gestion de \"l'héritage\" des contenus : différencier intelligemment un film indépendant d'un épisode lié à une saison et une série. Plutôt que de tout mélanger, j'ai opté pour une stratégie de modélisation garantissant l'intégrité des données tout en assurant que la base reste évolutive pour de futures fonctionnalités. L'architecture a ensuite été déployée via des scripts SQL robustes intégrant toutes les contraintes de sécurité directement à la source.",[11,98,35],{"id":34},[16,100,101],{},"J'ai compris qu'une modélisation de données rigoureuse en amont est cruciale pour la scalabilité. Les erreurs d'architecture coûtent cher à corriger une fois l'application en production.",[16,103,104],{},"J'ai appris à transformer des règles business abstraites (ex: \"un enfant ne peut voir que du contenu adapté\") en contraintes techniques implacables au sein même de la base de données.",[16,106,107],{},"Travailler en binôme m'a forcé à justifier mes choix de conception, à documenter mes schémas pour les rendre compréhensibles, et à trouver des consensus sur les meilleures stratégies d'architecture.",{"title":46,"searchDepth":47,"depth":47,"links":109},[110,111,112],{"id":13,"depth":47,"text":14},{"id":24,"depth":47,"text":25},{"id":34,"depth":47,"text":35},"Développement Web","\u002Fimg\u002Fbdd.png","Conception complète d'une architecture de base de données pour plateforme streaming. Gestion de l'héritage des contenus (films \u002F séries \u002F épisodes), règles métier strictes (profils, abonnements, traçabilité), scripts SQL avec contraintes d'intégrité.","https:\u002F\u002Fgithub.com\u002Faant-code\u002FBase-de-donnees-plateforme-de-streaming",{},"Concevoir une architecture BDD normalisée pour une plateforme de streaming avec règles métier strictes.","\u002Fprojects\u002Farchitecture-bdd-streaming","Modèle MCD\u002FMLD\u002FMPD complet, scripts SQL avec contraintes d'intégrité et gestion des abonnements.",{"title":81,"description":115},[123,124,125],"SQL","MySQL","Modélisation MCD\u002FMLD\u002FMPD","Terminé","projects\u002Farchitecture-bdd-streaming","vJ20ZVhH3q50kPzL4D0rBVtcMaMNi88J-y7cOWQpjPs",{"id":130,"title":131,"body":132,"category":163,"context":56,"cover":164,"date":56,"demo":56,"description":165,"duration":56,"extension":59,"featured":60,"github":166,"meta":167,"navigation":63,"objective":168,"order":47,"path":169,"result":170,"seo":171,"stack":172,"status":126,"stem":177,"__hash__":178},"projects\u002Fprojects\u002Faudit-offensif-pentest.md","Audit offensif — Compromission d'infrastructure (lab pentest)",{"type":8,"value":133,"toc":158},[134,136,139,141,144,147,150,152,155],[11,135,14],{"id":13},[16,137,138],{},"Dans le cadre de ma formation, j'ai mené un audit de sécurité complet de type \"boîte noire\" sur une infrastructure simulée vulnérable. L'objectif n'était pas de simplement lister les failles avec un outil automatique, mais de comprendre la mécanique d'une cyberattaque de bout en bout pour savoir rédiger des recommandations de défense adaptées et réalistes.",[11,140,25],{"id":24},[16,142,143],{},"J'ai structuré cette mission selon une méthodologie d'audit rigoureuse, en commençant par une cartographie réseau complète pour identifier les points d'entrée vulnérables. J'ai ensuite exploité manuellement des failles web critiques, comme des injections SQL ou des vols de session via XSS, afin de comprendre intimement comment ces attaques manipulent les requêtes et les navigateurs.",[16,145,146],{},"Pour aller plus loin, j'ai contourné des filtres de téléchargement pour déployer un webshell et établir une connexion inverse, obtenant ainsi un accès interactif à la machine. Enfin, l'exploitation d'une erreur de configuration système sur un binaire m'a permis d'élever mes privilèges pour obtenir le contrôle total du serveur (root).",[16,148,149],{},"L'approche clé de ce projet était pédagogique. J'ai volontairement tout réalisé manuellement dans un premier temps pour maîtriser la technique. Ce n'est qu'une fois ces mécaniques profondément assimilées que j'ai utilisé des outils d'automatisation comme SQLMap pour valider les attaques à plus grande échelle.",[11,151,35],{"id":34},[16,153,154],{},"Cette expérience m'a prouvé que comprendre l'aspect offensif est indispensable pour construire une défense efficace. En exploitant moi-même ces vulnérabilités, j'ai saisi concrètement pourquoi des mesures préventives strictes, comme les requêtes préparées ou le contrôle des fichiers téléversés, sont absolument vitales en entreprise.",[16,156,157],{},"J'ai également appris à garder un esprit critique face aux scanners automatisés, qui donnent de bonnes indications mais nécessitent toujours une validation humaine pour confirmer l'impact réel. Enfin, la rédaction de mes deux rapports d'audit m'a exercé à vulgariser la technique pour formuler des plans de remédiation clairs et priorisés.",{"title":46,"searchDepth":47,"depth":47,"links":159},[160,161,162],{"id":13,"depth":47,"text":14},{"id":24,"depth":47,"text":25},{"id":34,"depth":47,"text":35},"Cyber \u002F Blue Team","\u002Fimg\u002Fpentest.png","Audit boîte noire complet sur infrastructure simulée vulnérable. Cartographie réseau, exploitation manuelle de failles critiques (SQLi, XSS, webshell), élévation de privilèges, rapport de remédiation.","https:\u002F\u002Fgithub.com\u002Faant-code\u002FTP-Pentest-MDS",{},"Conduire un audit boîte noire complet sur une infrastructure simulée vulnérable.","\u002Fprojects\u002Faudit-offensif-pentest","Compromission complète obtenue (SQLi → webshell → élévation de privilèges), rapport de remédiation livré.",{"title":131,"description":165},[173,174,175,176],"Reconnaissance réseau","Exploitation web (SQLi, XSS)","Post-exploitation","SQLMap","projects\u002Faudit-offensif-pentest","BFFvhCZCwuv8_SqLEJ3bJ0KrNbDWFr7884xXZbn4uNM",{"id":180,"title":181,"body":182,"category":113,"context":56,"cover":213,"date":56,"demo":56,"description":214,"duration":56,"extension":59,"featured":60,"github":215,"meta":216,"navigation":63,"objective":217,"order":65,"path":218,"result":219,"seo":220,"stack":221,"status":126,"stem":226,"__hash__":227},"projects\u002Fprojects\u002Fcoachpro-wordpress.md","CoachPro — Intégration WordPress pixel-perfect",{"type":8,"value":183,"toc":208},[184,186,189,191,194,197,200,202,205],[11,185,14],{"id":13},[16,187,188],{},"Dans le cadre de mon cursus B2 à MyDigitalSchool, j'ai réalisé l'intégration d'un site vitrine fictif (\"CoachPro\") à partir d'une maquette Figma. L'enjeu de ce projet n'était pas de se limiter au design, mais d'axer sur la technique : l'objectif était de réaliser une intégration \"pixel perfect\" tout en exploitant la puissance de WordPress pour fournir un back-office pleinement administrable, garantissant une maintenance simple du contenu.",[11,190,25],{"id":24},[16,192,193],{},"L'intégration s'est déroulée en deux grandes étapes, de la conception UI à l'implémentation dynamique. J'ai d'abord réalisé les maquettes Desktop et Mobile sur Figma pour poser les bases du rendu visuel, en extrayant précisément les valeurs SCSS comme les espacements, les typographies et les couleurs.",[16,195,196],{},"Pour le développement WordPress, j'ai créé un thème enfant basé sur Astra afin de garantir la pérennité du code. J'ai développé des templates sur mesure et intégré minutieusement le SCSS pour reproduire la maquette au pixel près, en surchargeant proprement le thème parent.",[16,198,199],{},"Le véritable défi technique a été de lier ce design sur mesure à l'administration native de WordPress. J'ai configuré le thème et mappé les classes CSS pour que chaque élément (titres, images, blocs) soit entièrement modifiable depuis l'interface de personnalisation, offrant une autonomie totale au futur administrateur.",[11,201,35],{"id":34},[16,203,204],{},"Sur le plan technique, ce projet m'a permis de maîtriser la hiérarchie des templates PHP de WordPress et d'acquérir une grande rigueur dans l'intégration front-end responsive. J'ai pu gérer le cycle de vie complet du projet, de la réflexion UI\u002FUX jusqu'au développement d'un CMS dynamique fonctionnel.",[16,206,207],{},"Au-delà du code, cette expérience a fortement développé mon approche orientée client. J'ai compris qu'un site vitrine réussi doit certes être esthétique et fidèle à la maquette, mais qu'il doit surtout être pensé dès le départ pour être maintenable et modifiable facilement par un utilisateur non-technicien.",{"title":46,"searchDepth":47,"depth":47,"links":209},[210,211,212],{"id":13,"depth":47,"text":14},{"id":24,"depth":47,"text":25},{"id":34,"depth":47,"text":35},"\u002Fimg\u002Fwp-coachPro.jpg","Intégration pixel-perfect d'une maquette Figma sur WordPress avec thème enfant custom, templates PHP sur mesure, back-office entièrement administrable par un non-technicien.","https:\u002F\u002Fgithub.com\u002Faant-code\u002FcoachPro-integration-wp",{},"Intégrer une maquette Figma en WordPress administrable par un client non-technicien.","\u002Fprojects\u002Fcoachpro-wordpress","Thème enfant custom livré, back-office configuré, rendu pixel-perfect validé par le client.",{"title":181,"description":214},[222,223,224,225],"WordPress","PHP","SCSS","Figma","projects\u002Fcoachpro-wordpress","QtrCUzcy7-Z9JwOZ3EYTUgSpgy11wHrkP3K0rMJ4ntg",{"id":229,"title":230,"body":231,"category":163,"context":253,"cover":254,"date":255,"demo":56,"description":256,"duration":257,"extension":59,"featured":60,"github":258,"meta":259,"navigation":63,"objective":260,"order":65,"path":261,"result":262,"seo":263,"stack":264,"status":126,"stem":268,"__hash__":269},"projects\u002Fprojects\u002Finvestigation-soc-wazuh.md","Investigation SOC — Wazuh \u002F MITRE ATT&CK",{"type":8,"value":232,"toc":248},[233,235,238,240,243,245],[11,234,14],{"id":13},[16,236,237],{},"Face aux exigences de réactivité attendues au sein d'un Security Operations Center (SOC), j'ai voulu consolider mon approche méthodique en simulant une attaque réelle sur une infrastructure critique fictive de type Opérateur d'Importance Vitale. L'objectif principal n'était pas seulement de configurer des outils de détection, mais d'adopter la véritable posture d'un Analyste Cybersécurité capable de qualifier un incident, de l'isoler, et surtout de le communiquer de manière transparente à des décideurs techniques et métiers. Ce projet s'inscrit directement dans ma préparation opérationnelle pour intégrer une Blue Team en alternance, en prouvant ma capacité à gérer la pression d'une compromission.",[11,239,25],{"id":24},[16,241,242],{},"Pour relever ce défi, j'ai déployé un environnement de simulation contrôlé sur un Raspberry Pi, sur lequel j'ai orchestré une attaque par force brute ciblant le service SSH. J'ai ensuite exploité le SIEM Wazuh pour centraliser et scruter les logs d'authentification générés lors de l'intrusion. Plutôt que de me limiter à la simple lecture technique des alertes, j'ai qualifié l'incident en cartographiant les tactiques de l'attaquant via le standard de l'industrie, le framework MITRE ATT&CK. Cette démarche m'a permis de relier des données systèmes brutes à des comportements malveillants identifiés. Pour finaliser la réponse, j'ai synthétisé ces découvertes sous la forme d'un rapport d'incident professionnel à double niveau de lecture, incluant une synthèse exécutive pour le management et une analyse technique pour les équipes de remédiation.",[11,244,35],{"id":34},[16,246,247],{},"Sur le plan technique, cette investigation m'a appris à filtrer le bruit ambiant pour repérer le signal critique au sein d'un SIEM industriel comme Wazuh, tout en appliquant concrètement la matrice MITRE ATT&CK. Au-delà de la technique, j'ai considérablement renforcé mes \"soft skills\" en communication écrite et en vulgarisation. J'ai compris qu'une analyse de sécurité, aussi experte soit-elle, n'a d'impact que si elle est rendue actionnable et compréhensible pour des directeurs non-techniques. Mener cette investigation de la détection jusqu'à la rédaction du rapport final en totale autonomie a également forgé ma rigueur et mon sens de l'organisation face à l'urgence d'une crise cyber.",{"title":46,"searchDepth":47,"depth":47,"links":249},[250,251,252],{"id":13,"depth":47,"text":14},{"id":24,"depth":47,"text":25},{"id":34,"depth":47,"text":35},"Lab personnel","\u002Fimg\u002Finterface-cybersecurite-wazuh-alerte-ssh.png","2025-02","Simulation d'attaque brute-force SSH sur une infrastructure critique fictive. Détection via Wazuh, qualification via MITRE ATT&CK, rapport d'incident double niveau.","3 semaines","https:\u002F\u002Fgithub.com\u002Faant-code\u002FLab-Analyste-SOC",{},"Simuler une attaque brute-force SSH et adopter la posture d'un analyste SOC face à un incident réel.","\u002Fprojects\u002Finvestigation-soc-wazuh","Incident détecté et qualifié via MITRE ATT&CK, rapport double niveau livré (technique + exécutif).",{"title":230,"description":256},[265,266,75,267],"Wazuh","MITRE ATT&CK","Linux","projects\u002Finvestigation-soc-wazuh","ntRXYSQNLpZ_TLSb60cIAjtyuQTej87oF8iqOhPeP18",{"id":271,"title":272,"body":273,"category":113,"context":330,"cover":331,"date":332,"demo":56,"description":333,"duration":58,"extension":59,"featured":60,"github":56,"meta":334,"navigation":63,"objective":335,"order":65,"path":336,"result":337,"seo":338,"stack":339,"status":76,"stem":344,"__hash__":345},"projects\u002Fprojects\u002Fleo-os-portfolio.md","LEO_OS : Portfolio cybersécurité",{"type":8,"value":274,"toc":325},[275,277,280,283,285,292,298,302,305,308,311,314],[11,276,14],{"id":13},[16,278,279],{},"Un portfolio de cybersécurité, c'est un objet étrange. Trop propre, il ressemble à un CV en ligne. Trop technique, personne ne le lit. L'objectif était de trouver un point d'équilibre : quelque chose qui raconte un profil, communique une rigueur, et donne envie d'aller plus loin.",[16,281,282],{},"Le contexte rendait l'exercice encore plus particulier : comment présenter une reconversion depuis 8 ans de travaux en hauteur vers l'administration réseau et la cybersécurité ? Le fil conducteur existe (autonomie, rigueur opérationnelle, travail en environnement contraint), mais il fallait le rendre lisible sans l'expliquer à outrance.",[11,284,25],{"id":24},[16,286,287,291],{},[288,289,290],"strong",{},"Design."," Avant d'écrire une ligne de code, un travail de préparation : définition des personas cibles (recruteur tech, RH, professeur), objectifs de communication par profil, contraintes graphiques. Ce brief a servi de base pour générer un design system complet avec l'IA. Le résultat a ensuite été revu et affiné avec un professionnel UX\u002FUI, qui a validé les choix typographiques, les contrastes et la hiérarchie visuelle. Quelques ajustements ont été intégrés en phase finale.",[16,293,294,297],{},[288,295,296],{},"Développement."," La stack est Nuxt 3 avec @nuxt\u002Fcontent v3 pour gérer les projets et articles en Markdown. Le design system est entièrement en SCSS avec des variables centralisées. Le développement s'est fait en pair programming avec Claude Code : structures de composants, routing, itérations rapides. La règle : l'IA propose, je valide. Chaque choix reste assumé.",[11,299,301],{"id":300},"_03-le-vrai-défi-la-rédaction","03 | Le vrai défi : la rédaction",[16,303,304],{},"La technique, ça se règle. Le contenu, c'est plus compliqué.",[16,306,307],{},"La difficulté centrale était de trouver l'angle. Pas \"voici mes projets\", mais : pourquoi ce parcours, qu'est-ce qui relie 8 ans de travaux en hauteur à un projet en cybersécurité, et comment le dire sans que ça ressemble à une lettre de motivation. L'honnêteté de ton était un équilibre constant : parler technique sans se perdre dans les détails, montrer de l'ambition sans sur-vendre.",[16,309,310],{},"L'autre défi était la gestion du temps. Les projets présentés ici sont à des stades très différents : certains terminés, d'autres en cours d'itération. Trouver la formulation juste pour chacun, décrire ce qui est fait et taire ce qui ne l'est pas encore, a demandé autant de travail que le développement lui-même.",[312,313],"hr",{},[16,315,316],{},[317,318,319,320],"em",{},"Ce portfolio est en itération constante. Si vous avez une remarque, une suggestion ou simplement un retour, je suis preneur : ",[321,322,324],"a",{"href":323},"mailto:leo@leo-os.fr","leo@leo-os.fr",{"title":46,"searchDepth":47,"depth":47,"links":326},[327,328,329],{"id":13,"depth":47,"text":14},{"id":24,"depth":47,"text":25},{"id":300,"depth":47,"text":301},"Projet personnel, branding","\u002Fimg\u002Fleo-os-portfolio-cover.png","2026-01","Un portfolio à l'interface CLI : design system cohérent, pages dédiées par projet, éditorial soigné. Construit avec Nuxt 3 et @nuxt\u002Fcontent, avec le design élaboré en collaboration avec une IA et validé par un professionnel UX\u002FUI.",{},"Construire un portfolio qui reflète un profil technique atypique sans ressembler à un template générique.","\u002Fprojects\u002Fleo-os-portfolio","Portfolio déployé, design system complet, pages dédiées projet et article, cohérence éditoriale.",{"title":272,"description":333},[340,341,342,224,343],"Nuxt 3","Vue 3","@nuxt\u002Fcontent","TypeScript","projects\u002Fleo-os-portfolio","trjkbrZmRsYObEdkvbqYuE3tfMB4REGJTfMNSaedBTI",{"id":347,"title":348,"body":349,"category":113,"context":56,"cover":377,"date":56,"demo":56,"description":378,"duration":56,"extension":59,"featured":60,"github":379,"meta":380,"navigation":63,"objective":381,"order":65,"path":382,"result":383,"seo":384,"stack":385,"status":126,"stem":388,"__hash__":389},"projects\u002Fprojects\u002Fportfolio-photographique.md","Portfolio Photographique",{"type":8,"value":350,"toc":372},[351,353,356,358,361,364,366,369],[11,352,14],{"id":13},[16,354,355],{},"Face au besoin d'une photographe d'exposer son travail en ligne, le défi était clair : créer un écrin numérique où l'interface s'efface totalement au profit de l'art. L'objectif principal était de développer un site vitrine \"pure image\" avec une navigation intuitive et fluide, sans que le design ne prenne le pas sur le contenu photographique.",[11,357,25],{"id":24},[16,359,360],{},"Pour garantir un code propre et facilement maintenable, j'ai architecturé l'application autour d'une approche orientée composants avec React. J'ai isolé les éléments récurrents (Header, Footer, Layout global) pour éviter la duplication de code et rendre le projet scalable en cas d'ajout de nouvelles pages ou séries photographiques.",[16,362,363],{},"Côté interface, l'enjeu principal a été d'intégrer \"pixel-perfect\" la maquette fournie par la photographe, en respectant scrupuleusement sa direction artistique minimaliste. En utilisant SCSS, j'ai fidèlement retranscrit son design, notamment en développant un système de carrousel fluide pour la présentation des séries et en intégrant un bouton \"Scroll to Top\" pensé spécifiquement pour faciliter la consultation de longues galeries verticales sans altérer le design initial.",[11,365,35],{"id":34},[16,367,368],{},"Ce projet a été un excellent exercice d'exigence technique et visuelle. Mon premier grand apprentissage a été la rigueur d'intégration \"pixel-perfect\" en SCSS : traduire fidèlement la vision d'un créatif en code fonctionnel, fluide, et responsive sur tout type d'écran.",[16,370,371],{},"La gestion fine de l'état des composants React a été centrale. Développer des éléments interactifs comme le carrousel ou le Scroll to Top m'a forcé à optimiser la gestion des states (useState, useEffect) pour éviter les re-rendus inutiles et garantir une expérience utilisateur irréprochable, cruciale pour un site axé sur des images haute résolution.",{"title":46,"searchDepth":47,"depth":47,"links":373},[374,375,376],{"id":13,"depth":47,"text":14},{"id":24,"depth":47,"text":25},{"id":34,"depth":47,"text":35},"\u002Fimg\u002Fdnalepa-website.jpg","Site vitrine minimaliste pour une photographe professionnelle. Interface conçue pour s'effacer au profit des images. Carrousel fluide, intégration pixel-perfect d'une direction artistique fournie, responsive complet.","https:\u002F\u002Fgithub.com\u002Faant-code\u002Fsite-vitrine-photo",{},"Créer un site vitrine qui s'efface visuellement pour mettre les images au premier plan.","\u002Fprojects\u002Fportfolio-photographique","SPA React livrée, carrousel fluide, direction artistique respectée pixel-perfect.",{"title":348,"description":378},[386,387,224],"React.js","Vite","projects\u002Fportfolio-photographique","KcwNAKp-pULwpGWD5VA--FxFnOm0QNXGcyA803w2WHs",{"id":391,"title":392,"body":393,"category":163,"context":56,"cover":427,"date":56,"demo":56,"description":428,"duration":56,"extension":59,"featured":63,"github":429,"meta":430,"navigation":63,"objective":431,"order":432,"path":433,"result":434,"seo":435,"stack":436,"status":126,"stem":444,"__hash__":445},"projects\u002Fprojects\u002Fsoc-bancaire-elk.md","Lab SOC — Honeypot SSH, Pipeline ELK & NIST 800-53",{"type":8,"value":394,"toc":422},[395,397,400,402,405,408,411,413,416,419],[11,396,14],{"id":13},[16,398,399],{},"Le secteur bancaire subit une pression cyber sans précédent avec une explosion des attaques ciblées et des enjeux de conformité majeurs. Face à ce constat, l'objectif de ce projet était de concevoir une infrastructure de défense capable de capturer et d'analyser ces menaces en conditions réelles. L'enjeu principal consistait à s'aligner sur les exigences très strictes des institutions financières américaines, notamment la norme NIST 800-53, pour proposer une solution ancrée dans la réalité métier.",[11,401,25],{"id":24},[16,403,404],{},"J'ai architecturé et déployé de A à Z un laboratoire SOC complet simulant une infrastructure bancaire. La première étape a consisté à déployer un leurre (Honeypot Cowrie) exposé mondialement sur un VPS distant. Cela m'a permis d'attirer les botnets et de capturer les méthodes des attaquants en direct, sans faire courir de risque à un système réel.",[16,406,407],{},"Pour traiter ces événements, j'ai construit un pipeline de données complet avec Filebeat et Logstash. Ce système collecte les logs bruts, les nettoie et les enrichit en temps réel, par exemple en géolocalisant les adresses IP malveillantes. L'intégralité de cette architecture a été conteneurisée avec Docker pour garantir une scalabilité parfaite et s'appuie sur la stack ELK, une référence incontournable sur le marché des SIEM bancaires.",[16,409,410],{},"Enfin, j'ai conçu l'interface d'analyse sur Kibana. Plutôt que de multiplier les graphiques inutiles, j'ai pris le parti de mapper chaque visualisation à un contrôle de sécurité précis exigé par le framework NIST 800-53. Ainsi, chaque tableau de bord répond à une problématique légale ou opérationnelle concrète, comme la surveillance réseau ou l'audit des comptes privilégiés ciblés.",[11,412,35],{"id":34},[16,414,415],{},"Ce projet m'a permis d'acquérir une maîtrise approfondie du cycle de vie de la donnée de sécurité (SIEM Engineering). J'ai pu expérimenter le cheminement complet d'un indicateur de compromission, de sa collecte à l'état brut lors d'une attaque jusqu'à sa restitution visuelle et son interprétation.",[16,417,418],{},"Sur le plan stratégique, j'ai assimilé le fait qu'une architecture technique n'a de véritable valeur que si elle sert les enjeux légaux d'une entreprise. Devoir justifier mes choix techniques par le prisme d'une norme internationale stricte (NIST\u002FFFIEC) m'a donné une vision beaucoup plus mature et \"business\" de la cybersécurité.",[16,420,421],{},"Enfin, j'ai considérablement renforcé mon autonomie et ma capacité d'adaptation. J'ai piloté l'ensemble de la chaîne, de l'administration serveur Linux à la configuration DNS, en passant par le debugging complexe des pipelines de données, tout en gérant le stress lié à l'exposition d'un serveur face à de véritables attaques du web.",{"title":46,"searchDepth":47,"depth":47,"links":423},[424,425,426],{"id":13,"depth":47,"text":14},{"id":24,"depth":47,"text":25},{"id":34,"depth":47,"text":35},"\u002Fimg\u002Fdashboard-soc-conformite-nist-cybersecurite.png","Honeypot Cowrie exposé sur VPS réel. Pipeline ELK complet (Filebeat → Logstash → Kibana) avec dashboards mappés sur les contrôles NIST 800-53. Données d'attaques réelles collectées et analysées.","https:\u002F\u002Fgithub.com\u002Faant-code\u002FSOC-Honeypot-Threat-Intelligence-ELK-Stack-",{},"Exposer un honeypot SSH réel et construire un pipeline de détection conforme NIST 800-53.",1,"\u002Fprojects\u002Fsoc-bancaire-elk","63 000 événements capturés, dashboards Kibana opérationnels, campagne de credential harvesting Solana identifiée.",{"title":392,"description":428},[437,438,439,440,441,442,443],"ELK Stack","Honeypot Cowrie","Docker","Filebeat","Logstash","Kibana","NIST 800-53","projects\u002Fsoc-bancaire-elk","E0vnPPig4VBDOooIkcGxzDdz-_afydGU8BuQL4L5f7Y",{"id":447,"title":448,"body":449,"category":52,"context":56,"cover":480,"date":56,"demo":56,"description":481,"duration":56,"extension":59,"featured":60,"github":482,"meta":483,"navigation":63,"objective":484,"order":65,"path":485,"result":486,"seo":487,"stack":488,"status":126,"stem":494,"__hash__":495},"projects\u002Fprojects\u002Fvideo-factory.md","Video Factory — Moteur d'automatisation de contenu vidéo",{"type":8,"value":450,"toc":475},[451,453,456,458,461,464,466,469,472],[11,452,14],{"id":13},[16,454,455],{},"Un entrepreneur avait mis en pause un projet thématique par simple manque de temps. Avec l'essor de l'IA, il a vu l'opportunité de le relancer en le développant via un nouveau canal d'acquisition : la création de vidéos. Le problème ? Écrire des scripts, générer des visuels et monter des vidéos reste extrêmement chronophage pour un emploi du temps déjà plein. Le défi était donc clair : concevoir un \"moteur\" autonome capable de gérer toute la chaîne de production, de la recherche à la vidéo finale, sans aucune charge mentale ou technique pour lui.",[11,457,25],{"id":24},[16,459,460],{},"J'ai abordé ce défi en concevant une véritable architecture en micro-services, orchestrée de A à Z par n8n (déployé via Docker). Le workflow pilote plusieurs agents autonomes : Google Gemini transforme une biographie ou idée brute en script narratif, Vertex AI (Imagen 3) stylise les visuels, ElevenLabs génère une voix-off engageante, et Templated.io produit les miniatures.",[16,462,463],{},"Pour l'assemblage final, j'ai implémenté FFmpeg directement au cœur du conteneur. Il compile automatiquement les assets générés : synchronisation de l'audio, animation d'une onde sonore réactive et incrustation des sous-titres. J'ai pensé le système pour être modulaire : le client peut faire évoluer ses modèles ou changer d'IA en quelques clics sans casser la chaîne.",[11,465,35],{"id":34},[16,467,468],{},"J'ai appris à traduire un besoin de croissance (lancer un canal vidéo sans y allouer de temps humain) en une solution technique fluide apportant une valeur business immédiate.",[16,470,471],{},"Penser \"micro-services\" dès la conception m'a appris à construire des systèmes robustes, maintenables et évolutifs sur le long terme.",[16,473,474],{},"J'ai consolidé mon expertise sur l'intégration complexe d'APIs hétérogènes, le déploiement Docker et le traitement vidéo programmatique (FFmpeg).",{"title":46,"searchDepth":47,"depth":47,"links":476},[477,478,479],{"id":13,"depth":47,"text":14},{"id":24,"depth":47,"text":25},{"id":34,"depth":47,"text":35},"\u002Fimg\u002Fvideo-factory-automation-pipeline-architecture-diagram.png","Moteur de production vidéo autonome pour un entrepreneur. Architecture micro-services orchestrée par n8n : script IA → visuels IA → voix-off IA → montage FFmpeg → publication. Cycle de production réduit de plusieurs heures à quelques minutes.","https:\u002F\u002Fgithub.com\u002Faant-code\u002Fn8n-video-factory",{},"Automatiser un cycle complet de production vidéo pour un client entrepreneur.","\u002Fprojects\u002Fvideo-factory","Pipeline micro-services livré, cycle de production de plusieurs heures réduit à quelques minutes.",{"title":448,"description":481},[489,439,490,491,492,493],"n8n","FFmpeg","Google Gemini","Vertex AI (Imagen 3)","ElevenLabs","projects\u002Fvideo-factory","zjNFfAmz9-kMyY22xvHk8coqGaPJQu6uGDRcJfbCUfQ",1774549538370]