index.njk.bak.1759497796

---
layout: layouts/base.njk
eleventyNavigation:
  key: Home
  order: 1
hero:
  name: "Yousef Mohamed"
  role: "Filmmaker"
  subrole: "Multidisciplinary Visual Artist | Concept Artist | Graphic Designer | 2D Animator | Editor | VFX Generalist"
---

<!-- HERO -->
<section class="hero">
  <div class="hero-bg">
    <div class="hero-media" id="showreel">
      {% for item in showreel %}
        {% if item.type == "video" %}
          <div class="slide" data-type="video" data-src="{{ item.src | url }}">
            <video playsinline muted preload="metadata">
              <source src="{{ item.src | url }}">
            </video>
          </div>
        {% else %}
          <div class="slide" data-type="image" style="background-image:url('{{ item.src | url }}')" data-src="{{ item.src | url }}"></div>
        {% endif %}
      {% endfor %}
    </div>
  </div>

  <div class="hero-copy">
    <h1 class="hero-title">{{ hero.name }}</h1>
    <p class="hero-role">{{ hero.role }}</p>
    <div class="hero-subrole">{{ hero.subrole }}</div>
  </div>
</section>

<!-- PROJECTS -->
<section class="home-section">
  <h2 class="section-title">Projects</h2>
  <div class="cards-3">
    <a class="section-card" href="{{ '/projects/concept-art/' | url }}">
      <div class="thumb" style="background-image:url('{{ '/img/projects/sections/concept-art.jpg' | url }}')"><span class="overlay">View more</span></div>
      <h3>Concept Art</h3>
    </a>
    <a class="section-card" href="{{ '/projects/graphic-design/' | url }}">
      <div class="thumb" style="background-image:url('{{ '/img/projects/sections/graphic-design.jpg' | url }}')"><span class="overlay">View more</span></div>
      <h3>Graphic Design</h3>
    </a>
    <a class="section-card" href="{{ '/projects/short-film-projects/' | url }}">
      <div class="thumb" style="background-image:url('{{ '/img/projects/sections/short-films.jpg' | url }}')"><span class="overlay">View more</span></div>
      <h3>Short Film Projects</h3>
    </a>
  </div>
</section>

<!-- SOFTWARE -->
<section class="home-section">
  <button class="soft-toggle" aria-expanded="false" aria-controls="soft-wrap">
    <span>Software Experience</span><i class="fa fa-chevron-down"></i>
  </button>
  <div id="soft-wrap" class="soft-wrap" hidden>
    <p class="soft-note">Started on mobile and produced some projects using mobile apps.</p>
    <h4>Mobile apps</h4>
    <ul class="badges"><li>Snapseed</li><li>ibisPaint X</li><li>Video Maker</li></ul>
    <h4>Desktop apps (macOS / Windows)</h4>
    <ul class="badges icons">
      <li>Microsoft Word</li><li>Microsoft PowerPoint</li><li>Adobe Photoshop — Master</li><li>Krita — Master</li>
      <li>PureRef</li><li>Darktable</li><li>Shotcut</li><li>DaVinci Resolve — Master</li>
      <li>OpenToonz</li><li>Natron</li><li>Waveform 13 (DAW)</li><li>Cinema 4D (2023)</li><li>Blender — Basic</li><li>Inkscape — Basic</li>
    </ul>
  </div>
</section>

