- Rôle
- UX / UI · Front-end
- Périmètre
- Site portfolio
- Plateforme
- React · TypeScript · Vite
- Langues
- Anglais · Français
- Engagement
- Published project
- By
- Bigad Elsherif, founder of Appstruct
Présentation du projet
Medhat Soody est photographe, artiste visuel et directeur de la photographie, né au Caire et installé à Paris. Son travail va de la photographie de danse et de scène à la photographie de rue en noir et blanc, du portrait à la direction de la photographie documentaire, et a été présenté lors d'expositions personnelles en France et en Égypte.
Appstruct a conçu et développé son portfolio : un site sombre, pensé comme un tirage, qui présente cinq collections, ses expositions et sa filmographie en anglais et en français, et invite les visiteurs à entrer eux-mêmes dans l'une de ses séries.
Visiter le siteLe site en mouvement
Un défilement de la page d'accueil : en-tête, histoires à la une, expositions, la chambre noire, services et le Screen Test.
Ouvrir dans un nouvel onglet
Le concept
Plutôt qu'une galerie générique, le site emprunte le langage de la photographie argentique :
Une pellicule
Chaque collection se présente comme une planche-contact 35 mm, avec ses perforations et un marquage de bord qui indique MEDHAT SOODY 400TX. Chaque photographie est une image numérotée, et chaque séance porte un code de planche-contact comme 01A ou 03A.
Des tirages en trame
Les images clés sont rendues en trame d'impression en WebGL, pour se lire comme des tirages plutôt que comme des vignettes. Chaque effet laisse place à la photographie d'origine lorsque WebGL n'est pas disponible.
L'atmosphère de la chambre noire
Sombre par défaut avec un mode clair, un fin grain de pellicule derrière chaque page, et un seul accent doré réservé aux codes d'images et au marquage de bord.
Ce que nous avons fait
Appstruct a conçu et développé l'ensemble du site, du concept au front-end de production :
Portfolio et séances
Cinq collections — Rue, Scène & danse, Corps & art, Portrait et Art vidéo — chacune ouvrant sur des séances avec leur année, leur lieu et leur nombre d'images. Les bandes se font glisser, une image s'agrandit jusqu'à sa page, et une visionneuse affiche chaque photo en grand format.
Screen Test
Une section interactive où le visiteur active sa caméra et devient une image de la série Fragile de Medhat, derrière un voile de papier bulle rendu en WebGL. Tout se passe sur l'appareil du visiteur : rien n'est envoyé ni enregistré, et la caméra s'éteint dès qu'il s'arrête ou quitte la page.
Expositions et filmographie
Une trace de ses expositions personnelles en France et dans la région MENA, et de son travail de directeur de la photographie et de cadreur sur des films documentaires et des spectacles.
Bilingue par adresse
Chaque page existe en anglais et en français à sa propre adresse, toutes deux pré-rendues pour que les moteurs de recherche et les aperçus de liens reçoivent la page complète. Les visiteurs sont dirigés automatiquement vers leur langue ; les robots d'indexation ne sont jamais redirigés.
Expérience mobile
Le concept se prolonge sur téléphone : l'en-tête en trame, l'index des collections et chaque page de séance sont pensés pour une navigation à une main, et la visionneuse se ferme d'un simple glissement.
Expositions et filmographie
Sous le capot
Un site statique et pré-rendu, où le mouvement se concentre là où il a du sens :
- —React 19 et TypeScript sur Vite, mis en forme avec Tailwind CSS.
- —Animations avec GSAP et Framer Motion, défilement fluide avec Lenis, et effets WebGL construits sur ogl — chacun avec une image de repli.
- —Chaque page pré-rendue à la compilation dans les deux langues, avec ses propres titres, descriptions, images de partage et données structurées.
- —Un middleware Vercel qui dirige les visiteurs vers l'anglais ou le français selon leur choix enregistré ou la langue de leur navigateur.
- —Une chaîne de traitement qui génère des photos optimisées à partir des originaux, et des polices auto-hébergées et allégées.
Chaque image raconte une histoire.
Ce dont Medhat dispose aujourd'hui
Un seul lieu pour sa photographie, son art vidéo, ses expositions et sa filmographie.
Un site en anglais et en français, pour ses publics en France et dans la région MENA.
Un Screen Test interactif qui invite les visiteurs dans sa série Fragile, sur leur propre appareil.
En ligne sur medhatsoody.art.
