Skip to content

Faire un portfolio en JS moderne

But du projet

Ce projet est un moyen de toucher concrètement au JavaScript avec l'utilisation de React, pour faire un site portfolio personnel dans le but de promouvoir mes compétences personnelles et professionnelles ainsi que mes projets et hobbies à destination des professionnels.

Stack de travail

On doit choisir quelle stack, c'est à dire quel combo d'outils on utilisera pour faire fonctionner le tout. Dans une stack de projet Web moderne, on doit choisir un Moteur, un Framework et le compilateur. Mais à quoi servent-ils ?

Le Moteur (Build tool)

Souvent appelé "moteur" par abus de langage, c'est l'outil qui fait tourner tout l'écosystème. Il coordonne le compilateur, le serveur et les fichiers.

Le Framework

Le framework est un ensemble d'outils et de règles de construction. Au lieu de partir d'une page blanche, on utilise des blocs déjà prêtes et ça évite de recréer du code que la communauté aurait déjà écrit.

Le Compilateur

C'est le même principe que dans plein d'autres languages comme le C par exemple, il reprend notre code, ici le JSX (un JavaScript mélangé à du HTML) en JS et HTML standard pour qu'un navigateur comprenne correctement.

Choix

Il existe donc plusieurs Moteurs (Vite, Next.JS, ...), Frameworks (React, Vue, Svelte, ...) et Compilateurs (Babel, SWC, ...) mais pour ce projet on retiendra une stack simple pour un débutant et efficace pour tester et déployer.

Stack choisie

  • Moteur : Vite -> Le moteur le plus rapide, sans fioritures et simple d'utilisation avec des outils de bases très utiles
  • Framework : React -> Le framework le plus populaire avec des tonnes de librairies deja prêtes et une communauté présente
  • Compilateur : JS/SWC -> Très efficace et rapide et simple et utilnous permet d'utilise JS

Points importants du projet

Création du projet

Packages npm

Hébergement avec Vercel

Clés d'environnements