Ce projet correspond à la conception et au développement de mon site portfolio personnel, réalisé dans le cadre de la SAÉ 2.03. L’objectif était de créer une application web dynamique permettant de centraliser l’ensemble de mes productions académiques et professionnelles réalisées durant le BUT MMI, sous forme de traces (infographies, textes, vidéos, etc.) associées à des compétences, apprentissages critiques et argumentaires.
La phase de conception a été réalisée sur Figma et comprend la création d’un user flow pour structurer les parcours utilisateurs, la définition d’un design system pour garantir la cohérence graphique, ainsi que la réalisation de maquettes UI responsives en version desktop et mobile. Une attention particulière a été portée à l’expérience utilisateur, à l’accessibilité et à la lisibilité des contenus.
Le site a ensuite été développé en PHP avec une architecture MVC (Modèle – Vue – Contrôleur) permettant une organisation claire du code et facilitant sa maintenance. L’interface graphique a été conçue avec Tailwind CSS afin d’assurer un rendu moderne, responsive et accessible sur différents supports.
L’application intègre trois profils d’utilisateurs : l’administrateur (gestion des contenus), les évaluateurs (consultation et commentaires) et les visiteurs, comme les recruteurs, qui peuvent consulter le portfolio.
CONCEVOIR
AC12.01 – Concevoir un produit ou un service en termes d’usage et de fonctionnalité
Contexte :
Dans le cadre de la création de mon site portfolio personnel, j’ai conçu une application web permettant de présenter mes projets, mes compétences et mes traces académiques de manière structurée et accessible.
Démarche et réalisations :
J’ai commencé par analyser les besoins des utilisateurs visés (recruteurs, formateurs), notamment la nécessité d’accéder rapidement aux informations essentielles. J’ai ensuite conçu un user flow pour structurer les parcours utilisateurs et organiser les contenus du site. Cette réflexion m’a permis de définir l’architecture des pages et les fonctionnalités principales avant la phase de maquettage et de développement.
Bilan critique :
Cette étape m’a permis d’adopter une démarche centrée utilisateur et d’anticiper les enjeux d’ergonomie et de navigation. Elle a constitué une base solide pour la conception graphique et technique du site.
EXPRIMER
AC13.02 – Produire des pistes graphiques et des planches d’inspiration
Contexte :
Afin de définir l’identité visuelle du portfolio, j’ai réalisé une phase de recherche graphique préalable à la conception de l’interface.
Démarche et réalisations :
J’ai élaboré plusieurs moodboards et défini une charte graphique comprenant une palette de couleurs, des typographies et un style d’interface cohérent. Ces éléments ont servi de base à la création d’un design system et ont orienté la réalisation des maquettes UI.
Bilan critique :
Ce travail m’a permis de structurer visuellement le projet et d’assurer une cohérence graphique entre les différentes pages du site. Il m’a également aidé à aligner les choix esthétiques avec l’image professionnelle que je souhaitais transmettre.
DÉVELOPPER
AC13.05 – Designer une interface web (wireframes, UI)
Contexte :
Le projet consistait à concevoir l’interface complète du site portfolio, en version desktop et mobile.
Démarche et réalisations :
À partir du user flow et du design system, j’ai réalisé des wireframes puis des maquettes haute fidélité sur Figma. J’ai travaillé la hiérarchie visuelle, la lisibilité et l’organisation des contenus afin de faciliter la navigation entre les projets, les compétences et les traces.
Bilan critique :
Cette étape m’a permis de consolider mes compétences en conception d’interface et en ergonomie web, en produisant une interface cohérente, responsive et adaptée aux usages.
AC14.01 – Exploiter un environnement de développement
Pour développer ce projet, j’ai mis en place un environnement de développement local utilisant PHP, MySQL, Visual Studio Code et Git. Cette organisation m’a permis de travailler de manière autonome et structurée, avec un suivi clair du code et des versions.
AC14.02 – Produire des pages web fluides
Le site a été développé en HTML5, CSS (Tailwind) et PHP, en respectant un balisage sémantique et une structure responsive. Les interactions principales ont été pensées pour rester simples et intuitives pour l’utilisateur.
AC14.03 – Générer des pages à partir de données structurées
Le contenu du site est généré dynamiquement à partir d’une base de données MySQL. Des classes PHP orientées objet permettent de modéliser les entités et de gérer l’affichage des données.
AC14.04 – Mettre en ligne une application web
Après les phases de test en local, le site a été déployé sur un hébergement mutualisé avec configuration de la base de données et transfert des fichiers via FTP.
AC14.05 – Modéliser les données
Une modélisation préalable (MCD, MPD, dictionnaire des données) a permis de structurer la base de données avant le développement.
AC14.06 – Structurer une application web (MVC)
Le projet a été organisé selon une architecture inspirée du modèle MVC, séparant les modèles PHP, les vues et la logique applicative.
Gestion des rôles et des permissions
La mise en place de plusieurs types d’utilisateurs (administrateur, étudiant, évaluateur) avec des droits différents a représenté un défi dans l’organisation du backend. Il était nécessaire de contrôler précisément les actions possibles selon le rôle connecté (ajout, modification, commentaire ou consultation).
Pour répondre à ce besoin, j’ai structuré le code en contrôleurs dédiés et mis en place des vérifications de session afin de sécuriser l’accès aux fonctionnalités. Cette organisation a permis de clarifier la gestion des permissions et de rendre le code plus lisible et maintenable.
Affichage conditionnel des traces
Le site devait adapter l’affichage des contenus en fonction du rôle de l’utilisateur, notamment pour la gestion des commentaires visibles uniquement par certains profils.
Ce problème a été résolu grâce à des conditions côté serveur en PHP, combinées à des rendus conditionnels dans les vues. Cette approche garantit que chaque utilisateur accède uniquement aux informations qui le concernent.
Cohérence graphique de l’interface
Lors de la conception des maquettes, maintenir une cohérence graphique entre les pages s’est révélé complexe, notamment pour la typographie, les espacements et les composants d’interface.
Pour résoudre ce problème, j’ai mis en place un design system dans Figma comprenant des styles de texte, une palette de couleurs et des composants réutilisables (boutons, cartes, menus). Cette organisation a amélioré la cohérence visuelle du site et facilité les évolutions du design.
Organisation des styles avec Tailwind CSS
L’utilisation de Tailwind CSS a demandé une adaptation à la logique utility-first. Sans organisation, cela pouvait entraîner des répétitions de classes et une perte de lisibilité.
Pour éviter cela, j’ai structuré des composants réutilisables (boutons, cartes, tableaux de traces) et standardisé les styles principaux. Cette approche a permis de conserver un code CSS cohérent et maintenable.
Mise en place d’une architecture MVC sans framework
Le projet a été développé sans CMS ni framework MVC imposé, ce qui a nécessité la mise en place manuelle d’une architecture MVC en PHP.
J’ai donc organisé l’application en séparant :
- les modèles (gestion des données),
- les contrôleurs (logique applicative),
- les vues (affichage).
Cette structuration m’a permis de mieux comprendre l’architecture d’une application web et de produire un code plus propre et évolutif.
