---
import MosaicBackground from "../component/MosaicBackground.astro";
import VideoAuto from "../component/VideoAuto.astro";
import Base from "../layout/Base.astro";
---

<Base>
  <header>
    <h1>Arnaud Hergès</h1>
    <div class="tags">
      <p class="tag">batteur</p>
      <p class="tag">-</p>
      <p class="tag">compositeur</p>
      <p class="tag">-</p>
      <p class="tag">producteur</p>
      <p class="tag">-</p>
      <p class="tag">références</p>
      <p class="tag">-</p>
      <p class="tag">contact</p>
    </div>
  </header>
  <main>
    <section class="batteur" data-scroll>
      <MosaicBackground height="400">
        <img src="/batteur/old2.jpg" />
        <img src="/batteur/old3.jpg" />
        <VideoAuto src="/batteur/video/bb.webm" />
        <img src="/batteur/dark_scene.jpg" />
        <VideoAuto src="/batteur/video/balance.webm" />
        <img src="/batteur/black_and_white.jpg" />
        <img src="/batteur/old.jpg" />
        <img src="/batteur/mid_rock.jpg" />
        <img src="/batteur/mid_outdoor.jpg" />
        <img src="/batteur/mid_rock2.jpg" />
        <img src="/batteur/recent.jpg" />
        <VideoAuto src="/batteur/video/solo.webm" />
      </MosaicBackground>
      <div class="content">
        <div class="content__header">
          <h2>Batteur</h2>
          <h3>Studio & Live</h3>
        </div>
        <p>
          À tous les âges, sur tous les kits et avec toutes les coupes de cheveux, cela fait 40 ans
          que la batterie m’accompagne et qu’elle me suit pour agrémenter vos concerts et vos
          séances des meilleures «&thinsp;rythmiques&thinsp;» possibles.
        </p>
        <p>
          Quelque soit le style, sur partition ou sur séquence, sur acoustique, électronique ou de
          mon spd-sx, au clic ou au feeling, ce sont plus de 800 concerts en salles, événements et
          festivals et des dizaines de titres déjà enregistrés en studio.
        </p>
        <p>
          Jamais rassasié, je suis toujours dispo pour de futurs projets, qu’ils soient scéniques ou
          enregistrés. Contactez-moi pour en parler&thinsp;!
        </p>
      </div>
    </section>
    <section class="producteur">
      <div class="blur">
        <div class="content">
          <div class="text">
            <div>
              <h2>Compositeur - Producteur</h2>
              <h3>Artistes, médias, publicité, cinéma & audiovisuel</h3>
            </div>
            <div>
              <p>
                Mon travail s’articule principalement autour de la relation entre la section
                rythmique et le lead. La mélodie et le rythme sont pour moi les deux aspects les
                plus importants. L’habillage, le choix des arrangements et instruments, des textures
                ainsi que la programmation et les traitements viennent ensuite.
              </p>
              <p>
                C’est cette vision que j’apporte aux quotidien sur les projets que l’on me confie,
                que ce soit pour des artistes, groupes, médias, agences et entreprises, éditeurs,
                labels... pour leur single, Ep ou album, documentaire, jeu vidéo, film ou élément de
                communication.
              </p>
            </div>
            <div>
              Visitez le site de mon studio&thinsp;: <a href="https://entreesortie.net/"
                >Entrée Sortie Production</a
              >.
            </div>
          </div>
          <img src="/batteur/old2.jpg" />
        </div>
      </div>
    </section>
    <section class="ref" data-scroll>
      <MosaicBackground height="250">
        <img src="/ref/angie.png" />
        <img src="/ref/apanapana_records.jpg" />
        <img src="/ref/arte.jpg" />
        <img src="/ref/bb1.jpg" />
        <img src="/ref/bb2.jpg" />
        <img src="/ref/bvs.jpg" />
        <img src="/ref/charlotte.jpg" />
        <img src="/ref/compagnie_imaginaire.jpg" />
        <img src="/ref/complice_music.png" />
        <img src="/ref/divine_acajou.png" />
        <img src="/ref/epsilon_escape.jpg" />
        <img src="/ref/france_tv.png" />
        <img src="/ref/green_warrior.jpg" />
        <img src="/ref/havas_event.png" />
        <img src="/ref/if_de_minuit.jpg" />
        <img src="/ref/indigo.jpg" />
        <img src="/ref/jaime_ecouter.jpg" />
        <img src="/ref/juliette.jpg" />
        <img src="/ref/l_oreal.jpg" />
        <img src="/ref/lio.jpg" />
        <img src="/ref/lunii.jpg" />
        <img src="/ref/lvmh.jpg" />
        <img src="/ref/mediawan.jpg" />
        <img src="/ref/musicbox.png" />
        <img src="/ref/nouvelle_samaritaine.png" />
        <img src="/ref/onb.jpg" />
        <img src="/ref/origins.png" />
        <img src="/ref/papooses.png" />
        <img src="/ref/paradoxes.png" />
        <img src="/ref/prodjv.jpg" />
        <img src="/ref/sir_adrien.jpg" />
        <img src="/ref/steel_division_normandy_44.jpg" />
        <img src="/ref/superchild.jpg" />
        <img src="/ref/sybel.png" />
        <img src="/ref/talia1.jpg" />
        <img src="/ref/talia2.jpg" />
        <img src="/ref/ulicoys.jpg" />
        <img src="/ref/violet_dreams.jpg" />
        <img src="/ref/virgin_music.jpg" />
        <img src="/ref/virtuel_audio.png" />
        <img src="/ref/wtpl.jpg" />
      </MosaicBackground>
      <div class="content">
        <div class="content__header">
          <h2 class="no-mb">Références</h2>
        </div>
        <p>
          Comme de nombreux parcours artistiques, le mien s’est forgé par des expériences et
          rencontres multiples, qui m’ont façonné et emmené aux 4 coins du milieu de la musique.
        </p>
        <p>
          Fils d’un père compositeur, je débute par une formation classique qui s’achèvera par un
          diplôme de fin d’études au CNR de Rueil-Malmaison à l’âge de 13 ans.
        </p>
        <p>
          Je deviens musicien professionnel à 20 ans en accompagnant et enregistrant pour des
          artistes et groupes avant de me lancer dans la composition et l’arrangement. À cette même
          période, je fais même un détour par le management d’artistes et le booking pour en savoir
          plus sur «&thinsp;l’envers du décor&thinsp;».
        </p>
        <p>
          La suite logique a été l’ouverture de mon propre studio il y a un peu moins de 10 ans avec
          tous les outils et le matériel nécessaire pour produire en toute autonomie mes propres
          sons mais aussi ceux des artistes, éditeurs, labels, médias, entreprises qui font appel à
          mes services et compétences.
        </p>
        <p>
          Merci à tous ceux qui m’ont fait et me font confiance et à votre disposition pour discuter
          de votre prochain projet&thinsp;!
        </p>
      </div>
    </section>
  </main>
  <script is:inline defer>
    const sections = document.querySelectorAll("section[data-scroll]");
    document.addEventListener("scroll", () => {
      sections.forEach((section) => {
        const rect = section.getBoundingClientRect();
        if (
          section.top + window.scrollY > window.scrollY ||
          rect.bottom + +window.scrollY < window.scrollY
        )
          return;
        const content = section.querySelector(".content");
        if (content == null || !(content instanceof HTMLElement))
          throw new Error(`Invalid section ${section}`);
        const ratio = (window.scrollY - rect.top) / (rect.bottom - rect.top);
        content.style.top = `${65 - ratio * 20}%`;
      });
    });
  </script>
</Base>