Socium Web V2 - Refonte complète avec Nuxt

Socium Web V2 : Refonte complète pour une expérience optimale

Socium Web V2 est la version actuelle de mon site professionnel, représentant une refonte complète par rapport à la version précédente. Cette nouvelle version marque une évolution majeure dans ma stack technique, mon approche du contenu, et l'expérience que j'offre à mes visiteurs.

Le besoin : Faire évoluer ma présence en ligne

Limites de la version précédente

Après avoir utilisé mon premier portfolio pendant plusieurs mois, j'ai identifié plusieurs limites qui méritaient une refonte complète. La gestion du contenu en MDX était un peu lourde pour écrire rapidement de nombreux articles et études de cas, l'écosystème Next.js évoluait rapidement et nécessitait des mises à jour fréquentes, et je souhaitais plus de flexibilité pour personnaliser le design sans repartir de zéro.

Objectifs de la refonte

Pour cette V2, mes objectifs étaient clairs : créer un site encore plus performant avec un excellent référencement naturel (SEO), faciliter la gestion de contenu pour publier rapidement articles de blog et études de cas, offrir une expérience utilisateur moderne avec des animations fluides grâce à GSAP, établir un design unique qui reflète mon identité professionnelle, et me donner la possibilité de modifier facilement mes contenus avec Nuxt Studio.

La solution : Stack moderne avec Nuxt

Migration vers l'écosystème Nuxt

J'ai choisi de migrer de Next.js vers Nuxt, l'équivalent pour Vue.js au lieu de React. Cette décision était motivée par plusieurs facteurs : une syntaxe Vue plus intuitive pour moi, un écosystème de modules très riche avec Nuxt UI Pro, Nuxt Content, Nuxt SEO, Nuxt Icon, et une meilleure expérience de développement avec moins de configuration nécessaire.

Technologies choisies

Nuxt comme framework principal pour des performances exceptionnelles et un excellent SEO, Nuxt UI Pro pour des composants UI modernes et accessibles, Nuxt Content pour gérer facilement mes articles de blog et études de cas en Markdown, Nuxt SEO pour automatiser complètement le référencement naturel (sitemap, robots.txt, meta tags, Schema.org), Tailwind CSS pour un design personnalisé et responsive, TypeScript pour un code plus robuste et maintenable, GSAP pour des animations fluides et professionnelles, Nuxt Studio pour modifier mes contenus visuellement sans toucher au code, et Plausible pour des statistiques éthiques sans cookies.

Hébergement et infrastructure

Le site est hébergé sur Vercel, bénéficiant de déploiements automatiques à chaque push sur GitHub, d'un réseau Edge global pour des performances optimales, de certificats HTTPS automatiques et renouvelés, et d'une optimisation des images automatique. Les noms de domaine et emails sont gérés chez mon partenaire Infomaniak, garantissant un service suisse de qualité et éthique.

Les fonctionnalités développées

Système de blog complet

Le blog est alimenté par Nuxt Content avec MDC pour écrire facilement du contenu enrichi. Il dispose d'une barre de recherche pour filtrer les articles en temps réel, d'une pagination pour naviguer entre les pages d'articles, de badges colorés par catégorie pour identifier rapidement les thèmes, et d'un système de dates en français pour une meilleure lisibilité.

Études de cas détaillées

Chaque projet client est documenté dans une étude de cas complète incluant la présentation du client et son activité, le problème ou besoin initial, la solution technique apportée, les résultats obtenus, et des liens vers les articles de blog pertinents. Ces études de cas utilisent MDC pour des mises en page enrichies : callouts colorés, cartes cliquables, listes d'étapes visuelles, et layouts côte-à-côte avec sticky en desktop.

Pages de services et produits

Les pages de services (Socium Time, Socium Pass, Socium Flash, Sur devis) et de produits (Socium Card, One Page, Site Vitrine, E-commerce, App Web) présentent clairement mes offres avec des exemples concrets, des tarifs transparents, des appels à l'action clairs, et des études de cas associées.

