
    <video class="page-bg-video" src="assets/main_page_bg.mp4" autoplay loop muted playsinline preload="auto" disablepictureinpicture aria-hidden="true"></video>
    <div class="page-bg-scrim" aria-hidden="true"></div>
    <div class="grid-overlay" aria-hidden="true"></div>

    <a class="floating-home" href="index.html" aria-label="Back to home" title="Back to home">&#8962;</a>

    <main class="page-main projects-page">
      <a class="back-link" href="work.html">&larr; Back to work</a>
      <section class="section">
        <div class="section-heading">
          <p class="eyebrow">Past Work</p>
          <h2>Programming work gallery.</h2>
        </div>

        <div class="programming-gallery-tabs" role="tablist" aria-label="Programming work type">
          <button
            class="programming-gallery-tab is-active"
            id="programming-videos-tab"
            type="button"
            role="tab"
            aria-selected="true"
            aria-controls="programming-videos-panel"
            tabindex="0"
            data-programming-tab="videos"
          >Videos</button>
          <button
            class="programming-gallery-tab"
            id="programming-snippets-tab"
            type="button"
            role="tab"
            aria-selected="false"
            aria-controls="programming-snippets-panel"
            tabindex="-1"
            data-programming-tab="snippets"
          >Code Snippets</button>
        </div>

        <div
          class="gallery-media-grid"
          id="programming-videos-panel"
          role="tabpanel"
          aria-labelledby="programming-videos-tab"
          tabindex="0"
          data-programming-panel="videos"
          data-gallery
          data-gallery-category="programmer"
        ></div>
        <div
          class="programming-snippets-panel gallery-media-grid"
          id="programming-snippets-panel"
          role="tabpanel"
          aria-labelledby="programming-snippets-tab"
          tabindex="0"
          data-programming-panel="snippets"
          data-gallery
          hidden
        >
          <button class="gallery-media-item" type="button" data-gallery-item data-name="ODM Movers" data-src="/assets/snippets/odm-movers.png" data-type="image" aria-label="Open ODM Movers code snippet">
            <img src="/assets/snippets/odm-movers.png" alt="ODM movers code snippet" loading="lazy" />
            <span class="gallery-media-badge">Code</span>
            <span class="gallery-media-overlay"><span class="gallery-media-name">ODM Movers · Click to zoom</span></span>
          </button>
          <button class="gallery-media-item" type="button" data-gallery-item data-name="Pendulum Physics" data-src="/assets/snippets/pendulum-physics.png" data-type="image" aria-label="Open Pendulum Physics code snippet">
            <img src="/assets/snippets/pendulum-physics.png" alt="Pendulum physics code snippet" loading="lazy" />
            <span class="gallery-media-badge">Code</span>
            <span class="gallery-media-overlay"><span class="gallery-media-name">Pendulum Physics · Click to zoom</span></span>
          </button>
          <button class="gallery-media-item" type="button" data-gallery-item data-name="ODM Controller" data-src="/assets/snippets/odm-controller.png" data-type="image" aria-label="Open ODM Controller code snippet">
            <img src="/assets/snippets/odm-controller.png" alt="ODM controller code snippet" loading="lazy" />
            <span class="gallery-media-badge">Code</span>
            <span class="gallery-media-overlay"><span class="gallery-media-name">ODM Controller · Click to zoom</span></span>
          </button>
          <button class="gallery-media-item" type="button" data-gallery-item data-name="Grapples Types" data-src="/assets/snippets/grapples-types.png" data-type="image" aria-label="Open Grapples Types code snippet">
            <img src="/assets/snippets/grapples-types.png" alt="Grapples types code snippet" loading="lazy" />
            <span class="gallery-media-badge">Code</span>
            <span class="gallery-media-overlay"><span class="gallery-media-name">Grapples Types · Click to zoom</span></span>
          </button>
        </div>
      </section>
    </main>

    <footer class="footer">
      <span>© <span id="year"></span> Syntactic</span>
      <span class="footer-socials">
        <a class="footer-social-link" href="https://github.com/syntacticD" aria-label="GitHub" title="GitHub"><img src="/assets/github-mark.svg" alt="" /></a>
        <a class="footer-social-link" href="https://x.com/syn_tactic_dev" aria-label="X" title="X"><img src="/assets/x-mark.svg" alt="" /></a>
      </span>
    </footer>

    
  