blog correction
This commit is contained in:
Vendored
+27
-9
@@ -20,8 +20,23 @@
|
||||
"icon": "lucide-file",
|
||||
"title": "01-How-I-built-my-new-website-and-why"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "cebaf3474fc12da4",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "markdown",
|
||||
"state": {
|
||||
"file": "blog/en/01-How-I-built-my-new-website-and-why.mdx",
|
||||
"mode": "source",
|
||||
"source": false
|
||||
},
|
||||
"icon": "lucide-file",
|
||||
"title": "01-How-I-built-my-new-website-and-why"
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
"currentTab": 1
|
||||
}
|
||||
],
|
||||
"direction": "vertical"
|
||||
@@ -78,8 +93,7 @@
|
||||
}
|
||||
],
|
||||
"direction": "horizontal",
|
||||
"width": 300,
|
||||
"collapsed": true
|
||||
"width": 300
|
||||
},
|
||||
"right": {
|
||||
"id": "2ee624d034e5fa8d",
|
||||
@@ -95,7 +109,7 @@
|
||||
"state": {
|
||||
"type": "backlink",
|
||||
"state": {
|
||||
"file": "blog/fr/01-How-I-built-my-new-website-and-why.mdx",
|
||||
"file": "blog/en/01-How-I-built-my-new-website-and-why.mdx",
|
||||
"collapseAll": false,
|
||||
"extraContext": false,
|
||||
"sortOrder": "alphabetical",
|
||||
@@ -114,7 +128,7 @@
|
||||
"state": {
|
||||
"type": "outgoing-link",
|
||||
"state": {
|
||||
"file": "blog/fr/01-How-I-built-my-new-website-and-why.mdx",
|
||||
"file": "blog/en/01-How-I-built-my-new-website-and-why.mdx",
|
||||
"linksCollapsed": false,
|
||||
"unlinkedCollapsed": true
|
||||
},
|
||||
@@ -157,7 +171,7 @@
|
||||
"state": {
|
||||
"type": "outline",
|
||||
"state": {
|
||||
"file": "blog/fr/01-How-I-built-my-new-website-and-why.mdx",
|
||||
"file": "blog/en/01-How-I-built-my-new-website-and-why.mdx",
|
||||
"followCursor": false,
|
||||
"showSearch": false,
|
||||
"searchQuery": ""
|
||||
@@ -192,9 +206,13 @@
|
||||
"templates:Insérer le modèle": false,
|
||||
"command-palette:Ouvrir la palette de commandes": false,
|
||||
"bases:Créer une nouvelle base": false,
|
||||
"obsidian-git:Open Git source control": false
|
||||
"obsidian-git:Open Git source control": false,
|
||||
"translate:Open translation view": false
|
||||
}
|
||||
},
|
||||
"active": "503bbf232acf5ff3",
|
||||
"lastOpenFiles": []
|
||||
"active": "cebaf3474fc12da4",
|
||||
"lastOpenFiles": [
|
||||
"blog/fr/01-How-I-built-my-new-website-and-why.mdx",
|
||||
"blog/en/01-How-I-built-my-new-website-and-why.mdx"
|
||||
]
|
||||
}
|
||||
@@ -15,56 +15,43 @@ summary:
|
||||
- "How and with what ? The dream stack"
|
||||
- "My personal playground"
|
||||
---
|
||||
## Why now and not years ago?
|
||||
|
||||
<div>
|
||||
<h2>Why now and not years earlier ?</h2>
|
||||
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.
|
||||
|
||||
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>
|
||||
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/).
|
||||
|
||||
<div>
|
||||
<h2>The longest part: Figma mockup</h2>
|
||||
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.
|
||||
|
||||
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>
|
||||
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!"
|
||||
|
||||
<div>
|
||||
<h2>How and with what ? The dream stack</h2>
|
||||
## The longest part: The Figma mockup
|
||||
|
||||
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>
|
||||
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.
|
||||
|
||||
<div>
|
||||
<h2>My personal playground</h2>
|
||||
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.
|
||||
|
||||
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>
|
||||
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.**
|
||||
@@ -1,71 +1,62 @@
|
||||
---
|
||||
ready: true
|
||||
title: "Comment j'ai construit mon nouveau site internet, et pourquoi ?"
|
||||
description: "Découvrez comment j'ai contruit mon, l'origine de ce besoin et les étapes par lesquelles je suis passé."
|
||||
date: "2026-04-17"
|
||||
category: "Développement Web"
|
||||
title: Comment j'ai construit mon nouveau site internet, et pourquoi ?
|
||||
description: Découvrez comment j'ai construit mon site, l'origine de ce besoin et les étapes par lesquelles je suis passé.
|
||||
date: 2026-04-17
|
||||
category: Développement Web
|
||||
tags:
|
||||
- "Portfolio"
|
||||
- "Design"
|
||||
- "Apprentissage"
|
||||
readTime: "5 min"
|
||||
- Portfolio
|
||||
- Design
|
||||
- Apprentissage
|
||||
readTime: 5 min
|
||||
summary:
|
||||
- "Pourquoi maintenant et pas des années plus tôt ?"
|
||||
- Pourquoi maintenant et pas des années plus tôt ?
|
||||
- "Le plus long : maquette Figma"
|
||||
- "Comment et avec quoi ? La stack de rêve"
|
||||
- "Mon terrain de jeu personnel"
|
||||
- Comment et avec quoi ? La stack de rêve
|
||||
- Mon terrain de jeu personnel
|
||||
---
|
||||
|
||||
<div>
|
||||
<h2>Pourquoi maintenant et pas des années plus tôt ?</h2>
|
||||
## Pourquoi maintenant et pas des années plus tôt ?
|
||||
|
||||
Il faut savoir qu'un site internet, j'en avais déjà un. Il était dépassé, d'un assez mauvais goût en termes de design (je trouve), et surtout, il n'était plus à jour. Je n'y ai jamais retouché depuis qu'il est en ligne (soit il y a 4 ans au moment où cet article est publié)
|
||||
<br />
|
||||
Je le garde volontairement disponible dans [GitHub Pages](https://pages.github.com/) pour que vous puissiez voir l'évolution depuis cette époque : [https://maethik.github.io/matheoguilbert.fr_v1/](https://maethik.github.io/matheoguilbert.fr_v1/)
|
||||
<br />
|
||||
Ce site, je l'avais fait au lycée, en Terminale, dans l'optique d'appuyer mes candidatures [Parcoursup](https://www.parcoursup.gouv.fr/). Et ça aura été utile puisque j'ai été pris partout. En réalité, je ne peux pas être sûr que mon site a été efficace, ni même que qui que ce soit l'ai visiter, car je n'avais pas utilisé d'analyseur de trafic comme [Google Analytics](https://developers.google.com/analytics) ou [Ackee](https://ackee.electerious.com/). Je ne savais même pas ce que c'était à ce moment.
|
||||
<br />
|
||||
De plus, c'est un moment important dans ma vie professionnelle, je me lance en tant que développeur indépendant officiellement, et je ne voudrais pas rater ce départ.
|
||||
Étant donné que tout les développeurs indé, ou autre freelance ont leur portfolio, il me fallait à moi aussi un site qui me permette de dire haut et fort : <strong>Regardez ce que je sais faire ! Missionnez-moi !</strong>
|
||||
</div>
|
||||
Il faut savoir qu'un site internet, j'en avais déjà un. Il était dépassé, d'un assez mauvais goût en termes de design (je trouve), et surtout, il n'était plus à jour. Je n'y ai jamais retouché depuis qu'il est en ligne (soit il y a 4 ans au moment où cet article est publié).
|
||||
|
||||
<div>
|
||||
<h2>Le plus long : maquette Figma</h2>
|
||||
Je le garde volontairement disponible dans [GitHub Pages](https://pages.github.com/) pour que vous puissiez voir l'évolution depuis cette époque : [https://maethik.github.io/matheoguilbert.fr_v1/](https://maethik.github.io/matheoguilbert.fr_v1/)
|
||||
|
||||
C'est de loin la partie du process de création de ce site la plus longue. Écrire des lignes de code, je sais faire, et je prends même du plaisir à le faire. Mais passer du temps exclusivement sur du design, même si je connais [Figma](https://www.figma.com/) à force de l'utiliser, c'est long. Et entre 2 éclairs de génie sur comment placer tel ou tel élément, le temps passe.
|
||||
<br />
|
||||
En y passant environ 4h par semaine (c'est une estimation arbitraire, je n'ai aucune métrique pour appuyer cela), j'ai mis au total environ 2 mois, de début février à début avril. Ce n'est qu'après avoir obtenu une version de la maquette qui me satisfaisait suffisamment que je suis passé au développement. Ça m'a pris un peu moins d'une semaine à coder. On se rend vite compte de la différence entre mon niveau d'appétence pour le design et celui pour le développement. Dans le temps ou j'ai fait la maquette, je peux développer <strong>8 fois</strong> ce site.
|
||||
<br />
|
||||
Pour être plus réaliste, il faudrait prendre en compte le fait que pendant ces deux mois de design, j'ai eu le temps de beaucoup réfléchir la structure du projet et de visualiser exactement ce que j'allais faire, et comment. Ce qui accélère énormément le développement. Comme quoi cette phase de préparation du site n'était pas inutile, juste trop longue à mon goût. Ça deviendrait vraiment intéressant de pousser la maquette à ce point si j'y passais 2 fois moins de temps, pour le même temps de développement.
|
||||
</div>
|
||||
Ce site, je l'avais fait au lycée, en Terminale, dans l'optique d'appuyer mes candidatures [Parcoursup](https://www.parcoursup.gouv.fr/). Et cela aura été utile puisque j'ai été pris partout. En réalité, je ne peux pas être sûr que mon site a été efficace, ni même que qui que ce soit l'ait visité, car je n'avais pas utilisé d'analyseur de trafic comme [Google Analytics](https://developers.google.com/analytics) ou [Ackee](https://ackee.electerious.com/). Je ne savais même pas ce que c'était à ce moment là.
|
||||
|
||||
<div>
|
||||
<h2>Comment et avec quoi ? La stack de rêve</h2>
|
||||
Aujourd'hui est un moment important dans ma vie professionnelle, je me lance en tant que développeur indépendant officiellement, et je ne veux pas rater ce départ.
|
||||
|
||||
J'ai développé ce site avec [Next.JS](https://nextjs.org/). Je ne connaissais pas ce framework, cela m'a permis de l'apprendre. J'avais néanmoins un background conséquent avec [React](https://react.dev/) (j'ai développé [EverEast Solutions](https://evereast-solutions.com/) avec). Et Next.JS étant un framework React, ça m'a facilité la tâche, j'avais déjà acquis les connaissances de base. D'ailleurs, la documentation de NextJS indique clairement qu'il est préférable d'apprendre React avant de commencer Next.JS.
|
||||
<br />
|
||||
Je parle de "stack de rêve" pour la raison suivante, vous allez vite comprendre.
|
||||
<br />
|
||||
<ul>
|
||||
<li>NextJS est développé par [Vercel](https://vercel.com/)</li>
|
||||
<li>Pour déployé le site, j'ai utilisé Vercel</li>
|
||||
<li>Pour la newsletter et le mailling d'une manière générale (pas encore fini d'implémenté), j'utilise [Resend](https://resend.com/)</li>
|
||||
<li>Resend est développé par Vercel</li>
|
||||
</ul>
|
||||
<br />
|
||||
C'est un écosystème d'outils, utilisables indépendamment les uns des autres, des outils très bien fais individuellement, et quand on les utilise ensemble ça devient super pratique et rapide à mettre en place, parce qu'ils font partie du même écosystème justement.
|
||||
</div>
|
||||
Étant donné que tous les développeurs indé, ou autre freelance ont leur portfolio, il me fallait à moi aussi un site qui me permette de dire haut et fort : **Regardez ce que je sais faire ! Missionnez-moi !**
|
||||
|
||||
<div>
|
||||
<h2>Mon terrain de jeu personnel</h2>
|
||||
## L'étape la plus longue : la maquette Figma
|
||||
|
||||
Ce site à un autre avantage à mes yeux : me permettre de tester et d'apprendre des trucs.
|
||||
<br />
|
||||
Je ne cherche pas à ce que ce soit le site de l'année sur [Awwwards](https://www.awwwards.com/), je cherche à me mettre en difficulté. J'ai donné deux exemples dans cet article. Je ne connaissais pas Next.JS et l'écosystème Vercel, je l'ai appris. Je ne suis pas à l'aise avec le design, je me suis amélioré en travaillant sur ce point faible et en me mettant au défi.
|
||||
<br />
|
||||
Je suis partisan d'une philosophie bien connue : c'est en tombant qu'on apprend. Si je le reformule avec mon esprit poétique médiocre : "heurte-toi au mur, tu seras plus mûr".
|
||||
<br />
|
||||
Sur ce, merci d'avoir lu jusqu'ici et a la prochaine, j'espère, dans un autre article.
|
||||
<br />
|
||||
<strong>Mathéo G</strong>
|
||||
</div>
|
||||
C'est de loin la partie du processus de création de ce site la plus longue. Écrire des lignes de code, je sais faire, et je prends même du plaisir à le faire. Mais passer du temps exclusivement sur du design, même si je connais [Figma](https://www.figma.com/) à force de l'utiliser, c'est long. Et entre deux éclairs de génie sur comment placer tel ou tel élément, le temps passe.
|
||||
|
||||
En y passant environ 4h par semaine (c'est une estimation arbitraire, je n'ai aucune métrique pour appuyer cela), j'ai mis au total environ 2 mois, de début février à début avril. Ce n'est qu'après avoir obtenu une version de la maquette qui me satisfaisait suffisamment que je suis passé au développement. Cela m'a pris un peu moins d'une semaine à coder. On se rend vite compte de la différence entre mon niveau d'appétence pour le design et celui pour le développement. Dans le temps où j'ai fait la maquette, je peux développer <strong>8 fois</strong> ce site.
|
||||
|
||||
Pour être plus réaliste, il faudrait prendre en compte le fait que pendant ces deux mois de design, j'ai eu le temps de beaucoup réfléchir à la structure du projet et de visualiser exactement ce que j'allais faire, et comment; ce qui accélère énormément le développement. Comme quoi cette phase de préparation du site n'était pas inutile, juste trop longue à mon goût. Cela deviendrait vraiment intéressant de pousser la maquette à ce point si j'y passais 2 fois moins de temps, pour le même temps de développement.
|
||||
|
||||
## Comment et avec quoi ? La stack de rêve
|
||||
|
||||
J'ai développé ce site avec [Next.JS](https://nextjs.org/). Je ne connaissais pas ce framework, cela m'a permis de l'apprendre. J'avais néanmoins un background conséquent avec [React](https://react.dev/) (j'ai développé [EverEast Solutions](https://evereast-solutions.com/) avec). Et Next.JS étant un framework React, cela m'a facilité la tâche, j'avais déjà acquis les connaissances de base. D'ailleurs, la documentation de NextJS indique clairement qu'il est préférable d'apprendre React avant de commencer Next.JS.
|
||||
|
||||
Je parle de "stack de rêve" pour la raison suivante, vous allez vite comprendre.
|
||||
|
||||
* NextJS est développé par [Vercel](https://vercel.com/)
|
||||
* Pour déployer le site, j'ai utilisé Vercel
|
||||
* Pour la newsletter et le mailling d'une manière générale (pas encore fini d'implémenter), j'utilise [Resend](https://resend.com/)
|
||||
* Resend s'intègre parfaitement à l'écosystème Vercel
|
||||
|
||||
C'est un écosystème d'outils, utilisables indépendamment les uns des autres, des outils très bien fait individuellement, et quand on les utilise ensemble cela devient super pratique et rapide à mettre en place, parce qu'ils font partie du même écosystème justement.
|
||||
|
||||
## Mon terrain de jeu personnel
|
||||
|
||||
Ce site à un autre avantage à mes yeux : me permettre de tester et d'apprendre des trucs.
|
||||
|
||||
Je ne cherche pas à ce que ce soit le site de l'année sur [Awwwards](https://www.awwwards.com/), je cherche à me mettre en difficulté. J'ai donné deux exemples dans cet article. Je ne connaissais pas Next.JS et l'écosystème Vercel, je l'ai appris. Je ne suis pas à l'aise avec le design, je me suis amélioré en travaillant sur ce point et en relevant ce défi.
|
||||
|
||||
Je suis partisan d'une philosophie bien connue : c'est en tombant qu'on apprend. Si je le reformule avec mon esprit poétique : "heurte-toi au mur, tu seras plus mûr".
|
||||
|
||||
Sur ce, merci d'avoir lu jusqu'ici et a la prochaine dans un autre article.
|
||||
|
||||
**Mathéo G**
|
||||
Reference in New Issue
Block a user