agahnim.dev/templates/partials/home.html

<home-content>
  <welcome>
    <img src="/static/assets/images/welcome.webp" width="400px" alt="A welcome text in pink" />
    <marquee>
      {% for _ in 0..12 %} &nbsp;彡★Welcome to my little corner of the
      Web★彡&nbsp; {% endfor %}
    </marquee>
  </welcome>
  <boxes>
    <box id="bigbox">
      Thank you for visiting my <woopwoop>brand new</woopwoop> website ! For now
      it's still a <darkerer-pink>work in progress</darkerer-pink> but I'm sure
      you will see changes if you come back from time to time :) <br /><br />
      My name is <darkerer-pink>Agahnim</darkerer-pink>
      <pronouns>she/her</pronouns> and I do many things, but I more notably create <darkerer-pink>music</darkerer-pink>
      with my computer and my <a href="/about">instrument</a> (less notably). I also
      <darkerer-pink>develop</darkerer-pink> from time to time when a
      project piques my interest !<br /><br />
      I created this website not just to
      <darkerer-pink>improve</darkerer-pink> my web development skills, but also
      because it's <boing>fun</boing> to build a project like this. Having grown tired of social media, I find it
      particularly pleasant to have a little personal space that we’ve shaped in our own way; this way, it allows us to
      express ourselves without being overwhelmed by the increasingly <shitty>toxic social climate and the
        narrow-minded,
        unfounded opinions that pop up here and there</shitty>. <br /><br />
      This website is inspired by the
      <darkerer-pink>vaporwave aesthetic</darkerer-pink> and the old PCs I used
      to tinker with when I was a kid. I always liked this type of aesthetic and
      the mix of melancholy of comfort it brings me.
      <badges>
        <img src="/static/assets/badges/88x31computer.gif" alt="88x31 pixel art badge with a retro computer" />
        <img src="/static/assets/badges/cssisawesome.webp" alt="Badge with text 'CSS is Awesome'" />
        <img src="/static/assets/badges/queer.webp" alt="Queer pride flag badge" />
        <img width="100px" src="/static/assets/badges/skywardsword.webp"
          alt="Cover art for The Legend of Zelda Skyward Sword" />
        <img src="/static/assets/badges/transrightsnow.webp" alt="Trans rights badge with text 'Trans Rights Now'" />
        <img width="30%" src="/static/assets/badges/kirby.gif" alt="Kirby character animated GIF" />
        <img width="30%" src="/static/assets/badges/pink.gif" alt="Pink animated pixel art badge" />
        <img width="30%" src="/static/assets/badges/trans.gif" alt="Trans pride flag animated badge" />
      </badges>
    </box>
    <box id="smallbox">
      <socials-header> Socials ! </socials-header>
      <socials>
        <a href="https://github.com/naguiagahnim" target="_blank"><img src="/static/assets/icons/github.webp"
            width="30px" alt="GitHub logo" /></a>
        <a href="https://open.spotify.com/intl-fr/artist/4BPUhsH6krKkCNFrdMZnZF?si=E3luyIf0S_yfJRmm82S5OA"
          target="_blank"><img src="/static/assets/icons/spotify.webp" width="30px" alt="Spotify logo" /></a>
        <a href="https://www.instagram.com/agahnim_music/" target="_blank"><img src="/static/assets/icons/insta.webp"
            width="30px" alt="Instagram logo" /></a>
      </socials>
      <img width="200px" src="/static/assets/gifs/divider2.gif" alt="Decorative divider" />
      <bibou-message>Consult the wisdom of the Bibou, if thou darest...</bibou-message>
      <bibou-container>
        <img class="boubou" src="/static/assets/images/boubou.webp" alt="Bibou endormi" />
        <img class="bibou" src="/static/assets/images/bibou.webp" alt="Bibou éveillé" />
      </bibou-container>
      <bibou-text> </bibou-text>
    </box>
    <box id="newsbox">
      <website-news>
        <img width="70%" src="/static/assets/gifs/updates.gif" alt="Animated text 'Updates'" />

        {% for article in news %}
        <article-entry>
          <time datetime="{{ article.date }}">
            {{ article.date.format("%d/%m/%Y") }}
          </time>
          <article-body> {{ article.body_html|safe }} </article-body>
          <img width="300px" src="/static/assets/gifs/divider2.gif" alt="Decorative divider" />
        </article-entry>
        {% else %}
        <ominous-message> Nothing to see here, for now... </ominous-message>
        {% endfor %}
      </website-news>
    </box>
  </boxes>
  <!-- Nous sommes les bestioles et nous sommes responsive -->
  <chibis>
    <img id="me" src="/static/assets/images/boubouille.webp" />
    <img id="raplapla" src="/static/assets/images/rapla.webp" />
  </chibis>
</home-content>

<!-- I know I know but I need it for this pretty rainbow flagish animation -->
<script>
  (function () {
    <!-- For rainbow text -->
    const el = document.querySelector('woopwoop');
    if (!el) return;
    const text = el.textContent;
    el.innerHTML = text.split('').map((ch, i) =>
      `<span style="animation-delay: ${i * 0.08}s">${ch === ' ' ? '&nbsp;' : ch}</span>`
    ).join('');

    const BIBOU_QUOTES = {{bibou_quotes| tojson | safe
  }};

  const txtEl = document.querySelector('bibou-text');
  const ctrEl = document.querySelector('bibou-container');
  let intervalRef = null;

  const ttText = (texte) => {
    if (intervalRef) clearInterval(intervalRef);

    let accumulated = "";
    let index = 0;

    intervalRef = setInterval(() => {
      if (index < texte.length) {accumulated += texte.charAt(index); txtEl.textContent = accumulated; index++;} else {
        clearInterval(intervalRef); intervalRef = null;
      }
    }, 40);
  };

  ctrEl.addEventListener('mouseenter', () => {
    const quote = BIBOU_QUOTES[Math.floor(Math.random() * BIBOU_QUOTES.length)];
    ttText(quote);
  });
  }) ();
</script>