All Skills
Frontend interactionHTMLv1.1.0

Story Portfolio Canvas

A work-first dark spatial gallery with scattered, grid and orbit layouts, overlapping layers and depth. Filter categories, rotate the featured project and open keyboard-accessible stories. Its scene illustrations are independently created.

PortfolioGallery layoutsProject stories3D orbit

Live demo

Interactive demo

Filter the work, try the orbit view, then pick an illustration to read its story.

Open preview in a new window
FROM DEMO TO PROJECT

Make this effect yours

Includes Skill instructions, a Python generator, an HTML template, design notes, and an offline preview. Requires Python 3.10+ with no additional dependencies. Supports custom text and colors, keyboard controls, and reduced motion.

Download SKILL.md only
  1. Download and unzip

    Keep the story-portfolio-canvas/ folder. Its SKILL.md file is the Skill entry point, and scripts/ contains the generator, templates/ the HTML template, and references/ the design notes. Open preview.html directly in your browser.

  2. Give it to your AI coding assistant

    Add the folder to your project and ask your assistant to read SKILL.md. If your tool supports Skills, follow its installation method.

  3. Describe the result you want

    Build a dark studio portfolio with category filters, scatter and orbit views, and project-story dialogs.

Skill source

SKILL.md
Read full Skill instructions