Magali NOTTEGHEM

Vitrine interactive de mes projets

Ce site portfolio a été conçu comme un projet personnel évolutif, pensé pour présenter mes compétences techniques, mon parcours et mes projets de développement. Il repose sur une base solide de Bootstrap, enrichie par l'intégration d'un thème Bootswatch installé via NPM puis personnalisé à l'aide de SASS en modifiant les variables SCSS du thème. Le style est ainsi adapté à mon identité visuelle tout en conservant une excellente base responsive et accessible. Le site est hébergé sur un VPS personnel, versionné avec Gitea dans un environnement Dockerisé. Il utilise Formspree pour la gestion sécurisée des messages via le formulaire de contact. L'interactivité a été développée en JavaScript Vanilla, avec notamment un système de filtres dynamiques basé sur les technologies des projets (attributs data-tech) et une gestion conditionnelle de l'affichage. Ce portfolio respecte des principes de clean code, une structure modulaire et une logique claire de séparation entre le programme principal et les fonctions. Le code est maintenable, pensé pour être robuste et évolutif, avec des pratiques de refactorisation régulière et une approche proche de la philosophie ETL dans certains traitements (extraction des filtres, transformation en tableau, application à l'affichage).

Page d'accueil conforme WCAG AA — Score 100/100 (Lighthouse) et Page CV conforme WCAG AA — Score 97/100 (Lighthouse)

Mise à jour le 09/05/2025 - Version n°2.0.0

Site web statique pour mettre en avant notre formation DWWM

Ce projet a été réalisé en tout début de formation Développeur Web – Web Mobile, dans le cadre d'un exercice visant à concevoir un site vitrine statique pour valoriser la formation DWWM de l'AFPA. Il s'agissait de respecter un cahier des charges précis, incluant une charte graphique imposée, un contenu prédéfini et plusieurs contraintes de structure. J'ai conçu les maquettes des pages avant de développer la structure HTML, puis j'ai stylisé l'ensemble avec du CSS et des composants de Bootstrap. Le design repose sur un choix de couleurs réfléchi : j'ai utilisé le jaune fourni dans la palette pour accentuer et mettre en valeur le vert emblématique de l'AFPA. Pour la section témoignages, j'ai choisi d'intégrer un carrousel Bootstrap combiné avec des cartes personnalisées afin d'obtenir un rendu riche, clair et structuré. Ce projet a constitué une première mise en pratique de la création d'interfaces front-end accessibles, harmonieuses et fidèles à une commande réelle.

Mise à jour le 03/06/2023 - Version n°1.0.0

Site web de gestion de cave à vin nommé "Vinvincible"

Ce projet a été mené dans le cadre de ma formation Développeur Web - Web Mobile. Il s'agit d'une application web dédiée à la gestion d'une cave à vin, nommée Vinvincible. Elle permet au gestionnaire d'organiser et de consulter l'ensemble des références de vins selon des attributs relationnels : couleur, pays, région, appellation, cépage, ainsi que les accords mets et vins via une interface CRUD complète. L'interface, construite avec HTML, CSS, Bootstrap, un thème Bootswatch et une logique métier pilotée en JavaScript avec l'utilisation d'une classe Ajax (fournie). Ce projet a été l'occasion de mettre en œuvre une navigation claire, fonctionnelle et d'appliquer des bonnes pratiques comme la manipulation dynamique du DOM. Le site repose sur une architecture orientée données et consomme une API REST externe pour récupérer dynamiquement les informations des vins, ce qui permet également de croiser les données pour une meilleure exploitation des relations métiers, notamment au travers de la page "Accord Mets et Vins". Une gestion complète des CRUD est prévue. Ce projet met en pratique des notions essentielles telles que la modularité du code, la séparation des responsabilités (données, affichage, logique) et l'intégration d'un backend distant. Il constitue un bon exemple de conception front-end couplée à une API dans un contexte métier concret.

Mise à jour le 26/07/2023 - Version n°1.0.0

Chez les Maralpins

Ce projet a été réalisé dans le cadre de la formation Développeur Web – Web Mobile, avec pour objectif de concevoir un site vitrine touristique dédié au département des Alpes-Maritimes. Le client souhaitait un site statique organisé autour de plusieurs thématiques : Art et Culture, Tourisme et Gastronomie, et Infos pratiques. J'ai choisi d'utiliser WordPress pour sa souplesse d'intégration, sa rapidité de mise en œuvre et son efficacité pour ce type de projet. Le site repose sur le thème Ashe, personnalisé via l'interface d'administration. J'y ai intégré le plugin B Carrousel Block pour mettre en place un carrousel adaptatif et interactif, améliorant la navigation entre les pages. Le site comprend également l'intégration d'une vidéo YouTube et d'un widget météo embarqué en iframe, configuré à partir des données disponibles sur le site de Météo France. Une attention particulière a été portée à l'accessibilité visuelle avec l'activation d'un mode sombre (dark mode). Enfin, j'ai pris en charge la mise en production complète du site via mon hébergeur, de la configuration du menu à la publication des contenus.

