FullDevSpirit

J’ai créé un site WordPress Portfolio, nommé FullDevSpirit.

But du projet

Le but de cette création est de concevoir et développer un portfolio professionnel, sous WordPress, pour présenter mes compétences en design ainsi qu’en développement web et pour documenter mes projets (fiches détaillées + démos).
Ce site sert à la fois de vitrine personnelle et de support, montrant mon processus de travail et mes réalisations concrètes.

Objectifs

Processus de création

1. Recherche

Pour commencer, j’ai cherché ce qui se faisait sur Internet par des freelances et des étudiants qui se présentent et montrent leurs compétences.

Par la suite, j’ai réfléchi au nom de domaine que je pourrais donner à mon site portfolio. Après quelques idées, j’ai choisi « fulldevspirit » avec l’association de « full » pour FullStack, « dev » pour développement web et « spirit » pour esprit créatif.

Après, j’ai loué le nom de domaine « fulldevspirit.fr » que j’ai hébergé sur le serveur français O2Switch.

Enfin, j’ai commencé à travailler sur ma charte graphique.

2. Identité visuelle

Pour créer mon identité visuelle, j’ai tout d’abord défini une palette de couleurs qui pourrait me représenter au mieux. J’ai choisi de partir sur des tons bleus car cette teinte représente la technologie, mais c’est aussi ma couleur préférée. Pour créer cette palette, j’ai utilisé Adobe Color, ce qui donne :

Par la suite, avec cette palette de couleurs, j’ai conçu mon logo, en travaillant sur Adobe Illustrator. Sur ce logo, nous pouvons voir une flamme qui représente l’esprit mais aussi mon énergie. Dans cette flamme, il y a les lettres F, D et S qui représentent les initiales de FullDevSpirit, en cadrer d’une balise fermante HTML </>. Enfin, nous pouvons aussi discerner une planète, en fond, représentant le Web.

3. Développement

Thème du site

Tout d’abord, j’ai installé sur mon nom de domaine le CMS (Content Management System) WordPress, afin d’accéder au tableau de bord pour créer mon site web. Sur mon site WordPress, j’ai utilisé le thème Kadence qui permet une grande liberté de personnalisation.

Extension

En suite, j’ai téléchargé et activé différentes extensions pour le bon développement et fonctionnement du site web :

  • Yoast SEO qui permet de bien développer le référencement naturel (SEO) du site, afin de l’optimiser et de rendre visible sur les moteurs de recherche.
  • Lite Speed Cache qui permet aussi l’optimisation du site, avec une mise en cache, pour rendre le chargement des pages plus rapides.
  • Kadence Blocks qui permet de développer les pages facilement, avec l’utilisation de blocs prédéfinis, il s’ajoute directement à Gutenberg qui est le constructeur de page par défaut de WordPress.
  • Spectra s’ajoute aussi, ce qui va permettre l’ajout d’animations, afin de rendre le site dynamique.
  • WPForms Lite qui m’a permis de créer le formulaire de contact.
  • Advanced Google reCAPTCHA qui permet de vérifier, si la personne n’est pas un robot, pour limiter les spams ou les tentatives de cyber-attaque par force brut.
  • Complianz qui permet de gérer le consentement des cookies sur le site.

Zoning

De plus, j’ai créé la base avec :

  • Dans le header le logo ainsi que le nom du site à gauche et le menu de navigation principale à droite.
  • Dans le footer, un menu de navigation secondaire, avec les pages légales sur la ligne du haut, les réseaux sociaux au milieu et le copyright sur la ligne du bas, le tout aligné au centre.

Page

Par la suite, j’ai créé les différentes pages grâce à Gutenberg, Kadence blocks et Spectra :

  • La page Accueil qui comporte un premier encadré avec une photo, un texte résumé et un bouton « en savoir plus » qui donne accès à la page A propos, puis une frise qui présente les différents projets réalisés, accompagné également d’un bouton « en voir plus » qui donne lui accès à la page Portfolio.
  • La page Portfolio est composée de trois encadrés, le premier pour mes créations de sites WordPress, le second pour celles de sites web codés en brut et le troisième pour celles de différents design. Pour chacun de ces encadrés, nous avons la présentation brève de quelques projets, avec un bouton « En savoir plus », afin d’accéder à l’article complet du projet sélectionné. (Actuellement, cet article est le seul mis en ligne)
  • La page A propos comporte aussi 3 parties. La première partie est un résumé de mon parcours avec une photo qui était aussi présente sur la page d’Accueil. La seconde partie présente les compétences que je maîtrise actuellement, réparties en différentes sous parties. Enfin, la troisième partie révèle mes centres d’intérêts. Pour terminer, il y a un bouton « Voir mon CV » qui comme son nom l’indique, permet d’accéder à mon CV, en version pdf téléchargeable et imprimable.
  • La page Contact comporte un formulaire permettant de me contacter facilement.

4. Tests et Améliorations

Pour finir, j’ai vérifié que le site soit bien responsive, c’est-à-dire qu’il soit visible, correctement sur différents supports :ordinateur, tablette ainsi que téléphone et que les liens fonctionnent. Plus tard, le site pourra être amélioré, si besoin.

5. Conclusion

Ce projet m’a permis de consolider mes connaissances et le développement complet d’un site web : de la recherche initiale à la mise en ligne. J’ai notamment amélioré ma maîtrise de WordPress avec Kadence, pour créer les pages et optimiser la structure du contenu, pour répondre aux attentes des clients (rapidité, lisibilité, preuves concrètes de compétences, …).