---
title: MUBIKISHORE
layout: base.njk
---
<section class="hero">
  <div class="hero-box">
    <div class="hero-copy">
      <div class="eyebrow">FILMMAKER / CINEMATOGRAPHER / PHOTOGRAPHER</div>
      <h1>MUBI<br>KISHORE</h1>
      <div class="ph">[ replace with hero still / reel ]</div>
    </div>
  </div>
  <div class="hero-meta meta">
    <span>Chennai / India</span>
    <span>Selected works · 2024—2026</span>
    <span>Scroll ↓</span>
  </div>
</section>

<section class="section" id="work">
  <div class="head">
    <span>01 / Selected Work</span>
    <span id="project-count">Loading…</span>
  </div>
  <p class="intro">Films, collaborations, experiments and things made along the way.</p>
  <div class="work" id="cms-projects">
    <div class="row">
      <span class="meta">—</span>
      <span class="title">Loading projects…</span>
      <span class="meta date"></span>
      <span>→</span>
    </div>
  </div>
</section>

<section class="section" id="store">
  <div class="head">
    <span>02 / Store</span>
    <span>Objects / prints / editions</span>
  </div>
  <div class="grid store">
    
    <div class="product">
      <div class="product-img">
        <span class="ph">[ product image ]</span>
      </div>
      <div class="product-info">
        <div class="title">Print — Placeholder</div>
        <div class="meta">₹ —</div>
      </div>
    </div>
    
  </div>
</section>

<section class="section" id="other">
  <div class="head">
    <span>03 / Other Things</span>
    <span>35mm / BTS / photography / tests</span>
  </div>
  <div class="grid">
    
    <div class="tile">
      <span class="ph">[ 35mm ]</span>
    </div>
    
  </div>
</section>

<section class="section" id="about">
  <div class="head">
    <span>04 / About</span>
    <span>Words later</span>
  </div>
  <div class="about">
    <div class="about-copy">A filmmaker and cinematographer building stories through moving images, still photographs and whatever else feels worth making.</div>
    <div class="about-side">
      Chennai / India<br><br>
      Available for films / collaborations / commercial work<br><br>
      [ Instagram link ]<br>
      [ Email ]
    </div>
  </div>
</section>

<footer>
  <span>MUBIKISHORE</span>
  <span>© 2026</span>
</footer>

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="/admin/config.js"></script>

<script>
(async function () {
  const list = document.getElementById("cms-projects");
  const count = document.getElementById("project-count");

  function escapeHtml(value) {
    return String(value ?? "")
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#039;");
  }

  function showError(message) {
    count.textContent = "Projects unavailable";
    list.innerHTML = `
      <div class="row">
        <span class="meta">!</span>
        <span class="title">Unable to load projects: ${escapeHtml(message)}</span>
        <span class="meta date"></span>
        <span>—</span>
      </div>`;
  }

  try {
    if (!window.supabase) {
      throw new Error("Supabase library did not load. Please try again later.");
    }

    if (!window.MUBI_SUPABASE) {
      throw new Error("Supabase client is not configured. Check /admin/config.js.");
    }

    const { data, error } = await window.MUBI_SUPABASE
      .from("projects")
      .select("title, slug, date, year, published")
      .eq("published", true)
      .order("date", { ascending: false, nullsFirst: false });

    if (error) {
      throw new Error(error.message || "Supabase request failed.");
    }

    if (!Array.isArray(data)) {
      throw new Error("The projects response was not in the expected format.");
    }

    count.textContent = `${data.length} projects`;

    if (data.length === 0) {
      list.innerHTML = `
        <div class="row">
          <span class="meta">—</span>
          <span class="title">No published projects found.</span>
          <span class="meta date"></span>
          <span>→</span>
        </div>`;
      return;
    }

    list.innerHTML = data.map(project => {
      const date = project.date
        ? new Date(project.date + "T00:00:00").toLocaleDateString("en-GB", {
            day: "numeric",
            month: "long",
            year: "numeric"
          })
        : "";

      return `
        <a class="row" href="/project.html?slug=${encodeURIComponent(project.slug || "")}">
          <span class="meta">${escapeHtml(project.year || "")}</span>
          <span class="title">${escapeHtml(project.title || "Untitled project")}</span>
          <span class="meta date">${escapeHtml(date)}</span>
          <span>→</span>
        </a>`;
    }).join("");

  } catch (error) {
    console.error("MUBIKISHORE project loading error:", error);
    showError(error.message || "An unknown error occurred.");
  }
})();
</script>