Widget de feedback anonyme

J'ai développé un widget de feedback unique permettant aux visiteurs de donner leur avis sur mes articles de manière totalement anonyme. Le système garantit zéro tracking personnel, aucun cookie intrusif, anonymisation des IP, et stockage minimal des données. Les retours sont précieux pour améliorer continuellement mes contenus.

Optimisation SEO automatisée

Grâce à Nuxt SEO, le référencement est entièrement automatisé : génération automatique du sitemap.xml dynamique, configuration intelligente du robots.txt, meta tags optimisés sur chaque page (titres, descriptions, Open Graph), Schema.org pour les données structurées (articles, FAQ, breadcrumbs), et images OG personnalisées pour les réseaux sociaux.

Les résultats : Site professionnel et performant

Performances exceptionnelles

Le site atteint des scores parfaits sur Google PageSpeed Insights : 100/100 en performance grâce à l'optimisation Nuxt et Vercel, 100/100 en accessibilité avec Nuxt UI Pro, 100/100 en SEO grâce à Nuxt SEO, et 100/100 en bonnes pratiques avec HTTPS, sécurité, et optimisations modernes.

Gestion de contenu simplifiée

Avec Nuxt Content et MDC, je peux publier un nouvel article de blog ou une étude de cas en quelques minutes. L'écriture en Markdown est rapide et intuitive, les composants MDC enrichissent mes contenus sans complexité, et Nuxt Studio me permet même de modifier visuellement quand je préfère.

Référencement optimal

Le site est parfaitement optimisé pour Google et les autres moteurs de recherche, avec des URLs propres et descriptives, un sitemap dynamique mis à jour automatiquement, des meta tags personnalisés pour chaque page, des données structurées Schema.org, et des images Open Graph pour les partages sur réseaux sociaux.

Expérience utilisateur moderne

Les visiteurs bénéficient d'une navigation fluide avec des transitions douces grâce à GSAP, un design responsive parfait sur mobile, tablette et desktop, des temps de chargement ultra-rapides, une recherche instantanée dans le blog, et un mode sombre automatique selon leurs préférences.

Pourquoi Nuxt pour cette refonte ?

Écosystème de modules

Nuxt dispose d'un écosystème exceptionnel de modules officiels qui s'intègrent parfaitement. Contrairement à Next.js où j'assemblais différents packages, avec Nuxt tout est cohérent : Nuxt UI Pro pour les composants, Nuxt Content pour le contenu, Nuxt SEO pour le référencement, Nuxt Icon pour les icônes, et Nuxt Image pour l'optimisation des images.

Vue.js : simplicité et élégance

Vue.js offre une syntaxe plus intuitive que React selon moi. Les templates Vue sont plus lisibles, la gestion de l'état est plus simple, et la courbe d'apprentissage est plus douce. Pour mes clients qui souhaitent comprendre comment fonctionne leur site, Vue est plus accessible.

Nuxt Content : la killer feature

Nuxt Content avec MDC a été un game-changer pour la gestion de mes contenus. Je peux écrire en Markdown simple et enrichir avec des composants quand nécessaire, sans la complexité de MDX. De plus, Nuxt Studio me permet de modifier visuellement mes contenus sans toucher au code.

Performance et SEO natifs

Nuxt intègre nativement tout ce qui est nécessaire pour un excellent référencement : Server-Side Rendering (SSR) pour un contenu immédiatement visible par Google, Static Site Generation (SSG) pour des pages ultra-rapides, Incremental Static Regeneration (ISR) pour du contenu qui se met à jour automatiquement, et Hydration optimisée pour une interactivité immédiate.

Architecture technique

Structure du projet

Le projet est organisé de manière claire et maintenable, avec /app/pages/ pour les routes et pages, /app/components/ pour les composants réutilisables, /content/ pour tous les contenus en Markdown, /app/composables/ pour la logique réutilisable (feedback, analytics), /server/ pour les API routes (feedback, contact), et /public/ pour les assets statiques (images, icônes, manifests).

Gestion des collections

