Web Development

Living Portrait - Interactive Portfolio

A one-page portfolio where a 3D-style portrait of me follows your cursor, pulls faces when tapped and stretches like dough when you grab it.

Gallery

A one-page portfolio built around a portrait that reacts to the visitor. It looks like a 3D character, but there is no 3D model and no video: it is 56 still pictures of the same face, lined up to the pixel and swapped on a soft WebGL sheet.

What the portrait does

  • Eyes follow the cursor in 16 directions, and it blinks
  • Hover the nose, an eye or the mouth: cross-eyed, a wink, a kiss
  • Tap the mouth, a cheek or the chin: tongue out, puffed cheeks, a laugh
  • Grab the face and pull: the skin stretches and ripples back
  • Switch the haircut, or hover the contact button for heart eyes
  • Left alone, it yawns, whistles, sneezes and blows bubble gum

How it was built

  • Every expression is an AI-generated edit of one approved base picture, so the head never moves between swaps
  • A local script aligns the set to the tap zones and cleans the cut-outs
  • The skin is a damped wave simulation on a 72 by 72 mesh, stepped at a fixed 240 Hz so it never tears
  • Only one picture is on screen at a time, with a 70 ms crossfade

The rest of the page

  • A marquee of live sites that slides with the scroll
  • Character-by-character text reveal, stacking project cards with a lightbox
  • One nav that gathers into a glass pill as you scroll
Visit Live Site
Type
Website
Category
Web Development
Tech Stack
Next.jsReactTypeScriptWebGLGSAPLenisCSSOpenAI Image APIPythonNetlify
Back to all projects
More like this
Related Web Development Projects