Projet Portfolio

Refonte complète de mon identité numérique

Voir les autres projets

Le Contexte

Dans le cadre de mes études, j’ai pris la décision de reconstruire entièrement mon portfolio. L’ancien, bien qu’utile à ses débuts, ne reflétait plus ni mon niveau actuel ni l’image professionnelle que je souhaite transmettre. J’ai donc choisi de repartir de zéro et de me fixer un défi : concevoir une nouvelle version plus moderne, plus cohérente et surtout en adéquation avec mon identité visuelle.

Pour mener à bien ce projet, j’ai adopté une logique de Minimum Viable Product (MVP). Plutôt que d’attendre qu’il soit parfaitement abouti avant de le publier, j’ai fait le choix stratégique de le mettre en ligne dans un état non finalisé. Cette approche me permet d’assurer une visibilité rapide tout en continuant à l’améliorer au fil du temps.

Les Objectifs

  • Présenter mes compétences et réalisations
  • Attirer des clients pour des missions freelance
  • Améliorer ma visibilité en ligne
  • Créer une plateforme pour partager mes idées

Stack Technique

  • HTML5 HTML5 : Structure sémantique
  • CSS3 CSS3 : Design & Responsive
  • JavaScript JavaScript : Interactions
  • Git Git & GitHub : Versionning

Les Défis Rencontrés

Design & UX : Le premier défi consistait à concevoir une interface à la fois visuellement attrayante et intuitive. Trouver l’équilibre entre esthétique, lisibilité et fluidité de navigation s’est révélé complexe.

Responsivité : Il était essentiel que chaque section, chaque élément graphique et chaque interaction s’adaptent parfaitement à différents écrans : ordinateur, tablette et mobile.

Interactivité : L’intégration de fonctionnalités interactives via JavaScript a représenté une étape formatrice pour renforcer mes compétences Front-End.

Direction Artistique

Mode Sombre

Pour le mode sombre, le violet principal est conservé pour les titres afin de garder l'identité. Le fond passe au gris très foncé (#0e1225) pour un contraste optimal avec le texte clair (#eaeaea).

#0e1225 Fond
#2c2c3a Cartes
#6c5ce7 Titres
#eaeaea Texte

Mode Clair

Le mode clair utilise un dégradé de violets et deux teintes de jaune pour le contraste et les interactions.

#6c5ce7 Primaire
#6d76ce Secondaire
#f1c40f Accent
#f39c12 Hover

Disposition & Structure

L'interface joue sur des cartes blanches (ou sombres selon le thème) posées sur un fond neutre pour créer de la profondeur. La mise en page utilise abondamment Flexbox et CSS Grid pour une structure modulaire.

Avancée du projet

Images de l'évolution à venir.

Capture d'écran v1.0 (Coming Soon)