Aller au contenu
Développement

Site vitrine

Capture d'écran de la page d'accueil du portfolio de Matthieu Caron

Pourquoi ce site ?

Je voulais un portfolio qui me ressemble plutôt qu'un profil sur une plateforme toute faite. C'était aussi l'occasion de pratiquer le développement web jusqu'au bout : le build, le déploiement, le nom de domaine et un formulaire de contact qui fonctionne vraiment.

Comment il est fait ?

Le site tourne sous Next.js avec l'App Router, en TypeScript et la mise en forme est faite avec Tailwind CSS. Il est hébergé sur Vercel, le domaine est géré chez OVH et le HTTPS est automatique. La plupart des pages sont générées en statique pour rester rapides.

Le formulaire de contact envoie les messages via l'API Resend. Avant l'envoi, un captcha ALTCHA se fait dans le navigateur, sans cookie ni traceur. Côté serveur, les champs sont validés avec Zod et il y a une limite par adresse IP pour couper le spam.

Sécurité et accessibilité

J'ai mis une Content Security Policy stricte basée sur un nonce, les en-têtes de sécurité qui vont avec et aucune source map exposée en production. Les clés d'API restent côté serveur.

Sur l'accessibilité, je vise le score de 100 : tout est utilisable au clavier, le focus est visible, la hiérarchie des titres est correcte, les contrastes respectent le niveau AA et les animations s'arrêtent si le système le demande. Les images sont en WebP et se chargent à la demande.