Mon Portfolio
Le but de ce projet est, comme son nom l’indique, de créer mon propre portfolio.
Je vais vous expliquer les différentes étapes de celui-ci.
Création du portfolio
Dans un premier temps, j’ai créé mon portfolio avec Node.JS et Express.js.
Durant l’été 2023, j’ai codé toutes les pages une à une.
Je n’étais pas spécialement satisfait de mon portfolio, mais il me permettait de montrer différents projets développé au cours de mes 2 premières années à Epitech.
Refonte du Portfolio en Next.js
En été 2024, j’ai voulu ajouter les différents projets de ma 3e année à Epitech.
Il fallait créer chaque page de projet individuellement de A à Z.
J’ai donc décidé de chercher une méthode pour mettre à jour mon portfolio sans avoir besoin de coder chaque page.
Dans un premier temps, j’ai donc migré mon portfolio d'Express.js à Next.js, afin de générer mes pages en fonctions des données des différents projets.
Connexion à l’API de Notion
J’ai connecté mon portfolio à l’API de Notion.
Ceci me permet de créer des pages dans Notion pour ajouter de nouveaux projets.
Notion fonctionnant par bloc, j’ai dû gérer les différents types de blocs.
Les séparateurs ressemblent à ça:
Les blocs classiques correspondent à un paragraphe en HTML (<p></p>
).
Les différents blocs de titre correspondent au titre en HTML (<hx></hx>
).
Exemple de Titre 1
Exemple de Titre 2
Exemple de Titre 3
Les listes à puces correspondent à un <ul><li>…</li></ul>
- Les listes à puces
- ressemblent à
- ceci.
Les sous-pages correspondent à ceci:
Page de démonstration
Voici à quoi correspond une page dans une page
Les colonnes permettent de mettre différents éléments côte à côte comme sur Notion.
Un exemple ici.
Viennent ensuite l’intégration des fichiers, des vidéos et des images.
Les images et fichiers sont envoyés sur le serveur via un dashboard que j’ai codé.
Ces images et fichiers sont ensuite intégré dans Notion avec un lien externe.
Pour les vidéos, j’utilise Youtube et je crée un bloc vidéo avec un lien externe qui peut être lu par n’importe quel utilisateur.
Vous pouvez voir un exemple pour les images et les vidéos sur le projet Zappy.
Vous pouvez voir un exemple de fichier PDF sur le projet de mon stage de 3e année.