Portfolio technique bilingue d’Amine Nahli

Une vitrine administrable pour présenter projets, compétences et parcours en ingénierie informatique.

Application web bilingue présentant des projets techniques, compétences, certifications et parcours professionnel. Elle associe un site public Next.js à un espace d’administration sécurisé, avec gestion de contenu, médias et formulaires de contact.

01

Problème traité

Centraliser et publier de façon structurée, bilingue et sécurisée les réalisations, compétences et informations professionnelles d’un profil d’ingénieur.

02

Objectifs

Présenter les contenus publics en français et en anglais.
Administrer les projets, le parcours, les certifications, les compétences, les avis et les messages.
Protéger les contenus privés et les opérations administratives.
Permettre la recherche et le filtrage du contenu public.
Maintenir une qualité contrôlée par tests, audit d’accessibilité et budgets Lighthouse.

03

Solution technique

Une application Next.js à rendu serveur, reliée à Supabase pour les données, l’authentification, les politiques RLS et le stockage média. Un espace administrateur permet de gérer le contenu ; les routes serveur appliquent validation, contrôle d’origine, autorisation et invalidation du cache.

04

Architecture

Visiteur web

Middleware Next.js (sélection ou mémorisation de la langue FR/EN)

Pages publiques Next.js

Supabase PostgreSQL

Supabase Storage

Recherche client

Formulaire de contact

API Next.js

Validation, honeypot, empreinte HMAC et limitation de débit

Table contact_messages

Administrateur

Supabase Auth

Allowlist admin_users

Espace d’administration Next.js

API Routes et Server Actions

Supabase PostgreSQL & Storage

Traduction et catégorisation via Groq

API Analytics

Fonction PostgreSQL d’agrégation quotidienne

GitHub Actions

TypeScript, ESLint, Tests Node.js, Tests Supabase, Playwright et Lighthouse

Résultats

05

Résultats documentés

Le site public propose les routes françaises et anglaises avec mémorisation de la langue choisie.
Les projets publics nécessitent des traductions française et anglaise validées.
L’administration gère les projets, le parcours, les certifications, les médias, les avis et les messages de contact.
Les médias sont limités à 5 Mio et les PDF de certification sont distribués par URL signée temporaire.
Le formulaire de contact applique une validation serveur, un honeypot et des limites de 3 messages par 15 minutes et 10 par jour pour une même empreinte.
Les données sont protégées par des politiques RLS et les contenus publics sont filtrés par statut de publication.
Le contrôle TypeScript passe ; la suite unitaire contient 40 tests réussis sur 41, avec un seul échec attendu lié au comportement de la route CV