Conception d’un site web portfolio personnel

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.

Phase 1 : Croquis

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.

Trace

Croquis du site portfolio

Autoévaluation

étoile étoile étoile étoile semi remplie étoile vide

Le croquis a bien guidé les étapes suivantes, mais certains éléments auraient pu être plus détaillés, notamment sur les balises html.

Phase 2 : Maquette Figma

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.

Trace

Maquette Figma

Autoévaluation

étoile étoile étoile étoile étoile vide

La maquette a permis de bien préparer l’intégration. Quelques ajustements mineurs ont été faits au moment du codage.

Phase 3 : Développement HTML5 / CSS

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.

Trace

Capture du site

Autoévaluation

étoile étoile étoile étoile semi remplie étoile vide

Le site fonctionne correctement sur mobile et desktop. Certaines animations ou transitions CSS pourraient être ajoutées pour améliorer l’expérience.

Phase 4 (bonus) : Amélioration

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.

Trace

Ce site

Autoévaluation

étoile étoile étoile étoile étoile

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.