Développer

Cet apprentissage critique valide ma capacité à intégrer des interfaces web modernes, fluides et parfaitement adaptées à toutes les tailles d'écrans (Desktop, Tablette, Mobile) en utilisant les standards du développement front-end.

Pour présenter mes travaux, j'ai choisi de développer mon propre site portfolio en autonomie complète, ce qui m'a permis de confronter mes choix de design (orientés néo-brutalisme) aux réalités de l'intégration web.

Structure et sémantique : Utilisation d'un code HTML5 épuré et sémantique pour garantir une bonne structure et optimiser l'accessibilité.

Mise en page dynamique : Utilisation intensive de CSS Flexbox et Grid pour concevoir des grilles d'alignement audacieuses et gérer le placement de mes blocs de projets.

Cet apprentissage critique valide ma capacité à concevoir et implémenter une interface d'administration sécurisée permettant de gérer dynamiquement les données et le contenu d'une application web.

Le système actuel : Pour administrer mon portfolio sans toucher directement aux fichiers sources, j'ai développé un back-office sur-mesure. L'accès est restreint par une URL masquée et sécurisé par une authentification stricte (identifiant et mot de passe). Une fois connecté, cette interface me permet d'uploader de nouvelles images, de gérer mes galeries et d'ajouter dynamiquement mes derniers projets freelance ou universitaires.

L'évolution du besoin : En BUT1, mon système intégrait une gestion de rôles permettant à des utilisateurs externes (les enseignants) de tester des actions d'édition ou de suppression. J'ai fait le choix de supprimer cette fonctionnalité devenue inutile pour mon usage actuel.

L'expérience utilisateur est enrichie par des composants dynamiques développés en JavaScript et CSS. J'ai programmé un système de boutons de filtrage en JavaScript pour trier mes projets en temps réel sur l'accueil. J'ai également intégré des micro-interactions au survol (boutons et cartes qui se soulèvent selon ma DA Néo-Brutaliste) ainsi qu'un slider interactif Avant/Après pour comparer l'évolution de mes créations graphiques.

La logique de traitement des données est visible sur mon formulaire de contact et de commande. Pour éviter d'ouvrir la messagerie par défaut de l'utilisateur, j'ai créé et configuré une application dédiée via une API Google. Mon script traite la requête en arrière-plan : il récupère les données saisies par le client, les formate dans un template d'e-mail propre en HTML, génère une double notification automatisée (pour moi et un accusé de réception pour le client) et gère intelligemment le routage des réponses.

J'ai mis en place une stratégie globale d'optimisation technique :

Performance : Afin de ne pas surcharger la bande passante, mon code génère une compression dynamique des images pour l'affichage des galeries. Les images HD d'origine ne sont chargées que si l'utilisateur clique spécifiquement dessus.

Référencement (SEO) : J'ai structuré rigoureusement mes balises de titres (<h1> uniques pour les pages, blocs injectés automatiquement en <h2> ou <h3>), intégré des attributs alt descriptifs sur chaque média, et généré un fichier Sitemap.xml soumis aux robots de Google pour indexer efficacement l'arborescence de mon site.

Pour la mise en ligne, j'ai sélectionné et configuré une solution d'hébergement mutualisé chez Hostinger, acquise pour une durée de 2 ans. J'ai acheté et configuré mon propre nom de domaine personnalisé en .fr (cohérent avec ma cible locale et francophone) et lié l'ensemble à mes répertoires de fichiers et à mes bases de données via mon panel d'administration.

Le développement de ce portfolio de A à Z prouve ma polyvalence technique. J'ai su lier des compétences en intégration front-end, en logique applicative (API) et en gestion d'infrastructure (hébergement/SEO). La principale marge de progression réside dans l'automatisation future de mon "Page Builder" pour simplifier encore plus l'injection de nouveaux formats de blocs sans maintenance de code.