[{"data":1,"prerenderedAt":585},["ShallowReactive",2],{"page-\u002Fprojects\u002Fshifumi-fight-pokemon-edition":3,"projects":146,"technologies":171,"project-pages":244},{"id":4,"title":5,"body":6,"description":16,"extension":139,"meta":140,"navigation":141,"path":142,"seo":143,"stem":144,"__hash__":145},"content\u002Fprojects\u002Fshifumi-fight-pokemon-edition.md","Shifumi Fight Pokémon Edition",{"type":7,"value":8,"toc":132},"minimark",[9,13,17,26,31,35,39,63,82,113,124,128],[10,11,5],"h1",{"id":12},"shifumi-fight-pokémon-edition",[14,15,16],"p",{},"Refonte d'un projet d'école d'un jeu de Shifumi ... mais à la sauce Pokémon !",[18,19],"projects-simple-image",{":links":20,"alt":21,"src":22,"title":23,"url":24,"variant":25},"[{\"title\":\"https:\u002F\u002Fshifumi-fight.melvincourant.fr\u002F\",\"url\":\"https:\u002F\u002Fshifumi-fight.melvincourant.fr\u002F\",\"src\":\"\u002Ficons\u002Fwebsite.svg\"},{\"title\":\"Voir le code source sur Github\",\"url\":\"https:\u002F\u002Fgithub.com\u002FMelvinCourant\u002Fshifumi-fight-pokemon-edition\",\"src\":\"\u002Ficons\u002Fgithub.svg\"}]","Aperçu de Shifumi Fight","\u002Fprojects\u002Fshifumi-fight-pokemon-edition\u002Fcover.webp","Voir le projet en ligne","https:\u002F\u002Fshifumi-fight.melvincourant.fr\u002F","cover",[27,28,30],"h2",{"id":29},"stack-technique","Stack technique",[32,33],"projects-tech-stack",{":stack":34},"[\"Vue.js\",\"Pinia\",\"Vue Router\",\"Sass\",\"Figma\"]",[27,36,38],{"id":37},"pourquoi-jai-créé-ce-projet","Pourquoi j’ai créé ce projet ?",[14,40,41,42,46,47,50,51,54,55,58,59,62],{},"Ce projet a été développé initialement lors de ma ",[43,44,45],"strong",{},"licence professionnelle UX2i",". L’objectif était de créer un jeu de ",[43,48,49],{},"Shifumi"," (pierre, feuille, ciseaux) en ",[43,52,53],{},"HTML",", ",[43,56,57],{},"CSS"," et ",[43,60,61],{},"JavaScript",", où le joueur affronte le programme.",[14,64,65,66,69,70,73,74,77,78],{},"J’ai eu envie de le retravailler avec mes ",[43,67,68],{},"compétences actuelles"," et un ",[43,71,72],{},"visuel plus abouti",". En réfléchissant au concept de ",[43,75,76],{},"combat"," (comme l’indiquait déjà son nom), une idée m’est venue : ",[79,80,81],"em",{},"« Pourquoi ne pas en faire un combat Pokémon ? »",[14,83,84,85,88,89,92,93,96,97,100,101,104,105,108,109,112],{},"Les choix ",[43,86,87],{},"pierre\u002Ffeuille\u002Fciseaux"," sont devenus des ",[43,90,91],{},"attaques"," (avec le ",[43,94,95],{},"puits"," comme 4ème option), la ",[43,98,99],{},"boîte PC"," permet de sélectionner ",[43,102,103],{},"son personnage",", et le ",[43,106,107],{},"score"," est remplacé par des ",[43,110,111],{},"points de vie",".",[14,114,115,116,119,120,123],{},"J’ai trouvé l’idée ",[43,117,118],{},"cool et originale",", et en tant que ",[43,121,122],{},"fan de la licence",", j’ai pris beaucoup de plaisir à la concrétiser.",[27,125,127],{"id":126},"figma","Figma",[129,130],"projects-iframe-wrapper",{"src":131},"https:\u002F\u002Fembed.figma.com\u002Fdesign\u002FWGG26sMqz8u5Zyiq0S6OXs\u002FShifumi-Fight?embed-host=share",{"title":133,"searchDepth":134,"depth":134,"links":135},"",2,[136,137,138],{"id":29,"depth":134,"text":30},{"id":37,"depth":134,"text":38},{"id":126,"depth":134,"text":127},"md",{},true,"\u002Fprojects\u002Fshifumi-fight-pokemon-edition",{"title":5,"description":16},"projects\u002Fshifumi-fight-pokemon-edition","th0FkfG0JRFq4Muw1B3bWa1h6kmoRtVf6l4ZSULRTTE",{"id":147,"extension":148,"meta":149,"projects":150,"stem":169,"__hash__":170},"projects\u002Fprojects.yml","yml",{},[151,156,161,164],{"title":152,"image":153,"url":154,"color":155},"Globe Trotter","\u002Fprojects\u002Fglobe-trotter\u002Fglobe-trotter.webp","\u002Fprojects\u002Fglobe-trotter","red",{"title":157,"image":158,"url":159,"color":160},"Winmac OS","\u002Fprojects\u002Fwinmac-os\u002Fwinmac-os.webp","\u002Fprojects\u002Fwinmac-os","purple",{"title":5,"image":162,"url":142,"color":163},"\u002Fprojects\u002Fshifumi-fight-pokemon-edition\u002Fshifumi-fight.webp","yellow",{"title":165,"image":166,"url":167,"color":168},"La Suite and Co","\u002Fprojects\u002Fla-suite-and-co\u002Fla-suite-and-co.webp","\u002Fprojects\u002Fla-suite-and-co","green","projects","gda4vqbfQiMMO4Ej_57CouKpJT-rdzqyp9VZpxsjj9s",{"id":172,"extension":148,"meta":173,"stem":174,"technologies":175,"__hash__":243},"technologies\u002Ftechnologies.yml",{},"technologies",[176,182,187,192,198,203,208,213,218,223,228,233,238,241],{"name":177,"category":178,"src":179,"description":180,"color":181},"Vue.js","frontend","\u002Ficons\u002Fvuejs.svg","Pour en prendre plein la vue","#B4E4CF",{"name":61,"category":183,"src":184,"description":185,"color":186},"fullstack","\u002Ficons\u002Fjavascript.svg","Pour donner vie aux sites webs","#F7ECA1",{"name":127,"category":188,"src":189,"description":190,"color":191},"tools","\u002Ficons\u002Ffigma.svg","C'est l'heure du dasagn","#C699FF",{"name":193,"category":194,"src":195,"description":196,"color":197},"AdonisJS","backend","\u002Ficons\u002Fadonisjs.svg","Adieu Express, bonjour Adonis","#FAF2DE",{"name":199,"category":178,"src":200,"description":201,"color":202},"Sass","\u002Ficons\u002Fsass.svg","CSS c’est bien mais Sass c’est mieux","#E6B2CC",{"name":204,"category":194,"src":205,"description":206,"color":207},"PHP","\u002Ficons\u002Fphp.svg","Toujours vivant, toujours debout","#A7BAF1",{"name":209,"category":188,"src":210,"description":211,"color":212},"Wordpress","\u002Ficons\u002Fwordpress.svg","Les sites webs en express","#ABD8ED",{"name":214,"category":183,"src":215,"description":216,"color":217},"TypeScript","\u002Ficons\u002Ftypescript.svg","Du même type que le JS","#ADCBEB",{"name":219,"category":188,"src":220,"description":221,"color":222},"Git","\u002Ficons\u002Fgit.svg","Des branches à tout va","#F8AEA0",{"name":224,"category":194,"src":225,"description":226,"color":227},"Node.js","\u002Ficons\u002Fnodejs.svg","Le JS est aussi dans le back","#BFE1B7",{"name":229,"category":178,"src":230,"description":231,"color":232},"GSAP","\u002Ficons\u002Fgsap.svg","Animer n'importe quoi","#F2ECE1",{"name":234,"category":178,"src":235,"description":236,"color":237},"Pinia","\u002Ficons\u002Fpinia.svg","De quoi être dans tous ses états","#FFE299",{"name":239,"category":178,"src":240,"color":197,"description":133},"Mapbox","\u002Ficons\u002Fmapbox.svg",{"name":242,"category":178,"src":179,"color":181},"Vue Router","Zti13z0-q78VdhTPLmf6tOG8Dv4HXFZhRU-7uJCOFlU",[245,314,434,504],{"id":246,"title":152,"body":247,"description":254,"extension":139,"meta":310,"navigation":141,"path":154,"seo":311,"stem":312,"__hash__":313},"content\u002Fprojects\u002Fglobe-trotter.md",{"type":7,"value":248,"toc":305},[249,252,255,261,263,266,268,289,295,300,302],[10,250,152],{"id":251},"globe-trotter",[14,253,254],{},"Globe Trotter est un site web qui vous permet de cartographier vos voyages de manière interactive et de les partager avec d’autres personnes",[18,256],{":links":257,"alt":258,"src":259,"title":23,"url":260,"variant":25},"[{\"url\":\"https:\u002F\u002Fglobe-trotter.tech\u002Fshared\u002Fb0fc994e-18ae-4506-9c01-6200df29c807\",\"title\":\"Voir le projet en ligne\",\"src\":\"\u002Ficons\u002Fwebsite.svg\"},{\"url\":\"https:\u002F\u002Fgithub.com\u002FMelvinCourant\u002Fglobe-trotter\",\"title\":\"Voir le code source sur Github\",\"src\":\"\u002Ficons\u002Fgithub.svg\"}]","Aperçu de Globe Trotter","\u002Fprojects\u002Fglobe-trotter\u002Fcover.webp","https:\u002F\u002Fglobe-trotter.tech\u002Fshared\u002Fb0fc994e-18ae-4506-9c01-6200df29c807",[27,262,30],{"id":29},[32,264],{":stack":265},"[\"Vue.js\",\"Sass\",\"AdonisJS\",\"TypeScript\",\"Mapbox\",\"Figma\"]",[27,267,38],{"id":37},[14,269,270,271,274,275,278,279,285,286],{},"L’idée m’est venue lors des derniers jours de mon voyage en ",[43,272,273],{},"Amazonie",". J’ai entendu une conversation entre mes compagnons de voyage : à leur retour, ils comptaient ajouter cette aventure à leurs ",[43,276,277],{},"cartes en liège",". En les entendant, je me suis dit : ",[79,280,281,282],{},"« Mais pourquoi ne ",[43,283,284],{},"développerais-je"," ",[79,287,288],{},"pas ce concept ? »",[14,290,291,292,112],{},"Avant de partir, je cherchais justement un projet qui me correspondrait et que je pourrais utiliser moi-même. Ce fut une révélation : j’avais trouvé ",[43,293,294],{},"le projet idéal",[14,296,297],{},[43,298,299],{},"J’ai donc décidé de le concrétiser pour transformer les souvenirs de voyage en quelque chose de tangible et partageable.",[27,301,127],{"id":126},[129,303],{"src":304},"https:\u002F\u002Fembed.figma.com\u002Fdesign\u002FXNRcQHb9SSIhCU8Mciy49q\u002FGlobe-trotter?embed-host=share",{"title":133,"searchDepth":134,"depth":134,"links":306},[307,308,309],{"id":29,"depth":134,"text":30},{"id":37,"depth":134,"text":38},{"id":126,"depth":134,"text":127},{},{"title":152,"description":254},"projects\u002Fglobe-trotter","PkX7dV-5hno9APyBlxbB3Ta0Qeu5TiGEO8_Nq5i3f64",{"id":315,"title":165,"body":316,"description":323,"extension":139,"meta":429,"navigation":141,"path":167,"seo":430,"stem":432,"__hash__":433},"content\u002Fprojects\u002Fla-suite-and-co.md",{"type":7,"value":317,"toc":425},[318,321,324,330,332,335,339,361,392,407,412,417,420],[10,319,165],{"id":320},"la-suite-and-co",[14,322,323],{},"Refonte du site vitrine pour l’agence de communication qui m’emploie",[18,325],{":links":326,"alt":327,"src":328,"title":23,"url":329,"variant":25},"[{\"url\":\"https:\u002F\u002Fwww.lasuiteandco.com\u002F\",\"title\":\"Voir le projet en ligne\",\"src\":\"\u002Ficons\u002Fwebsite.svg\"}]","Aperçu de La Suite and Co","\u002Fprojects\u002Fla-suite-and-co\u002Fcover.webp","https:\u002F\u002Fwww.lasuiteandco.com\u002F",[27,331,30],{"id":29},[32,333],{":stack":334},"[\"Wordpress\",\"Sass\",\"JavaScript\",\"GSAP\"]",[27,336,338],{"id":337},"pourquoi-cette-refonte","Pourquoi cette refonte ?",[14,340,341,342,345,346,349,350,353,354,357,358,112],{},"Ce projet a démarré peu après mon ",[43,343,344],{},"arrivée chez La Suite and Co"," pour mon ",[43,347,348],{},"alternance",". À l’origine, le site était développé sur une ",[43,351,352],{},"ancienne version de Nuxt",", et l’agence souhaitait migrer vers ",[43,355,356],{},"WordPress"," pour ",[43,359,360],{},"simplifier la gestion de contenu",[14,362,363,364,367,368,371,372,375,376,379,380,383,384,387,388,391],{},"En collaboration avec le ",[43,365,366],{},"directeur artistique associé",", nous avons ",[43,369,370],{},"repensé le site"," pour conserver un ",[43,373,374],{},"effet WOW"," au niveau du ",[43,377,378],{},"visuel"," et des ",[43,381,382],{},"animations",", tout en ",[43,385,386],{},"optimisant la création de contenu"," via le ",[43,389,390],{},"back-office"," (ACF\u002FGutenberg).",[14,393,394,395,398,399,402,403,406],{},"Depuis, je m’occupe de la ",[43,396,397],{},"maintenance du site"," et mets à jour ",[43,400,401],{},"plusieurs fois par an"," le ",[43,404,405],{},"hero"," de la page d’accueil.",[408,409],"video",{":autoplay":410,":controls":410,":loop":410,":muted":410,"src":411},"true","\u002Fprojects\u002Fla-suite-and-co\u002Fvoeux-2025.mp4",[14,413,414],{},[79,415,416],{},"Vœux 2025",[408,418],{":autoplay":410,":controls":410,":loop":410,":muted":410,"src":419},"\u002Fprojects\u002Fla-suite-and-co\u002Fheader-2025.mp4",[14,421,422],{},[79,423,424],{},"Header 2025",{"title":133,"searchDepth":134,"depth":134,"links":426},[427,428],{"id":29,"depth":134,"text":30},{"id":337,"depth":134,"text":338},{},{"title":165,"description":431},"Développement du site vitrine pour l’agence de communication qui m’emploie","projects\u002Fla-suite-and-co","aJCjDzsFIE8H5bp02hTBCrFqvOY3lbKSBqwUaZeVI_c",{"id":4,"title":5,"body":435,"description":16,"extension":139,"meta":502,"navigation":141,"path":142,"seo":503,"stem":144,"__hash__":145},{"type":7,"value":436,"toc":497},[437,439,441,443,445,447,449,461,471,487,493,495],[10,438,5],{"id":12},[14,440,16],{},[18,442],{":links":20,"alt":21,"src":22,"title":23,"url":24,"variant":25},[27,444,30],{"id":29},[32,446],{":stack":34},[27,448,38],{"id":37},[14,450,41,451,46,453,50,455,54,457,58,459,62],{},[43,452,45],{},[43,454,49],{},[43,456,53],{},[43,458,57],{},[43,460,61],{},[14,462,65,463,69,465,73,467,77,469],{},[43,464,68],{},[43,466,72],{},[43,468,76],{},[79,470,81],{},[14,472,84,473,88,475,92,477,96,479,100,481,104,483,108,485,112],{},[43,474,87],{},[43,476,91],{},[43,478,95],{},[43,480,99],{},[43,482,103],{},[43,484,107],{},[43,486,111],{},[14,488,115,489,119,491,123],{},[43,490,118],{},[43,492,122],{},[27,494,127],{"id":126},[129,496],{"src":131},{"title":133,"searchDepth":134,"depth":134,"links":498},[499,500,501],{"id":29,"depth":134,"text":30},{"id":37,"depth":134,"text":38},{"id":126,"depth":134,"text":127},{},{"title":5,"description":16},{"id":505,"title":157,"body":506,"description":513,"extension":139,"meta":581,"navigation":141,"path":159,"seo":582,"stem":583,"__hash__":584},"content\u002Fprojects\u002Fwinmac-os.md",{"type":7,"value":507,"toc":576},[508,511,514,520,522,525,527,552,566,571,573],[10,509,157],{"id":510},"winmac-os",[14,512,513],{},"Développement d’un mini OS dans un navigateur, basé sur un projet d’école",[18,515],{":links":516,"alt":517,"src":518,"title":23,"url":519,"variant":25},"[{\"title\":\"Voir le projet en ligne\",\"url\":\"https:\u002F\u002Fwinmac-os.melvincourant.fr\u002F\",\"src\":\"\u002Ficons\u002Fwebsite.svg\"},{\"title\":\"Voir le code source sur Github\",\"url\":\"https:\u002F\u002Fgithub.com\u002FMelvinCourant\u002Fwinmac-os\",\"src\":\"\u002Ficons\u002Fgithub.svg\"}]","Aperçu de WInmac OS","\u002Fprojects\u002Fwinmac-os\u002Fcover.webp","https:\u002F\u002Fwinmac-os.melvincourant.fr\u002F",[27,521,30],{"id":29},[32,523],{":stack":524},"[\"Vue.js\",\"Pinia\",\"Sass\",\"Figma\"]",[27,526,38],{"id":37},[14,528,529,530,533,534,536,537,540,541,544,545,548,549,112],{},"Ce projet était à l’origine un ",[43,531,532],{},"rendu"," pour le cours de ",[43,535,61],{}," de mon ",[43,538,539],{},"Master en Ingénierie du Web",". L’objectif ? Créer un ",[43,542,543],{},"mini OS"," fonctionnant dans un navigateur web, développé uniquement en ",[43,546,547],{},"JavaScript natif"," et avec l’aide des ",[43,550,551],{},"API web",[14,553,554,555,558,559,562,563,112],{},"Passionné par ce projet à l’époque, j’y avais investi beaucoup de temps. Aujourd’hui, j’ai décidé de le ",[43,556,557],{},"moderniser"," en y intégrant les ",[43,560,561],{},"compétences"," acquises depuis, ainsi que de ",[43,564,565],{},"nouvelles fonctionnalités",[14,567,568],{},[43,569,570],{},"J’ai ainsi donné une seconde vie à ce projet, en faisant une version plus complète et personnelle.",[27,572,127],{"id":126},[129,574],{"src":575},"https:\u002F\u002Fembed.figma.com\u002Fdesign\u002FNvPyrH0JzTdilwat9QkepY\u002FWinmac-OS?embed-host=share",{"title":133,"searchDepth":134,"depth":134,"links":577},[578,579,580],{"id":29,"depth":134,"text":30},{"id":37,"depth":134,"text":38},{"id":126,"depth":134,"text":127},{},{"title":157,"description":513},"projects\u002Fwinmac-os","bRQ_Enk3-awr3Hz-3DSXkQKyIZPc760DTRCOvClUdyM",1782230217457]