Site personnel en symfony
Ce site web présente mes compétences, mon parcours et mes réalisations, et comporte un formulaire de contact fonctionnel ainsi qu'un back office permettant la gestion des données relatives à chaque réalisation.
Ce site web présente mes compétences, mon parcours et mes réalisations, et comporte un formulaire de contact fonctionnel ainsi qu'un back office permettant la gestion des données relatives à chaque réalisation.
Le site comporte une page d'accueil regroupant des informations générales, une page d'erreur et une page présentant chacune de mes réalisations. Les éléments d'une page sont révélés avec une animation au fur et à mesure que l'utilisateur fait défiler la page, avec plus ou moins de délai afin de créer un effet de succession. La section "parcours" de la page d'accueil est illustrée par une horloge virtuelle fonctionnelle.
La page de connexion permet de s'identifier en tant qu'utilisateur et accéder au back-office, qui n'est pas visible pour les visiteurs non-connectés. La landing-page du back-office fait la liste des réalisations présentes dans la base de données et permet, pour chacune d'entre elles, de voir ses détails et de modifier ses données par un formulaire. Elle comporte également un lien vers un formulaire permettant d'ajouter de nouvelles réalisations.
Les messages envoyés par le formulaire de contact sont affichés sur cette page, ainsi que le nombre de messages interceptés par le pot de miel et la date de la plus récente interception.
La page de détails associée à une réalisation fait la liste des captures d'écrans affichées sur sa page de présentation et des liens affichés dans sa description. Chacun de ces éléments peut être modifié par un formulaire. Elle comporte également un lien vers deux formulaires permettant d'ajouter respectivement une nouvelle capture d'écran et un nouveau lien.
Le formulaire de contact comporte un champ honeypot. L'horaire de chaque utilisation frauduleuse du formulaire est consignée dans la base de données à des fins de recherche personnelle.
Ce projet suit le modèle MVC implémenté par le framework Symfony et son moteur de templates Twig. Composer est utilisé pour gérer les dépendances PHP, et Yarn pour les dépendances Javascript. Le style a été écrit en Sass puis traduit en CSS avec l'outil Webpack. Les scripts ont été compressés avec Webpack. Le code a été versionné tout au long du développement à l'aide de l'outil Git.
La structure de la base de données se compose des entités Réalisation, Lien, Capture d'écran, Technologie, Message du formulaire et Utilisateur. Chaque Capture d'écran est associée à une seule Réalisation ; chaque Réalisation peut comporter plusieurs Captures d'écran. Il en va de même pour les Liens. Une Réalisation peut comporter plusieurs Technologies, et une même Technologie peut être utilisée par plusieurs Réalisations. L'entité Message du formulaire n'est liée à aucune autre et sert au stockage des messages reçus par le formulaire de contact. L'entité Utilisateur n'est liée à aucune autre et sert à l'authentification des utilisateurs.
Pour l'animation successive des éléments d'une page, j'ai développé un module Javascript réutilisable. Ce module détecte les éléments de la page possédant la classe CSS entrance et applique une transformation à leurs éléments fils avec un délai croissant. La transformation n'est appliquée que lorsque que la page a été suffisamment défilée pour révéler l'élément cible. Quelques classes CSS secondaires permettent de choisir le type d'animation à appliquer : arrivée par la gauche, par la droite ou en fondu.
