Refonte de mon portfolio freelance avec Next.js 16

Pourquoi tout reconstruire ?

Mon ancien portfolio était un site statique classique. Il faisait le job, mais il ne reflétait pas ce que je sais faire aujourd'hui. En tant que développeur freelance spécialisé PME, mon site doit prouver mes compétences, pas juste les lister.

L'objectif : un site qui démontre concrètement l'intégration IA, le développement moderne, et le souci du détail.

Stack technique

Le design system glassmorphism

J'ai créé un système de design custom inspiré du Liquid Glass d'Apple. Tout est basé sur des variables CSS et des utilitaires réutilisables :

.glass {
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
 
.glass-card {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Le résultat : un look premium qui fonctionne aussi bien en dark mode qu'en light mode, avec des transitions fluides entre les deux.

L'intégration du chatbot IA

La fonctionnalité phare : un assistant IA qui connaît mon parcours, mes projets et mes compétences. Il utilise Claude Sonnet 4 avec un prompt système personnalisé.

const response = await anthropic.messages.create({
  model: 'claude-sonnet-4-20250514',
  max_tokens: 1024,
  system: portfolioContext, // Mon parcours, projets, compétences
  messages: conversationHistory,
});

Points clés de l'implémentation :

• Rate limiting avec Upstash Redis : 10 requêtes / 10 min par IP
• Historique de conversation persisté en localStorage
• Suggestions contextuelles générées dynamiquement
• Support bilingue automatique (FR/EN)

Le bilinguisme dès le jour 1

Grâce à next-intl, le site est disponible en français (par défaut, sans préfixe /fr) et en anglais (/en). Les traductions vivent dans des fichiers JSON structurés par namespace :

{
  "hero": {
    "title": "Développeur Full-Stack & Applications Mobiles",
    "subtitle": "Freelance spécialisé PME"
  }
}

Conseil : implémenter l'i18n dès le départ est 10x plus simple que de l'ajouter après coup. La structure de next-intl avec l'App Router est propre et maintenable.

Performances et SEO

Quelques optimisations notables :

• Images WebP : logo passé de 62KB (PNG) à 19KB (WebP)
• Dynamic imports : composants below-the-fold chargés à la demande
• Metadata dynamiques : generateMetadata avec Open Graph, Twitter Cards, et alternates i18n
• JSON-LD structuré pour le référencement
• Sitemap dynamique incluant toutes les routes et langues

Ce que j'ai appris

1. Next.js 16 est solide — l'App Router a mûri, les Server Components sont naturels à utiliser.
2. Tailwind CSS 4 change la donne — la config dans le CSS avec @theme inline est plus intuitive que tailwind.config.ts.
3. Le glassmorphism demande du doigté — trop de blur tue la lisibilité, trop peu casse l'effet. L'accessibilité doit rester prioritaire.
4. L'IA comme preuve de compétence — un chatbot fonctionnel vaut plus que 10 lignes sur un CV.
5. Le bilinguisme paie — mon audience n'est pas uniquement francophone.

Et maintenant ?

Ce blog est la prochaine étape. L'idée : partager des retours d'expérience concrets sur mes projets freelance, mes choix techniques et mes apprentissages. Pas de contenu marketing creux — juste des articles techniques utiles.

Si vous êtes une PME qui cherche un développeur pragmatique pour digitaliser vos process, discutons-en.