fixing link style and writing english version of the first article

content/blog/en/01-How-I-built-my-new-website-and-why.mdx

@@ -0,0 +1,70 @@
+---
+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"
+---
+
+<div>
+    <h2>Why now and not years earlier ?</h2>
+
+    You should know that I already had a website. It was outdated, in rather bad taste in terms of design (in my opinion), and above all, it was no longer up to date. I haven't touched it since it went online (which is 4 years ago at the time this article is published).
+    <br />
+    I intentionally keep it available on [GitHub Pages](https://pages.github.com/) so you can see the evolution since that time: [https://maethik.github.io/matheoguilbert.fr_v1/](https://maethik.github.io/matheoguilbert.fr_v1/)
+    <br />
+    I made that site in high school, during my senior year, with the aim of supporting my [Parcoursup](https://www.parcoursup.gouv.fr/) applications. And it must have been useful since I was accepted everywhere. In reality, I can't be sure my site was effective, or even if anyone visited it, because I didn't use a traffic analyzer like [Google Analytics](https://developers.google.com/analytics) or [Ackee](https://ackee.electerious.com/). I didn't even know what that was at the time.
+    <br />
+    Moreover, this is an important moment in my professional life: I am officially launching myself as an independent developer, and I wouldn't want to mess up this start. Since all indie developers or other freelancers have their portfolio, I also needed a site that allows me to say loud and clear: <strong>Look at what I can do ! Hire me !</strong>
+</div>
+
+<div>
+    <h2>The longest part: Figma mockup</h2>
+
+    This is by far the longest part of the creation process for this site. Writing lines of code, I know how to do that, and I even enjoy doing it. But spending time exclusively on design, even if I know [Figma](https://www.figma.com/) from using it so much, takes a long time. And between two flashes of genius on how to place this or that element, time passes.
+    <br />
+    By spending about 4 hours a week on it (that's an arbitrary estimate, I have no metrics to back it up), it took me about 2 months in total, from early February to early April. It was only after getting a version of the mockup that satisfied me enough that I moved on to development. That took me a little less than a week to code. You quickly realize the difference between my affinity for design and for development. In the time it took me to make the mockup, I could develop this site <strong>8 times</strong>. 
+    <br />
+    To be more realistic, we should take into account that during those two months of design, I had the time to really think through the project's structure and visualize exactly what I was going to do, and how. Which speeds up development enormously. So this site preparation phase wasn't useless, just too long for my taste. It would become really interesting to push the mockup this far if I spent half the time on it, for the same development time.
+</div>
+
+<div>
+    <h2>How and with what ? The dream stack</h2>
+
+    I developed this site with [Next.JS](https://nextjs.org/). I didn't know this framework, so it allowed me to learn it. However, I had a solid background with [React](https://react.dev/) (I developed [EverEast Solutions](https://evereast-solutions.com/) with it). And since Next.JS is a React framework, it made my job easier. I had already acquired the basic knowledge. In fact, the NextJS documentation clearly states that it's better to learn React before starting Next.JS.
+    <br />
+    I talk about a "dream stack" for the following reason, you'll quickly understand.
+    <br />
+    <ul>
+        <li>NextJS is developed by [Vercel](https://vercel.com/)</li>
+        <li>To deploy the site, I used Vercel</li>
+        <li>For the newsletter and mailing in general (not fully implemented yet), I use [Resend](https://resend.com/)</li>
+        <li>Resend is developed by Vercel</li>
+    </ul>
+    <br />
+    It's an ecosystem of tools, usable independently of each other, tools that are very well made individually, and when you use them together it becomes super practical and fast to set up, precisely because they are part of the same ecosystem.
+</div>
+
+<div>
+    <h2>My personal playground</h2>
+
+    This site has another advantage in my eyes: allowing me to test and learn things.
+    <br />
+    I'm not trying to make it the site of the year on [Awwwards](https://www.awwwards.com/), I'm trying to challenge myself. I gave two examples in this article. I didn't know Next.JS and the Vercel ecosystem, I learned it. I'm not comfortable with design, I improved by working on this weak point and challenging myself. 
+    <br />
+    I am a proponent of a well-known philosophy: you learn by falling. If I rephrase it with my mediocre poetic mind: "hit the wall, you'll stand tall".
+    <br />
+    On that note, thanks for reading this far and see you next time, I hope, in another article.
+    <br />
+    <strong>Mathéo G</strong>
+</div>