Site Web Portfolio
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.
Application de Suivi Fitness
Une application mobile multiplateforme pour suivre les entraînements, la nutrition et les progrès de fitness. Construite avec React Native et Firebase, avec synchronisation de données en temps réel et recommandations d'entraînement personnalisées.
Survey Points Manager - Plugin AutoCAD Professionnel
Un plugin AutoCAD complet pour la gestion des données d'arpentage avec support de multiples formats de fichiers, conversion de données et automatisation de flux de travail professionnel.