1b:I[11664,["/_next/static/immutable/chunks/39jvw8xkfi0nm.js","/_next/static/immutable/chunks/15-yt-09r0m5m.js","/_next/static/immutable/chunks/3zvxazlv9iyny.js","/_next/static/immutable/chunks/1g_2nqsjhmvwp.js"],"default"] 1c:I[78737,["/_next/static/immutable/chunks/39jvw8xkfi0nm.js","/_next/static/immutable/chunks/15-yt-09r0m5m.js","/_next/static/immutable/chunks/3zvxazlv9iyny.js","/_next/static/immutable/chunks/1g_2nqsjhmvwp.js"],"BlogList"] 1d:T22c0,

Pourquoi j'ai créé ce portfolio

Je cherchais un nouveau projet sur lequel travailler, un nouveau langage de programmation à apprendre et surtout, un nouveau défi à relever. En explorant ce qui ce faisait aujourd'hui, j'ai découvert Next.js. Next.js est un framework full-stack qui permet de développer le front-end et le back-end en Javascript ou en Typescript.

Il permet de faire de la génération de sites statiques (SSG), de l'optimisation des images et de créer des sites web rapides et optimisés pour le référencement (SEO).

Cette technologie m'a tout de suite intéressé. Comme je n'avais jamais travaillé avec React avant, cela m'a semblé être l'occasion parfaite pour l'apprendre. Aujourd'hui, React est devenu incontournable dans le développement web moderne. Je me suis dit qu'il fallait que j'apprenne ce language.

Pourquoi un portfolio ?

Je voulais créer un site web qui me permette de montrer tous mes projets, de mettre en avant ce que je fais et de montrer ce que je suis capable de construire. Ainsi, toute personne souhaitant en savoir davantage sur moi ou sur ce que je sais faire pourrais avoir un aperçu ici.

Pourquoi ajouter un blog ?

J'ai rapidement réalisé que certains de mes projets pouvaient intéresser d'autres personnes. J'ai donc décidé d'ajouter un blog où je pourrais partager tout ce que je crée. J'ai l'intention d'y publier mes projets, mes réflexions et mes idées.

Je suis passionné par de nombreux sujets différents, et ce blog représente une excellente occasion d'en parler. Vous pourrez notamment y trouver des articles sur l'impression 3D, l'électronique, l'automobile, les échecs et bien d'autres thèmes.

Cela me permettra également de conserver une trace de mes projets et de suivre leur évolution au fil du temps.

J'ai passé beaucoup de temps à réfléchir à la manière dont j'allais gérer ce blog au quotidien. Comment publier facilement de nouveaux articles ? Comment les mettre à jour ?

Je voulais que le processus de publication soit le plus simple possible. S'il fallait faire trop d'étapes, je savais que je finirais par ne plus publier régulièrement. Mon objectif était de pouvoir publier du contenu facilement depuis mon téléphone ou depuis n'importe où.

Comment je gère le blog au quotidien

J'avais besoin d'un système qui me permette d'ajouter des articles de manière dynamique tout en conservant les performances d'un site statique. C'est exactement là que Next.js excelle.

Grâce à l'ISR (Incremental Static Regeneration), les visiteurs profitent de performances comparables à celles d'un site statique, tout en me permettant d'ajouter ou de modifier des articles sans devoir reconstruire entièrement le site à chaque changement.

Les articles sont stockés dans une base de données, puis récupérés par Next.js pour générer les pages du blog. Grâce à l'ISR, les pages peuvent être mises à jour après la publication d'un article sans nécessiter une reconstruction complète du site.

Pour publier un nouvel article, j'utilise simplement un dashboard admin où je peux créer, modifier ou supprimer du contenu.

Ça me permet de pouvoir gérer tous mes articles depuis n'importe où, à condition d'avoir accès à internet.

Un design qui me ressemble

Je suis généralement plus attiré par l'aspect technique que par l'aspect artistique. Malgré cela, je tenais vraiment à créer un design moderne, épuré et agréable à utiliser.

Je voulais que les visiteurs se sentent à l'aise dès la première page. J'apprécie particulièrement le design minimaliste.

D'ailleurs, j'essaie également d'appliquer le minimalisme dans ma vie quotidienne. J'aime les choses simples, propres et fonctionnelles, sans donner une impression d'encombrement.

Ce portfolio devait refléter à la fois ma personnalité et ma façon de penser.

Penpot

Le design du site a d'abord été réalisé avec Penpot. Penpot est une plateforme gratuite et open source de conception et de prototypage d'interfaces utilisateur (UI) et d'expériences utilisateur (UX). Elle permet aux designers et aux développeurs de créer des maquettes pour des sites web et des applications mobiles.

C'était ma première utilisation de Penpot. Clairement, ce projet m'a permis de découvrir beaucoup de nouvelles choses.

Pourquoi ne pas avoir utilisé Figma ?

Je n'ai rien contre Figma, qui reste aujourd'hui l'un des standards de l'industrie. Cependant, j'ai choisi Penpot parce qu'il est open source et qu'il ne réserve pas certaines fonctionnalités derrière des abonnements payants.

Pour un projet personnel, cette philosophie correspond beaucoup mieux à ma façon de travailler.

Penpot est un projet qui grandit rapidement et la plateforme s'améliore de jour en jour. J'ai davantage confiance dans ce type de produit que dans Figma, qui pourrait un jour modifier son modèle tarifaire ou réserver certaines fonctionnalités aux utilisateurs payants.

Les animations

Je voulais que le site paraisse vivant et moderne plutôt que de ressembler à une page statique et monotone.

