NUXT 4 / UI/UX / VUE 3

Portfolios

Conception et développement de deux portfolios sur mesure — développeur XR et monteur vidéo.

edouarddesmyter.com/projects/portfolios
Image 1 sur 2
Image 2 sur 2
Notes

Design & Dev · Web · Cloudflare Pages

Portfolios

Ce projet regroupe la conception UI/UX et le développement full-stack de deux sites vitrine distincts, chacun pensé pour le métier et la personnalité de son auteur.

Le premier est mon portfolio XR (celui que vous consultez) : direction sombre et premium, accents dorés, navigation orientée projets immersifs, pages détail riches et version bilingue FR/EN. Le second est le portfolio de Micky Valat, monteur vidéo : hero plein écran avec showreel, galerie de projets filtrable par catégorie, ton plus cinématographique et mise en avant du reel.

Les deux sites partagent une base technique moderne — Nuxt 4, déploiement Cloudflare Pages, formulaire de contact via Resend — tout en adoptant des choix de design et d’architecture front différents selon le profil.

Rappels

Défis

5

  • Créer une identité visuelle distincte pour un profil XR technique et un profil montage vidéo
  • Adapter l’expérience à chaque métier : navigation projets XR vs showreel et galerie filtrable
  • Déployer deux portfolios sur Cloudflare Pages avec API contact sécurisée (Resend)
  • Maintenir des stacks front différentes (CSS modulaire vs Tailwind v4) sur la même base Nuxt 4
  • Optimiser performances, animations au scroll et médias (images, vidéo) sans dégrader le ressenti
README.md

Portfolio XR (Édouard Desmyter) — Nuxt 4, Vue 3, TypeScript, rendu SSR via Nitro (preset cloudflare_pages). Styles organisés en feuilles CSS dédiées par section, composable useLang pour le bilingue, icônes Iconify, API /api/contact et déploiement Wrangler.

Portfolio monteur vidéo (Micky Valat) — même socle Nuxt 4 avec Tailwind CSS v4, @nuxt/image, hero vidéo showreel, filtres par catégorie de projet, animations de révélation au scroll et contenu piloté par des fichiers de données dans app/data/. Contact et hébergement calqués sur la même approche edge (Cloudflare + Resend).

export const project = {
  name: "Portfolios",
  company: "Personnel",
  platform: "Web · Cloudflare Pages",
  role: "Design & Dev",
  duration: "Plusieurs mois",
  stack: [
    "Nuxt 4",
    "UI/UX",
    "Vue 3",
    "Cloudflare Pages",
    "Tailwind CSS",
    "TypeScript",
    "Resend",
    "SSR",
    "Iconify"
  ]
}
CréditsPersonnel

Contact