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 so you can see how much I've evolved since then: 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 ou Ackee. 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, 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. I didn't know this framework, so this was my chance to learn it. I already had a solid background in React (which I used to build EverEast Solutions), 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.
- To deploy the site, I used Vercel.
- For the newsletter and general mailing (not yet fully implemented), I’m using Resend.
- 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; 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.