<!DOCTYPE html>

<head>

<title>Christian Varbanovski - Director / Actor</title>

<style>

/* Custom Styles & OS Metaphor Backgrounds */

body {

margin: 0;

overflow: hidden;

user-select: none;

}

.pattern-grid-lg {

background-color: #c0c0c0;

background-image: linear-gradient(#0000000a 1px, transparent 1px), linear-gradient(90deg, #0000000a 1px, transparent 1px);

background-size: 32px 32px;

}

/* Custom Animations */

@keyframes slideInRight {

from { transform: translateX(2rem); opacity: 0; }

to { transform: translateX(0); opacity: 1; }

}

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

.animate-window {

animation: slideInRight 0.2s ease-out forwards;

}

.animate-fade {

animation: fadeIn 0.2s ease-out forwards;

}

/* Hide Scrollbar but keep functionality for specific areas */

.no-scrollbar::-webkit-scrollbar { display: none; }

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

</style>

</head>

<span class="truncate">CHRISTIAN VARBANOVSKI</span>

</button>

<button onclick="openApp('About')" class="px-4 font-mono text-sm font-bold uppercase hover:bg-black hover:text-white border-2 border-transparent transition-colors h-8 flex items-center">ABOUT</button>

<button onclick="openApp('Contact.eml')" class="px-4 font-mono text-sm font-bold uppercase hover:bg-black hover:text-white border-2 border-transparent transition-colors h-8 flex items-center">CONTACT</button>

<button onclick="openApp('Subscribe')" class="px-4 font-mono text-sm font-bold uppercase hover:bg-black hover:text-white border-2 border-transparent transition-colors h-8 flex items-center">SUBSCRIBE</button>

</div>

</div>

</header>

Christian<br/>Varbanovski

</h1>

</div>

</div>

</main>

<div class="fixed z-50 flex flex-col overflow-hidden bg-[#e5e5e5] border-4 border-black shadow-[8px_8px_0_0_rgba(0,0,0,1)] animate-window

inset-4 sm:inset-auto sm:top-[4.5rem] sm:right-6 sm:bottom-6 sm:w-[45vw] lg:w-[600px]">

<div id="window-title" class="font-mono text-sm font-bold truncate pr-4">Title</div>

</button>

</button>

</button>

</div>

</div>

/* =========================================================================

DATA CONFIGURATION

========================================================================= */

const SITE_DETAILS = {

name: "CHRISTIAN VARBANOVSKI",

role: "Director / Actor",

email: "hello@chrisvarbanovski.com",

socials: {

instagram: "https://instagram.com/chrisvarbanovski",

youtube: "https://youtube.com/chrisvarbanovski",

tiktok: "https://tiktok.com/@chrisvarbanovski"

}

};

const tiktokSvg = `<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5" /></svg>`;

const FILE_SYSTEM = {

"Directing Reel": {

type: "video_player",

src: "https://www.w3schools.com/html/mov_bbb.mp4",

description: "Featured Directing & Acting Reel 2024"

"Films.mov": {

type: "folder",

description: "I am currently pursuing my BFA at NYU Tisch School of the Arts (Film & TV). In Summer 2024, I completed an intensive 35mm Filmmaking workshop at FAMU in Prague, directing a short film shot entirely on 35mm.",

items: [

{ id: 1, title: "Short Film Feature", src: "https://www.w3schools.com/html/mov_bbb.mp4", thumbnail: "https://images.unsplash.com/photo-1536440136628-849c177e76a1?q=80&w=800&auto=format&fit=crop" },

{ id: 2, title: "Commercial Work", src: "https://www.w3schools.com/html/mov_bbb.mp4", thumbnail: "https://images.unsplash.com/photo-1485846234645-a62644f84728?q=80&w=800&auto=format&fit=crop" }

]

"Voice Acting.ptx": {

type: "audio_player",

title: "Voice Acting",

image: "https://images.unsplash.com/photo-1590602847861-f357a9332bbc?q=80&w=800&auto=format&fit=crop",

bio: "With a versatile vocal range and professional home studio, I've brought characters to life across animation, video games, and national commercial campaigns. I launched and taught the first official, studio-backed voice acting academy in Bulgaria (ProFilms Academy). Notable dubbing roles include Steven Universe, Lincoln Loud (The Loud House), Lloyd (Lego Ninjago), and Dan Kouzo (Bakugan).",

tracks: [

{ id: 1, title: "Commercial Reel", src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", description: "Energetic, conversational, and authoritative reads for modern brands." },

{ id: 2, title: "Character / Animation", src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3", description: "A dynamic range of voices from wacky sidekicks to dramatic villains." },

{ id: 3, title: "Video Game / Interactive", src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3", description: "Combat barks, tactical callouts, and immersive interactive dialogue." }

]

"Music.mp3": {

type: "folder",

description: "From performing as a contestant on Team Lechev on The Voice of Bulgaria (2021) to volunteering as a singer for 'Bon-Bon' in numerous national charity concerts since 2008, music has always been a core part of my artistic journey.",

items: [

{ id: 5, title: "Live Stage Performance", src: "https://www.w3schools.com/html/mov_bbb.mp4", thumbnail: "https://images.unsplash.com/photo-1507676184212-d0330a15233c?q=80&w=800&auto=format&fit=crop" },

{ id: 6, title: "Studio Recording", src: "https://www.w3schools.com/html/mov_bbb.mp4", thumbnail: "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=800&auto=format&fit=crop" }

]

"Photography": {

type: "folder",

items: [

{ id: 7, title: "NYC Streets", type: "image", thumbnail: "https://images.unsplash.com/photo-1516862523118-a3724eb136d7?q=80&w=800&auto=format&fit=crop" },

{ id: 8, title: "Portraits", type: "image", thumbnail: "https://images.unsplash.com/photo-1551632811-561732d1e306?q=80&w=800&auto=format&fit=crop" }

]

"About": {

type: "text_file",

content: "I am a filmmaker, actor, and musician currently based in New York, NY, pursuing my BFA at NYU Tisch School of the Arts (Kanbar Institute of Film and Television).\n\nMy work spans from directing independent films—including a recent 35mm short directed at FAMU in Prague—to singing on The Voice of Bulgaria and voicing iconic characters like Steven Universe and Lincoln Loud for international broadcasts. I am passionate about multidisciplinary storytelling across stage, screen, and the recording booth."

"CV": {

type: "text_file",

content: "CHRISTIAN VARBANOVSKI\nNew York, NY 10003\n\nEDUCATION\nNew York University, Tisch School of The Arts (NYU) (Sept. 2022 - May 2026)\n• Undergraduate Film and TV program at the Kanbar Institute of Film and Television\n\nThe Film and TV School of the Academy of Performing Arts in Prague (FAMU) (Summer 2024)\n• Completed an intensive 35mm Filmmaking workshop and directed a short film shot on 35mm film\n\nBEST ACHIEVEMENTS\nProFilms Academy, ProFilms (Summer 2022)\n• Launched and taught the first official, studio-backed, voice acting academy in Bulgaria\n\nThe Voice of Bulgaria, BTV (Sept. 2021 - Dec. 2021)\n• Contestant on Team Lechev; Finished the run in the show's knockouts\n\nDigital Indie Lab, Single Step Foundation (April 2021)\n• Selected to participate in the workshop sponsored by The Google Impact Challenge and The Active Citizen Fund\n\nCamp Rising Sun (Summer 2019)\n• Selected to represent Bulgaria with a full scholarship in this prestigious leadership program\n\nVOLUNTEER EXPERIENCE\n'Bon-Bon' Volunteer Work (2008 - Present)\n• Participated in various charity concerts organized by different organizations as a singer in 'Bon-Bon'\n\nVOICE ACTING CREDITS (SELECTED)\n• Steven Universe: The Movie & Future (Steven Universe) [Cartoon Network]\n• The Loud House (Lincoln Loud) [Nickelodeon]\n• Lego Ninjago: Masters of Spinjitzu (Lloyd) [Cartoon Network]\n• Bakugan (Dan Kouzo) [Cartoon Network]\n• Diary of a Wimpy Kid: The Long Haul (Greg Heffley) [20th Century Fox]\n• A Dog's Purpose (Young Ethan) [Universal Pictures]\n• Dolittle (Stubbins) [Universal Pictures]\n• GhostForce (Mike Collins/Krush) [DCVI]\n• Monkie Kid (Monkie Kid) [Cartoon Network]\n• Bunk'd (Matteo) [DCVI]\n• Find Me in Paris (Dash, Simon) [DCVI]\n• N00bees (Erick) [Nickelodeon]\n• Blaze and The Monster Machines [Nickelodeon]\n• Raven's Home [DCVI]\n• Bizaardvark [DCVI]\n• Bunnicula [Cartoon Network]\n• Puppy Dog Pals [DCVI]"

"Contact.eml": { type: "email_client" },

"Subscribe": { type: "subscribe_form" }

};

const DESKTOP_ICONS = [

{ label: "Directing Reel", icon: "clapperboard", color: "text-red-600" },

{ label: "Films.mov", icon: "file-video", color: "text-blue-600" },

{ label: "Voice Acting.ptx", icon: "mic", color: "text-purple-600" },

{ label: "Music.mp3", icon: "music", color: "text-pink-600" },

{ label: "Photography", icon: "camera", color: "text-emerald-600" },

{ label: "About", icon: "user", color: "text-neutral-800" },

{ label: "CV", icon: "file-text", color: "text-neutral-800" },

{ label: "Contact.eml", icon: "mail", color: "text-neutral-800" },

{ label: "Instagram.url", icon: "instagram", color: "text-pink-500", isShortcut: true, url: SITE_DETAILS.socials.instagram },

{ label: "YouTube.url", icon: "youtube", color: "text-red-600", isShortcut: true, url: SITE_DETAILS.socials.youtube },

{ label: "TikTok.url", isTikTok: true, color: "text-black", isShortcut: true, url: SITE_DETAILS.socials.tiktok },

];

let currentActiveWindow = null;

/* =========================================================================

INITIALIZATION & RENDERING

========================================================================= */

function init() {

renderDesktop();

startClock();

lucide.createIcons(); // Initialize Lucide icons

}

function startClock() {

const clockEl = document.getElementById('clock');

setInterval(() => {

const now = new Date();

clockEl.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

}, 1000);

}

function renderDesktop() {

const container = document.getElementById('desktop-icons');

let html = '';

DESKTOP_ICONS.forEach(item => {

const isActiveClass = currentActiveWindow === item.label ? 'bg-blue-600/10 border-blue-600 border-dashed' : 'hover:bg-black/5';

const isLabelActive = currentActiveWindow === item.label ? 'bg-blue-600 text-white' : '';

const onClickAction = item.isShortcut ? `window.open('${item.url}', '_blank')` : `openApp('${item.label}')`;

let iconHtml = item.isTikTok

? `<div class="text-black">${tiktokSvg}</div>`

: `<i data-lucide="${item.icon}" class="w-12 h-12" stroke-width="1.5"></i>`;

let shortcutHtml = item.isShortcut ? `

</div>` : '';

html += `

${shortcutHtml}

${iconHtml}

</div>

${item.label}

</span>

</div>

});

container.innerHTML = html;

}

/* =========================================================================

WINDOW MANAGEMENT

========================================================================= */

function openApp(appName) {

currentActiveWindow = appName;

// Adjust Desktop width for window on large screens

const gridContainer = document.getElementById('desktop-grid-container');

gridContainer.className = `transition-all duration-300 z-10 h-full sm:w-[45vw] lg:w-[calc(100%-640px)]`;

// Update UI State

renderDesktop(); // Re-render to highlight active icon

lucide.createIcons();

// Open Modal

document.getElementById('os-window-wrapper').classList.remove('hidden');

document.getElementById('window-title').textContent = appName;

// Render Content

renderWindowContent(appName);

}

function closeApp() {

currentActiveWindow = null;

// Restore Desktop width

const gridContainer = document.getElementById('desktop-grid-container');

gridContainer.className = `transition-all duration-300 z-10 h-full w-full`;

renderDesktop();

lucide.createIcons();

document.getElementById('os-window-wrapper').classList.add('hidden');

document.getElementById('window-content').innerHTML = ''; // clear memory

}

/* =========================================================================

CONTENT RENDERERS

========================================================================= */

function renderWindowContent(appName) {

const fileData = FILE_SYSTEM[appName];

const contentEl = document.getElementById('window-content');

if (!fileData) {

contentEl.innerHTML = `<div class="p-4 font-mono text-red-500">Error: File not found or corrupted.</div>`;

return;

}

let html = '';

// 1. Video Player

if (fileData.type === 'video_player') {

html = `

<h2 class="font-bold text-lg">${appName}</h2>

<p class="text-neutral-600 font-mono text-sm">${fileData.description}</p>

</div>

}

// 2. Audio Player (Voice Acting)

else if (fileData.type === 'audio_player') {

let tracksHtml = fileData.tracks.map(track => `

<h4 class="text-lg font-bold uppercase text-blue-600">${track.title}</h4>

<p class="text-xs text-neutral-600 font-bold mt-1">${track.description}</p>

</div>

Your browser does not support the audio element.

</audio>

</div>

`).join('');

html = `

</div>

<h2 class="text-2xl sm:text-3xl font-black uppercase tracking-tighter leading-none">${fileData.title}</h2>

</div>

<p class="text-sm font-medium text-neutral-700 leading-relaxed">${fileData.bio}</p>

</div>

<h3 class="text-xl font-black uppercase border-b-4 border-black pb-2">Audio Reels</h3>

${tracksHtml}

</div>

}

// 3. Folder (Grid View)

else if (fileData.type === 'folder') {

let descHtml = fileData.description ? `

${fileData.description}

</div>` : '';

let gridHtml = fileData.items.map(item => `

${item.type !== 'image' ? `

</div>

` : ''}

</div>

<span class="font-mono text-sm font-bold truncate leading-tight group-hover:text-blue-600">${item.title}</span>

</div>

`).join('');

html = `

${descHtml}

${gridHtml}

</div>

}

// 4. Text File

else if (fileData.type === 'text_file') {

html = `<div class="font-mono text-base md:text-lg whitespace-pre-wrap leading-relaxed max-w-2xl">${fileData.content}</div>`;

}

// 5. Email Form

else if (fileData.type === 'email_client') {

html = `

<div class="font-bold">${SITE_DETAILS.email}</div>

</div>

<label class="text-sm font-bold mb-1 text-neutral-500">From (Your Email):</label>

</div>

<label class="text-sm font-bold mb-1 text-neutral-500">Subject:</label>

</div>

Send Mail

</button>

</form>

}

// 6. Subscribe Form

else if (fileData.type === 'subscribe_form') {

html = `

<h2 class="text-2xl sm:text-3xl font-black uppercase tracking-tighter leading-none mb-2">Newsletter</h2>

<p class="text-sm font-bold text-neutral-600">Join the list to get updates on my latest films, acting roles, and creative projects.</p>

</div>

<label class="text-sm font-bold mb-2 text-neutral-500">Email Address:</label>

</div>

</button>

</form>

}

contentEl.innerHTML = html;

lucide.createIcons(); // Instatiate any new icons injected into innerHTML

}

// Sub-renderer for when a user clicks a media item inside a folder

function playMedia(folderName, itemId) {

const folder = FILE_SYSTEM[folderName];

const item = folder.items.find(i => i.id === itemId);

const contentEl = document.getElementById('window-content');

let mediaHtml = item.type === 'image'

? `<img src="${item.thumbnail}" alt="${item.title}" class="max-h-[60vh] object-contain" />`

: `<video src="${item.src}" controls autoplay class="w-full max-h-[60vh] object-contain"></video>`;

contentEl.innerHTML = `

← Back to ${folderName}

</button>

${mediaHtml}

</div>

<h3 class="mt-4 font-bold text-xl">${item.title}</h3>

</div>

}

// Run Initialization

window.onload = init;

</script>

</body>

</html>