Mon portfolio a été développé avec WordPress, l’Intégration Web est faites avec Html et Sass, et les maquettes ont été faites avec Figma et Photoshop.
1. Phase de maquettage
J’ai realisé la maquette de mon Portfolio avec Figma et Photoshop. Je cherchais un design moderne et dynamique.
J’ai basé mon design autour du texte, des compétences que j’ai à offrir. J’ai reservé l’utilisation des images pour la présentation de mes projets. D’ailleur, sur mon blog, vous pouvez voir que j’ai fait le choix de ne pas utiliser d’image individuelle pour chaque article (Ici je vous explique pourquoi)
Réduire la quantité d’images sur mon portfolio me permettait:
- Focaliser l’attention sur de la vrai information (les informations superflue n’ont pas de valeur ajoutée)
- Améliorer l’UX (optimisation du temps de chargement de chaque page)
2. Intégration Web
Ce site est intégré ainsi :
- HTML / SASS / jQuery
- Full Responsive
- Mobile First
- Adapté à tous les navigateurs modernes
Mon organisation Sass
- Méthodologie BEM (Pour le nommage de classe)
- Sass 7-1 Pattern (Para l’organization de mes fichiers)
- Flexbox et Css Grid Layout
Je maîtrise suffisement l’Intégration Web pour ne pas avoir besoin de surchargé mon css avec des Framework Css type Bootstrap
3. Développement WordPress
Je n’utilise ni de Thème existants, ni de constructeurs, il s’agit d’un thème sur-mesure.
Faire une page sur mesure me permet d’avoir beaucoup plus de contrôle sur mon code, ce qui m’apporte:
- Une facilité de gestion du balisage pour le SEO-onpage
- Plus de maniabilité pour faire évoluer le site
- Un gain de temps pour la maintenance
- Une limitation des failles de sécurité (provenant potentiellement de plugins dont je ne maîtrise pas le code)
- Une amélioration notoire de la vitesse de chargement du site et de l’accessibilité
Ce site est fait avec:
- Le gestionnaire de dépendances Composer
- L’architecture WordPress de johnpbloch
- Gestion des mes assets (css, javascript, images statiques) avec ParcelJS
- Gestion de versioning avec Git
Ce fonctionnement me permet de pouvoir versionner facilement mon code sans devoir versionner la totalité du Core de WordPress (ce qui serait, très lourd, et de ce fait, peu viable). Il me permet également de pouvoir en 5 minutes de faire une nouvelle installation de mon WordPress sur un PC.
Pour la gestion dinamique du contenu des pages, j’utilise (sans usage de plugins):
- Custom Post Type
- Custom Taxonomies
Pour la gestion statique des contenus (éditables depuis le panneau d’administration) :
- ACF (avec acf-json pour faciliter la mise en production).
Ceci me permet d’avoir un dashboard simple et intuitif
Ce site est un site multilingue (francais-espagnol), qui sont mes 2 langues natales. Pour la gestion du multilingue je travaille avec le Plugin Polylang (certaines traductions minieures sont gérées directement depuis PHP)
Plugins utilisés en production:
- Advanced Custom Fields (ACF)
- Polylang
- WebP Express
- YaostSEO
- iThemeSecure
- Enlighter – Customizable Syntax Highlighter
Plugins utilisés en développement:
- Query Monitor
- Advanced Custom Fields: Theme Code