Maquette
Bien que ce ne soit pas ma propre création, j'ai tout de même réalisé une maquette de ce site afin de pouvoir accéder plus facilement aux mesures (margin, padding) de celui-ci.
Curriculum Vitae
Retour aux projetsDescription
Le projet CV est le premier projet que j'ai réalisé dans le cadre de mon bachelier, nous devions prendre un site web et le reconstruire en adaptant le contenu pour en faire notre propre CV. C'est un site one page static, c'est donc un bête site pas très utilisable.
Outils utilisés
Consignes
Mon code devait être personnel et adapté, avec un HTML5 sémantique, valide et accessible, ainsi qu’un CSS responsive, prenant en compte une version mobile et une version desktop. Le site devait également inclure un aspect dynamique, comme des animations, ainsi qu’un formulaire de contact comportant au minimum un champ pour l’e-mail et un champ pour le message. Enfin, bien que prenant la forme d’un site web, le contenu devait être pensé comme un CV en ligne, en intégrant mon propre profil tout en respectant l’esprit du site de référence.
Palette de couleurs
- #F2E8CF
- #6A9656
- #A7C957
- #50271C
Etapes
Choix des outils
Malgré le fait qu'il s'agisse d'un site static et que les outils à ma disposition soient donc plus restreints, j'ai tout de même pu faire quelques choix personnels. J'ai ainsi décidé d'utiliser du SCSS afin d'apprendre à mieux maîtriser ce langage.
Produire mon HTML
En termes de programmation, j'ai évidemment commencé par mon HTML, en veillant à ce qu'il soit accessible et sémantiquement correct. Une fois cette étape terminée, je me suis attaqué aux micro-données ainsi qu'aux méta-données.
Produire mon SCSS
Pour mon SCSS, j'ai évidemment opté pour la méthode BEM. J'ai créé mes variables ainsi que mes fonctions, puis j'ai commencé à reproduire le design de Guapa. Cependant, je me suis permis quelques modifications afin de rendre le site plus agréable à utiliser.
Les animations
Étant donné qu'il s'agit de mon premier projet, le monde des animations m'était encore un peu mystérieux. J'ai donc dû me renseigner sur certaines notions, comme l'Observer et le Slider, afin de pouvoir les intégrer correctement.
Galerie
