mthlr

Réalisation et mise en place de mon portfolio

Réalisation d'un portfolio et hébergement de celui-ci en utilisant que des solutions de cloud-computing

Langages utilisés : HTML, CSS, JavaScript

Solutions utilisées : VueJS, Amplify, CloudFront, S3

Conception et réalisation du portfolio

J'ai tout d'abord conçu une maquette (lien Figma disponible en bas de page) me permettant d'avoir une idée globale de la structure du site que je souhaitais réaliser.


Maquette de la page Expériences du portfolio

Figure 1 : Réalisation de la maquette de la page Projet du portfolio


N'étant à la base pas féru de développement web, j'ai tout d'abord réalisé une première version du site de façon "native" avec du HTML, CSS et JavaScript, sans utiliser de framework.

J'ai ensuite décidé d'utiliser VueJS, profitant donc de la possibilité de découper cette première version en différents composants, layouts et pages.

Cela me permet facilement d'écrire ces articles (e.g. celui que vous êtes présentement en train de lire) et d'intégrer des figures à ceux-ci.

Mise en place de l'infrastructure derrière le portfolio

L'ensemble de ce portfolio est hébergé sur des solutions AWS. Le site est hébergé grâce à Amplify, relié à un répertoire Git distant. Amplify écoute et attend l'arrivée de nouveaux commits pour recompiler le site et le déployer.

Les assets (hors feuilles de styles/scripts) sont stockés sur un bucket S3 et diffusés via son CDN propulsé par CloudFront.


Figure 2 : Schéma représentant l'infrastructure du portfolio


Grâce à cette infrastructure, il me suffit de pousser un ou plusieurs commits sur la branche principale de mon répertoire Git pour que le site soit automatiquement recompilé et déployé.