Mise à jour le 02/08/2023 - Version n°1.0.0

Sociétée de Distribution des Bières du Monde

Ce projet a été mené dans le cadre de ma formation Développeur Web - Web Mobile, en collaboration avec deux collègues développeurs en formation. L'objectif était de concevoir une application de gestion pour une entreprise fictive de distribution internationale de bières. Le site permet d'administrer une base de données relationnelle contenant les informations des bières (type, couleur, pays, continent, fabricant, marque) via une interface CRUD complète. Un module dédié à la gestion de tickets de vente permet également de simuler l'activité commerciale de l'entreprise. Le projet repose sur une architecture MVC maison écrite en PHP, avec une couche de connexion à la base de données via PDO. L'interface utilisateur est basée sur un thème Bootswatch et intégré avec Bootstrap pour assurer une navigation responsive et accessible. Cette expérience m'a permis d'approfondir mes compétences en conception d'interface, en organisation du code selon les bonnes pratiques, et en travail d'équipe autour d'un projet structuré.

Mise à jour le 22/10/2023 - Version n°1.0.1

SDBM avec l'internationnalisation

Ce projet a été mené dans le cadre de ma formation Développeur Web - Web Mobile, en collaboration avec deux collègues développeurs en formation. Cette version du projet SDBM a été entièrement refondue en Symfony pour consolider mes compétences en framework PHP moderne et assurer une structure robuste et modulaire. L'objectif restait identique : développer un outil de gestion des références de bières pour une entreprise de distribution internationale fictive.

L'application permet de gérer un ensemble d'entités liées aux bières (types, couleurs, continents, fabricants, marques, etc.), avec des interfaces de création, modification, suppression et consultation. J'ai mis en œuvre les fondements du framework Symfony : architecture MVC, routage clair, entités Doctrine et templates Twig.

Pour améliorer l'expérience utilisateur, cette version inclut la gestion des messages flash et l'internationalisation (i18n), permettant de traduire dynamiquement l'interface avec un bouton dans barre de navigation. L'interface graphique s'appuie sur Bootstrap et un thème Bootswatch pour une bonne accessibilité et une cohérence visuelle.

En parallèle du développement, j'ai également endossé un rôle de gestion de projet : définition des objectifs, création d'une roadmap claire, attribution des tâches et mise en place de deadlines pour structurer le travail d'équipe et garantir la livraison dans les temps.

Mise à jour le 02/12/2023 - Version n°1.0.0

Vapobar - Pluggin "Eu-Disclaimer" réalisé pour le site Vapobar

Ce projet a été réalisé dans le cadre de la formation Développeur Web – Web Mobile afin de mettre en avant mes compétences aussi bien en front-end qu'en back-end avec WordPress. Il s'agissait de concevoir un site vitrine pour le bar à vapotage Vapobar, tout en intégrant un système de conformité avec la législation européenne. Pour cela, j'ai développé un plugin WordPress personnalisé nommé « EU Disclaimer », permettant d'afficher une modale dès l'arrivée sur le site. Le visiteur doit confirmer s'il a plus de 18 ans : en cas de réponse négative, il est automatiquement redirigé vers un site externe (google.com). Ce plugin dispose d'une interface d'administration dédiée, permettant au client de modifier le message affiché directement depuis le back-office. Le site repose sur un thème WordPress de type One Page, conçu pour offrir une navigation fluide par ancrage et un affichage continu au scroll. Ce choix assure une expérience utilisateur dynamique et moderne, tout en mettant en valeur le projet du client. L'ensemble du site a été mis en production sur un hébergement personnel.

Mise à jour le 26/12/2023 - Version n°1.0.0

HoWARD - Version demo

Développé dans le cadre de mon stage chez JMN Formation & Dev, ce projet s'adresse aux formateurs en développement souhaitant optimiser la correction des devoirs. À partir d'une base existante, j'ai apporté des améliorations fonctionnelles et une identité graphique claire, tout en renforçant l'automatisation des traitements. HoWARD fonctionne conjointement avec le filesystem et une base de données SQLite. J'ai mis en place des Symfony Commands personnalisées permettant de manipuler les fichiers étudiants et d'enregistrer les données liées aux devoirs et aux élèves. J'ai également implémenté une exportation CSV pour faciliter le suivi pédagogique et automatisé des calculs de notes et de moyennes. Côté interface, l'intégration complète du Front-end via Webpack Encore m'a permis d'ajouter Bootstrap JS, un thème Bootswatch personnalisé via SASS, ainsi qu'une librairie de coloration syntaxique highlight.js pour améliorer la lisibilité des fichiers corrigés. L'outil dispose d'une interface sécurisée avec authentification (login, mot de passe), garantissant un accès restreint et sécurisé pour les formateurs.

