Un portfolio packaging trilingue qui vend 12 projets à l'international

Comment Bizspaces a transformé la vision d'un designer packaging épuisé par le DIY en un site Next.js trilingue, animé et performant qu'il utilise pour signer de nouveaux clients.

Parler de votre projet Voir le site live de Bilal
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 16 · 44 routes SSG

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 et lancement : 2025–2026

+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

Résultats

12

projets packagés, de la cosmétique au tech

3

langues, 4 pays couverts

44

routes SSG, un portfolio rapide et stable

Vitrine commerciale active

Depuis le lancement, Bilal utilise ce portfolio comme support principal pour ses échanges avec des marques : il peut envoyer une URL unique et laisser le site raconter son histoire, projet par projet, langue par langue.

Double rôle : esthétique & business

Le portfolio joue désormais un rôle double : vitrine esthétique de son travail de packaging, et outil commercial structuré qui rassure les prospects sur sa capacité à gérer des projets pour des marchés variés, en plusieurs langues.

Base technique pérenne

Next.js 16, Turbopack, OKLCH tokens, i18n natif : une stack moderne qui évolue sans réécriture. Les 44 routes SSG garantissent performance et SEO sans maintenance serveur.

FAQ

Combien de temps a pris le projet ?

Le projet a été conçu et lancé sur 18 mois (2025–2026), incluant la phase de découverte, le design system, le développement Next.js 16 et les tests multi-langues.

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.

Planifier une consultation gratuite Voir d'autres projets Bizspaces