Owen / Portfolio

Télémétrie en temps réel

01%

Calibration des systèmes

Aller au contenu
Retour aux projetsXzywaye

Projet web

Mission / 03

Xzywaye

Portfolio vidéo / Expérience de marque

Un portfolio commercial pour un monteur short-form, décliné en deux expériences visuelles complètes et piloté depuis un même back-office.

Rôle
Conception et développement full-stack
Année
2026
Équipe
Conception et développement : Owen
XZYWAYE // PREMIUM
Portfolio Xzywaye premium — vue ordinateur
XZYWAYE // MINECRAFT
Portfolio Xzywaye Minecraft — vue ordinateur
Portfolio Xzywaye premium — vue mobile
Portfolio Xzywaye Minecraft — vue mobile

Technologies

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Supabase
  • Resend
  • YouTube Data API
  • Vercel

03.01

Transformer un catalogue de vidéos en outil commercial

Le site devait montrer la qualité du montage sans perdre le visiteur dans une simple succession de vidéos. Le parcours replace donc chaque réalisation dans une offre claire : expertise short-form, services, méthode de travail, références, tarifs et prise de contact.

La page d’accueil concentre les preuves essentielles et mène rapidement vers les réalisations. Une galerie dédiée classe ensuite les projets par format — courts, longs et personnels — pour permettre une lecture plus ciblée du travail.

03.02 / Visual

Deux directions artistiques réellement autonomes

La version principale installe une présence premium avec une palette chaude, une grille éditoriale et des appels à l’action directs. La version Minecraft reconstruit le même parcours avec une typographie pixel, des bordures texturées, des décors animés et une iconographie issue du jeu.

Accueil du portfolio Xzywaye premium sur ordinateur
Identité premium / accueil01 / 02

03.03

Un même produit, sans effet de simple thème

Les deux portfolios ne se contentent pas de changer de couleurs. Ils disposent de compositions, d’animations, d’écrans de chargement et de micro-interactions propres, tout en conservant une architecture de navigation commune.

La version Minecraft est accessible par une route dédiée et par son propre sous-domaine. Le serveur identifie le contexte demandé, charge les contenus correspondants et garde des URL publiques simples pour chaque univers.

03.04 / Visual

Recomposer chaque univers pour le mobile

Les interfaces mobiles conservent la hiérarchie, les textures et les points de conversion de chaque direction. Le contenu est recomposé verticalement pour préserver la lisibilité et le caractère du projet sur un écran étroit.

Accueil mobile du portfolio Xzywaye premium
Identité premium / mobile01 / 02

03.05 / Process

Rendre le portfolio administrable au quotidien

Un back-office sur mesure permet de faire vivre le site sans modifier le code. Les contenus sont stockés dans Supabase puis filtrés selon la version premium, Minecraft ou commune aux deux expériences.

Cette séparation permet d’adapter l’offre et les preuves à chaque audience tout en conservant un seul outil de gestion.

  1. 01Projets et médias vidéo
  2. 02Clients et avis
  3. 03Statistiques et tarifs
  4. 04Textes et disponibilité

03.06 / Visual

Les réalisations au centre de l’expérience

Les galeries utilisent les mêmes données mais adoptent les codes visuels de leur univers. Les onglets séparent les formats courts, longs et personnels, puis regroupent les vidéos par chaîne lorsque cela facilite la lecture.

Les miniatures, titres, chaînes et volumes de vues donnent immédiatement du contexte. Les vidéos compatibles peuvent être lues directement dans le portfolio, sans casser le parcours.

Galerie des projets vidéo du portfolio Xzywaye premium
Galerie premium / formats courts01 / 02

03.07

Faire dialoguer YouTube et les contenus propriétaires

La YouTube Data API enrichit les projets avec leurs miniatures, chaînes et volumes de vues publics. Ces informations complètent les données éditoriales stockées dans Supabase et évitent une maintenance manuelle de chaque carte.

Le système accepte aussi des vidéos directes stockées dans un bucket Supabase dédié. Un même composant choisit alors le bon mode de lecture entre YouTube et fichier vidéo, sur la page d’accueil comme dans la galerie complète.

03.08 / Process

Séparer données serveur et interactions

Les pages Next.js chargent en parallèle les projets, statistiques, clients, avis, tarifs et disponibilités depuis le serveur. Les données sont ensuite transmises aux composants interactifs uniquement là où l’expérience en a besoin.

Cette composition limite le JavaScript côté navigateur tout en gardant des galeries, lecteurs, filtres et interactions riches.

  1. 01Server Components pour l’accès aux données
  2. 02Chargements parallèles pour éviter les cascades
  3. 03Composants client isolés aux zones interactives
  4. 04Images optimisées et médias chargés à la demande

03.09

Des interactions utiles, puis une couche ludique

Les deux portfolios disposent de compteurs de likes séparés et d’un formulaire de contact relié à Resend. La soumission est validée côté serveur et protégée par une limitation anti-spam, tandis que les cookies de like sont signés.

Dans l’univers Minecraft, cette base fonctionnelle reçoit une couche supplémentaire : sons d’objets, achievements, animations d’ambiance et easter eggs. Ces détails renforcent l’identité sans bloquer l’accès aux projets ni à la prise de contact.

03.10

Une vitrine unique, deux manières d’entrer dans le travail

Le résultat est un portfolio capable de parler à deux sensibilités avec une vraie cohérence de fond. Xzywaye peut administrer ses réalisations, ses preuves et son offre depuis un seul espace, tandis que chaque visiteur découvre une expérience visuelle complète, reconnaissable et directement reliée au travail de montage.