⚡ Zenitsu Agatsuma: Operational Dossier

A High-Performance, Scrollytelling Web Experience built with Zero Dependencies.

---

🌩️ Project Overview

This project is a premium, cinematic "Operational Dossier" dedicated to Zenitsu Agatsuma from Demon Slayer. It breaks away from traditional portfolio structures, utilizing a 120-frame high-fidelity canvas scrollytelling engine that syncs an animation to the user's scroll position.

The UI is engineered with a custom "Thunder Yellow" Glassmorphism design system, featuring refractive frosted glass, electric inner glows, and dynamic neon borders that react to user interaction.

✨ Key Features

• 🎬 Canvas Scrollytelling Engine: High-performance image sequence scrubbing mapped precisely to scroll velocity.
• ⚡ Thunder Yellow Glassmorphism: Custom CSS styling with refractive blur (backdrop-filter) and luminous neon ambient shadows.
• 🎯 Precision Kinetic Cursor: A custom 24px glowing yellow ring cursor that utilizes mix-blend-mode and spring physics for a tactical feel.
• 🎭 Cinematic Reveal Architecture: Content is hidden during the initial animation sequence and revealed via a sophisticated blur/fade transition only when the scroll reaches 98%.
• 🚀 Zero Dependencies: Built entirely with Vanilla HTML5, CSS3, and JavaScript. No build steps, no bloat.

🛠️ Technology Stack

📁 File Architecture (Deployment Ready)

For a successful deployment, ensure these core files are uploaded to the root directory:

📦 Zenitsu-Dossier
 ┣ 📂 sequence/        # Contains the 120 .png animation frames (CRITICAL)
 ┣ 📜 index.html       # Structural layout and dossier content
 ┣ 📜 style.css        # Glassmorphism, animations, and typography
 ┗ 📜 script.js        # Canvas engine, scroll logic, and custom cursor

Note: Any leftover configuration files (package.json, tailwind.config.ts, tsconfig.json) can be safely ignored or deleted as the project was migrated to a vanilla architecture for maximum performance.

🚀 Deployment Instructions

Because this project is a purely static site, it can be deployed instantly for free.

Using GitHub Pages:

1. Initialize a git repository and push your code to a new public repository on GitHub.
2. Go to your repository Settings.
3. Navigate to Pages in the left sidebar.
4. Under Source, select the main branch and /root directory, then click Save.
5. Your site will be live in a few minutes!

Using Vercel or Netlify:

1. Log into your Vercel or Netlify dashboard.
2. Click Add New Site and authorize your GitHub account.
3. Select this repository.
4. Leave the Build Command and Publish Directory empty (or set to ./).
5. Click Deploy.

👨‍💻 Developed By

Gajanan Waichale

• GitHub: @iamgajanan70
• Instagram: @lost_gajanan
• Contact: someonespecial522@gmail.com

---

"The strength to protect emerges when the mind is at its quietest."