Un portfolio packaging trilingue qui organise le travail à l’international

Comment Bizspaces a traduit la vision d’un designer packaging en un portfolio multilingue, animé et structuré pour présenter son travail avec une direction claire.

Parler de votre projet
bilal-creativa.com
Capture du portfolio de Bilal : hero avec orbit 3D et nom en title reveal sur fond midnight shelf

Spécifications du projet

Client
Bilal Derradji
Mission
Portfolio packaging trilingue
Rôle Bizspaces
UX/UI, système, i18n AR
Stack
Next.js statique · i18n FR, EN et AR

Aperçu du projet

Client

Bilal Ahmed, Designer packaging (freelance)

Secteur

Packaging, branding, e-commerce, identités visuelles

Services Bizspaces

UX/UI du portfolio, système visuel, développement Next.js, i18n, performance front-end

Timeline

Conception, contenu, traduction et mise en ligne organisés par étapes.

+6

12 palettes de marque harmonisées

Le client

Bilal, designer packaging

Bilal est designer packaging, spécialisé dans des identités fortes et des packagings sur mesure pour des marques en Algérie, Koweït, Qatar et Canada. Pendant des mois, il a tenté de créer seul un portfolio : plusieurs essais sur des builders, maquettes jamais finalisées, outils techniques lourds, et au final aucun site en ligne à la hauteur de ses projets.

Sans être développeur, l'exercice devenait épuisant : soit le design ne lui ressemblait pas, soit la technique bloquait, soit la maintenance lui faisait peur. Son travail se retrouvait dispersé entre PDF, Behance et posts sociaux, sans vraie vitrine professionnelle.

Douze palettes de marque différentes à faire cohabiter dans un même système, sans cacophonie.
Le défi
  1. 01

    Aucun site en ligne à la hauteur des projets de Bilal.

  2. 02

    Un travail dispersé entre PDF, Behance et réseaux sociaux.

  3. 03

    Trois langues (FR / EN / AR) avec navigation RTL à intégrer sans friction.

  4. 04

    Douze palettes de marque à faire cohabiter dans un même système visuel.

Objectifs

Bilal Bizspaces
Portfolio Avoir enfin un portfolio terminé, professionnel et en ligne Site Next.js 16 SSG, 44 routes statiques, déploiement Cloudflare Pages
Projets Mettre en valeur 12 projets packaging sans sacrifier la cohérence Système "midnight shelf" neutre + palettes dédiées par projet (bg/accent/ink)
International Parler à des clients en français, anglais et arabe, RTL compris Routing natif /[lang], dictionnaires centralisés, dir=rtl auto sur <html>, typographie Cairo (AR)
Motion Une interface animée, fluide desktop et mobile Orbit 3D hero, tilt cards, count-up stats, card-swap desktop / sticky-stack mobile
Durabilité Une base technique qui ne nécessite pas de maintenance constante OKLCH tokens, i18n natif, zero-bundle superflu, prefers-reduced-motion respecté

Approche & processus

01

Système : "midnight shelf"

Bizspaces commence par traduire la vision de Bilal en système, pas en template. Le thème "dark midnight shelf" devient le socle visuel : un fond profond, neutre (oklch(15% 0.028 300)), sur lequel chaque projet peut afficher sa propre palette (bg, accent, ink) sans casser la cohérence.

Les tokens OKLCH sont centralisés pour garder un contrôle fin du contraste et de la lisibilité. Les cartes projet combinent tilt, ghost numbers et filtres pour permettre de scanner rapidement le type de projet, le secteur et le pays sans surcharger l'écran.

bilal-creativa.com
Capture du portfolio de Bilal : grille de projets packaging avec palettes harmonisées sur fond midnight shelf
02

Technique : Next.js 16, SSG, i18n

Le site est construit en Next.js 16 avec App Router et Turbopack, en 44 routes statiques (SSG) pour garantir des temps de chargement rapides et une stabilité en production.

