Portfolio 2026 - Sylvain CLEMENT

Portfolio professionnel moderne développé avec Next.js 16 et React 19.

Stack technique

• Framework : Next.js 16.1.6 (Turbopack)
• UI : React 19.2.3 + TypeScript 5
• Styling : Tailwind CSS 4
• Base de données : Neon PostgreSQL + Prisma 6
• Déploiement : Vercel

Prérequis

• Node.js 20.x (LTS)
• npm ou yarn
• PostgreSQL (Neon)

Installation

npm install

Configuration

Créer un fichier .env à la racine :

DATABASE_URL="postgresql://..."
NEXT_PUBLIC_APP_URL="http://localhost:3000"

Développement

npm run dev

Ouvrir http://localhost:3000

Build production

npm run build
npm start

Base de données

Synchroniser le schéma Prisma :

npx prisma db push
npx prisma generate

Architecture

• /src/app : Pages App Router
• /src/components : Composants réutilisables
• /src/data : Données JSON
• /src/locales : Traductions i18n (FR/EN/DE/ZH)
• /prisma : Schéma base de données

Internationalisation

• Bibliothèque : react-i18next + i18next
• Langues : FR (défaut), EN, DE, ZH
• Fallback : FR → EN
• Détection : Langue navigateur automatique

Formulaire contact

• Solution : Vercel Functions + Resend API
• Validation : React Hook Form + Zod
• Protection spam : Rate limiting
• Gratuit : 100 emails/jour

Design System

Palette Electric Carbon :

• Carbon Night : #050a12
• Cyan Atomique : #00F5FF

Typographies :

• Space Grotesk (titres)
• Inter (corps de texte)
• Crimson Pro (labels)

Sécurité

• Variables d'environnement protégées
• XSS prevention (React interpolation)
• OWASP Top 10 compliance

Documentation

Documentation technique disponible dans le dossier /docs du projet.

Licence

Tous droits réservés - Sylvain CLEMENT 2026