Anass.pro-style narrative pitch sites

This skill captures the design system, interaction patterns, and authoring playbook behind anass.pro — a single-file, vanilla-JS, hyper-personalized pitch site that uses an interactive pixel-art game, procedural Web Audio SFX, scroll-revealed scenes and behavioral copywriting to address exactly one named reader.

Use it when the user wants to build something with the same DNA: a one-recipient narrative landing page that feels designed for them and only them.

What you are recreating

Anass.pro is not a generic portfolio. It is a behavioral pitch built around four ideas:

1. One reader, one URL. The site is addressed to a specific named person. Their name appears in the HUD, in narrative cards, and inside the storytelling. No one else receives this URL.
2. Story as architecture. The page is a sequence of scenes (Hero → Hook → Mirror → Method → Reveal → Person → Close). Each scene has a psychological job — capture, rupture, reappraisal — not just "section + content".
3. The medium is the message. The interactive pixel-art game in the hero is itself the proof of capability. A typewriter with key clicks, a counter that ticks up to 8.6M, a character that follows the user across scenes — every effect demonstrates the engineering claim the copy is making.
4. Single-file, no framework. The whole thing ships as one ~120 KB HTML file with inline <style> and <script>, vanilla JS classes, a Canvas 2D engine, and Web Audio API for procedural sound. No build, no React, no audio assets.

If the user wants a generic personal portfolio, stop and switch to frontend-design. Use this skill only when the brief is a one-recipient pitch / candidacy / narrative landing page.

Workflow when invoked