[{"data":1,"prerenderedAt":527},["ShallowReactive",2],{"navigation":3,"index":14,"index-blogs":147,"mdc--lfhyl3-key":497,"mdc-mmu89o-key":509,"mdc-mwsvtw-key":518},[4],{"title":5,"path":6,"stem":7,"children":8,"page":13},"Blog","\u002Fblog","blog",[9],{"title":10,"path":11,"stem":12},"Pourquoi j'ai créé mon portfolio avec Nuxt 4","\u002Fblog\u002Fpourquoi-jai-cree-mon-portfolio-avec-nuxt-4","blog\u002Fpourquoi-jai-cree-mon-portfolio-avec-nuxt-4",false,{"id":15,"title":16,"about":17,"blog":20,"body":23,"description":24,"experience":25,"extension":60,"faq":61,"hero":100,"meta":131,"navigation":132,"path":133,"seo":134,"stem":137,"testimonials":138,"__hash__":146},"index\u002Findex.yml","Bryan Tank • Développeur web front-end & back-end",{"title":18,"description":19},"À propos de moi","Je m'appelle Bryan Tank, j'ai 18 ans. Je suis passionné par le développement web et par la création de projets concrets, utiles et bien construits.\n\nJe travaille principalement sur des projets front-end et full-stack, avec un intérêt particulier pour JavaScript, Vue.js et Node.js. J'aime autant réfléchir à l'interface qu'à la logique derrière une application, en accordant de l'importance à la structure du code, à l'expérience utilisateur et à la cohérence globale du projet.\n\nAujourd'hui, je cherche à continuer à progresser à travers des projets sérieux, des collaborations et des opportunités qui me permettent de renforcer mes compétences techniques.\n",{"title":21,"description":22},"Derniers articles","Je partage ici mes réflexions, mes apprentissages et mes retours d'expérience autour du développement web, des outils modernes et de la création de projets.",null,"Je conçois et développe des sites et applications web modernes, avec un focus sur la clarté, la performance et l'expérience utilisateur.",{"title":26,"items":27},"Expérience professionnelle",[28,36,44,52],{"position":29,"date":30,"company":31},"Année","Actuellement",{"name":32,"logo":33,"url":34,"color":35},"sabbatique","material-symbols:pause-presentation-outline-rounded","#","#dc6a00",{"position":37,"date":38,"company":39},"Développeur web à la ","Stage d'été 2025",{"name":40,"logo":41,"url":42,"color":43},"FHVI","material-symbols:health-metrics-outline-rounded","https:\u002F\u002Ffhvi.ch","#00DC82",{"position":45,"date":46,"company":47},"Étudiant informatique à l'","2022 - 2025",{"name":48,"logo":49,"url":50,"color":51},"EMF","material-symbols:computer-outline-rounded","https:\u002F\u002Femf.ch","#FF6363",{"position":53,"date":54,"company":55},"Étudiant au","2019 - 2022",{"name":56,"logo":57,"url":58,"color":59},"Cycle d'orientation","material-symbols:school-outline-rounded","https:\u002F\u002Fcov.ch","#5E6AD2","yml",{"title":62,"description":63,"categories":64},"FAQ","Voici quelques réponses aux questions qu'on peut se poser sur mon profil, ma manière de travailler et les types de projets qui m'intéressent.",[65,77,89],{"title":66,"questions":67},"Projets",[68,71,74],{"label":69,"content":70},"Quels types de projets réalises-tu ?","Je travaille principalement sur des projets web : sites vitrines, interfaces front-end, applications web et projets full-stack. J'aime développer des solutions modernes, claires et utiles, avec une attention particulière portée à l'interface, à la logique et à la qualité globale du produit.\n",{"label":72,"content":73},"Quelles technologies utilises-tu ?","Je travaille surtout avec JavaScript, et je m'intéresse particulièrement à Vue.js pour le front-end ainsi qu'à Node.js pour le back-end.\n",{"label":75,"content":76},"Peux-tu reprendre ou améliorer un projet existant ?","Oui, selon l'état du projet. Je peux analyser une base existante, corriger certains points, améliorer l'interface, restructurer une partie du code ou ajouter de nouvelles fonctionnalités si le projet est exploitable.\n",{"title":78,"questions":79},"Méthode de travail",[80,83,86],{"label":81,"content":82},"Comment travailles-tu sur un projet ?","Je commence par comprendre le besoin, les objectifs et les contraintes techniques. Ensuite, je structure la solution, je développe progressivement, puis j'améliore le résultat en portant attention à la lisibilité du code, à la cohérence de l'interface et à l'expérience utilisateur.\n",{"label":84,"content":85},"Qu'est-ce qui est important pour toi dans un projet ?","Pour moi, un bon projet ne doit pas seulement fonctionner. Il doit aussi être clair, cohérent, agréable à utiliser et suffisamment propre pour pouvoir évoluer dans le temps.\n",{"label":87,"content":88},"Es-tu ouvert à des collaborations ou opportunités ?","Oui. Je suis intéressé par les projets sérieux, les collaborations, les expériences professionnalisantes et les opportunités qui me permettent de progresser techniquement.\n",{"title":18,"questions":90},[91,94,97],{"label":92,"content":93},"Pourquoi le développement web ?","J'aime le développement web parce qu'il permet de transformer rapidement une idée en produit concret. C'est un domaine où l'on peut travailler à la fois sur l'aspect visuel, la logique, l'interaction et l'utilité réelle d'un projet.\n",{"label":95,"content":96},"Qu'est-ce que tu cherches à améliorer en continu ?","Je cherche toujours à progresser sur la structure de mes projets, la qualité de mon code, la compréhension des bonnes pratiques et ma capacité à construire des applications plus solides, plus propres et plus maintenables.\n",{"label":98,"content":99},"Que fais-tu en dehors du développement ?","En dehors de l'informatique, je m'intéresse aussi au fitness, à la découverte de nouvelles technologies et au fait de travailler sur des idées personnelles qui me permettent d'apprendre en pratique.\n",{"links":101,"images":106},[102],{"label":103,"to":104,"color":105},"Voir mes projets","\u002Fprojects","neutral",[107,110,113,116,119,122,125,128],{"src":108,"alt":109},"\u002Fhero\u002Fvuejs-logo.svg","Vue.js Logo",{"src":111,"alt":112},"\u002Fhero\u002Fnode-logo.svg","Node.js Logo",{"src":114,"alt":115},"\u002Fhero\u002Fnuxt-logo.svg","Nuxt.js Logo",{"src":117,"alt":118},"\u002Fhero\u002Ftailwind-logo.svg","Tailwind CSS Logo",{"src":120,"alt":121},"\u002Fhero\u002Fpython-logo.svg","Python Logo",{"src":123,"alt":124},"\u002Fhero\u002Fjava-logo.svg","Java Logo",{"src":126,"alt":127},"\u002Fhero\u002Flinux-logo.svg","Linux Logo",{"src":129,"alt":130},"\u002Fhero\u002Fmysql-logo.svg","MySQL Logo",{},true,"\u002F",{"title":135,"description":136},"Développeur Web Front-end & Back-end","Portfolio officiel de Bryan Tank, développeur web front-end et back-end. Projets web, JavaScript, Vue.js, Nuxt, Node.js et applications sur mesure.","index",[139],{"quote":140,"author":141},"Bryan a réalisé un excellent travail sur mon outil de gestion de commandes. Il a su être rapide, efficace et impliqué tout au long du projet. Il en assure encore aujourd'hui la maintenance avec sérieux, tout en proposant des tarifs accessibles. C'est un outil qui a été fait complètement sur mesure pour me permettre d'être plus efficace, et je suis très satisfait du résultat. Je recommande vivement Bryan pour tout projet de développement web, que ce soit pour une création complète ou pour améliorer un projet existant.",{"name":142,"description":143,"avatar":144},"Jacques Hauser","Tea Room - Boulangerie & Pâtisserie",{"src":145,"srcset":145},"\u002Fimg\u002Ftestimonials\u002Fjacqueshauser.jpg","Sk9VWzXTH-pIzRpUOvDlwHcLtG9jMkXDWITWMkYKYlw",[148],{"id":149,"title":10,"author":150,"body":154,"date":489,"description":490,"extension":491,"image":492,"meta":493,"minRead":494,"navigation":132,"path":11,"seo":495,"stem":12,"__hash__":496},"blog\u002Fblog\u002Fpourquoi-jai-cree-mon-portfolio-avec-nuxt-4.md",{"name":151,"avatar":152},"Bryan Tank",{"src":153,"alt":151},".\u002Fimg\u002Fpfp.webp",{"type":155,"value":156,"toc":474},"minimark",[157,161,165,173,178,181,184,209,212,216,219,222,225,228,232,239,247,250,253,257,260,263,266,292,295,298,302,305,308,311,314,318,324,327,330,333,336,340,343,346,349,352,355,359,362,365,368,371,375,378,381,413,416,419,423,426,429,452,455,458,462,465,468,471],[158,159,10],"h1",{"id":160},"pourquoi-jai-créé-mon-portfolio-avec-nuxt-4",[162,163,164],"p",{},"Créer un portfolio, ce n’est pas seulement mettre quelques projets sur une page avec un bouton de contact. Pour moi, c’est aussi une façon de montrer ma manière de travailler, mes choix techniques, mon identité de développeur et ma capacité à construire quelque chose de propre, moderne et maintenable.",[162,166,167,168,172],{},"J’ai donc choisi de créer mon portfolio avec ",[169,170,171],"strong",{},"Nuxt 4",", un framework basé sur Vue.js, parce qu’il correspond très bien à ma façon de développer et aux objectifs que j’avais pour ce projet.",[174,175,177],"h2",{"id":176},"un-portfolio-mais-aussi-un-vrai-projet-web","Un portfolio, mais aussi un vrai projet web",[162,179,180],{},"Mon portfolio n’est pas simplement une carte de visite en ligne. C’est un projet que je veux pouvoir faire évoluer dans le temps.",[162,182,183],{},"Je voulais une base solide pour ajouter facilement :",[185,186,187,191,194,197,200,203,206],"ul",{},[188,189,190],"li",{},"de nouveaux projets ;",[188,192,193],{},"des articles de blog ;",[188,195,196],{},"des pages personnalisées ;",[188,198,199],{},"des optimisations SEO ;",[188,201,202],{},"des animations ;",[188,204,205],{},"du contenu structuré ;",[188,207,208],{},"et potentiellement d’autres fonctionnalités plus tard.",[162,210,211],{},"Avec Nuxt, je peux construire un site qui reste simple côté utilisateur, mais qui garde une vraie structure professionnelle côté développement.",[174,213,215],{"id":214},"pourquoi-nuxt-plutôt-quun-simple-htmlcss","Pourquoi Nuxt plutôt qu’un simple HTML\u002FCSS ?",[162,217,218],{},"J’aurais pu faire un portfolio très simple en HTML, CSS et JavaScript classique. Pour un petit site statique, ça aurait pu suffire.",[162,220,221],{},"Mais je voulais quelque chose de plus évolutif.",[162,223,224],{},"Nuxt me permet d’avoir une meilleure organisation du projet, avec une séparation claire entre les pages, les composants, les layouts et le contenu. C’est beaucoup plus agréable à maintenir qu’un site composé de fichiers HTML séparés.",[162,226,227],{},"Par exemple, si je veux modifier le design d’une section ou réutiliser un composant sur plusieurs pages, je peux le faire proprement sans devoir copier-coller du code partout.",[174,229,231],{"id":230},"vuejs-un-framework-que-jaime-utiliser","Vue.js : un framework que j’aime utiliser",[162,233,234,235,238],{},"Une des raisons principales de mon choix, c’est que Nuxt est basé sur ",[169,236,237],{},"Vue.js",".",[162,240,241,242,246],{},"J’aime Vue parce que sa syntaxe est claire, lisible et agréable à utiliser. La séparation entre le template, le script et le style dans les composants ",[243,244,245],"code",{},".vue"," rend le code facile à comprendre, même lorsqu’un projet commence à devenir plus complet.",[162,248,249],{},"Pour un portfolio personnel, c’est important : je veux pouvoir revenir sur mon code dans plusieurs semaines ou plusieurs mois et comprendre rapidement comment tout fonctionne.",[162,251,252],{},"Avec Vue et Nuxt, je peux créer des composants propres pour mes boutons, mes cartes de projets, mes sections, mon header, mon footer ou encore mes blocs de contenu.",[174,254,256],{"id":255},"nuxt-4-pour-le-seo","Nuxt 4 pour le SEO",[162,258,259],{},"Le SEO est un point très important pour moi.",[162,261,262],{},"Un portfolio ne sert pas à grand-chose s’il est invisible sur Google. Je veux que mon site puisse ressortir correctement lorsqu’on recherche mon nom ou mon activité.",[162,264,265],{},"Nuxt est intéressant pour ça, car il permet de gérer proprement les balises importantes comme :",[185,267,268,271,274,277,280,283,286],{},[188,269,270],{},"le titre des pages ;",[188,272,273],{},"les descriptions ;",[188,275,276],{},"les balises Open Graph ;",[188,278,279],{},"les URLs canoniques ;",[188,281,282],{},"les données structurées ;",[188,284,285],{},"le sitemap ;",[188,287,288,289,238],{},"le fichier ",[243,290,291],{},"robots.txt",[162,293,294],{},"Avec une bonne configuration, Nuxt permet de construire un site plus propre pour les moteurs de recherche qu’une simple application front-end mal optimisée.",[162,296,297],{},"C’est aussi pour cette raison que j’ai voulu éviter un portfolio uniquement basé sur du rendu côté client. Je voulais une structure plus sérieuse, plus lisible et plus adaptée à l’indexation.",[174,299,301],{"id":300},"une-meilleure-expérience-développeur","Une meilleure expérience développeur",[162,303,304],{},"Nuxt offre une très bonne expérience de développement.",[162,306,307],{},"Le système de routing automatique, les composants auto-importés, la gestion des layouts et l’intégration avec les modules rendent le développement plus fluide.",[162,309,310],{},"Au lieu de perdre du temps à configurer chaque détail manuellement, je peux me concentrer sur le contenu, le design et la qualité du site.",[162,312,313],{},"C’est exactement ce que je cherchais : un outil moderne qui me permet d’aller vite, tout en gardant une base propre.",[174,315,317],{"id":316},"nuxt-content-pour-gérer-mon-blog","Nuxt Content pour gérer mon blog",[162,319,320,321,238],{},"Un autre point qui m’a poussé vers Nuxt, c’est la possibilité d’utiliser ",[169,322,323],{},"Nuxt Content",[162,325,326],{},"Grâce à Nuxt Content, je peux écrire mes articles en Markdown, avec un front matter contenant les informations importantes comme le titre, la description, la date, l’image ou l’auteur.",[162,328,329],{},"C’est pratique, parce que je peux gérer mon blog directement dans mon projet, sans avoir besoin d’un CMS lourd ou d’une interface compliquée.",[162,331,332],{},"Chaque article devient simplement un fichier Markdown, facile à modifier, versionner et publier.",[162,334,335],{},"Pour un portfolio de développeur, je trouve que c’est une solution très cohérente.",[174,337,339],{"id":338},"un-site-performant-et-moderne","Un site performant et moderne",[162,341,342],{},"La performance est aussi un point important.",[162,344,345],{},"Un portfolio doit charger rapidement, surtout si quelqu’un le consulte depuis un téléphone ou une connexion moyenne. Si le site est lent, l’expérience utilisateur devient mauvaise et ça peut donner une impression peu professionnelle.",[162,347,348],{},"Avec Nuxt, je peux optimiser le rendu, les images, les assets, les pages et la génération du site. Cela permet d’obtenir un résultat plus rapide et plus propre qu’un projet mal structuré.",[162,350,351],{},"Évidemment, Nuxt ne rend pas automatiquement un site parfait. Il faut quand même faire attention aux images trop lourdes, aux scripts inutiles, au lazy loading, au cache et à la configuration du serveur.",[162,353,354],{},"Mais Nuxt donne une très bonne base pour construire un site performant.",[174,356,358],{"id":357},"un-choix-cohérent-avec-mon-profil","Un choix cohérent avec mon profil",[162,360,361],{},"Mon portfolio doit aussi refléter mon profil de développeur web.",[162,363,364],{},"Comme je m’intéresse au développement front-end, au back-end, aux outils modernes et à la création de projets complets, utiliser Nuxt a du sens.",[162,366,367],{},"Ce choix montre que je ne me contente pas d’un simple site statique basique. Je cherche à utiliser des technologies actuelles, à comprendre leur fonctionnement et à construire quelque chose de sérieux.",[162,369,370],{},"C’est aussi une manière de pratiquer davantage avec Vue, Nuxt, le SEO, le déploiement, la structure de projet et la maintenance d’un vrai site en production.",[174,372,374],{"id":373},"les-difficultés-rencontrées","Les difficultés rencontrées",[162,376,377],{},"Tout n’a pas été parfait.",[162,379,380],{},"Créer un portfolio avec Nuxt demande aussi de comprendre certains aspects techniques :",[185,382,383,386,389,392,395,398,401,404,407,410],{},[188,384,385],{},"la configuration du projet ;",[188,387,388],{},"le comportement du build ;",[188,390,391],{},"le fonctionnement de Nitro ;",[188,393,394],{},"la gestion du contenu ;",[188,396,397],{},"le SEO ;",[188,399,400],{},"le déploiement ;",[188,402,403],{},"les fichiers générés ;",[188,405,406],{},"le cache ;",[188,408,409],{},"les erreurs liées aux assets ;",[188,411,412],{},"et parfois les problèmes spécifiques à l’environnement de développement.",[162,414,415],{},"Mais ces difficultés font aussi partie de l’apprentissage.",[162,417,418],{},"Un portfolio n’est pas seulement le résultat final visible par les visiteurs. C’est aussi tout le travail invisible derrière : les choix techniques, les problèmes corrigés, les optimisations et les améliorations progressives.",[174,420,422],{"id":421},"ce-que-ce-projet-mapporte","Ce que ce projet m’apporte",[162,424,425],{},"Ce portfolio me permet de centraliser mon identité professionnelle sur le web.",[162,427,428],{},"Il me sert à présenter :",[185,430,431,434,437,440,443,446,449],{},[188,432,433],{},"qui je suis ;",[188,435,436],{},"ce que je sais faire ;",[188,438,439],{},"les technologies que j’utilise ;",[188,441,442],{},"mes projets ;",[188,444,445],{},"mes expériences ;",[188,447,448],{},"mes réflexions ;",[188,450,451],{},"et mon évolution en tant que développeur.",[162,453,454],{},"C’est aussi un support que je peux envoyer à une entreprise, à un recruteur ou à une personne intéressée par mon travail.",[162,456,457],{},"Au lieu d’avoir seulement un CV classique, j’ai un espace personnel que je contrôle entièrement.",[174,459,461],{"id":460},"conclusion","Conclusion",[162,463,464],{},"J’ai choisi Nuxt 4 pour mon portfolio parce que c’est une technologie moderne, puissante et adaptée à mes besoins.",[162,466,467],{},"Elle me permet de construire un site propre, performant, évolutif et bien structuré, tout en restant dans un environnement que j’apprécie : Vue.js.",[162,469,470],{},"Ce portfolio est encore amené à évoluer. Je vais continuer à l’améliorer, ajouter du contenu, publier des articles et optimiser son référencement.",[162,472,473],{},"Pour moi, ce projet n’est pas seulement un site vitrine. C’est une preuve concrète de mon travail, de ma progression et de ma manière d’aborder le développement web.",{"title":475,"searchDepth":476,"depth":476,"links":477},"",2,[478,479,480,481,482,483,484,485,486,487,488],{"id":176,"depth":476,"text":177},{"id":214,"depth":476,"text":215},{"id":230,"depth":476,"text":231},{"id":255,"depth":476,"text":256},{"id":300,"depth":476,"text":301},{"id":316,"depth":476,"text":317},{"id":338,"depth":476,"text":339},{"id":357,"depth":476,"text":358},{"id":373,"depth":476,"text":374},{"id":421,"depth":476,"text":422},{"id":460,"depth":476,"text":461},"2026-04-25","Retour d'expérience sur les raisons qui m'ont poussé à choisir Nuxt 4 pour créer mon portfolio de développeur web.","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F34803985\u002Fpexels-photo-34803985.jpeg",{},6,{"title":10,"description":490},"bJKm3vz6jUuL7rgX_JleDCeGi7u6kN9DjuOycOqTSp4",{"data":498,"body":499},{},{"type":500,"children":501},"root",[502],{"type":503,"tag":162,"props":504,"children":505},"element",{},[506],{"type":507,"value":508},"text","Je travaille principalement sur des projets web : sites vitrines, interfaces front-end, applications web et projets full-stack. J'aime développer des solutions modernes, claires et utiles, avec une attention particulière portée à l'interface, à la logique et à la qualité globale du produit.",{"data":510,"body":511},{},{"type":500,"children":512},[513],{"type":503,"tag":162,"props":514,"children":515},{},[516],{"type":507,"value":517},"Je travaille surtout avec JavaScript, et je m'intéresse particulièrement à Vue.js pour le front-end ainsi qu'à Node.js pour le back-end.",{"data":519,"body":520},{},{"type":500,"children":521},[522],{"type":503,"tag":162,"props":523,"children":524},{},[525],{"type":507,"value":526},"Oui, selon l'état du projet. Je peux analyser une base existante, corriger certains points, améliorer l'interface, restructurer une partie du code ou ajouter de nouvelles fonctionnalités si le projet est exploitable.",1777937887819]