Skip to content
All work

Z3N

My earlier portfolio: one page, a WebGL glass cube, a dark and a light theme.

Role
Direction and development
My part
Every design and technical decision was mine.
Stack
HTML, CSS, JavaScript, Three.js, GSAP, Lenis
Running locally
The Z3N home page in dark theme: a grey and blue halftone dot field behind large off-white Z3N lettering, with the name, four role lines and two buttons.
Fig. 01The hero of the earlier portfolio.

01 / 06

The idea

My earlier portfolio: one page with Home, Work, About and Contact views.

02 / 06

The decisions

I wanted it to read as a restrained interface signal, not a template.

Light mode is designed, not inverted: the light theme blends with the page instead of flipping the dark one.

The glass took several rounds. The first cube didn’t read as transparent, and a later pass brought back the coloured fringe that glass puts round a letter.

The small things are in: a skip link, a copy-email button, the browser’s theme colour following the theme, and typographic quotes.

The Work page is built from real screenshots of real projects.

The changes went in as nine pull requests, each merged on its own.

03 / 06

The design

A boot-style loader, a full-screen menu, and a veil of falling glyphs between views.

Behind the headline, halftone dots that move out of the pointer’s way. Dark and light themes.

A near-black boot screen in monospace capitals: Initializing Z3N, Loading visual system, Loading projects, then Ready, with a thin blue progress line.
Fig. 02The boot loader.
The hero's halftone field up close: round blue dots of varying size on near-black, merging where dense, with an empty dark patch at the left.
Fig. 03The dot field, up close.
Running locally
The Work view: a large 01 / 03 numeral, the title Corda with a short description and tags, and a framed browser preview of the Corda site.
Fig. 04The Work view.

04 / 06

The build

Vanilla JavaScript with Three.js, GSAP and Lenis. The glass cube is its own module; if it fails, the rest of the page still works.

The first version was committed between 17 and 19 September 2026; the redesign ran from 21 to 25 September.

Views
Home, Work, About, Contact in one page
3D
Three.js glass cube
Motion
GSAP, ScrollTrigger, Lenis
Third party
A /kage/ page from ThreeUI (MIT licence), not my work
Source
Private repository
Running locally
The Z3N home hero in the light theme: an off-white page with a grey and blue halftone field and near-black Z3N lettering.
Fig. 05The light theme.
The glass cube turned by a drag: extruded 3D Z3N lettering seen through three faces, with red, blue, cyan and yellow fringes along the letter edges.
Fig. 06The cube, up close.
The Z3N home hero on a phone in dark theme: the Z3N lettering, the name, four role lines, the tagline and two buttons over the halftone field.
Fig. 07Phone, first screen.
The phone overlay menu on a dark blurred ground: three large links numbered 01 Work, 02 About and 03 Contact, and a close cross at the top right.
Fig. 08The menu on a phone.
The phone Work view showing project 01, Corda, with its tags and a browser-frame preview of the Corda site.
Fig. 09The Work view on a phone.

05 / 06

The details

The cube turns slowly and follows your drag. The cursor becomes a white disc over links.

Running locally
The full-screen overlay navigation over a dark blurred copy of the home page, with the cursor on the highlighted word About.
Fig. 10The menu, About hovered.

06 / 06

Current state

The version that came before this site.

Next project

Perfectly Hooked

Victor Ohiri