FullDevSpirit

J’ai créé mon site portfolio nommé FullDevSpirit. Le but de ce projet était la conception d’un portfolio professionnel sous WordPress, afin de présenter mes compétences en design et en développement web, ainsi que pour documenter mes projets avec des fiches détaillées et des démonstrations. Ce site a pour objectif d’être à la fois une vitrine personnelle et un support permettant de montrer mon processus de travail et mes réalisations concrètes.

Compétences

Programmation d’un site vitrine

Recherche d’une identité visuelle claire et professionnelle

Logiciels

Utilisation du langage HTML

Utilisation du langage CSS

Utilisation du langage JavaScript

Utilisation du CMS WordPress

Développement du projet

Recherche de ce qui se faisait sur Internet du côté des freelances et des étudiants qui présentent leur parcours et leurs compétences.
Par la suite, j’ai réfléchi au nom de domaine que je pourrais donner à mon site portfolio. Après plusieurs idées, j’ai choisi fulldevspirit qui vient de l’association de full pour FullStack, dev pour développement web et spirit pour esprit créatif. J’ai loué le nom de domaine fulldevspirit.fr que j’ai hébergé sur le serveur français O2Switch. J’ai commencé à travailler sur l’univers visuel du site, présenté dans l’article Identité Visuelle FullDevSpirit.
Après, j'ai créer l'identité visuelle de FullDevSpirit (Voir l'article Identité visuelle de FullDevSpirit)
Tout d’abord, j’ai installé sur mon nom de domaine le CMS WordPress, afin d’accéder au tableau de bord et de commencer la création de mon site web. Puis, j’ai choisi le thème "Kadence" qui offre une grande liberté de personnalisation et j’ai créé mon propre thème enfant, à partir de celui-ci.
Pour réaliser ce site, j’ai utilisé plusieurs extensions. Yoast SEO permet d’optimiser le référencement naturel pour améliorer la visibilité sur les moteurs de recherche. LiteSpeed Cache optimise également le site grâce à la mise en cache pour accélérer le chargement des pages. Kadence Blocks facilite la création des pages avec des blocs prédéfinis intégrés à Gutenberg. Spectra permet d’ajouter des animations pour rendre le site plus dynamique. WPForms Lite m’a permis de créer le formulaire de contact.
Advanced Google reCAPTCHA vérifie que l’utilisateur n’est pas un robot afin de limiter les spams et les tentatives de cyberattaque. Complianz gère le consentement des cookies. MetaSlider et WP Carousel m’ont permis de créer les différents carrousels et sliders du site. Solid Security Basique sécurise le site contre les attaques par force brute. Timeline Block m’a permis de créer la frise chronologique de mon parcours. WPCodeLite m’a servi à insérer du code HTML et JavaScript pour l’animation de l’arrière plan du site.
Dans le "Header" se trouve le logo, le nom du site, le menu de navigation de même que mes réseaux sociaux.
Dans le "Footer", nous retrouvons également mes réseaux sociaux ainsi que le menu des pages légales et le copyright.
Pour commencer, la page "Accueil" est composée d’un "Hero" avec une phrase d’accroche et une photo, puis d’un double slider où défilent des images de mes projets avec un bouton menant à la page portfolio.
Puis, sur la page "Portfolio", vous retrouverez un patchwork d’images de mes projets, avec au survol le nom du projet et au clic l’accès à l’article correspondant.
Ensuite, la page "A propos" me présente avec une frise chronologique de mon parcours, suivie de mes objectifs, puis de différents onglets regroupant mes compétences.
Enfin, la page "Contact" contient un formulaire, permettant de me joindre facilement.
Effectivement, ce projet m’a permis de consolider mes connaissances à travers le développement complet d’un site web : de la recherche initiale, en passant par le développent en local jusqu'à la mise en ligne sur le domaine loué. Puis, 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 visiteurs (rapidité, lisibilité, preuves concrètes de compétences, …). Enfin, j'ai aussi pu m'améliorer en JS, avec l'animation d'arrière plan.

Recherche

Recherche de ce qui se faisait sur Internet du côté des freelances et des étudiants qui présentent leur parcours et leurs compétences.
Par la suite, j’ai réfléchi au nom de domaine que je pourrais donner à mon site portfolio. Après plusieurs idées, j’ai choisi fulldevspirit qui vient de l’association de full pour FullStack, dev pour développement web et spirit pour esprit créatif. J’ai loué le nom de domaine fulldevspirit.fr que j’ai hébergé sur le serveur français O2Switch. J’ai commencé à travailler sur l’univers visuel du site, présenté dans l’article Identité Visuelle FullDevSpirit.

Identité visuelle

Après, j’ai réalisé l’identité visuelle de FullDevSpirit (Voir l’article Identité visuelle de FullDevSpirit)

Développement

Thème du site

Tout d’abord, j’ai installé sur mon nom de domaine le CMS WordPress, afin d’accéder au tableau de bord et de commencer la création de mon site web. Puis, j’ai choisi le thème « Kadence » qui offre une grande liberté de personnalisation et j’ai créé mon propre thème enfant, à partir de celui-ci.

Extensions

Pour réaliser ce site, j’ai utilisé plusieurs extensions :

Yoast SEO qui permet d’optimiser le référencement naturel (SEO), pour améliorer la visibilité sur les moteurs de recherche.

LiteSpeed Cache qui optimise également le site, grâce à la mise en cache, pour accélérer le chargement des pages.

Kadence Blocks qui facilite la création des pages avec des blocs prédéfinis intégrés à Gutenberg.

Spectra qui permet d’ajouter des animations, pour rendre le site plus dynamique.

WPForms Lite qui m’a permis de créer le formulaire de contact.

Advanced Google reCAPTCHA qui vérifie que l’utilisateur n’est pas un robot, afin de limiter les spams et les tentatives de cyberattaque.

Complianz qui gère le consentement des cookies.

MetaSlider et WP Carousel m’ont permis de créer les différents carrousels et sliders du site.

Solid Security Basique qui sécurise le site contre les attaques par force brute.

Timeline Block qui m’a permis de créer la frise chronologique de mon parcours.

WPCodeLite qui m’a servi à insérer du code HTML et JavaScript, pour l’animation de l’arrière plan du site.

Zoning

Dans le « Header » se trouve le logo, le nom du site, le menu de navigation de même que mes réseaux sociaux.
Dans le « Footer », nous retrouvons également mes réseaux sociaux ainsi que le menu des pages légales et le copyright.

Pages

Pour commencer, la page « Accueil » est composée d’un « Hero » avec une phrase d’accroche et une photo, puis d’un double slider où défilent des images de mes projets avec un bouton menant à la page portfolio.
Puis, sur la page « Portfolio », vous retrouverez un patchwork d’images de mes projets, avec au survol le nom du projet et au clic l’accès à l’article correspondant.
Ensuite, la page « A propos » me présente avec une frise chronologique de mon parcours, suivie de mes objectifs, puis de différents onglets regroupant mes compétences.
Enfin, la page « Contact » contient un formulaire, permettant de me joindre facilement.

Conclusion

Effectivement, ce projet m’a permis de consolider mes connaissances à travers le développement complet d’un site web : de la recherche initiale, en passant par le développent en local jusqu’à la mise en ligne sur le domaine loué. Puis, 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 visiteurs (rapidité, lisibilité, preuves concrètes de compétences, …). Enfin, j’ai aussi pu m’améliorer en JS, avec l’animation d’arrière plan.