Pour y parvenir, j'ai ajouté plusieurs animations à travers l'interface grâce à Motion.dev. Cette bibliothèque permet de créer des animations fluides, performantes et agréables.

Les animations restent discrètes, mais elles apportent de la modernité qui améliore considérablement l'expérience utilisateur.

Les choix techniques

Comment ai-je construit tout cela ?

Comme mentionné précédemment, j'ai utilisé Next.js pour développer ce site web.

Pour stocker les articles du blog, j'utilise MongoDB, une base de données NoSQL orientée documents. Son modèle de données flexible correspond parfaitement à la structure de mes articles et s'intègre naturellement dans un projet JavaScript.

C'était également l'occasion pour moi de découvrir MongoDB et les bases de données NoSQL, que je n'avais jamais utilisés auparavant.

Comment fonctionne l'administration du blog

Puisque les articles peuvent être créés et modifiés directement depuis le site web, il était essentiel de mettre en place un système d'authentification afin d'empêcher les utilisateurs non autorisés d'accéder à l'interface d'administration. 😀

Mes besoins étaient relativement simples :

Disposer d'une URL privée pour accéder au tableau de bord d'administration.
Protéger l'accès par un nom d'utilisateur et un mot de passe.
Limiter les tentatives de connexion afin d'éviter les attaques par force brute.
Maintenir l'utilisateur connecté après l'authentification pour éviter les connexions répétées.

Étant le seul utilisateur du site, je ne voyais pas l'intérêt de développer un système complet de gestion des utilisateurs avec une base de données dédiée. Cela aurait ajouté de la complexité sans apporter de réelle valeur au projet.

J'ai donc choisi une approche plus simple et mieux adaptée à mes besoins. Les informations sensibles, telles que les identifiants de connexion et les clés de l'application, sont stockées dans des variables d'environnement. Elles sont ainsi séparées du code source et ne risquent pas d'être exposées publiquement.

Une fois authentifié, l'accès est géré grâce à un JWT (JSON Web Token). Cette solution est légère, efficace et parfaitement adaptée à un projet personnel comme celui-ci. Elle me permet de maintenir une session active sans devoir stocker les sessions côté serveur.

Aujourd'hui, ce système répond pleinement à mes besoins. Il est simple à maintenir, suffisamment sécurisé pour son usage et peut facilement évoluer si je décide un jour d'ajouter d'autres utilisateurs.

Après tout, même si le champ nom d'utilisateur n'est pas utile lorsque l'on est le seul utilisateur, il est toujours bon de prévoir l'avenir. 😅

Conclusion

Ce portfolio est bien plus qu'un simple site vitrine pour moi. C'est un projet qui m'a permis d'apprendre de nouvelles technologies, de découvrir de nouveaux outils et de sortir de ma zone de confort.

Entre Next.js, React, MongoDB, Motion, Penpot et la création de toute l'infrastructure du blog, chaque étape du projet a été l'occasion d'apprendre quelque chose de nouveau.

Ce site continuera d'évoluer avec le temps, au fil de nouveaux projets, de nouveaux articles et probablement de nouvelles technologies.

Après tout, l'objectif principal reste le même : apprendre, expérimenter et partager

7:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"Blog\",\"name\":\"Brian Hanquet - Blog\",\"description\":\"Plongez dans l'univers tech, automobile, électronique et sim racing. Tutoriels, astuces et retours d'expérience d'un passionné.\",\"inLanguage\":\"fr\",\"url\":\"https://www.hanbr.be/fr/blog\",\"blogPost\":[{\"@type\":\"BlogPosting\",\"headline\":\"Comment j'ai créé mon portfolio avec Next.Js\",\"url\":\"https://www.hanbr.be/fr/blog/comment-jai-cree-mon-portfolio-avec-nextjs\",\"datePublished\":\"2025-09-01T10:32:33.726Z\",\"inLanguage\":\"fr\",\"author\":{\"@type\":\"Person\",\"name\":\"Brian Hanquet\"}}]}"}}],["$","div",null,{"className":"mx-auto flex mt-12","children":[["$","aside",null,{"className":"hidden lg:block w-1/4 px-6","children":[["$","p",null,{"className":"mb-3 text-gray-700 text-lg font-semibold","children":"Tags"}],["$","ul",null,{"children":[["$","li","0",{"className":"mb-2 text-strongcolor hover:underline hover:cursor-pointer","children":["#","projet"]}],["$","li","1",{"className":"mb-2 text-strongcolor hover:underline hover:cursor-pointer","children":["#","portfolio"]}],["$","li","2",{"className":"mb-2 text-strongcolor hover:underline hover:cursor-pointer","children":["#","blog"]}]]}]]}],["$","div",null,{"className":"w-full max-w-5xl","children":[["$","$L1b",null,{}],["$","$L1c",null,{"blogs":[{"title":"Comment j'ai créé mon portfolio avec Next.Js","slug":"comment-jai-cree-mon-portfolio-avec-nextjs","locale":"fr","translationGroupId":"bac91ae5-543e-4d0f-9835-80d475eba202","createdDate":"2025-09-01T10:32:33.726Z","editedDate":"2026-09-02T11:21:37.457Z","tags":["projet","portfolio","blog"],"imagePath":"https://upload.hanbr.be/images/1787581379717-8b4304f2-e7d1-47b1-b4f1-a4ffd8a88e91.webp","summary":"Je cherchais un nouveau projet sur lequel travailler, un nouveau langage de programmation à apprendre et un nouveau défi à relever. En explorant les nouvelles tendances en développement web","content":"$1d","public":true}],"locale":"fr"}],"$L1e"]}]]}]]