[{"data":1,"prerenderedAt":494},["ShallowReactive",2],{"navigation":3,"index":26,"landing-projects":183,"mdc--o8wmtl-key":472,"mdc-wmg27r-key":485},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","/blog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"From Mockup to Market: My End-to-End Product Design Process","/blog/from-mockup-to-market","blog/from-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","/blog/how-i-built-my-own-design-system-from-scratch","blog/how-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"The Psychology of Color in UI Design","/blog/psychology-of-color-in-ui-design","blog/psychology-of-color-in-ui-design",{"title":22,"path":23,"stem":24},"The Case for Slow Design in a Fast-Paced Digital World","/blog/slow-design-in-fast-paced-digital-world","blog/slow-design-in-fast-paced-digital-world",false,{"id":27,"title":28,"about":29,"blog":32,"body":33,"description":37,"experience":138,"extension":146,"faq":147,"hero":157,"meta":173,"navigation":174,"path":175,"projects":176,"seo":179,"stem":180,"testimonials":181,"__hash__":182},"index/index.yml","Salut, je suis Ilyan Fraimbault",{"title":30,"description":31},"À propos","Passionné de backend et de frontend, je construis des APIs en ASP.NET et des interfaces web modernes (Vue/Angular). Après deux ans de projets encadrés, je suis maintenant en 3e année de BUT Informatique à Montpellier où j'alterne entre cours, projets d'équipe et missions en entreprise.\nJ'aime relier la technique au besoin métier : clarifier le problème, prototyper vite, livrer avec des tests et documenter pour l'équipe.\n",null,{"seo":34,"title":28,"description":37,"hero":38,"about":83,"experience":84,"projects":108,"testimonials":115,"faq":116},{"title":35,"description":36},"Ilyan Fraimbault - Développeur fullstack (BUT 3)","Portfolio Nuxt UI d'Ilyan Fraimbault, étudiant en 3e année de BUT Informatique à Montpellier. APIs ASP.NET, front Vue/Angular et projets personnels.","Développeur fullstack en 3e année de BUT Informatique à Montpellier. J'aime transformer des besoins métier en APIs fiables (ASP.NET) et en interfaces web claires (Vue/Angular).",{"links":39,"images":46},[40],{"label":41,"to":42,"icon":43,"color":44,"target":45},"Télécharger mon CV","/Fraimbault-CV.pdf","i-lucide-file-down","neutral","_blank",[47,50,53,56,59,62,65,68,71,74,77,80],{"src":48,"alt":49},"/icons/languages/c-sharp.png","Logo C#",{"src":51,"alt":52},"/icons/languages/c.png","Logo C",{"src":54,"alt":55},"/icons/languages/java.gif","Logo Java",{"src":57,"alt":58},"/icons/languages/javascript.gif","Logo JavaScript",{"src":60,"alt":61},"/icons/languages/typescript.png","Logo TypeScript",{"src":63,"alt":64},"/icons/languages/vue.png","Logo Vue.js",{"src":66,"alt":67},"/icons/languages/php.svg","Logo PHP",{"src":69,"alt":70},"/icons/languages/mysql.png","Logo MySQL",{"src":72,"alt":73},"/icons/languages/mongo-db.png","Logo MongoDB",{"src":75,"alt":76},"/icons/languages/python.gif","Logo Python",{"src":78,"alt":79},"/icons/languages/html5.png","Logo HTML5",{"src":81,"alt":82},"/icons/languages/css3.png","Logo CSS3",{"title":30,"description":31},{"title":85,"items":86},"Expériences professionnelles",[87,95,103],{"position":88,"date":89,"company":90},"Stage d'observation","Janvier 2019",{"name":91,"logo":92,"url":93,"color":94},"IBM Montpellier","/icons/ibm.png","https://www.ibm.com/fr-fr","#0f62fe",{"position":96,"date":97,"company":98},"Stage développeur web full stack","Juin – Août 2025",{"name":99,"logo":100,"url":101,"color":102},"EFICAD","/icons/eficad.png","https://www.eficad.com/","#0f766e",{"position":104,"date":105,"company":106},"Alternance développeur web full stack","Septembre 2025 – Août 2026",{"name":99,"logo":100,"url":101,"color":107},"#0ea5e9",{"title":109,"description":110,"links":111},"Projets personnels et SAE","Sélection de projets menés pendant le BUT et sur mon temps libre : APIs, outils web et expériences utilisateurs.",[112],{"label":113,"to":114,"color":44},"Voir tous les projets","/projects",[],{"title":117,"description":118,"categories":119},"Questions fréquentes","Quelques réponses rapides si vous voulez en savoir plus.",[120,129],{"title":121,"questions":122},"Parcours",[123,126],{"label":124,"content":125},"Es-tu en alternance ou en stage ?","Je suis en 3e année de BUT Informatique. Après un stage API chez EFICAD (juin-août 2025), je poursuis en alternance dans la même équipe jusqu'en août 2026.\n",{"label":127,"content":128},"Quels sujets te motivent le plus ?","Concevoir des APIs propres (ASP.NET), synchroniser des données entre services (Salesforce/Dynamics), et construire des interfaces claires en Vue ou Angular.\n",{"title":130,"questions":131},"Contact",[132,135],{"label":133,"content":134},"Comment te joindre ?","Le plus simple : un message LinkedIn. Vous pouvez aussi m'écrire à ilyan@fraimbault.com ou télécharger mon CV directement depuis la page d'accueil.\n",{"label":136,"content":137},"Disponible pour quels projets ?","Je suis ouvert aux missions web qui mixent backend .NET et frontend JavaScript/TypeScript, ainsi qu'aux collaborations open-source autour de Nuxt ou Angular.\n",{"title":85,"items":139},[140,142,144],{"position":88,"date":89,"company":141},{"name":91,"logo":92,"url":93,"color":94},{"position":96,"date":97,"company":143},{"name":99,"logo":100,"url":101,"color":102},{"position":104,"date":105,"company":145},{"name":99,"logo":100,"url":101,"color":107},"yml",{"title":117,"description":118,"categories":148},[149,153],{"title":121,"questions":150},[151,152],{"label":124,"content":125},{"label":127,"content":128},{"title":130,"questions":154},[155,156],{"label":133,"content":134},{"label":136,"content":137},{"links":158,"images":160},[159],{"label":41,"to":42,"icon":43,"color":44,"target":45},[161,162,163,164,165,166,167,168,169,170,171,172],{"src":48,"alt":49},{"src":51,"alt":52},{"src":54,"alt":55},{"src":57,"alt":58},{"src":60,"alt":61},{"src":63,"alt":64},{"src":66,"alt":67},{"src":69,"alt":70},{"src":72,"alt":73},{"src":75,"alt":76},{"src":78,"alt":79},{"src":81,"alt":82},{},true,"/",{"title":109,"description":110,"links":177},[178],{"label":113,"to":114,"color":44},{"title":35,"description":36},"index",[],"5O_aotHwbrwPjmFbxY1-cg0XPL_En0S42-ubo1qj3vs",[184,269,368],{"id":185,"title":186,"date":187,"description":188,"extension":146,"gallery":32,"highlights":189,"image":193,"imageCaption":194,"links":195,"meta":200,"sections":252,"slug":203,"stack":265,"stem":266,"tags":267,"url":201,"__hash__":268},"projects/projects/truemain.yml","TrueMain","2026-02-01T00:00:00.000Z","Projet personnel autour de League of Legends : agréger et fiabiliser les statistiques de champions des meilleurs joueurs (top OTP, mains uniques) afin de proposer des recommandations de builds basées sur les vraies pratiques pro/high-elo plutôt que sur des moyennes globales. Développé en solo depuis février 2026, c'est l'occasion de monter une stack moderne complète : .NET 10, ASP.NET Core, un Worker Service pour ingérer en continu l'API Riot Games, PostgreSQL via Entity Framework Core, et un front Nuxt 4. Le tout conteneurisé avec Docker pour un déploiement simple.",[190,191,192],"Architecture découpée : API ASP.NET Core (REST), Worker Service pour l'ingestion asynchrone et front Nuxt 4 pour la consultation.","Persistance PostgreSQL pilotée par Entity Framework Core (migrations, requêtes typées, indexation des matchs et builds).","Conteneurisation Docker (API, Worker, base) pour un environnement reproductible en dev comme en déploiement.","/images/projects/truemain/architecture.svg","Schéma d'architecture TrueMain : services externes (Riot API, DDragon CDN), bloc Docker Compose orchestrant le Worker .NET avec ses 7 processus, l'API ASP.NET Core en port 8080 (libs Core et Data partagées), PostgreSQL 17.2 et PgAdmin (dev/QA), et le frontend Nuxt 4 en port 3000 qui consomme l'API.",[196],{"label":197,"to":198,"icon":199,"target":45,"color":44},"Code source","https://github.com/ilyanfraimbault/TrueMain","i-lucide-github",{"path":201,"body":202},"/projects/truemain",{"slug":203,"title":186,"description":188,"image":193,"imageCaption":194,"url":201,"tags":204,"date":212,"stack":213,"links":216,"highlights":218,"sections":219},"truemain",[205,206,207,208,209,210,211],"League of Legends",".NET 10","ASP.NET Core","Worker Service","Nuxt 4","PostgreSQL","Docker","2026-02-01",[206,207,208,214,210,209,215,211],"Entity Framework Core","TypeScript",[217],{"label":197,"to":198,"icon":199,"target":45,"color":44},[190,191,192],[220,225,230,235,240,246],{"title":221,"items":222},"Backend ASP.NET Core",[223,224],"API REST pour exposer joueurs, champions, builds et statistiques agrégées.","Authentification et limites d'usage gérées proprement, documentation Swagger.",{"title":226,"items":227},"Worker Service d'ingestion",[228,229],"Consommation continue de l'API Riot Games avec respect des quotas (rate limiting).","Pipeline de mise à jour incrémentale des matchs et de calcul des statistiques par champion.",{"title":231,"items":232},"Front Nuxt 4",[233,234],"Pages de recherche de joueurs et de comparaison de builds par champion.","Composants typés en TypeScript, SSR pour le SEO.",{"title":236,"items":237},"Infrastructure",[238,239],"docker-compose pour orchestrer API + Worker + PostgreSQL.","Migrations EF Core versionnées et reproductibles.",{"title":241,"items":242},"Performance & rate limiting",[243,244,245],"Anticipation des quotas Riot Games (app rate limit + method rate limit) : mutualisation des appels, file d'attente, back-off exponentiel.","Estimation de la montée en charge sur l'ingestion : nombre de matchs / minute, taille moyenne du payload, capacité visée de la base.","Tableau de suivi des métriques d'ingestion (matchs traités/min, latence p95) pour piloter les ajustements.",{"title":247,"items":248},"Profilage & optimisation",[249,250,251],"Profilage des requêtes EF Core : analyse du SQL généré, ajout d'index ciblés (matchs par joueur, builds par champion).","Mise en cache mémoire des appels lecture les plus chauds pour absorber les pics de trafic front.","Justification documentée des choix d'optimisation dans le README technique.",[253,255,257,259,261,263],{"title":221,"items":254},[223,224],{"title":226,"items":256},[228,229],{"title":231,"items":258},[233,234],{"title":236,"items":260},[238,239],{"title":241,"items":262},[243,244,245],{"title":247,"items":264},[249,250,251],[206,207,208,214,210,209,215,211],"projects/truemain",[205,206,207,208,209,210,211],"pa3Jhjals00BO-jihONycY76P5Pn3MKPd2_DJ1X0NBU",{"id":270,"title":271,"date":272,"description":273,"extension":146,"gallery":274,"highlights":287,"image":291,"imageCaption":292,"links":293,"meta":299,"sections":351,"slug":301,"stack":364,"stem":365,"tags":366,"url":298,"__hash__":367},"projects/projects/cards-view.yml","Composant Cartes (Cards View)","2026-01-15T00:00:00.000Z","Composant d'interface développé en alternance chez EFICAD pour le SWOOD Report Viewer : un mode de visualisation \"cartes\" alternatif aux tableaux classiques. Chaque enregistrement (panneau, débit…) devient une carte composée de cellules configurables — l'utilisateur réorganise la grille par drag & drop, redimensionne les cellules, choisit le mode d'affichage de chaque champ (valeur, QR Code, code-barres) et insère des images. Conçu comme brique générique Angular / PrimeNG réutilisable dans les applications internes.",[275,279,283],{"src":276,"alt":277,"caption":278},"/images/projects/cards-view/edition-card-drag-n-drop.png","Éditeur de vue Card avec les cellules organisées dans la grille (drag & drop)","Édition d'une vue Card : organisation des cellules dans la grille par drag & drop et resize, barre d'outils en haut à droite pour les paramètres globaux, prévisualisation en temps réel.",{"src":280,"alt":281,"caption":282},"/images/projects/cards-view/personnalisation-cellule-card.png","Panneau de personnalisation d'une cellule avec libellé, taille et mode d'affichage","Personnalisation d'une cellule : libellé personnalisé, taille (Petit / Moyen / Grand), affichage du libellé (Afficher / Masquer / En ligne) et mode d'affichage de la valeur (Valeur / QR Code / Code-barres).",{"src":284,"alt":285,"caption":286},"/images/projects/cards-view/table-vue-default.png","Vue tableau par défaut de SWOOD à contraster avec la vue Card","Vue tableau par défaut de SWOOD Report Viewer (référence) : même donnée, format tabulaire dense. La vue Card cible les usages où le format visuel et le détail par enregistrement priment.",[288,289,290],"Drag & drop : réorganisation libre des cartes dans la grille avec retour visuel.","Redimensionnement des cellules pour adapter la mise en page au contenu.","Insertion d'images dans une cellule (upload, prévisualisation, ratio préservé).","/images/projects/cards-view/vue-card.png","Rendu final dans SWOOD Report Viewer : la \"Nouvelle vue Card\" affiche chaque panneau (Cabinet_Back, Cabinet_Front…) sous forme de carte avec ses propriétés agencées dans la grille configurée par l'utilisateur.",[294],{"label":295,"icon":296,"color":44,"variant":297,"to":298},"Projet alternance chez EFICAD","i-lucide-briefcase","subtle","/projects/cards-view",{"path":298,"body":300},{"slug":301,"title":271,"description":273,"image":291,"imageCaption":292,"gallery":302,"url":298,"tags":306,"date":311,"stack":312,"links":314,"highlights":316,"sections":317},"cards-view",[303,304,305],{"src":276,"alt":277,"caption":278},{"src":280,"alt":281,"caption":282},{"src":284,"alt":285,"caption":286},[307,308,215,309,310],"Angular","PrimeNG","Composant UI","Drag & drop","2026-01-15",[307,308,215,313],"SCSS",[315],{"label":295,"icon":296,"color":44,"variant":297,"to":298},[288,289,290],[318,323,329,334,340,346],{"title":319,"items":320},"Architecture du composant",[321,322],"Composant Angular standalone, configurable via inputs/outputs typés.","Surcouche autour de PrimeNG pour homogénéiser le rendu avec la design language EFICAD.",{"title":324,"items":325},"Interactions utilisateur",[326,327,328],"Drag & drop natif HTML5 encapsulé pour gérer les zones de drop, l'ordre et la persistance.","Poignées de resize sur chaque cellule avec contraintes min/max.","Gestion d'image dans une cellule : sélection, prévisualisation, fit cover/contain.",{"title":330,"items":331},"Réutilisabilité",[332,333],"Composant générique : la cellule accepte un slot personnalisé pour héberger n'importe quel contenu.","Documentation interne et exemples pour faciliter l'adoption par d'autres équipes.",{"title":335,"items":336},"Veille technologique préalable",[337,338,339],"Comparatif des bibliothèques drag & drop côté Angular : Angular CDK DragDrop, ngx-drag-drop, PrimeNG Draggable.","Évaluation sur 4 critères : intégration PrimeNG existante, contrôle fin du resize, gestion du contenu personnalisé, maintenance long terme.","Choix justifié documenté dans le README technique pour faciliter la décision côté revue de code.",{"title":341,"items":342},"Performance & profilage",[343,344,345],"Tests sur grilles denses (≥ 100 cartes) pour mesurer la fluidité du drag et du resize.","Profilage via Chrome DevTools Performance pour identifier les re-renders inutiles.","Optimisations ciblées : trackBy sur la liste, OnPush change detection, debounce sur le resize en cours.",{"title":347,"items":348},"Démarche & intégration équipe",[349,350],"Composant intégré au backlog équipe et présenté en démo de sprint pour valider l'API publique.","Itérations sur les retours des autres équipes utilisatrices avant figement de l'interface.",[352,354,356,358,360,362],{"title":319,"items":353},[321,322],{"title":324,"items":355},[326,327,328],{"title":330,"items":357},[332,333],{"title":335,"items":359},[337,338,339],{"title":341,"items":361},[343,344,345],{"title":347,"items":363},[349,350],[307,308,215,313],"projects/cards-view",[307,308,215,309,310],"Fuo3nRrxWqNkbIKVwmgTgevxTotPu3q2emFhNuw8HI8",{"id":369,"title":370,"date":371,"description":372,"extension":146,"gallery":373,"highlights":386,"image":390,"imageCaption":391,"links":392,"meta":396,"sections":455,"slug":398,"stack":468,"stem":469,"tags":470,"url":395,"__hash__":471},"projects/projects/uniflow.yml","Projet Entreprise - Uniflow","2025-07-01T00:00:00.000Z","Projet professionnel de data stewardship initié en stage chez EFICAD, puis poursuivi en alternance après validation en interne. L'application centralise la gouvernance des données clients entre EfiOPS (référentiel maître), Salesforce (CRM commercial) et Microsoft Dynamics 365 (CRM support/technique) afin de détecter automatiquement les incohérences, les prioriser et guider leur correction. Valeur pour l'entreprise : référentiels plus fiables, moins de ressaisie et une meilleure qualité de service.",[374,378,382],{"src":375,"alt":376,"caption":377},"/images/projects/eficad-uniflow/connexion-msal.png","Écran de connexion Uniflow avec authentification Microsoft (MSAL)","Connexion : authentification déléguée à Microsoft (MSAL) pour aligner Uniflow sur l'identité Azure AD utilisée chez EFICAD.",{"src":379,"alt":380,"caption":381},"/images/projects/eficad-uniflow/detection-erreur-cadware.png","Compte CADWARE avec erreurs critiques (identifiant invalide, identifiant manquant) et avertissement","Détail d'un compte avec erreurs critiques : identifiant Dynamics invalide (pointe vers un autre compte EfiOPS) et identifiant Dynamics manquant. La sévérité \"critique\" pousse l'action en haut de la pile.",{"src":383,"alt":384,"caption":385},"/images/projects/eficad-uniflow/vue-tri-panneaux.png","Vue tri-panneaux EfiOPS / Salesforce / Dynamics avec formulaires alignés et résultats de recherche","Vue tri-panneaux de synchronisation : EfiOPS comme source à gauche, Salesforce et Dynamics à droite avec recherche intégrée et résultats. Les champs alignés (Nom, Raison sociale, Adresse, Téléphone, Pays…) facilitent la détection visuelle des divergences et la propagation des identifiants Flex ID, Salesforce ID et Dynamics ID.",[387,388,389],"Vue d'audit consolidée pour suivre comptes sains, avertissements et erreurs critiques dans le référentiel EfiOPS/Salesforce/Dynamics.","Qualification fine des divergences par compte avec typage avertissement/critique, horodatage et rattachement au système concerné.","IHM tri-panneaux guidée pour rechercher, créer dans EfiOPS, aligner les champs et synchroniser les identifiants Flex ID, Salesforce ID et Dynamics ID.","/images/projects/eficad-uniflow/audit-comptes.png","Page d'accueil : audit global des comptes EfiOPS avec les indicateurs clés (erreurs critiques, avertissements, comptes sains). Cette vue sert de point d'entrée pour piloter la qualité des données.",[393],{"label":394,"icon":296,"color":44,"variant":297,"to":395},"Projet entreprise chez EfiCAD","/projects/uniflow",{"path":395,"body":397},{"slug":398,"title":370,"description":372,"image":390,"imageCaption":391,"gallery":399,"url":395,"tags":403,"date":410,"stack":411,"links":415,"highlights":417,"sections":418},"uniflow",[400,401,402],{"src":375,"alt":376,"caption":377},{"src":379,"alt":380,"caption":381},{"src":383,"alt":384,"caption":385},[404,405,406,407,408,409],"Data stewardship","CRM","Data quality","ASP.NET","Vue.js","Nuxt","2025-07-01",[412,407,408,413,414],"Entity Framework","Nuxt 3","MSAL (Microsoft Authentication)",[416],{"label":394,"icon":296,"color":44,"variant":297,"to":395},[387,388,389],[419,424,429,435,441,448],{"title":420,"items":421},"Audit global des comptes",[422,423],"Suivi consolidé : total des comptes analysés, sains, avertissements et erreurs critiques.","Distinction avertissement (écarts secondaires) vs erreurs critiques (identifiants manquants, liens obsolètes) pour prioriser les actions.",{"title":425,"items":426},"Détection et qualification par compte",[427,428],"Consolidation des données EfiOPS, Salesforce et Dynamics, comparaison sur le mapping inter-systèmes.","Typage avertissement/critique, horodatage et rattachement au système source pour la traçabilité.",{"title":430,"items":431},"Recherche et synchronisation tri-panneaux",[432,433,434],"Recherche multi-critères préremplie, création guidée dans EfiOPS en l'absence d'équivalent.","Affichage côte à côte des trois systèmes avec mise en évidence des divergences.","Propagation des identifiants Flex ID, Salesforce ID, Dynamics ID et alignement des champs.",{"title":436,"items":437},"Valeur ajoutée MDM",[438,439,440],"Pilotage qualité du référentiel clients/revendeurs et réduction des doublons.","Synchronisation fiable entre CRM pour limiter la ressaisie et les erreurs.","Fondations pour une gouvernance MDM durable.",{"title":442,"items":443},"Évolution du projet (POC stage → outil interne)",[444,445,446,447],"Démarré en stage (juin-août 2025) sous forme de POC pour démontrer la faisabilité de la consolidation EfiOPS / Salesforce / Dynamics.","Validé en interne en fin de stage : décision de pérenniser l'outil et de l'intégrer au quotidien des équipes.","Repris en alternance (septembre 2025) : refonte de l'authentification (MSAL Azure AD), enrichissement des règles de détection, ouverture progressive aux équipes commerciales et support.","Maintenu et déployé sur l'environnement interne EFICAD ; consulté quotidiennement pour piloter la qualité des données.",{"title":449,"items":450},"Démarche & méthodes de travail",[451,452,453,454],"Cycle agile aligné sur le rythme de l'équipe : sprints courts, démos fonctionnelles, rétrospectives régulières.","Mise en place d'une chaîne CI/CD pour automatiser le build et le déploiement des évolutions.","Sensibilisation des équipes commerciales et support à la qualité des données : démos ciblées, accompagnement à la lecture des erreurs critiques vs avertissements.","Authentification Azure AD via MSAL pour aligner Uniflow sur la politique d'identité interne.",[456,458,460,462,464,466],{"title":420,"items":457},[422,423],{"title":425,"items":459},[427,428],{"title":430,"items":461},[432,433,434],{"title":436,"items":463},[438,439,440],{"title":442,"items":465},[444,445,446,447],{"title":449,"items":467},[451,452,453,454],[412,407,408,413,414],"projects/uniflow",[404,405,406,407,408,409],"s33Io_2tOHxkaVxmrF-xaWc3LFc42kHup7-wQKGADhM",{"data":473,"body":474},{},{"type":475,"children":476},"root",[477],{"type":478,"tag":479,"props":480,"children":481},"element","p",{},[482],{"type":483,"value":484},"text","Je suis en 3e année de BUT Informatique. Après un stage API chez EFICAD (juin-août 2025), je poursuis en alternance dans la même équipe jusqu'en août 2026.",{"data":486,"body":487},{},{"type":475,"children":488},[489],{"type":478,"tag":479,"props":490,"children":491},{},[492],{"type":483,"value":493},"Concevoir des APIs propres (ASP.NET), synchroniser des données entre services (Salesforce/Dynamics), et construire des interfaces claires en Vue ou Angular.",1777818881763]