Mise à jour le 17/07/2024 - Version n°1.0.1

Pour JMN Formation&Dev

J'ai conçu et développé le site vitrine pour la société JMN Formation & Dev, spécialisée dans la formation en développement web, la création et la maintenance de site web. Ce projet avait pour objectif de mettre en avant les compétences et les services proposés par l'entreprise de manière claire, moderne, et accessible. Après l'étude des besoins du client, j'ai proposé une solution axée sur un site one-page optimisé pour la navigation. L'idée principale était d'offrir une expérience utilisateur fluide avec un menu de navigation ancré, permettant d'accéder rapidement à chaque section sans rechargement de page. Pour le design, j'ai sélectionné un thème Bootswatch que j'ai personnalisé à l'aide de SASS, afin de l'aligner sur la charte graphique de l'entreprise. J'ai également intégré un formulaire de contact via formspree pour permettre aux visiteurs de soumettre facilement leurs demandes de devis.

Mise à jour le Mise à jour le 30/09/2024 - Version n°1.0.0

Projet personnel

Ce projet a été développé pour répondre aux besoins concrets d'une beautycienne indépendante souhaitant digitaliser et centraliser la gestion de ses fiches clientes (ventes et soins). À partir d'un premier échange de cadrage, j'ai établi un cahier des charges structuré accompagné de maquettes fonctionnelles, validées par la cliente avant le développement. L'application propose une interface claire et intuitive, avec un tableau client accessible dès la navigation principale. Une barre de recherche permet un accès direct aux fiches par prénom, optimisant la navigation au quotidien. Pour la gestion des ventes, des groupes de boutons et des menus déroulants guident l'utilisateur dans la sélection des marques, produits et quantités, avec une interface adaptative selon le type de rendez-vous. Une attention particulière a été portée à la fluidité de l'expérience : l'ajout, la modification et la consultation des données se fait de manière rapide et lisible, avec un système de navigation entre fiches et listes. Un encart met en valeur les anniversaires du jour, et une iframe embarque Google Agenda pour la gestion externe des rendez-vous. L'ensemble du projet est structuré selon une architecture MVC, avec un code maintenable, refactorisé et orienté expérience utilisateur, propulsé par Symfony et optimisé grâce à Webpack Encore.

Mise à jour le 30/11/2024 - Version n°1.0.0

Utilisez les bases de Python pour l'analyse de marché

Dans le cadre de ma formation Développeur d'application Python, j'ai conçu un scraper web automatisé visant à extraire des données à partir du site de e-commerce Books to Scrape, spécialisé dans la vente de livres. Ce projet s'inscrit dans une logique de pipeline ETL (Extract, Transform, Load) : extraction des données HTML via les bibliothèques requests et BeautifulSoup, transformation et nettoyage des informations (prix, titre, disponibilité, notation, etc.), et chargement final dans des fichiers CSV organisés par catégories. Le script télécharge également toutes les images produits, en respectant une structure de fichiers claire et hiérarchisée. L'architecture a été pensée pour assurer la maintenabilité, avec une séparation logique des responsabilités via des fonctions dédiées et robustes. L'exploration du site est automatisé, avec une gestion des erreurs réseau, du multi-page scraping, de la création dynamique de dossiers d'exports, et une attention particulière portée à la qualité du nommage, notamment les chemins de fichiers. Ce projet met en lumière ma capacité à manipuler des données web, à construire une application Python robuste orientée vers la production de données exploitables, et à appliquer des bonnes pratiques de développement telles que l'usage d'environnements virtuels, de fichiers .gitignore et d'une documentation claire (README.md, docstrings, etc.). L'ensemble du code est versionné sur GitHub.

Mise à jour le 23/12/2024 - Version n°1.0.0

Désignez une application Python

Dans le cadre de ma formation Développeur d'application Python, j'ai réalisé une étude complète visant à concevoir une application adaptée aux besoins spécifiques d'un client fictif dans le domaine éducatif. Ce projet avait pour objectif de structurer et documenter toutes les étapes de conception d'un logiciel sans entrer dans sa phase de développement. J'ai produit un cahier des charges détaillé comprenant des spécifications fonctionnelles et techniques, un diagramme de classes UML, ainsi qu'un backlog produit priorisé selon la méthode MoSCoW. L'ensemble des besoins métiers a été traduit en user stories complètes avec critères d'acceptation clairs. Une veille technologique a également été menée pour justifier les choix d'architecture et de technologies (Django, MySQL, Bootstrap, etc.). Le projet a mis en valeur des compétences en analyse métier, modélisation orientée objet, planification agile et en conception robuste de solution. L'organisation du travail s'est appuyée sur les bonnes pratiques de documentation et de gestion de projet agile avec un tableau Kanban et l'usage de story points pour estimer la charge de travail.

