57 lines
4.6 KiB
Plaintext
57 lines
4.6 KiB
Plaintext
---
|
||
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.** |