Mon Site chez Moi

Tags :
  • POK
  • 2022-2023
  • temps 1
Auteurs :
  • Savinien Laeuffer

Mon Site chez Moi, CV en ligne

Description

Ce POK a été fait simultanément avec mon MON Web Front 1, ce dernier m'a permis d'en apprendre beaucoup plus sur l'HTML, le CSS, Bootstrap, Angular et d'autres éléments/librairies de styles qui donnent un côté animé et vivant au site que j'ai pu créé.

Voici le lien GitHub vers mon repository: https://github.com/slaeuffer/POK1

Plan du POK

  1. HTML et CSS (MON)

Retrouver mon niveau en HTML et CSS avec des sites comme:

Faire mon MON m'a aidé à me remettre dans le bain en HTML et CSS pour faire mon POK et cela constituait la première étape à réaliser.

  1. Apprentissage d'Angular et Bootstrap

Grâce à la documentation de Bootstrap et d'Angular, j'ai pu réaliser le premier sprint qui m'a permis d'apprendre cette librairie et ce framework que je ne connaissais pas.

Bootstrap est une librairie CSS et JS qui fournit de nombreux outils pour créer des pages web esthétiques sans tout coder soi même. Il est aussi biensûr flexible et modifiable, ce qui est important pour moi

Angular est un framework en TypeScript qui permet de créer des applications web.

  1. Trouver une idée de site à réaliser

L'étape suivante était de trouver une idée de site et en faire le plan: J'ai choisi de faire mon CV en ligne sur une seule page, qui comporterait des description, mon parcours, mes compétences, et la liste des projets informatiques que j'ai pu faire dans ma vie. Cela me servirait de portfolio developpeur. Je souhaitais faire le site le plus esthétique possible et animer certaines choses.

  1. Créer le répo GitHub et commencer à installer Angular et Bootstrap.

Lien vers bootstrap -> https://getbootstrap.com/docs/4.0/getting-started/download/ La documentation d'Angular -> https://angular.io/docs

Lien vers le Repository GitHub qui a été créé -> https://github.com/slaeuffer/POK1

  1. Le front-end (HTML/CSS)

La première étape était de m'occuper du Front-End: Incorporer l'HTML et le CSS simultanément, et rédiger les contenus en opérant linéairement sur le contenu du site. L'intro: un simple texte, une navbar et un wallpaper fixe Les compétences: Sous formes de plusieurs boites, qui viendront prendre la place du wallpaper avec une fond d'écran blanc. Le parcours: Ajouter mon parcours scolaire et professionnel à l'aide de librairie. Les projets: Sous forme de petites boites, grâce à Bootstrap, qui redirigeront vers des liens GitHub.

Le but est de se baser sur Bootstrap mais en modifiant peu le CSS afin de personnaliser au maximum pour avoir exactement ce que j'ai en tête

  1. Ajouter des animations

Je voulais en plus de ça donner un côté animé au CV, j'ai donc trouvé une librairie appelé AOS (Animate on Scroll) qui permet d'afficher des élément au fur et à mesure que l'on descends dans le CV avec des transitions.

Lien vers Animate on Scroll -> https://michalsnik.github.io/aos/

Bilan

Finalement je me suis beaucoup focalisé sur le Front End et n'ai pas pris le temps d'explorer le back-end, aussi je n'avais pas d'idée utile à implémenter dans ce CV qui pourrait nécessiter un back-end.