J'utilise les Collections Nuxt Content pour typer fortement mes contenus et garantir leur cohérence : collection blog pour les articles de blog, collection projets pour les études de cas, collections pour les pages de services et produits, et validation automatique avec Zod des schémas de données.

Composants personnalisés

J'ai développé plusieurs composants sur-mesure : FeedbackWidget pour les retours anonymes, AppHeader et AppFooter pour la navigation, composants de mise en page pour les études de cas, et extensions des composants Nuxt UI Pro pour correspondre à mon design.

Analytics et respect de la vie privée

Le site intègre Plausible, une solution d'analytics éthique et respectueuse : aucun cookie utilisé, conformité RGPD automatique (pas de bandeau de consentement nécessaire), données anonymisées et stockées en Europe, script ultra-léger (moins de 1 Ko), et statistiques claires et essentielles. De plus, un système de feedback anonyme développé sur-mesure permet de recueillir les avis sur mes articles sans aucun tracking personnel.

Design et identité visuelle

Palette de couleurs personnalisée

J'ai défini une palette de couleurs unique qui reflète mon identité :

Primary (Japonica) : Couleur principale pour les éléments importants et call-to-actions

Secondary (Shakespeare) : Couleur secondaire pour les accents et variations

Neutral : Nuances de gris pour les textes et arrière-plans

Ces couleurs sont configurées dans Tailwind CSS et utilisées systématiquement dans tous les composants Nuxt UI Pro.

Effet de grain subtil

J'ai ajouté un effet de grain photographique sur l'ensemble du site grâce à un composant GrainyOverlay personnalisé. Cette texture légère et subtile apporte une touche organique et chaleureuse au design, rappelant la grain du film argentique. L'effet est généré avec un SVG optimisé en CSS, n'impacte pas les performances, et s'adapte automatiquement au mode clair et sombre.

Typographies et espacements

Le design utilise une hiérarchie typographique claire avec des tailles cohérentes, des espacements harmonieux basés sur une échelle mathématique, et des transitions douces entre les sections grâce à GSAP.

Animations et interactions

Les animations GSAP apportent une touche de modernité et de fluidité : apparitions progressives des éléments au scroll, transitions douces entre les pages, micro-interactions sur les boutons et cartes, et effets de parallaxe subtils sur certaines sections.

Fonctionnalités spécifiques

Nuxt Studio pour l'édition

Avec Nuxt Studio, je peux modifier mes contenus directement dans mon navigateur, sans toucher au code. C'est particulièrement utile pour corriger rapidement une faute d'orthographe, ajouter un nouveau projet, ou mettre à jour mes services.

Système de recherche

La barre de recherche sur /blog filtre instantanément les articles en temps réel, sans rechargement de page. Les visiteurs trouvent rapidement ce qu'ils cherchent.

Maillage interne intelligent

Chaque article de blog et étude de cas est richement interconnecté avec des liens vers les articles connexes en bas de page, des liens contextuels dans le texte vers les technologies mentionnées, et des suggestions de projets similaires.

Formulaires et intégrations

Le site intègre plusieurs formulaires fonctionnels : formulaire de contact avec validation, widget de feedback anonyme, intégration Calendly pour la prise de rendez-vous en ligne, formulaires d'audit SEO et réservation de domaine, et newsletter dans le footer pour recevoir mes nouveaux articles (visible en bas de chaque page).

Comparaison V1 vs V2

Technologies

V1 : Next.js + React + MDX + Vercel
V2 : Nuxt + Vue.js + MDC + Vercel

Gestion de contenu

V1 : MDX avec composants React dans les fichiers Markdown (un peu lourd)
V2 : Nuxt Content avec MDC (plus simple) + Nuxt Studio (édition visuelle)

SEO

V1 : Configuration manuelle avec Next SEO (beaucoup de répétitions)
V2 : Nuxt SEO entièrement automatisé (zéro configuration par page)

Performance

V1 : Excellente (Next.js est très performant)
V2 : Exceptionnelle (Nuxt + optimisations Vercel = 100/100 partout)