L'i18n est natif : routing /[lang], generateStaticParams, dictionnaires centralisés et gestion complète du RTL pour l'arabe. Chaque projet existe en 3 versions (FR/EN/AR), soit 36 pages projet, plus les pages index par langue.

bilal-creativa.com
Capture du portfolio de Bilal : page projet Novera avec overview trilingue et navigation vers le projet suivant
03

Motion : animations & expérience

Les animations sont déclaratives, pilotées via Framer Motion et pensées pour renforcer la narration : orbit 3D sur le hero, tilt et filtres dans la section "Work", count-up et avatar eye-tracking dans l'"About", card-swap sur desktop et stack sticky sur mobile.

Toutes les animations respectent prefers-reduced-motion : si l'utilisateur demande moins d'animation, le site se recentre sur le contenu, sans effets parasites.

bilal-creativa.com
Capture du portfolio de Bilal : section Why Me avec cartes sticky et pile card-swap sur desktop
04

i18n & accessibilité

Le contenu est pensé dès le départ pour être clair en français, en anglais et en arabe : wording, longueur des phrases, labels de boutons, hiérarchie typographique.

Le thème dark est optimisé pour le contraste. L'anti-flash de thème est assuré via localStorage et useSyncExternalStore. Focus visible, navigation clavier et structure HTML propre complètent le socle accessibilité.

bilal-creativa.com/ar
Capture du portfolio de Bilal : version arabe RTL du hero avec typographie Cairo

Livrables et système

Portfolio

Une galerie organisée pour parcourir le travail publié

FR EN AR

Des parcours adaptés aux lecteurs et à la lecture RTL

Statique

Une base publiable sans serveur applicatif

Portfolio publié

Le site réunit les projets, la direction artistique et les informations de contexte dans une adresse unique à partager avec des interlocuteurs internationaux.

Direction et lecture

La structure met en avant la direction visuelle tout en gardant les projets, les langues et les itinéraires de navigation faciles à parcourir.

Base technique documentée

La structure statique, les tokens de couleur et les dictionnaires de langue donnent une base cohérente pour faire évoluer les contenus sans modifier chaque page séparément.

FAQ

Combien de temps a pris le projet ?

Le calendrier dépend des contenus, des traductions, des validations et des étapes de publication. Ces éléments sont organisés avant chaque mise en ligne.

Le site est-il vraiment trilingue avec RTL pour l'arabe ?

Oui, le routing natif Next.js /[lang] gère FR/EN/AR, avec dir="rtl" automatique sur <html> pour l'arabe, dictionnaires centralisés et typographie adaptée (Cairo pour l'arabe).

Comment les 12 palettes de projets cohabitent-elles sans bruit visuel ?

Le thème "midnight shelf" (fond oklch(15% 0.028 300)) sert de neutre unifié. Chaque projet garde sa palette (bg/accent/ink) via des tokens OKLCH, les cartes projet n'affichent que l'accent du projet concerné.

Le site respecte-t-il l'accessibilité et prefers-reduced-motion ?

Oui : focus visible, skip link, structure HTML sémantique, contrastes WCAG AA, animations CSS déclaratives, respect total de prefers-reduced-motion: reduce (désactive orbit 3D, reveals, parallaxe).

Témoignage

Bizspaces a transformé mon portfolio trilingue en une vraie marque. Le design est à la hauteur de mes projets packaging, et les clients le remarquent dès la première visite.
Bilal derradji Designer packaging

Prêt à créer un site qui vend votre travail ?

Vous êtes designer, restaurateur ou propriétaire de marque, et vous voulez un portfolio ou un site qui met votre expertise au centre, sans vous épuiser sur la technique ?

Bizspaces conçoit des interfaces, des identités visuelles et des expériences digitales sur mesure pour les commerces et PME du Québec et d'ailleurs.

Parler de votre projet Voir les réalisations Bizspaces