Portfolio

A nature portfolio with a sphere of photographs you can explore, drag and open full screen.

Purpose: Portfolio or creative studio · Editorial experience
Sector: Creativity
Structure: Single page

Make it yours

US$6One-time payment · No subscription

Customize this design for your business or your next client.

Buy now

More designs. More possibilities.

Create for yourself and your clients with access to the Pro catalogue.

From US$19/month

See Pro plan

Already have access? Sign in

The video is a preview. The interactive demo comes with the purchase or with Pro.

What makes it special

Video hero
Modal details

Video intro at 2× with fade to black, SKIP and poster fallback
Sphere with Fibonacci distribution and 1150 px perspective
Drag with mouse or finger and inertia (factor 0.94)
Transition from sphere to grid
Viewer opening and closing; Escape closes it
prefers-reduced-motion respected

What's included

Prompt to recreate and customize the design with AI.
Site code and files: images, fonts and licences.
Interactive demo and instructions.
Use on your own sites and final client projects.

Demo sections and screens (6)

Cinematic eye → forest intro with SKIP
Sphere of 21 photographs with drag and inertia
Wordmark, “I See Through the Wild” headline and photographer card
Menu: The Archive, Field Notes, Studio and Contact
The Archive: photo grid
Full-screen viewer with title, location and note

What you can customize

Brand, headline, bio, cities and email (config/site.js)
Menu options
The 21 photographs: title, location, note and files
Intro video, poster and avatar

How to start

Copy the prompt and download the files.
Take them to your AI tool and ask for the changes: brand, copy and images.
Review the result and publish it on your domain.

Download the package and copy the prompt: your AI tool works on sitio/ (index.html, config/site.js and media/). Serve it with any static server, for example `python3 -m http.server`. Change the brand, copy and photographs from config/site.js without touching the sphere engine.

The result depends on your AI tool and the changes you make. The demo shows the visual direction.

Technical details & requirements

Requirements

Any static server; it does not need Node, npm or a build.
Typefaces are loaded from Google Fonts.
Portfolio demo: Field Notes, Studio and Contact do not include pages or connected services.
Not included: AI tool (and its credits), domain and hosting.

Technologies

HTML, CSS & JavaScript

Implemented in the package you download.

HTML, CSS y JavaScript sin dependencias · Vídeo H.264 con póster WebP · Imágenes WebP responsive (520/640/760 + visor)

Suggested AI tools

ClaudeCodexCursor

Compatible with the design instructions; not a recorded test.

Tested compatibility: No recorded test yet.

Palette and typography

#000000#f4f2ef#8c8783

Playfair Display (titulares)
Inter (interfaz)

Layout: Desktop 1440 · tablet 768 · mobile 390; cards 520/640/760 px and viewer up to 1600 px

Licence & versions

Use it on your own sites and in final client projects, including commercial use. Do not resell or redistribute the prompt, the files or the site as a template. Read the licence

Provenance: Package v1.1.0: the 89 files served by the Arrmma demo (sphere, intro and image-loading code from the approved original) (index.html, config/site.js, 84 cards and viewer images, avatar, intro video and poster); Playfair Display and Inter (OFL) from Google Fonts. Notices in LICENCIAS-Y-AVISOS.md.

Version: v1.1.1 · Published Nov 4, 2026
Versions: v1.1.1 · 2026-11-05 — Compatibilidad de capas 3D en Safari. Conserva fotografías, geometría, cámara e inercia.
v1.1.0 · 2026-11-05 — Restores the sphere and intro behavior of the approved original (ethan-vale.vercel.app) with the new assets: cards downscaled via canvas according to width, as in the original (instead of srcset), 1300 ms intro waits and no forced cut of the video at 4 s.
v1.0.0 · 2026-11-05 — First version: approved static site with 21 photographs, avatar, intro video, prompt, README and licenses.