Réalisation de mon site portfolio

Description

Cette première version se présentait sous la forme d'une simple page sur laquelle se trouvaient des détails concernant mon parcours et mes compétences, des liens directs vers mes projets, ainsi qu'un formulaire de contact. Le site était bien évidemment responsive et s'adaptait à différentes tailles d'écran. La navigation, simple, permettait d'accéder aux différentes sections de la page que ce soit sur écran d'ordinateur ou de mobile.

J'ai opté pour des couleurs discrètes, beige et bleu-marine, que j'ai utilisées comme couleurs de fond des différentes sections de la page. Je me suis tourné vers une palette de couleurs plus vive pour les éléments de navigation, afin de créer un certain contraste avec le reste du site. Toutefois, j'ai vite trouvé que mon site portfolio était trop simple et pourrait bénéficier de nombreuses améliorations, qu'elles concernent le design ou le code. J'ai donc procédé à un ravalement de façade complet en mettant à profit des nouvelles compétences acquises au cours de la deuxième année de Master CAWEB. Désormais le site n'est plus constitué d'une seule et unique page. Il comporte une page d'accueil, une page recensant tous les projets ainsi qu'une page supplémentaire décrivant chaque projet.

J'ai repris le code à zéro et ai apporté un nombre conséquent de modifications au design, tout en gardant la palette de couleurs d'origine. J'ai pu rapidement créer, grâce à SASS, une grille CSS basique adaptée à mes besoins pour ce site. Plutôt que de limiter les couleurs plus vives à la navigation seule, j'ai fait le choix de les appliquer à chaque section afin de faire correspondre chaque onglet de navigation au contenu vers lequel il pointe.

Côté HTML, le système de templates JavaScript Nunjucks s'est révélé être d'une grande utilité dans la construction de pages HTML statiques, puisqu'il m'a permis, de réduire des parties de pages à l'état de composants et de ne les inclure que lorsqu'ils s'avèrent nécessaires. JSON est venu compléter le tableau : j'ai stocké la majorité des données textuelles dans un fichier JSON et ai injecté, via Gulp, toutes les données dans les templates Nunjucks au moment de la compilation. La séparation des balises HTML et de leur contenu me permet de garder un HTML propre et de n'avoir recours qu'au fichier JSON pour toute modification à apporter au contenu.