BillyNabilLet’s talk
[ Design meets code. ]BillyNabil / Web development
DESIGN × DEVELOPMENT

Web.

Design.
Built in code.

A place on the internet.
Thoughtfully designed. Carefully built.

Explore the work
interface / workspace

Start with the structure.

Switch to Build to explore
INTERFACES · INTERACTION · DEVELOPMENTA different kind of movement
WEB & APPLICATIONS

Selected builds.

More on GitHub

Choose a project to see the preview.

BillyNabil / littlest-tokyo-motionFull preview
Littlest Tokyo Motion live demo showing a Tokyo diorama, pink patterned frame, and Tokyo in Motion heading
Live site screenshotWeb / BillyNabil

Littlest Tokyo Motion

An interactive Tokyo diorama with scroll-driven camera movement, animation scrubbing, and clickable hotspots. Built with Three.js and Lenis; the Littlest Tokyo 3D model is by glenatron (CC BY 4.0).

Live site View GitHub
  • JavaScript
  • Three.js
  • WebGL
  • Lenis
THIS PORTFOLIO

One creator.
Two dimensions.

billynabil / portfolio
BillyNabilChoose your world
Design & developmentWeb.
Films & stream identitiesMotion.
Composition previewTwo worlds, side by side
PERSONAL PORTFOLIO / 2026

BillyNabil.
Two ways to explore.

Web development and motion design share the same portfolio. The entrance gives each discipline its own space, typography, and interaction.

Scope
Interface & frontend
Built with
Next.js · React · Motion
Open the portfolio
INSIDE THIS PROJECT

Three decisions
that shape the experience.

Two visual languages.

A monochrome workspace and an expressive film gallery give the two disciplines distinct identities.

An entrance you can explore.

The world under your pointer expands. A neutral area between them gives the composition room to reset.

Media when it matters.

Posters introduce the work. Short previews and the full player load when you choose to explore a film.

THE WAY I BUILD / DESIGN & DEVELOPMENT

Try the details.
See how they respond.

Interface / Layout↗
Layout spacing
Selected work
Project details
Get in touch

Give the content room.

Try the spacing control. The same content can feel compact or relaxed; the layout makes that difference visible.

React 19Semantic HTMLResponsive CSS
DESIGN × DEVELOPMENT

From the layout.
To the last interaction.

Discover the motion side

Page composition, typography, and reusable controls, shaped around the content and the people using it.

Scroll to

Motion.

Enter the motion dimension