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:T1d8b,

Why I Created This Portfolio

I was looking for a new project to work on, a new programming language to learn, and a new challenge to take on. While exploring current web development trends, I came across Next.js, a full-stack framework that allows developers to build both the front end and back end using JavaScript or TypeScript. It offers features such as Static Site Generation (SSG), image optimization, and the ability to build fast, SEO-friendly websites.

This technology immediately caught my attention. Since I had never worked with React before, it seemed like the perfect opportunity to learn it. Today, React has become an essential part of modern web development, and I felt it was time to dive deeper into it.

Why a Portfolio?

I wanted to create a website where I could showcase all my projects, highlight my achievements, and demonstrate what I am capable of building. This way, anyone interested in learning more about me or my skills can get a concrete overview of my work.

Why Add a Blog?

I quickly realized that some of my projects might be useful or interesting to other people. As a result, I decided to add a blog where I could share everything I create. I plan to publish my projects, thoughts, and ideas there.

I am passionate about many different topics, and this blog provides a great opportunity to talk about them. You can expect to find articles about 3D printing, electronics, cars, chess, and many other subjects.

It will also allow me to keep a record of my projects and track how they evolve over time.

I spent a lot of time thinking about how I would maintain the blog. How could I easily publish new articles? How could I update them?

I wanted the publishing process to be as simple as possible. If there were too many steps involved, I knew I would eventually stop posting regularly. My goal was to be able to publish content easily from my phone or from anywhere.

How I Manage Blog Pages Daily

I needed a system that would allow me to add articles dynamically while preserving the speed of a static website. This is exactly where Next.js shines.

Thanks to ISR (Incremental Static Regeneration), visitors benefit from performance comparable to a static site, while allowing me to add or update articles without rebuilding the entire website every time something changes.

Articles are stored in a database, and Next.js retrieves this data to generate blog pages. Thanks to ISR, pages can be updated after an article is published without requiring a complete site rebuild.

To publish a new article, I simply use an administration dashboard where I can create, edit, or delete content.

As a result, I can manage the entire blog from anywhere, as long as I have access to the administration panel.

A Design That Reflects Who I Am

I am generally more interested in the technical side of things than the artistic side. However, I really wanted to create a modern, clean, and enjoyable design.

I wanted visitors to feel comfortable from the moment they arrived on the homepage. I particularly appreciate minimalist design.

In fact, I try to apply minimalism in everyday life as well. I enjoy things that are simple, clean, and functional, without creating a sense of clutter.

This portfolio needed to reflect both my personality and my way of thinking.

Penpot

The website design was first created using Penpot. Penpot is a free and open-source platform for user interface (UI) and user experience (UX) design and prototyping. It allows designers and developers to create mockups for websites and mobile applications.

This was my first time using Penpot. Clearly, this project introduced me to many new things.

Why Didn't I Use Figma?

I have nothing against Figma, which remains one of the industry standards today. However, I chose Penpot because it is open source and does not restrict certain features behind paid plans. For a personal project, this philosophy aligns much better with the way I like to work.

The Penpot team is growing rapidly, and the platform is constantly improving. I have more confidence in this type of product than in Figma, which could one day change its pricing model or make certain features available only through paid subscriptions.

Animations

I wanted the website to feel alive and modern rather than looking like a static and monotonous page.

To achieve this, I added several animations throughout the interface using Motion.dev. This library makes it possible to create smooth, performant, and enjoyable animations.

The animations remain subtle, but they add an extra layer of modernity that significantly improves the user experience.

Technical Choices

How Did I Build All of This?

As mentioned earlier, I used Next.js to develop this website.

To store blog articles, I use MongoDB, a document-oriented NoSQL database. Its flexible data model fits the structure of my articles very well and integrates seamlessly into a JavaScript project. It was also an opportunity for me to discover MongoDB and the world of NoSQL databases, which I had never used before.

How Blog Administration Works

Since articles can be created and edited directly from the website, it was essential to implement an authentication system to prevent unauthorized users from accessing the administration interface. 😀

My requirements were fairly simple:

Have a private URL for accessing the administration dashboard.
Protect access with a username and password.
Limit login attempts to prevent brute-force attacks.
Keep users authenticated after login to avoid repeated sign-ins.

Since I am the only user of the website, I did not see the point of building an entire user management system with a dedicated database. It would have added complexity without providing any real value to the project.

Instead, I chose a simpler approach that better fits my needs. Sensitive information, such as login credentials and application keys, is stored in environment variables. This keeps them separate from the source code and prevents them from being exposed publicly.

Once authenticated, access is managed using a JWT (JSON Web Token). This solution is lightweight, efficient, and perfectly suited for a personal project like this one. It allows me to maintain an active session without having to store sessions on the server.

Today, this system fully meets my needs. It is simple to maintain, secure enough for its intended purpose, and can easily be expanded if I ever decide to add other users. After all, even if the "username" field is not particularly useful when you are your own administrator, it's always good to plan for the future. 😅

Conclusion

This portfolio is much more than a simple showcase website. It is a project that allowed me to learn new technologies, discover new tools, and step outside of my comfort zone. Between Next.js, React, MongoDB, Penpot, and building the entire blog infrastructure, every stage of the project was an opportunity to learn something new.

This website will continue to evolve over time with new projects, new articles, and probably new technologies. After all, the primary goal remains the same: to learn, experiment, and share.

7:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"Blog\",\"name\":\"Brian Hanquet - Blog\",\"description\":\"Dive into a world of tech, cars, electronics, and sim racing. Explore tutorials, tips, and insights from a passionate hobbyist.\",\"inLanguage\":\"en\",\"url\":\"https://www.hanbr.be/en/blog\",\"blogPost\":[{\"@type\":\"BlogPosting\",\"headline\":\"How I created my portfolio with Next.Js\",\"url\":\"https://www.hanbr.be/en/blog/how-i-created-my-portfolio-with-nextjs\",\"datePublished\":\"2025-09-01T10:32:33.726Z\",\"inLanguage\":\"en\",\"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":["#","project"]}],["$","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":"How I created my portfolio with Next.Js","slug":"how-i-created-my-portfolio-with-nextjs","locale":"en","translationGroupId":"bac91ae5-543e-4d0f-9835-80d475eba202","createdDate":"2025-09-01T10:32:33.726Z","editedDate":"2026-08-31T08:57:09.154Z","tags":["project","portfolio","blog"],"imagePath":"https://upload.hanbr.be/images/1787581379717-8b4304f2-e7d1-47b1-b4f1-a4ffd8a88e91.webp","summary":"I was looking for a new project to work on, a new programming language to learn, and a new challenge to take on. While exploring current web development trends, I came across Next.js, a full-stack fra","content":"$1d","public":true}],"locale":"en"}],"$L1e"]}]]}]]