<section class="stack page-break-before">
  {% include projects.templates.flat %}
  {% if show_edit_button %}
    <svg class="edit-icon-small" hx-get="{{ projects.add_item_url }}" hx-target="#projects-grid" hx-swap="afterbegin">
      <use href="#add"></use>
    </svg>
  {% endif %}
  <div id="projects-grid" class="grid">
    {% for project in projects.ordered_entries %}
      {% include projects.templates.item %}
    {% endfor %}
  </div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const projects = document.querySelectorAll('.project-box');
    projects.forEach(box => {
      box.classList.add('invisible');
    });
  });
  
  window.addEventListener('scroll', function() {
    const projects = document.querySelectorAll('.project-box');
    projects.forEach(box => {
      const boxPosition = box.getBoundingClientRect().top;
      const windowHeight = window.innerHeight;
      if (boxPosition < windowHeight - 100) {
        box.classList.remove('invisible');
      }
    });
  });
</script>
</section>
