---
ready: true
title: "How I built my new website, and why ?"
description: "Discover how I built my website, the origin of this need, and the steps I went through."
date: "2026-04-17"
category: "Web Development"
tags:
  - "Portfolio"
  - "Design"
  - "Learning"
readTime: "5 min"
summary:
  - "Why now and not years earlier ?"
  - "The longest part: Figma mockup"
  - "How and with what ? The dream stack"
  - "My personal playground"
---
## Why now and not years ago?

You should know that I already had a website. It was outdated, in (what I consider) fairly poor taste design-wise, and above all, it was no longer up to date. I hadn’t touched it since it first went live—about four years ago at the time of this writing.

I’m intentionally keeping it available on [GitHub Pages](https://pages.github.com/) so you can see how much I've evolved since then: [https://maethik.github.io/matheoguilbert.fr_v1/](https://maethik.github.io/matheoguilbert.fr_v1/).

I built that site back in high school, during my senior year, to bolster my college applications. And it worked, as I was accepted everywhere. In reality, I can’t be sure if the site was effective or if anyone even visited it, because I wasn't using any traffic analytics like  [Google Analytics](https://developers.google.com/analytics) ou [Ackee](https://ackee.electerious.com/). I didn’t even know what those were back then.

Today marks an important milestone in my professional life: I am officially launching my career as a freelance developer, and I don't want to miss a beat. Since every independent developer or freelancer has a portfolio, I needed a site that would allow me to say loud and clear: "Look at what I can do! Hire me!"

## The longest part: The Figma mockup

This was by far the longest part of the creation process. Writing lines of code is something I know how to do, and I actually enjoy it. But spending time exclusively on design—even though I’m familiar with  [Figma](https://www.figma.com/), is time-consuming. Between two "flashes of genius" on where to place a specific element, time just flies.

By spending about 4 hours a week on it (an arbitrary estimate, as I have no metrics to back this up), it took me about two months in total, from early February to early April. It was only after I reached a version of the mockup that I was satisfied with that I moved on to development. The coding itself took me less than a week. You quickly realize the gap between my level of interest in design versus development: in the time it took to design the mockup, I could have developed this site eight times over.

To be more realistic, I have to account for the fact that during those two months of design, I had plenty of time to think through the project structure and visualize exactly what I was going to do and how. This significantly sped up the development phase. It turns out this preparation phase wasn't useless—just a bit too long for my liking. It would become truly efficient if I could produce a mockup of that quality in half the time.

## How and with what? The dream stack

I developed this site using  [Next.JS](https://nextjs.org/). I didn't know this framework, so this was my chance to learn it. I already had a solid background in  [React](https://react.dev/) (which I used to build [EverEast Solutions](https://evereast-solutions.com/)), and since Next.js is a React framework, it made the transition much easier. In fact, the Next.js documentation clearly states that it's best to learn React before starting with them.

I call it a "dream stack" for the following reason:

- Next.js is developed by  [Vercel](https://vercel.com/).
- To deploy the site, I used **Vercel**.
- For the newsletter and general mailing (not yet fully implemented), I’m using  [Resend](https://resend.com/).
- Resend integrates seamlessly with the Vercel ecosystem.

It’s an ecosystem of tools that can be used independently, all very well-made on their own, but when used together, they become incredibly practical and fast to set up because they belong to the same workflow.

## My personal playground

This site has another advantage in my eyes: it allows me to test and learn new things. I’m not trying to win "Site of the Year" on  [Awwwards](https://www.awwwards.com/); I’m trying to challenge myself. I’ve given two examples in this article: I didn’t know Next.js or the Vercel ecosystem, so I learned them. I’m not comfortable with design, so I improved by taking on the challenge.

I’m a believer in a well-known philosophy: we learn by falling. Or, to put it more poetically: _"Hit the wall, and you'll come out more mature."_

On that note, thanks for reading this far, and see you in the next article.

**Mathéo G.**