🎬 Creative Media · Portfolio

Kluxe Productions Platform

A cinematic media house portfolio featuring a cipher-gated client delivery vault, dual-mode theming (Obsidian/Alabaster), "Living Archive" with sector-based filtering, shoot scheduling, and admin dashboard — built with zero dependencies using pure vanilla JavaScript module pattern.

Role Solo Developer & Designer

Duration 2 Months

Category Creative / Media

Status Production

🚀 Visit Live Site ↗

Design Philosophy

Zero dependencies. Pure craft.

External Dependencies

IIFE

Module Architecture

Theme Modes

🔐

Cipher-Gated Vault

The Problem

Creative portfolios feel generic and bloated.

Most media house websites use heavy frameworks, template designs, and standardized gallery layouts. They fail to convey the cinematic quality of the work itself. Client file delivery is typically handled through third-party services, breaking the brand experience.

Kluxe Productions needed a platform that matched their premium visual identity while providing practical tools for client management, shoot scheduling, and secure deliverable handoff.

The Solution

A bespoke digital experience with zero bloat.

Built entirely with vanilla JavaScript using the IIFE (Immediately Invoked Function Expression) module pattern — no React, no Vue, no jQuery. Every animation, transition, and interaction is hand-crafted. The cipher-gated vault allows clients to access their deliverables using a project-specific access code, keeping everything within the brand ecosystem.

Dual-mode theming lets visitors experience the portfolio in Obsidian (dark) or Alabaster (light) mode. The "Living Archive" presents projects with sector-based filtering and cinematic hover animations that match the production quality of the work itself.

Features

What makes it work.

🔐 Cipher-gated client vault — Clients enter project-specific access codes to view and download their deliverables. No account creation required — just the code shared after production.
🎨 Dual-mode theming — Obsidian (dark) and Alabaster (light) modes with smooth CSS custom property transitions. Theme preference persisted via LocalStorage.
📁 Living Archive — Portfolio gallery with sector-based filtering (Corporate, Wedding, Music Video, Documentary, Commercial). Cinematic hover effects and lazy-loaded media.
📅 Shoot scheduling — Integrated booking calendar for production sessions. Date range selection, location input, brief upload, and confirmation workflow.

⚙️ Admin dashboard — Manage projects, upload deliverables, generate vault access codes, view analytics, and respond to booking requests.
🏗️ IIFE module pattern — Clean separation of concerns without build tools. Each feature (theme, vault, archive, scheduler) is an isolated module with a public API.
💾 LocalStorage persistence — Theme preference, vault sessions, and draft bookings all persisted client-side. No server needed for state management.
🎥 Cinematic micro-interactions — Custom scroll-triggered animations, parallax depth effects, and hover state transitions designed to match production studio aesthetics.

Tech Stack

Intentionally minimal.

🟡 JavaScript

Vanilla ES6+ with IIFE module pattern. No frameworks, no build tools, no transpilation. Ships exactly what runs.

Vanilla JS ES6+ Module Pattern

🎨 Styling

Pure CSS3 with custom properties for theming. Keyframe animations, grid layouts, and container queries — no preprocessors.

CSS3 Custom Properties Keyframes

💾 Storage

LocalStorage for all client-side state: theme, vault sessions, booking drafts. No backend required for core functionality.

LocalStorage Session State

📐 Architecture

IIFE modules with dependency injection. Event-driven communication between modules. Clean public/private API boundaries.

IIFE Event-Driven DI Pattern