Romain Canu

Portfolio

Temps de lecture : 6 min

Présentation et objectifs du projet

Le projet en question est tout simplement le portfolio que vous êtes en train de parcourir.

L'objectif du projet est de développer un site web qui présente mes principales compétences et certaines de mes réalisations, qu'elles soient personnelles ou professionnelles. L'objectif sous-jacent est de générer automatiquement le contenu des pages HTML du site à partir de fichiers Markdown (un langage de balisage léger créé dans le but d'offrir une syntaxe facile à lire et à écrire) pour faciliter l'écriture des différents articles intégrés dans mon portfolio.

Les étapes

J'ai tout d'abord commencé par chercher sur internet un template existant codé en HTML, c’est-à-dire dans un langage simple. En effet, je ne voulais pas utiliser de solution NO-CODE comme WordPress ou bien WIX mais disposer d’une solution complètement personnalisable pour construire un portfolio qui me ressemble.

Une fois le template choisi, j'ai fait le tri entre les pages à retirer et celles à garder. Par la suite, j'ai traduit les pages que j'avais décidé de conserver en français (le template qui m’a servi de base était en anglais).

Puis, j'ai recherché un moyen simple d'écrire un article du portfolio, sans avoir à utiliser par exemple des balises HTML pour mettre le texte en gras ou en majuscule. C'est pourquoi mon choix s’est tourné vers le Markdown qui est un langage de documentation que j’utilise très souvent, aussi bien pour mes projets en entreprise que pour mes projets personnels.

C'est à partir de ce moment-là que je me suis lancé dans le développement d'un programme en Python (mon langage de prédilection) qui commence par venir lire les fichiers Markdown positionnés dans un dossier cible (et contenant le texte de mes articles), puis les convertit au format HTML, adapte le contenu HTML au style du site, effectue des copier-coller des images référencées dans les différents fichiers Markdown, avant de créer la page principale du portfolio qui liste l'ensemble des articles du site avec, pour chacun des articles :

  • le nom de l'article,

  • une description sommaire,

  • un temps de lecture calculé automatiquement avec le paquet Python "readtime",

  • une image,

  • une liste de tags pour pouvoir y appliquer des filtres,

  • une série d'étoiles indiquant le niveau acquis sur la compétence.

Pour finir, j'ai mis en place un workflow GitHub pour mettre à jour automatiquement le site en ligne lors d'un "commit" (action d'envoyer ses modifications locales vers un référentiel (ici GitHub) afin, d'une part, de mettre à disposition les modifications apportées à un document et, d'autre part, d'insérer de façon cohérente ces modifications dans l'historique des modifications.), pour générer les différents articles, pour minifier (action de réduire le code, avec suppression par exemple des lignes de commentaire, des retours à la ligne ...) et, enfin, pour mettre en ligne tous les fichiers HTML générés sur le serveur FTP de mon hébergeur web OVH.

La photo ci-dessous illustre le workflow Git du portfolio.

Les acteurs

J'ai réalisé le projet seul en quelques semaines, en m’appuyant sur les ressources disponibles sur internet (openclassrooms) ainsi que sur mes connaissances acquises en autodidacte, à l’école et en entreprise.

Les résultats

Je suis satisfait d’avoir réussi à développer le portfolio sans être passé par du NO-CODE, ce qui m’a permis de personnaliser complètement le site.

Grâce à ce projet, j'ai pu comprendre et m'exercer sur le fonctionnement des workflows GitHub.

Les lendemains du projet

Il y a un certain nombre d’améliorations que j'aimerai apporter à mon portfolio.

J’aimerais par exemple créer un véritable formulaire de contact qui pousserait automatiquement les emails des personnes qui souhaiteraient rentrer en contact sur mon adresse email. J’aurai alors à protéger le formulaire contre les spams en utilisant un captcha (reCAPTHCHA de Google par exemple). J’aimerais également gérer un affichage dynamique, entre le mode nuit (noir) et le mode jour (blanc), en prenant en compte par défaut les paramètres de l'appareil utilisé pour consulter mon portfolio.

Mon regard critique

J’ai réussi à atteindre les objectifs que je m’étais fixés, à savoir avoir la capacité de personnaliser de A à Z mon portfolio.

À travers la réalisation de ce projet, j’ai essentiellement développé mes connaissances sur le workflow GitHub que j'ai eu l'occasion d'appliquer sur d'autres projets. Je suis également désormais à l'aise pour rédiger de la documentation en Markdown.