<!-- SLIDER SCRIPT: بدون جليتش / ترتيب ثابت / صورة=1s / فيديو حتى النهاية / لوب -->
<script>
document.addEventListener("DOMContentLoaded", () => {
  const wrap = document.getElementById("showreel");
  if (!wrap) return;
  const slides = Array.from(wrap.querySelectorAll(".slide"));
  if (!slides.length) return;

  // إعدادات عامة
  const IMAGE_MS = 1000; // زمن الصورة
  let idx = 0;
  let timer = null;
  let playing = false;
  let pausedByHidden = false;

  // إظهار أول شريحة فورًا بدون فلاش
  slides[0].classList.add("active");

  // تحسينات أداء + منع الجليتش
  slides.forEach(s => {
    s.setAttribute("aria-hidden", "true");
  });
  slides[0].setAttribute("aria-hidden", "false");

  function rafSwitch(from, to){
    // تأكد إننا ما نعملش remove/add في نفس الفريم
    requestAnimationFrame(() => {
      if (from) from.classList.remove("active");
      requestAnimationFrame(() => {
        to.classList.add("active");
      });
    });
  }

  function clearAllTimers(){
    if (timer){ clearTimeout(timer); timer = null; }
  }

  function pauseAllVideos(){
    slides.forEach(sl => {
      const v = sl.querySelector("video");
      if (v){ try{ v.pause(); }catch(e){} }
    });
  }

  function preloadNext(next){
    const s = slides[next];
    const type = s?.dataset.type;
    if (type === "image"){
      const src = s.dataset.src;
      if (!src) return;
      const img = new Image();
      img.decoding = "async";
      img.src = src; // يحطها في الكاش
    } else if (type === "video"){
      const v = s.querySelector("video");
      if (v){
        // ارفع التحميل قبل العرض لتفادي اللود فجأة
        v.preload = "auto";
        try { v.load(); } catch(e){}
      }
    }
  }

  function nextIndex(i){ return (i + 1) % slides.length; }

  function schedule(fn, ms){
    clearAllTimers();
    timer = setTimeout(fn, ms);
  }

  function show(next){
    if (playing) return; // لو لسه بنحوّل، امنع تداخل
    playing = true;

    const from = slides[idx];
    const to   = slides[next];

    // تحديث aria لسهولة التحكم
    from.setAttribute("aria-hidden", "true");
    to.setAttribute("aria-hidden", "false");

    rafSwitch(from, to);

    // جهّز الشريحة الجديدة
    const type = to.dataset.type;

    // حضّر الشريحة التالية (تحميل مُسبق) لتفادي جليتش الإطار الأول
    preloadNext(nextIndex(next));

    // التعامل مع الفيديو/الصورة
    if (type === "image"){
      // صورة: انتظر 1s وبعدين روح للبعدين
      schedule(() => { idx = next; playing = false; show(nextIndex(idx)); }, IMAGE_MS);
    } else {
      // فيديو: شغّل لحد النهاية
      const v = to.querySelector("video");
      if (!v){
        schedule(() => { idx = next; playing = false; show(nextIndex(idx)); }, IMAGE_MS);
        return;
      }

      // فلش-آمن: ابدأ من 0، وممكن يحصل seek سريع قبل play
      try { v.currentTime = 0; } catch(e){}
      v.muted = true;
      v.playsInline = true;

      const goNext = () => {
        v.onended = null;
        v.onloadedmetadata = null;
        idx = next;
        playing = false;
        show(nextIndex(idx));
      };

      v.onended = goNext;

      v.onloadedmetadata = () => {
        // Fallback للمتصفحات اللي متبلغش ended
        const dur = (isFinite(v.duration) && v.duration > 0) ? v.duration : 1;
        schedule(goNext, Math.ceil(dur * 1000));
      };

      // إيقاف أي فيديوهات تانية
      pauseAllVideos();

      // ابدأ تشغيل
      v.play().catch(() => {
        // لو فشل التشغيل لأي سبب، فوت بعد ثانية
        schedule(goNext, 1000);
      });
    }
  }

  // تبويب خفي: أوقف المؤقت ومنع الجليتش عند الرجوع
  document.addEventListener("visibilitychange", () => {
    if (document.hidden){
      pausedByHidden = true;
      clearAllTimers();
      pauseAllVideos();
    } else if (pausedByHidden){
      pausedByHidden = false;
      // اعرض الشريحة الحالية من جديد بشكل نظيف
      playing = false;
      show(nextIndex(idx));
    }
  });

  // ابدأ الحركة بعد ثانية (أول واحدة ظهرت بالفعل)
  schedule(() => show(1 % slides.length), 1000);
});
</script>