← BUT Réseaux & Télécommunications
Projet de création d’un site web vitrine personnel, réalisé dans le cadre de la SAÉ 104 du BUT Réseaux & Télécoms.
L’objectif était de concevoir un site mobile first, responsive et conforme aux standards HTML5 et W3C. Le projet s’est déroulé en trois étapes : le croquis papier, la maquette Figma et l’intégration HTML/CSS.
Objectif : Concevoir l’architecture du site sur papier
J’ai commencé par définir la structure de mon portfolio sous forme de croquis papier. Cette étape m’a permis d’organiser les sections (présentation, compétences, projets, contact) de manière claire et logique avant la mise en page graphique.
Le croquis a bien guidé les étapes suivantes, mais certains éléments auraient pu être plus détaillés, notamment sur les balises html.
Objectif : Réaliser une maquette visuelle haute fidélité
À l’aide de Figma, j’ai transformé le croquis en une maquette interactive, en m’assurant de respecter une logique mobile first. Les couleurs, typographies et espacements ont été choisis pour garantir une bonne lisibilité sur tous les écrans.
La maquette a permis de bien préparer l’intégration. Quelques ajustements mineurs ont été faits au moment du codage.
Objectif : Intégrer la maquette en respectant les bonnes pratiques
J’ai codé le site en HTML5 et CSS3 en adoptant une approche mobile first. Le site est responsive, accessible et respecte les standards du W3C. J’ai également pris soin d’optimiser le temps de chargement et la hiérarchie des balises.
Vous pouvez accéder à cette version du site en cliquant sur la trace photo.
Le site fonctionne correctement sur mobile et desktop. Certaines animations ou transitions CSS pourraient être ajoutées pour améliorer l’expérience.
Objectif : Compléter le site en gardant la base
Lors de mon second semestre, j'ai repris la base web que j'ai effectué lors de cette saé pour développer mon propre site portfolio (celui-ci). J'ai pu donc ajouter toutes les pages nécessaires (BUT 1, compétences, projets...) afin d'exposer mes passions au grand public. J'ai également ajouté un menu différent (bleu foncé et non en burger) pour les personnes regardant le site sur grand écran, type ordinateur.
Ce site
Cette version du site est beaucoup plus complète que la première. Je pourrais donc la garder pendant plusieurs années, et me sert de portfolio que je mettrai à jour régulièrement.
Conclusion : Cette SAÉ m’a permis de comprendre l’importance des étapes de conception avant de coder. Le passage du croquis au code m’a aidé à structurer mon site de façon claire et efficace.