Design

V1 : Design propre mais assez standard
V2 : Design unique avec palette personnalisée et animations GSAP

Les apprentissages de cette refonte

Maîtrise de l'écosystème Nuxt

Cette refonte m'a permis de maîtriser complètement l'écosystème Nuxt, que j'utilise maintenant pour mes clients. Je peux créer des sites modernes, performants, et faciles à gérer pour mes clients.

Importance du système de design

Définir une palette de couleurs cohérente et un système d'espacements dès le départ a considérablement accéléré le développement et garanti une cohérence visuelle parfaite.

Gestion de contenu simplifiée

Nuxt Content avec MDC m'a fait gagner un temps considérable. Je peux maintenant publier un article complet en 30 minutes au lieu de plusieurs heures.

Automatisation du SEO

Nuxt SEO a éliminé toutes les tâches répétitives de référencement. Je me concentre sur le contenu, et le SEO est automatiquement optimal.

Fonctionnalités prévues

Espace client

Un espace client sécurisé où mes clients pourront suivre l'avancement de leurs projets, accéder à leurs documents, et communiquer avec moi.

Réservation avancée

Système de réservation avancé pour les consultations, au-delà de l'intégration Calendly actuelle, avec gestion des disponibilités et rappels automatiques.

Traduction multilingue

Ajouter une version anglaise du site pour toucher une audience internationale et élargir ma zone d'intervention.

Mon site comme laboratoire d'expérimentation

Tester avant de proposer

Mes sites personnels (V1 et V2) sont aussi mes terrains d'expérimentation. Avant de proposer une technologie ou une stack à un client, je la teste en conditions réelles sur mon propre site. Cela me permet de comprendre les avantages, les limites, et les pièges de chaque outil.

Apprentissage continu

Chaque refonte est une opportunité d'apprendre de nouvelles technologies. La V1 m'a permis de maîtriser Next.js et React, la V2 m'a fait découvrir Nuxt et son écosystème. Aujourd'hui, je peux conseiller mes clients en toute connaissance de cause sur ces deux stacks.

Innovation sans risque pour les clients

En testant sur mon propre site, je prends les risques d'expérimentation. Si une technologie ne convient pas, je le découvre sur mon site, pas sur celui d'un client. Mes clients bénéficient ensuite de mon expérience déjà validée.

Pourquoi documenter mon propre site ?

Transparence avec mes clients

En documentant mon propre processus de création, je montre à mes clients comment je travaille, quelles technologies j'utilise, et pourquoi je fais certains choix. Cette transparence renforce la confiance.

Démonstration de compétences

Mon site est ma meilleure carte de visite. En expliquant comment il est construit, je démontre mes compétences techniques de manière concrète. Les clients voient que je pratique ce que je prêche.

Partage de connaissances

Cette étude de cas sert de ressource pédagogique pour d'autres développeurs ou entrepreneurs qui envisagent une refonte similaire. Je partage ce que j'ai appris pour aider les autres à faire les bons choix.

Conclusion

Socium Web V2 représente l'aboutissement de plusieurs mois de travail et de réflexion sur ce que devrait être un site professionnel moderne. Avec Nuxt, Nuxt UI Pro, Nuxt Content, et Nuxt SEO, j'ai créé un site performant, maintenable, et évolutif qui me permet de me concentrer sur l'essentiel : accompagner mes clients dans leurs projets digitaux.

Cette stack technique est celle que je recommande et utilise maintenant pour la plupart de mes clients, car elle offre le meilleur équilibre entre performance, facilité de gestion, et expérience utilisateur.

Articles connexes : Nuxt : framework Vue moderne • Nuxt UI Pro : composants professionnels • Nuxt Content : gérer vos contenus • Nuxt SEO : automatiser le référencement • MDC : Markdown enrichi • Nuxt Studio : éditer visuellement • GSAP : animations fluides • Vercel : hébergement moderne • Socium Web V1 : version précédente

Découvrir mes services • Voir mes projets • Me contacter