Idris Kaye

3D page-turning portfolio zine

by Owais

Repo Live site

Description

Idris Kaye is a one-screen portfolio where the work is bound as a 3D fashion zine floating on black. The book opens on its own, turns through five spreads, rests, then riffles shut and starts again, and every page bends like real paper. Visitors can take over at any time by clicking, swiping, using the arrow keys or jumping with the progress bars.

Use it for:

a designer's, photographer's or stylist's portfolio
a lookbook, zine or catalogue for a fashion label
a reference for realistic page turning in Three.js

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5.5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. Claude writes the HTML, CSS and JavaScript and loads Three.js.
Make the zine artwork
Connect Higgsfield to Claude Code and ask Claude to generate a portrait cover and five landscape spreads in one fashion editorial style. Your own lookbook photos work too.
Preview and fix
Open index.html in your browser and watch the loop once, then turn the pages by hand on desktop and phone. Ask for one fix per message.
Publish on GitHub Pages
Ask Claude to push the folder to a new GitHub repository. Then open the repository's Settings, choose Pages and deploy from the main branch.

Main prompt

Build a one-screen portfolio for Idris Kaye, "Designer & Developer". The whole site is a 3D fashion zine floating on a pure black background.

Use plain HTML, CSS and JavaScript in three files with Three.js. No framework, no build step. It must also work when index.html is opened by double-clicking it.

The book: portrait 2:3 pages, each one a sheet of paper that bends and curls as it turns, with a soft shadow at the spine. The cover is one portrait image with "IDRIS KAYE" and "PORTFOLIO 2026" in small white text. Inside are five spreads: 01 Polaroids, 02 Editorial, 03 Collage, 04 Campaign and 05 Ensemble.

Autoplay loop: the closed book rests, the cover opens, the pages turn one after another, the last spread rests, then the book riffles shut and starts again. Any manual move pauses it.

Controls: click the right or left half of the book to turn forward or back, swipe on phones, use the arrow keys, and press Space to play or pause.

The only interface is four small corner labels in white Inter Tight, 12px:
- top left: "Idris Kaye / Designer & Developer", which goes back to the cover
- top right: Work, About and Contact
- bottom left: the current spread's title, rolling to the next one
- bottom right: one thin bar per spread to jump to it, and a play/pause button

About and Contact open as full-screen dark overlays with large text. Keep the spread names and timings in a clearly marked settings block at the top of the script. Only render when something moves, and respect reduced motion.