Portfolio technique bilingue d’Amine Nahli

An administrable showcase to present projects, skills and career path in computer engineering.

Bilingual web application showcasing technical projects, skills, certifications, and professional background. It combines a public Next.js website with a secured administration space, featuring content management, media management, and contact forms.

01

Problem addressed

Centralize and publish in a structured, bilingual, and secure manner the achievements, skills, and professional information of an engineer's profile.

02

Objectives

Present public content in French and English.
Administer projects, career path, certifications, skills, reviews, and messages.
Protect private content and administrative operations.
Enable search and filtering of public content.
Maintain controlled quality through testing, accessibility audits, and Lighthouse budgets.

03

Technical solution

A Next.js server-rendered application connected to Supabase for data, authentication, RLS policies, and media storage. An administrator space allows for content management; server routes apply validation, origin control, authorization, and cache invalidation.

04

Architecture

Web Visitor

Next.js Middleware (FR/EN language selection or memorization)

Public Next.js Pages

Supabase PostgreSQL

Supabase Storage

Client Search

Contact Form

Next.js API

Validation, honeypot, HMAC fingerprint, and rate limiting

contact_messages Table

Administrator

Supabase Auth

admin_users Allowlist

Next.js Admin Space

API Routes and Server Actions

Supabase PostgreSQL & Storage

Translation and categorization via Groq

Analytics API

Daily aggregation PostgreSQL function

GitHub Actions

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

Results

05

Documented results

The public site offers French and English routes with memorization of the chosen language.
Public projects require validated French and English translations.
The administration manages projects, courses, certifications, media, reviews, and contact messages.
Media is limited to 5 MB and certification PDFs are distributed via temporary signed URL.
The contact form applies server-side validation, a honeypot, and limits of 3 messages per 15 minutes and 10 per day for the same fingerprint.
Data is protected by RLS policies and public content is filtered by publication status.
The TypeScript control passes; the unit test suite contains 40 successful tests out of 41, with a single expected failure related to the CV route behavior.