Ayla Noor

Magazine-stack photo portfolio

by Owais

Repo Live site

Description

Ayla Noor is a one-page portfolio for a made-up fashion photographer in Barcelona. Her 15 series are a stack of magazines seen at an angle, each showing its printed spine. Scroll and the stack glides; click one and it flies up, becomes a cover and opens into a two-page spread with the photograph on the right. The loader is the same magazine flipping through its pages.

Use it for:

a photographer's, stylist's or art director's portfolio
a magazine, zine or lookbook site
a reference for 3D page turning in plain CSS and JavaScript

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 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; no libraries are needed.
Pick photos on Unsplash
Choose 15 editorial photos (fashion, studio portraits, styled still life) and one portrait for About. Give Claude their Unsplash links and it loads each at the size it is shown.
Preview and fix
Ask Claude to start a local preview. Open a few series in light and dark mode on desktop and phone, then 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-page portfolio for Ayla Noor, a fashion and portrait photographer in Barcelona. Use plain HTML, CSS and JavaScript in three files, with no framework and no libraries. Inter is the only font.

The idea: her 15 photo series are a stack of magazines lying on a table, seen at an angle.

Home: the 15 albums stacked vertically, each showing a cover and a coloured spine printed like "01 | CRIMSON · CAMPAIGN · '26". The middle album faces you; the others tilt away above and below with soft light and shadow. The stack loops forever and moves with the scroll wheel, drag, swipe, arrow keys and buttons.

Opening a series: the album flies to the centre, becomes a magazine cover with an "AYLA NOOR" masthead, then opens on its spine into a two-page spread, with a paper text page on the left and a full-bleed photo on the right. On phones the pages stack. Closing reverses it.

Loader: the same magazine opens and flips one page per series while the photos load, with a big counter, then closes and drops into the stack.

About: opens as a circle growing out of the avatar button, with a portrait, a short bio, lists of what she shoots, her kit and where she has been published, and contact links.

Index: a list of all 15 series; hovering a row floats its photo next to the cursor.

Design: light and dark themes that are remembered, paper #f5f1ea and ink #161513, and glass floating controls. Give each series its own spine colour, chosen to match its photo. Use only editorial fashion, portrait and still-life photos from Unsplash. Make it accessible and keyboard friendly, and respect reduced motion.