Aller au contenu
Tous les projets

Z3N

Mon portfolio précédent : une seule page, un cube de verre WebGL, un thème sombre et un thème clair.

Rôle
Direction et développement
Ma part
Chaque décision de conception et de technique était la mienne.
Technologies
HTML, CSS, JavaScript, Three.js, GSAP, Lenis
En local
La page d’accueil de Z3N en thème sombre : un champ de points de demi-teinte gris et bleu derrière de grandes lettres blanc cassé « Z3N », avec le nom, quatre lignes de rôle et deux boutons.
Fig. 01L’en-tête du portfolio précédent.

01 / 06

L’idée

Mon portfolio précédent : une seule page avec les vues Home, Work, About et Contact.

02 / 06

Les décisions

Je voulais qu’il se lise comme un signal d’interface sobre, et non comme un modèle.

Le mode clair est dessiné, pas inversé : le thème clair se fond dans la page au lieu de retourner le thème sombre.

Le verre a demandé plusieurs essais. Le premier cube ne paraissait pas transparent, et une passe ultérieure a rétabli la frange colorée que le verre dessine autour d’une lettre.

Les petits détails y sont : un lien d’évitement, un bouton pour copier l’adresse e-mail, la couleur du navigateur qui suit le thème, et des guillemets typographiques.

La page Projets est construite à partir de vraies captures d’écran de vrais projets.

Les changements sont arrivés sous la forme de neuf pull requests, fusionnées chacune séparément.

03 / 06

Le design

Un chargeur façon démarrage système, un menu plein écran et un voile de glyphes qui tombent entre les vues.

Derrière le titre, des points de demi-teinte qui s’écartent du pointeur. Thèmes sombre et clair.

Un écran de démarrage presque noir en capitales monospace : « Initializing Z3N », « Loading visual system », « Loading projects », puis « Ready », avec une fine ligne de progression bleue.
Fig. 02Le chargeur de démarrage.
Le champ de demi-teinte de l’en-tête de près : des points bleus ronds de tailles variées sur un fond presque noir, qui fusionnent là où ils sont denses, avec une zone sombre vide à gauche.
Fig. 03Le champ de points, de près.
En local
La vue Work : un grand numéro « 01 / 03 », le titre « Corda » avec une courte description et des étiquettes, et un aperçu encadré, dans un navigateur, du site Corda.
Fig. 04La vue Work.

04 / 06

La réalisation

JavaScript natif avec Three.js, GSAP et Lenis. Le cube de verre est son propre module ; s’il échoue, le reste de la page fonctionne toujours.

La première version a été validée entre le 17 et le 19 septembre 2026 ; la refonte s’est déroulée du 21 au 25 septembre.

Vues
Accueil, Work, About, Contact sur une seule page
3D
Cube de verre en Three.js
Animation
GSAP, ScrollTrigger, Lenis
Tiers
Une page /kage/ de ThreeUI (licence MIT), pas de moi
Code source
Dépôt privé
En local
L’en-tête de la page d’accueil Z3N en thème clair : une page blanc cassé avec un champ de demi-teinte gris et bleu et des lettres « Z3N » presque noires.
Fig. 05Le thème clair.
Le cube de verre tourné par un glissement : des lettres « Z3N » en 3D extrudées vues à travers trois faces, avec des franges rouges, bleues, cyan et jaunes le long des bords des lettres.
Fig. 06Le cube, de près.
L’en-tête de la page d’accueil Z3N sur téléphone en thème sombre : les lettres « Z3N », le nom, quatre lignes de rôle, la phrase d’accroche et deux boutons sur le champ de demi-teinte.
Fig. 07Téléphone, premier écran.
Le menu en surimpression sur téléphone, sur un fond sombre flouté : trois grands liens numérotés « 01 Work », « 02 About » et « 03 Contact », et une croix de fermeture en haut à droite.
Fig. 08Le menu sur téléphone.
La vue Work sur téléphone montrant le projet 01, Corda, avec ses étiquettes et un aperçu du site Corda dans un cadre de navigateur.
Fig. 09La vue Work sur téléphone.

05 / 06

Les détails

Le cube tourne lentement et suit votre glissement. Le curseur devient un disque blanc au-dessus des liens.

En local
La navigation en surimpression plein écran sur une copie sombre et floutée de la page d’accueil, avec le curseur sur le mot « About » mis en évidence.
Fig. 10Le menu, « About » survolé.

06 / 06

État actuel

La version qui a précédé ce site.

Projet suivant

Perfectly Hooked

Victor Ohiri