Site Web Portfolio

Un site web portfolio moderne et responsive construit avec Nuxt 3, Vue.js et Tailwind CSS. Comprend un mode sombre/clair, la gestion de contenu avec Nuxt Content, et des composants UI animés.

Site Web Portfolio

Aperçu du Projet

Ce site web portfolio présente mes compétences, projets et expérience professionnelle dans un design moderne et responsive. Construit avec Nuxt 3 et Vue.js, il exploite les dernières technologies web pour créer une expérience utilisateur rapide, accessible et visuellement attrayante.

Fonctionnalités Clés

  • Design Responsive: Mise en page entièrement responsive qui fonctionne parfaitement sur ordinateur, tablette et mobile
  • Mode Sombre/Clair: Préférence de thème commutable par l'utilisateur qui persiste entre les sessions
  • Gestion de Contenu: Gestion de contenu basée sur Markdown utilisant Nuxt Content
  • Filtrage Dynamique des Projets: Filtrer les projets par catégorie ou technologie
  • Composants UI Animés: Animations et transitions subtiles pour une expérience utilisateur engageante
  • Optimisé SEO: Balises meta, données structurées et génération de sitemap pour une meilleure visibilité des moteurs de recherche
  • Axé sur la Performance: Ressources optimisées, chargement paresseux et division de code efficace

Implémentation Technique

Architecture Frontend

Le site web est construit sur Nuxt 3, qui fournit des capacités de rendu côté serveur pour améliorer les performances et le SEO. Vue.js alimente les composants UI réactifs, tandis que Tailwind CSS permet un stylisme rapide avec une approche utility-first.

<template>
  <div class="project-card">
    <img :src="project.image" :alt="project.title" class="project-image" />
    <div class="project-details">
      <h3>{{ project.title }}</h3>
      <p>{{ project.description }}</p>
      <div class="tech-stack">
        <span v-for="tech in project.techStack" :key="tech">{{ tech }}</span>
      </div>
    </div>
  </div>
</template>

Gestion de Contenu

Toutes les données de projet, articles de blog et contenu de page sont gérés via des fichiers Markdown utilisant Nuxt Content. Cette approche fournit un moyen simple mais puissant de mettre à jour le site web sans toucher au code.

Optimisations de Performance

  • Optimisation d'images avec conversion automatique WebP
  • Division de code pour réduire le temps de chargement initial
  • Extraction CSS critique pour le contenu above-the-fold
  • Chargement paresseux des composants et images hors écran

Défis de Développement

L'un des principaux défis était d'implémenter le composant de faisceau animé qui connecte les icônes de technologie dans la section héros. Cela nécessitait une coordination minutieuse des chemins SVG et des animations JavaScript pour créer un effet visuellement attrayant qui fonctionne sur différentes tailles d'écran.

Résultats

Le site web portfolio atteint un score Lighthouse de 95+ dans toutes les catégories (Performance, Accessibilité, Meilleures Pratiques et SEO). Il se charge rapidement, fournit une expérience utilisateur fluide et présente efficacement mon travail et mes compétences.

Leçons Apprises

Ce projet a renforcé l'importance de commencer avec un système de design solide avant l'implémentation. Il a également mis en évidence les avantages d'utiliser un framework moderne comme Nuxt pour construire des applications web performantes avec une excellente expérience développeur.