BackClient work: a sculptor's site

Heba Nasef

A sculptor's portfolio where one lump of clay becomes each of her works as you scroll, with a dashboard she runs herself.

4
sculptures in 3D
2
languages, with Arabic RTL
Heba Nasef's site: a bronze-patina sculpture of two fish on a plinth, beside the caption Finishing and patina
The clay sculpture Al-Ghanima turning on its plinth in the 3D story
Heba's dashboard, with Arabic and English fields beside a live preview of the site

The project

A portfolio site for Heba Nasef Sultan, a sculptor from Alexandria. The opening is a 3D story where one lump of clay turns into her sculptures as you scroll. Below it, she manages her own projects, photos and texts from a bilingual dashboard I built for her, with no database and no running costs.

The problem

Heba is a sculptor who had just graduated. She wanted a site that shows how her work is made, not only how it ends up. She also needed to change it herself, in Arabic and English, without paying for hosting or a database.

The decisions

01

Tell the story with one lump of clay

As you scroll, one lump of clay becomes each sculpture in turn, with a custom shader for the clay, the plaster and the patina. The process is the point of her work, so the site shows it.

The cost: The 3D models are heavy, so each one only downloads when the visitor gets close to it.

02

A dashboard with no database

Every save in her dashboard is a commit on GitHub, and Vercel publishes it. It costs nothing to run, and every change can be undone.

The cost: A change takes about a minute to go live, and she needs a GitHub account to sign in.

03

Make the dashboard hers, not mine

Every field explains in Arabic and English what it changes on the site. There is a live preview beside the form, a confirmation before anything is removed, and the developer-only controls are hidden.

The cost: I wrote more help text than code for some screens.

04

Turn photos into 3D models

She only had photos of her sculptures, so I generated 3D models from them and projected her photos back onto them, so the colours stay true to the real pieces.

The cost: The sides the photos never showed had to be filled in, and she had to approve them.

Where it landed

Live in English and Arabic. Heba adds and edits her projects herself, and the site resizes every photo she uploads.

What I did

  1. Designed and built the site, in English and Arabic with full RTL.
  2. Wrote custom GLSL shaders that morph one lump of clay into each sculpture, with plaster, patina, wood and scrap-metal finishes.
  3. Generated 3D models from photos of her sculptures and projected the photos back onto them.
  4. Set up a Git-based CMS with GitHub sign-in, so every edit she makes is published by Vercel with no database.
  5. Built image optimisation into the build, so any photo she uploads reaches visitors as a light WebP.
  6. Animated a clay character of Heba that walks with the scroll and takes a pose in each section.