Mise à jour le 21/01/2025 - Version n°1.0.0

Développez un programme logiciel en Python

Dans le cadre de ma formation Développeur d'application Python, j'ai conçu un script qui consistait en une application logicielle de gestion de tournoi d'échecs, en appliquant une architecture modulaire inspirée du design pattern MVC. Le programme permet de créer, enregistrer, restaurer et manipuler des données liées aux joueurs, aux matchs et aux tours, avec un fonctionnement en ligne de commande interactif grâce à la bibliothèque questionary. L'utilisateur peut enregistrer les résultats, consulter l'historique, générer des matchs automatiquement, et retrouver les informations en temps réel dans des fichiers JSON structurés. Ce projet met en œuvre les principes de programmation orientée objet (POO) et une structuration claire en modules (models, views, controllers). Il s’appuie sur des bibliothèques Python telles que TinyDB pour la persistance des données, Rich pour un affichage évolué en console, et itertools pour la génération dynamique d'appariements. Un effort particulier a été porté sur la robustesse du code, la validation des données, la gestion des erreurs, et la refactorisation continue. La logique de sauvegarde/restauration fonctionne à l'aide de fichiers de backup , assurant une automatisation fiable et sécurisée des données.

Mise à jour le 11/03/2025 - Version n°1.0.0

Développez une interface utilisateur pour une application web Python

Ce projet a été réalisé dans le cadre de ma formation Développeur d'application Python. Il s'agit d'une interface web responsive qui consomme une API REST de films pour présenter dynamiquement aux utilisateurs une sélection de contenus cinématographiques. Le site permet d'afficher le film le mieux noté, les meilleures œuvres toutes catégories confondues, ainsi que les meilleurs films par genre. Il intègre également une modale interactive avec des informations détaillées sur chaque film, un système “Voir plus / Voir moins” selon la taille d'écran, et un menu déroulant personnalisé pour filtrer les catégories. Ce projet met en œuvre des technologies modernes telles que HTML5, JavaScript (vanilla), et Tailwind CSS pour un design adaptatif. Le code a été conçu avec une attention particulière portée à la maintenabilité : séparation des responsabilités (affichage, logique, utilitaires), application des principes de clean code, et gestion d'erreurs lors des appels API (fetch avec async/await). Le projet est enrichi d'éléments d'accessibilité (ARIA), et a bénéficié d'un processus de refactorisation progressif pour renforcer sa robustesse. Le formatage automatique a été assuré via Prettier et ESLint, favorisant un environnement de développement automatisé et cohérent.

Mise à jour le 11/04/2025 - Version n°1.0.0

Résolvez des problèmes en utilisant des algorithmes en Python

Ce projet, réalisé dans le cadre de ma formation Développeur d'application Python, avait pour objectif de concevoir un programme capable d'identifier la combinaison d'actions la plus rentable à acheter, tout en respectant une contrainte budgétaire. J'ai développé deux approches complémentaires : une solution brute-force exhaustive utilisant la récursivité, puis une version optimisée s'appuyant sur la programmation dynamique pour améliorer significativement les performances. Le traitement est automatisé via des scripts, depuis l'import des fichiers CSV jusqu'à l'affichage des résultats enrichis dans la console.

L'étude approfondie de la complexité algorithmique (Big O) m'a permis de comparer les deux solutions. L'approche brute-force présente une complexité en temps de O(n × 2ⁿ) et une complexité en espace de O(2ⁿ), ce qui la rend rapidement inutilisable sur de grands jeux de données. En revanche, l'algorithme optimisé offre une complexité en temps de O(n²) et en espace de O(n × m) (avec m le budget), bien plus adaptée aux cas réels. Cette comparaison m'a fait prendre conscience de l'impact direct des choix d'implémentation sur les ressources utilisées, et de l'importance de coder léger et intelligemment dès la conception.

Ce projet met en œuvre plusieurs bonnes pratiques de développement logiciel : code modulaire, application des principes de clean code (naming convention, documentation, gestion d'erreurs), séparation claire des responsabilités et refactorisation continue. L'outil exploite la bibliothèque rich pour une interface console claire. Le projet illustre la capacité à concevoir des algorithmes robustes, comparables et scalables, en prenant en compte les compromis entre justesse et performance.

Mise à jour le 08/05/2025 - Version n°1.0.0