J'ai donc décidé pendant ces vacances d'été 2020 d'améliorer mon site en le recodant de 0 afin de le moderniser et de repartir sur des bases plus solides. Pour cela j'ai recodé l'entièreté du site à la main en HTML5 et CSS3 sans framework (sans bootstrap) afin d'avoir un meilleur contrôle sur le style du site car en commençant ce projet je me suis rendu compte que le framework bootstrap est très utile pour aller plus vite sur le développement d'un site mais il comporte un défaut majeur qui est que selon moi il peut y avoir des conflits entre le style instauré par bootstrap et le style que j'ai développé. C'est-à-dire que si je veux qu'un élément ai un design précis cela peut être plus compliqué (sauf en ajoutant éventuellement un '!important' à la propriété voulue) et cela me permet de savoir exactement comment est stylisé un élément et avec quelles propriétés ! Ainsi j'ai entièrement repensé le site en y ajoutant des éléments graphiques (cités plus bas) et en modifiant certains éléments déjà présents sur la version précédente du site. Je l'ai aussi rendu totalement "responsive" c'est-à-dire qu'il s'adapte à toute les tailles d'écrans comme aux écrans de smartphones notamment.
- Une page d'accueil totalement retravaillée avec :
> Un en-tête avec un fond type bois issu de pexels.com
et avec un effet de parallaxe
> Animation des sous-titres avec le clignotement du premier et la modification du texte pour le
second
> Les trois dernières actualités sont également regroupées sous forme de cartes avec un effet de
translation de la partie
qui comprend l'icône et le titre afin de dévoiler le texte qui résume l'actualités sélectionnée
> On retrouve aussi mes deux autres sites sous forme de bannières en noir et blanc qui au survol
deviennent en couleur
> J'ai aussi décidé pour la partie où je me présente de créer une carte avec moi de dos afin
de me montrer sans dévoiler mon visage, cela garde une part de mystère :D (évidemment
le mystère ne sera pas long car j'ai pour projet comme indiqué sur la page d'accueil
de créer une page avec mon cv et par conséquent mon visage (les raisons de l'indisponibilité
de cette page sont évoquées plus bas)) ! La carte se retourne afin de montrer mes activités
principales en matière "professionnel". Mes réseaux sont également présents sur cette deuxième face
de la carte. Celle-ci se retourne avec une animation seulement sur Mozilla Firefox car l'animation
de retournement comportait d'importants bugs sur chrome et edge donc j'ai décidé de l'appliqué
simplement
à mozilla.
> Enfin sur cette page d'accueil j'ai rédigé un petit texte afin de me présenter et d'expliquer la
démarche
que j'ai suivie pour la création de ce site !
- Sur les autres pages pour les grandes "catégories" c'est-à-dire pour les pages principales
montrées sur le menu (actus, créations et à propos) il y a une bannière en haut de chacune
de ces pages, la bannière comprend image de fond et un texte au premier plan. Le fond dispose
d'un effet de parallaxe pour toutes ces bannières
- Les actualités sont également disponibles sous forme de cartes comme sur l'accueil sur la
page regroupant l'ensemble des actus
- Sur la page créations les sites sont désormais sous la forme de cartes avec un texte qui se dévoile
au survol et un lien vers les sites au niveau de la "miniature" du site en question
- Une page crédits à été créée afin de mentionner notamment les photographes qui sont à
l'origine des photos utilisés sur mon site
- Le pied de page à également entièrement été retravaillé et comporte maintenant :
> les principales qui peuvent être utiles (Accueil, Partenariats, Crédits et A propos)
> mes réseaux sociaux ainsi que mon adresse mail d'assistance avec un lien direct vers votre boîte
mail lorsque celle-ci est installée sur votre ordinateur sous forme de logiciel ou lorsque celle-ci
est installée sur votre smartphone ou tablette sous forme d'application ! Ainsi ce lien permet de
rentrer automatiquement l'adresse d'assistance dans le champ adresse mail de votre boîte
> Les liens vers mes deux autres sites
- L'ensemble du site est désormais responsive, ce qui signifie qu'il est donc
parfaitement lisible sur tout les écrans
- Ainsi le pied de page par exemple passe d'horizontal sur un écran type ordinateur
à vertical sur un écran type smartphone
- Le menu est lui aussi responsive, de ce fait il est sous forme de bannière (comme
sur les anciennes versions du site) sur des écrans de pc mais il est remplacé par
trois barres qui lorsque l'on clique dessus affichent le menu sous forme vertical
en superposition de la page sur laquelle vous êtes
- Le tableau de la page partenariats passe d'horizontal à vertical sur un écran
de smartphone
J'ai créé un compte github et vous avez donc accès au dépôt de mon site via le lien présent dans le pied de page dans la partie Mes réseaux. Ce dépôt vous permet de voir comment le site à été codé et structuré, ainsi il regroupe l'ensemble du site ! Il sera mis à jour à chaque modification.
Tout d'abord les deux pages concernées sont les pages, "Espace recruteurs"
et "Mes skills"
Pour ce qui est de la page "Espace recruteurs" elle comprendra mon cv en ligne
comme dit précedemment. Elle est indisponible à la sortie de la V2 du site car
je préfèrait me concentrer en priorité sur la rénovation du reste du site avant
de me concentrer sur cette page. Aussi car je préfère prendre mon temps pour la
concevoir et ainsi sortir un cv plus qualitatif que si j'avais sorti la page
sous la précipitation et la pression du temps étant donné que je m'étais fixé
comme deadline pour cette mise à jour la fin des vacances scolaires estivales.
Enfin pour ce qui est de la page "Mes skills" comme pour la page dont j'ai parlé
précédemment j'ai préféré prendre mon temps pour en concevoir une nouvelle version
aussi aboutie que possible plutôt que de me précipiter.