https://worrydream.com/LadderOfAbstraction/

<!-- take static image s- or frames + join with others -> you chose outputs + inputs "??? " -->

<!-- reinvent blocking - if someone sends message - it should be heard by someitnhg - maybe not the person it kidn if si tjiustj sut in a data bse but maybe gdpr dltesit it wtf -->

<!-- instad of someitnh ginvetd 30 years ago -ltes u se ---- event happens - logged - if idk - alerts the oracle - which encsaese person and others in protective goo / shield  -->


<!-- if you lgiht endit law - then some things 100x easier lier cares - isntead fof 20 year advneture time - its 6 month - then repsurse smae oeffeort for more cool stuff -->

<!-- render all you heraros as a josn + ?!?!?  -->

<!-- https://worrydream.com/SimulationAsAPracticalTool/ -->
<!-- https://worrydream.com/VisualizingEdgeWeights/ -->

<!-- xe iaso - wtf that make sno se -> capitons auto change - label - for image  -->
<!-- https://worrydream.com/MagicInk/ -->
 <!-- https://vimeo.com/64895205 - show tablet on page - keep eating raw faish  -  -->

<!-- make tools -systemaztize the  the social media   os its more atomic -->
<!-- this is how my managaer communictaed with me - any thingouht - 3 options _ _--- ---- -->
<!-- filte https://worrydream.com/oatmeal/poster-modes.pdf  -->

<!-- https://worrydream.com - reingest - 1 json per person - 1gb for 1 billion people - 1tb -->
 <!-- make 4 tgb of synthetic data on requst -   - (1 pb = goal thats what needed for aut o drive r ()) -->
<!-- https://madebyevan.com/webgl-water/ + lgiht ->  -->

 <!--  import all jsfiddle - codepen stackglbig gigthub - make sens of it in htmx - use llm to magic viarble + extend - connect to robutt - change the wroding  -->
   <!-- if you remix its not copyrgiht  -->
<noscript
  ><iframe
    src="https://www.googletagmanager.com/ns.html?id=GTM-WZ3WPDV"
    height="0"
    width="0"
    style="display: none; visibility: hidden"
  ></iframe
></noscript>
<!-- https://dynamicland.org/2019/Bootstrapping_Research/ -->
<!-- https://worrydream.com/ScientificCommunicationAsSequentialArt/ -->
<!-- rverse flow of data = gen ia - take andrew ngs diagrm - estimate the numbers - slider it - show - new dots  -->
<header class="header js-header">
  <div class="menu">
    <div class="menu-background js-menu-background"></div>

    <div class="links">
      <a
        class="link js-link link-home is-active"
        href="https://threejs-journey.com/"
        data-router-set=""
      >
        <span class="highlight"></span>
        <span class="label">Home</span>
      </a>
      <a
        class="link js-link link-lessons"
        href="https://threejs-journey.com/lessons"
        data-router-disabled=""
      >
        <span class="highlight"></span>
        <span class="label">Lessons</span>
      </a>
      <a
        class="link js-link link-accountDetails link-accountSecurity link-accountSettings link-accountInvoices link-accountHelp link-accountCertificate link-accountValentinesDay link-certificateQuiz"
        href="https://threejs-journey.com/account"
        data-router-disabled=""
      >
        <span class="highlight"></span>
        <span class="label">Account</span>
      </a>

      <span class="category"> Community </span>
      <a
        class="link js-link link-challenges"
        href="https://threejs-journey.com/challenges"
        data-router-set=""
      >
        <span class="highlight"></span>
        <span class="label">Challenges</span>
      </a>
      <a
        class="link js-link link-selection"
        href="https://threejs-journey.com/selection"
        data-router-set=""
      >
        <span class="highlight"></span>
        <span class="label">Selection</span>
      </a>
      <a
        class="link js-link link-highlights"
        href="https://threejs-journey.com/highlights"
        data-router-set=""
      >
        <span class="highlight"></span>
        <span class="label">Highlights</span>
      </a>
    </div>

    <nav class="actions is-mobile">
      <a
        class="logout-button"
        href="https://threejs-journey.com/logout"
        data-router-disabled=""
      >
        <span class="icon"
          ><svg
            width="19"
            height="20"
            viewBox="0 0 19 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M0 0H12V6H10V2H2V18H10V14H12V20H0V0ZM19 10L14 14V11H6V9H14V6L19 10Z"
              fill="white"
            ></path>
          </svg>
        </span>
        <span class="label">Logout</span>
      </a>

      <a
        href="https://threejs-journey.com/discord"
        data-router-disabled=""
        class="button has-icon-left is-discord"
      >
        <span class="hover"></span>
        <span class="icon"
          ><svg
            version="1.1"
            id="Calque_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 175 200"
            style="enable-background: new 0 0 175 200"
            xml:space="preserve"
          >
            <path
              d="M69.4,83.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1C79.7,88.9,75.1,83.9,69.4,83.9z M105.9,83.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1S111.6,83.9,105.9,83.9z"
            ></path>
            <path
              d="M154.5,0h-134C9.2,0,0,9.2,0,20.6v135.2c0,11.4,9.2,20.6,20.5,20.6h113.4l-5.3-18.5l12.8,11.9l12.1,11.2l21.5,19V20.6C175,9.2,165.8,0,154.5,0z M115.9,130.6c0,0-3.6-4.3-6.6-8.1c13.1-3.7,18.1-11.9,18.1-11.9c-4.1,2.7-8,4.6-11.5,5.9c-5,2.1-9.8,3.5-14.5,4.3c-9.6,1.8-18.4,1.3-25.9-0.1c-5.7-1.1-10.6-2.7-14.7-4.3c-2.3-0.9-4.8-2-7.3-3.4c-0.3-0.2-0.6-0.3-0.9-0.5c-0.2-0.1-0.3-0.2-0.4-0.3c-1.8-1-2.8-1.7-2.8-1.7s4.8,8,17.5,11.8c-3,3.8-6.7,8.3-6.7,8.3c-22.1-0.7-30.5-15.2-30.5-15.2c0-32.2,14.4-58.3,14.4-58.3c14.4-10.8,28.1-10.5,28.1-10.5l1,1.2c-18,5.2-26.3,13.1-26.3,13.1s2.2-1.2,5.9-2.9c10.7-4.7,19.2-6,22.7-6.3c0.6-0.1,1.1-0.2,1.7-0.2c6.1-0.8,13-1,20.2-0.2c9.5,1.1,19.7,3.9,30.1,9.6c0,0-7.9-7.5-24.9-12.7l1.4-1.6c0,0,13.7-0.3,28.1,10.5c0,0,14.4,26.1,14.4,58.3C146.5,115.4,138,129.9,115.9,130.6z"
            ></path>
          </svg>
        </span>
        <span class="label">Discord</span>
      </a>
    </nav>
  </div>

  <div class="container">
    <nav class="navigation">
      <div class="logo-container">
        <a
          href="https://threejs-journey.com/"
          class="main-logo is-abyss"
          name="Three.js Journey"
          data-router-set=""
        >
          <div class="logo">
            <svg
              width="38"
              height="43"
              viewBox="0 0 38 43"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M5.7346 0.971817L36.0112 18.4767C38.3367 19.8206 38.3368 23.1799 36.0115 24.5239L5.73423 42.0292C3.40538 43.3751 0.5 41.6914 0.5 39.0057V3.99513C0.5 1.31072 3.40451 -0.375901 5.7346 0.971817ZM4.23226 3.56854C3.90991 3.38205 3.5 3.61216 3.5 3.99513V39.0057C3.5 39.3874 3.90902 39.6188 4.23264 39.4321L34.5099 21.9268C34.8369 21.7378 34.8371 21.2631 34.5101 21.0742L4.23226 3.56854Z"
                fill="#705DF2"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M13.772 9.44228L3.81036 15.2013C3.61917 15.3116 3.5 15.5166 3.5 15.7409V27.259C3.5 27.483 3.61986 27.6894 3.81109 27.7999L13.772 33.5593C13.9636 33.6701 14.2 33.6701 14.3916 33.5593L24.352 27.801C24.5445 27.6897 24.6636 27.4839 24.6636 27.2599V15.7418C24.6636 15.5177 24.5437 15.3114 24.3525 15.2009L14.3916 9.44228C14.2002 9.33183 13.9634 9.33183 13.772 9.44228ZM12.2711 6.8447C13.3914 6.19744 14.7722 6.19744 15.8925 6.8447L25.8534 12.6033C26.9738 13.2508 27.6636 14.4483 27.6636 15.7418V27.2599C27.6636 28.5535 26.9748 29.7497 25.8539 30.398L15.8928 36.1567C14.7726 36.804 13.3914 36.8042 12.2711 36.1569L2.31024 30.3975C1.18988 29.7499 0.5 28.5524 0.5 27.259V15.7409C0.5 14.4478 1.18843 13.2509 2.31048 12.6032L12.2711 6.8447Z"
                fill="#705DF2"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M0.5 14.9575C0.5 13.6056 1.9625 12.7612 3.13325 13.4378L14.7031 20.1277C15.2562 20.4459 15.5814 21.0321 15.5814 21.6482V35.4708C15.5814 36.0069 15.2953 36.5022 14.831 36.7701C14.3666 37.038 13.7946 37.0377 13.3306 36.7694L1.38379 29.8619L1.37869 29.8589C0.825347 29.5407 0.5 28.9544 0.5 28.3382V14.9575ZM3.5 17.1153L12.5814 22.3663V32.8708L3.5 27.6201V17.1153Z"
                fill="#705DF2"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M24.7545 13.5966C26.0542 12.8459 27.6596 13.7907 27.6633 15.2724L27.6633 15.2762L27.6633 28.2328C27.6633 28.9247 27.2945 29.5654 26.6943 29.9121L26.692 29.9134L15.4903 36.3896C14.1948 37.1379 12.5811 36.2001 12.5811 34.7103V21.7545C12.5811 21.0623 12.9502 20.4213 13.5509 20.0747L13.5523 20.0739L24.7545 13.5966ZM24.6633 17.1148L15.5811 22.3663V32.8718L24.6633 27.621V17.1148Z"
                fill="#705DF2"
              ></path>
            </svg>
          </div>
          <div class="text">
            <svg
              width="160"
              height="22"
              viewBox="0 0 160 22"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                class="letter t"
                d="M7.52113 7.98393V5.22393H5.47413V1.93493H1.79413V5.22393H0.161133V7.98393H1.79413V13.1359C1.79413 15.7809 2.55313 17.2069 5.24413 17.2069C6.27913 17.2069 6.85413 17.0919 7.52113 16.9539V14.1939C5.95713 14.1939 5.47413 14.1939 5.47413 12.8599V7.98393H7.52113Z"
                fill="white"
              ></path>
              <path
                class="letter h"
                d="M16.2516 4.85593C14.3656 4.85593 13.2156 5.84493 12.5946 6.92593H12.5486V0.554932H8.86861V16.9999H12.5486V10.1919C12.5486 8.55893 13.5146 7.84593 14.6876 7.84593C16.0216 7.84593 16.5966 8.44393 16.5966 10.2149V16.9999H20.2766V9.04193C20.2766 6.35093 18.7356 4.85593 16.2516 4.85593Z"
                fill="white"
              ></path>
              <path
                class="letter r"
                d="M28.5868 5.01693C27.2988 5.01693 26.2868 5.84493 25.7118 7.15593H25.6658V5.22393H21.9858V16.9999H25.6658V11.5259C25.6658 9.01893 27.6668 7.98393 29.5528 8.32893H29.5988V5.10893C29.1848 5.01693 28.9088 5.01693 28.5868 5.01693Z"
                fill="white"
              ></path>
              <path
                class="letter e"
                d="M36.2469 14.6079C34.9359 14.6079 33.7169 13.7339 33.7169 12.0779H42.1809C42.1809 7.79993 40.1339 4.85593 36.1089 4.85593C32.3599 4.85593 30.0369 7.52393 30.0369 11.1119C30.0369 14.7919 32.4059 17.3679 36.3159 17.3679C39.5129 17.3679 41.3529 15.8039 41.9969 13.4349H38.3399C38.1099 14.0099 37.5119 14.6079 36.2469 14.6079ZM36.1089 7.38593C37.5119 7.38593 38.5009 8.21393 38.5009 9.84693H33.7169C33.7169 8.21393 34.7059 7.38593 36.1089 7.38593Z"
                fill="white"
              ></path>
              <path
                class="letter e"
                d="M49.117 14.6079C47.806 14.6079 46.587 13.7339 46.587 12.0779H55.051C55.051 7.79993 53.004 4.85593 48.979 4.85593C45.23 4.85593 42.907 7.52393 42.907 11.1119C42.907 14.7919 45.276 17.3679 49.186 17.3679C52.383 17.3679 54.223 15.8039 54.867 13.4349H51.21C50.98 14.0099 50.382 14.6079 49.117 14.6079ZM48.979 7.38593C50.382 7.38593 51.371 8.21393 51.371 9.84693H46.587C46.587 8.21393 47.576 7.38593 48.979 7.38593Z"
                fill="white"
              ></path>
              <path
                class="letter dot"
                d="M57.9878 17.2069C59.0688 17.2069 59.9428 16.4479 59.9428 15.2519C59.9428 14.0789 59.0688 13.2969 57.9878 13.2969C56.8838 13.2969 56.0328 14.0789 56.0328 15.2519C56.0328 16.4479 56.8838 17.2069 57.9878 17.2069Z"
                fill="white"
              ></path>
              <path
                class="letter j"
                d="M63.718 3.82093C64.753 3.82093 65.558 3.26893 65.558 2.18793C65.558 1.12993 64.753 0.554932 63.718 0.554932C62.683 0.554932 61.878 1.12993 61.878 2.18793C61.878 3.26893 62.683 3.82093 63.718 3.82093ZM61.878 5.22393V16.7239C61.878 18.0579 61.395 18.0579 59.831 18.0579V20.8179C60.498 20.9559 61.073 21.0709 62.108 21.0709C64.799 21.0709 65.558 19.6449 65.558 16.9999V5.22393H61.878Z"
                fill="white"
              ></path>
              <path
                class="letter s"
                d="M73.1069 9.57093C71.2899 9.17993 70.5539 9.15693 70.5539 8.32893C70.5539 7.75393 71.0829 7.38593 72.1179 7.38593C73.3139 7.38593 73.8199 7.89193 73.9349 8.83493H77.3849C77.2699 6.76493 75.7979 4.85593 72.0259 4.85593C68.7139 4.85593 66.8739 6.48893 66.8739 8.62793C66.8739 11.0889 69.0819 11.8249 71.0829 12.2619C72.9459 12.6759 74.0499 12.8139 74.0499 13.8259C74.0499 14.4929 73.4749 14.8379 72.4399 14.8379C70.9909 14.8379 70.2089 14.2629 70.0939 13.0899H66.6439C66.7589 15.4819 68.3689 17.3679 72.5779 17.3679C75.8439 17.3679 77.7299 16.0109 77.7299 13.5269C77.7299 10.8589 75.4299 10.0769 73.1069 9.57093Z"
                fill="white"
              ></path>
              <path
                class="letter j"
                d="M86.2079 2.99293C86.7369 2.99293 87.3579 2.60193 87.3579 1.88893C87.3579 1.17593 86.7369 0.784931 86.2079 0.784931C85.7019 0.784931 85.0579 1.17593 85.0579 1.88893C85.0579 2.60193 85.7019 2.99293 86.2079 2.99293ZM85.2879 5.26993V17.9889C85.2879 19.3229 84.9199 19.4379 83.3559 19.3229V20.7029C84.0229 20.8869 84.4829 20.9559 85.0579 20.9559C86.6219 20.9559 87.1279 19.7599 87.1279 17.8049V5.26993H85.2879Z"
                fill="white"
              ></path>
              <path
                class="letter o"
                d="M94.9749 17.3219C91.3869 17.3219 89.2249 14.7919 89.2249 11.1349C89.2249 7.47793 91.3869 4.94793 94.9749 4.94793C98.5399 4.94793 100.702 7.47793 100.702 11.1349C100.702 14.7919 98.5399 17.3219 94.9749 17.3219ZM94.9749 15.7119C97.5969 15.7119 98.8619 13.6419 98.8619 11.1349C98.8619 8.62793 97.5969 6.55793 94.9749 6.55793C92.3299 6.55793 91.0649 8.62793 91.0649 11.1349C91.0649 13.6419 92.3299 15.7119 94.9749 15.7119Z"
                fill="white"
              ></path>
              <path
                class="letter u"
                d="M110.334 5.26993V12.5839C110.334 14.4009 108.954 15.7119 106.884 15.7119C105.044 15.7119 104.331 14.5159 104.331 12.9979V5.26993H102.491V13.4579C102.491 16.1489 104.285 17.3219 106.424 17.3219C108.425 17.3219 109.667 16.4249 110.288 15.5969H110.334V16.9999H112.174V5.26993H110.334Z"
                fill="white"
              ></path>
              <path
                class="letter r"
                d="M119.84 4.94793C118.161 4.94793 117.218 6.05193 116.597 7.59293H116.551V5.26993H114.711V16.9999H116.551V10.7439C116.551 8.23693 118.322 6.44293 120.875 6.85693H120.921V5.01693C120.599 4.97093 120.277 4.94793 119.84 4.94793Z"
                fill="white"
              ></path>
              <path
                class="letter n"
                d="M128.345 4.94793C126.344 4.94793 125.102 5.84493 124.481 6.67293H124.435V5.26993H122.595V16.9999H124.435V9.68593C124.435 7.86893 125.815 6.55793 127.885 6.55793C129.725 6.55793 130.438 7.75393 130.438 9.27193V16.9999H132.278V8.81193C132.278 6.12093 130.484 4.94793 128.345 4.94793Z"
                fill="white"
              ></path>
              <path
                class="letter e"
                d="M139.737 15.7119C137.184 15.7119 135.919 13.7339 135.919 11.6179H145.188C145.188 7.45493 143.394 4.94793 139.714 4.94793C136.287 4.94793 134.079 7.22493 134.079 11.1349C134.079 14.8149 136.241 17.3219 139.806 17.3219C142.727 17.3219 144.406 15.5739 145.004 13.3889H143.164C142.957 14.1939 142.083 15.7119 139.737 15.7119ZM139.714 6.55793C141.922 6.55793 143.348 8.12193 143.348 10.0079H135.919C135.919 8.12193 137.506 6.55793 139.714 6.55793Z"
                fill="white"
              ></path>
              <path
                class="letter y"
                d="M156.721 5.26993H154.651L151.27 14.8379H151.224L147.636 5.26993H145.566L150.005 16.0339C150.465 17.1839 149.982 18.1729 149.499 18.7019C148.878 19.3689 148.165 19.4379 147.153 19.3459H146.877V20.7259C147.176 20.8179 147.705 20.9559 148.441 20.9559C150.603 20.9559 151.201 19.2309 151.707 17.9659L156.721 5.26993Z"
                fill="white"
              ></path>
            </svg>
          </div>
        </a>
      </div>

      <div class="links">
        <a
          class="link js-link link-lessons"
          href="https://threejs-journey.com/lessons"
          data-router-disabled=""
        >
          <span class="highlight"></span>
          <span class="label">Lessons</span>
        </a>

        <a
          class="link js-link link-accountDetails link-accountSecurity link-accountSettings link-accountInvoices link-accountHelp link-accountCertificate link-accountValentinesDay link-certificateQuiz"
          href="https://threejs-journey.com/account"
          data-router-disabled=""
        >
          <span class="highlight"></span>
          <span class="label">Account</span>
        </a>

        <a
          class="link js-link link-challenges"
          href="https://threejs-journey.com/challenges"
          data-router-set=""
        >
          <span class="highlight"></span>
          <span class="label">Challenges</span>
        </a>

        <a
          class="link js-link link-selection"
          href="https://threejs-journey.com/selection"
          data-router-set=""
        >
          <span class="highlight"></span>
          <span class="label">Selection</span>
        </a>

        <a
          class="link js-link link-highlights"
          href="https://threejs-journey.com/highlights"
          data-router-set=""
        >
          <span class="highlight"></span>
          <span class="label">Highlights</span>
        </a>
      </div>
    </nav>

    <nav class="actions is-desktop">
      <a
        class="logout-button"
        href="https://threejs-journey.com/logout"
        data-router-disabled=""
      >
        <span class="icon"
          ><svg
            width="19"
            height="20"
            viewBox="0 0 19 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M0 0H12V6H10V2H2V18H10V14H12V20H0V0ZM19 10L14 14V11H6V9H14V6L19 10Z"
              fill="white"
            ></path>
          </svg>
        </span>
        <span class="label">Logout</span>
      </a>

      <a
        href="https://threejs-journey.com/discord"
        data-router-disabled=""
        class="button has-icon-left is-discord"
      >
        <span class="hover"></span>
        <span class="icon"
          ><svg
            version="1.1"
            id="Calque_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 175 200"
            style="enable-background: new 0 0 175 200"
            xml:space="preserve"
          >
            <path
              d="M69.4,83.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1C79.7,88.9,75.1,83.9,69.4,83.9z M105.9,83.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1S111.6,83.9,105.9,83.9z"
            ></path>
            <path
              d="M154.5,0h-134C9.2,0,0,9.2,0,20.6v135.2c0,11.4,9.2,20.6,20.5,20.6h113.4l-5.3-18.5l12.8,11.9l12.1,11.2l21.5,19V20.6C175,9.2,165.8,0,154.5,0z M115.9,130.6c0,0-3.6-4.3-6.6-8.1c13.1-3.7,18.1-11.9,18.1-11.9c-4.1,2.7-8,4.6-11.5,5.9c-5,2.1-9.8,3.5-14.5,4.3c-9.6,1.8-18.4,1.3-25.9-0.1c-5.7-1.1-10.6-2.7-14.7-4.3c-2.3-0.9-4.8-2-7.3-3.4c-0.3-0.2-0.6-0.3-0.9-0.5c-0.2-0.1-0.3-0.2-0.4-0.3c-1.8-1-2.8-1.7-2.8-1.7s4.8,8,17.5,11.8c-3,3.8-6.7,8.3-6.7,8.3c-22.1-0.7-30.5-15.2-30.5-15.2c0-32.2,14.4-58.3,14.4-58.3c14.4-10.8,28.1-10.5,28.1-10.5l1,1.2c-18,5.2-26.3,13.1-26.3,13.1s2.2-1.2,5.9-2.9c10.7-4.7,19.2-6,22.7-6.3c0.6-0.1,1.1-0.2,1.7-0.2c6.1-0.8,13-1,20.2-0.2c9.5,1.1,19.7,3.9,30.1,9.6c0,0-7.9-7.5-24.9-12.7l1.4-1.6c0,0,13.7-0.3,28.1,10.5c0,0,14.4,26.1,14.4,58.3C146.5,115.4,138,129.9,115.9,130.6z"
            ></path>
          </svg>
        </span>
        <span class="label">Discord</span>
      </a>
    </nav>

    <button class="menu-trigger js-menu-trigger">
      <span class="bar bar-1"></span><span class="bar bar-2"></span
      ><span class="bar bar-3"></span>
    </button>
  </div>
</header>
<main data-router-wrapper="">
  <section class="js-page page home" data-router-view="home">
    <section class="js-hero hero is-not-interacting clear-selection">
      <div class="mask is-left"></div>

      <div class="content">
        <div class="top">
          <p class="element delay-0 author">
            <img
              class="js-lazy lazy picture is-loaded"
              src="assets/images/photo-100x100.webp"
              width="50"
              height="50"
              alt="Bruno Simon"
            />
            <span class="label"
              >by
              <a
                href="https://bruno-simon.com/"
                target="_blank"
                class="underline-container"
                >Bruno Simon</a
              ></span
            >
          </p>

          <h1 class="element delay-1 main-title">
            Become a Three.js developer
          </h1>

          <div class="element delay-2 description">
            <p><strong>Everything you need</strong> in one place:</p>
            <p>
              <strong>93 hours of video</strong> to go from
              <strong>absolute beginner</strong> to
              <strong>advanced Three.js developer</strong>.
            </p>
          </div>

          <span class="element delay-3 separator"></span>

          <div class="element delay-4 students">
            <img
              class="js-lazy lazy illustration is-loaded"
              src="/assets/images/illustration-student.webp"
              srcset="/assets/images/illustration-student@2x.webp 2x"
              width="60"
              height="47"
              alt="Student hat"
            />
            <div>
              <p><strong>40,307 Students</strong> already enrolled</p>
              <p class="trustpilot has-theme-light">
                <span class="stars">
                  <span class="star"
                    ><svg
                      width="21"
                      height="20"
                      viewBox="0 0 21 20"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M10.5 0.505859L12.8574 7.76118H20.4861L14.3143 12.2452L16.6717 19.5005L10.5 15.0165L4.32825 19.5005L6.68565 12.2452L0.513906 7.76118H8.1426L10.5 0.505859Z"
                        fill="#705DF2"
                      ></path>
                    </svg>
                  </span>
                  <span class="star"
                    ><svg
                      width="21"
                      height="20"
                      viewBox="0 0 21 20"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M10.5 0.505859L12.8574 7.76118H20.4861L14.3143 12.2452L16.6717 19.5005L10.5 15.0165L4.32825 19.5005L6.68565 12.2452L0.513906 7.76118H8.1426L10.5 0.505859Z"
                        fill="#705DF2"
                      ></path>
                    </svg>
                  </span>
                  <span class="star"
                    ><svg
                      width="21"
                      height="20"
                      viewBox="0 0 21 20"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M10.5 0.505859L12.8574 7.76118H20.4861L14.3143 12.2452L16.6717 19.5005L10.5 15.0165L4.32825 19.5005L6.68565 12.2452L0.513906 7.76118H8.1426L10.5 0.505859Z"
                        fill="#705DF2"
                      ></path>
                    </svg>
                  </span>
                  <span class="star"
                    ><svg
                      width="21"
                      height="20"
                      viewBox="0 0 21 20"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M10.5 0.505859L12.8574 7.76118H20.4861L14.3143 12.2452L16.6717 19.5005L10.5 15.0165L4.32825 19.5005L6.68565 12.2452L0.513906 7.76118H8.1426L10.5 0.505859Z"
                        fill="#705DF2"
                      ></path>
                    </svg>
                  </span>
                  <span class="star"
                    ><svg
                      width="21"
                      height="20"
                      viewBox="0 0 21 20"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M10.5 0.505859L12.8574 7.76118H20.4861L14.3143 12.2452L16.6717 19.5005L10.5 15.0165L4.32825 19.5005L6.68565 12.2452L0.513906 7.76118H8.1426L10.5 0.505859Z"
                        fill="#705DF2"
                      ></path>
                    </svg>
                  </span>
                </span>
                <span class="label"
                  >on
                  <a
                    href="https://nz.trustpilot.com/review/threejs-journey.com"
                    target="_blank"
                    rel="noopener"
                    >Trustpilot</a
                  ></span
                >
              </p>
            </div>
          </div>
        </div>

        <a
          href="#"
          class="bottom trailer-trigger js-trailer-trigger element delay-5"
        >
          <div class="placeholder"></div>
          <div class="glow"></div>
          <div class="video">
            <video
              class="js-video-autoplay"
              src="assets/videos/promotion/promotion-preview.mp4"
              muted=""
              autoplay=""
              loop=""
              playsinline=""
            ></video>
            <span class="play">
              <svg
                version="1.1"
                id="Calque_1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 10.5 11.8"
                style="enable-background: new 0 0 10.5 11.8"
                xml:space="preserve"
              >
                <path
                  class="st0"
                  d="M0,1.5c0-1.2,1.3-1.9,2.3-1.3l7.5,4.4c1,0.6,1,2,0,2.6l-7.5,4.4c-1,0.6-2.3-0.1-2.3-1.3V1.5z"
                ></path>
              </svg>
            </span>
          </div>
          <div class="info">
            <div class="inner">
              <div class="notch"></div>
              <div class="price">$95</div>
              <div class="details">Access for life, VAT incl.</div>
            </div>
          </div>
        </a>
      </div>

      <div class="js-experience experience">
        <canvas
          class="js-canvas canvas"
          data-engine="three.js r139"
          width="2270"
          height="1184"
          style="touch-action: none; width: 1135px; height: 592.078px"
        ></canvas>

        <div class="navigation">
          <button class="js-previous sibling is-previous" aria-label="Previous">
            <div class="icon">
              <svg
                width="11"
                height="7"
                viewBox="0 0 11 7"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                  fill="white"
                ></path>
              </svg>
            </div>
          </button>
          <div class="label">
            <div class="inner">
              Level
              <span class="value">
                <span class="placeholder">00</span>
                <span class="js-digits digit is-current">01</span>
                <span class="js-digits digit is-after">02</span>
                <span class="js-digits digit is-after">03</span>
                <span class="js-digits digit is-after">04</span>
                <span class="js-digits digit is-after">05</span>
                <span class="js-digits digit is-after">06</span>
                <span class="js-digits digit is-after">07</span>
              </span>
            </div>
          </div>
          <button class="js-next sibling is-next is-active" aria-label="Next">
            <div class="icon">
              <svg
                width="11"
                height="7"
                viewBox="0 0 11 7"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                  fill="white"
                ></path>
              </svg>
            </div>
          </button>
        </div>

        <span class="click">
          <div class="arrow is-arrow-left">
            <svg
              width="11"
              height="7"
              viewBox="0 0 11 7"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                fill="white"
              ></path>
            </svg>
          </div>
          <div class="hand">
            <div class="hand-illustration"></div>
          </div>
          <div class="arrow is-arrow-right">
            <svg
              width="11"
              height="7"
              viewBox="0 0 11 7"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                fill="white"
              ></path>
            </svg>
          </div>
        </span>

        <button class="js-close close" aria-label="Close">
          <span class="background"></span>
          <span class="bars">
            <span class="bar bar-1"></span>
            <span class="bar bar-2"></span>
          </span>
        </button>
      </div>

      <div class="chapters">
        <div class="js-container container"></div>
        <div class="overlay is-top"></div>
        <div class="overlay is-bottom"></div>
      </div>
    </section>

    <!-- eggnog was here
    <section
      class="trailer-video js-trailer-video"
      style="display: none; visibility: hidden; opacity: 0"
    >
      <div class="background js-background"></div>

      <div class="player-container">
        <div class="placeholder"></div>

        <div
          class="js-player player is-paused"
          data-id="home"
          data-source-url="/assets/videos/promotion/promotion-1920x1080.mp4"
          data-thumbnail-urls=""
          data-sections="[]"
          data-duration=""
          data-auto-resize=""
        >
          <div class="js-video-area video-area">
            <div class="js-video-abd-subtitles video-and-subtitles">
              <video
                class="js-video video"
                width="1920"
                height="1080"
                playsinline=""
              >
                <track
                  src="/assets/videos/promotion/en.vtt"
                  kind="metadata"
                  srclang="en"
                />
                <track
                  src="/assets/videos/promotion/fr.vtt"
                  kind="metadata"
                  srclang="fr"
                />
                <track
                  src="/assets/videos/promotion/es.vtt"
                  kind="metadata"
                  srclang="es"
                />
                <track
                  src="/assets/videos/promotion/hi.vtt"
                  kind="metadata"
                  srclang="hi"
                />
              </video>

              <div class="js-tracks tracks">
                <div class="js-tracks-text tracks-text"></div>
              </div>
            </div>

            <div class="js-overlay overlay"></div>

            <div class="js-backward direction is-backward"></div>
            <div class="js-forward direction is-forward"></div>
          </div>

          <div class="js-controls controls">
            <div class="bottom">
              <div class="left">
                <button
                  class="js-play-toggle play-toggle"
                  aria-label="Play/Pause"
                >
                  <span class="play">
                    <svg
                      version="1.1"
                      id="Calque_1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      x="0px"
                      y="0px"
                      viewBox="0 0 10.5 11.8"
                      style="enable-background: new 0 0 10.5 11.8"
                      xml:space="preserve"
                    >
                      <path
                        class="st0"
                        d="M0,1.5c0-1.2,1.3-1.9,2.3-1.3l7.5,4.4c1,0.6,1,2,0,2.6l-7.5,4.4c-1,0.6-2.3-0.1-2.3-1.3V1.5z"
                      ></path>
                    </svg>
                  </span>
                  <span class="pause">
                    <span class="bar bar-1"></span>
                    <span class="bar bar-2"></span>
                  </span>
                </button>

                <span class="js-time time"
                  ><span class="js-time-current current"
                    ><span class="digit">0</span
                    ><span class="digit">0</span>:<span class="digit">0</span
                    ><span class="digit">0</span></span
                  ><span class="separator">/</span
                  ><span class="js-time-duration duration"
                    ><span class="digit">0</span
                    ><span class="digit">0</span>:<span class="digit">0</span
                    ><span class="digit">0</span></span
                  ></span
                >
              </div>

              <div class="right">
                <div class="js-quality quality select">
                  <div class="list">
                    <div class="js-links mover"></div>
                  </div>
                  <button
                    class="button is-main is-small"
                    aria-label="Resolution"
                  >
                    <span class="hover"></span>
                    <span class="js-label label is-value">1920x1080</span>
                    <span class="label is-placeholder">1920x1080</span>
                    <span class="arrow"
                      ><svg
                        width="11"
                        height="7"
                        viewBox="0 0 11 7"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                          fill="white"
                        ></path>
                      </svg>
                    </span>
                  </button>
                </div>

                <div class="js-subtitles subtitles select">
                  <div class="list">
                    <div class="js-links mover"></div>
                  </div>
                  <button
                    class="button is-main is-small"
                    aria-label="Resolution"
                  >
                    <span class="hover"></span>
                    <span class="js-label label is-value"
                      >sub<span class="non-important">titles</span></span
                    >
                    <span class="label is-placeholder"
                      >sub<span class="non-important">titles</span></span
                    >
                    <span class="arrow"
                      ><svg
                        width="11"
                        height="7"
                        viewBox="0 0 11 7"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                          fill="white"
                        ></path>
                      </svg>
                    </span>
                  </button>
                </div>

                <button
                  class="js-fullscreen-toggle fullscreen-toggle"
                  aria-label="Toggle fullscreen"
                >
                  <div class="icon">
                    <div class="corner corner-1"><div class="shape"></div></div>
                    <div class="corner corner-2"><div class="shape"></div></div>
                    <div class="corner corner-3"><div class="shape"></div></div>
                    <div class="corner corner-4"><div class="shape"></div></div>
                  </div>
                </button>

                <div class="js-volume volume">
                  <button
                    class="js-volume-toggle volume-toggle"
                    aria-label="Mute/Unmute"
                  >
                    <div class="icon">
                      <svg
                        id="Calque_1"
                        data-name="Calque 1"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24.67"
                        height="16.53"
                        viewBox="0 0 24.67 16.53"
                      >
                        <path
                          class="wave"
                          d="M19.37,14.49a1.5,1.5,0,0,1,0-3,2.58,2.58,0,0,0,2.3-2.78,2.57,2.57,0,0,0-2.3-2.77,1.5,1.5,0,1,1,0-3,5.56,5.56,0,0,1,5.3,5.77A5.56,5.56,0,0,1,19.37,14.49Z"
                        ></path>
                        <path
                          d="M15.09.3A2,2,0,0,0,13.14.22l-6,3c-.07,0-.14.1-.21.15H1.5A1.5,1.5,0,0,0,0,4.91v6.82a1.5,1.5,0,0,0,1.5,1.5H7a1.19,1.19,0,0,0,.23.16l6,2.93A2,2,0,0,0,16,14.53V2A2,2,0,0,0,15.09.3ZM3,6.41H6.07v3.82H3Zm10,6.51L9.11,11V5.64l3.93-2Z"
                        ></path>
                      </svg>
                    </div>
                  </button>
                  <div class="js-progress progress">
                    <div class="bar">
                      <div class="js-volume-fill fill"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="js-seekbar seekbar">
              <div class="js-seekbar-inner inner">
                <div class="js-cursor cursor">
                  <div class="js-cursor-inner cursor-inner">
                    <div class="js-cursor-content cursor-content">
                      <div class="js-cursor-thumbnail cursor-thumbnail"></div>
                      <div class="cursor-label">
                        <div class="cursor-time">
                          <div class="js-cursor-time-value value">3:22</div>
                          <div class="js-cursor-time-placeholder placeholder">
                            00:03:22
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="cursor-tip"></div>
                  </div>
                </div>

                <canvas class="js-seekbar-canvas canvas"></canvas>

                <span class="sparkles-container js-sparkles-container">
                  <span class="sparkles is-small">
                    <span class="sparkle"><span class="inner"></span></span>
                    <span class="sparkle"><span class="inner"></span></span>
                    <span class="sparkle"><span class="inner"></span></span>
                    <span class="sparkle"><span class="inner"></span></span>
                    <span class="sparkle"><span class="inner"></span></span>
                    <span class="sparkle"><span class="inner"></span></span>
                    <span class="sparkle"><span class="inner"></span></span>
                    <span class="sparkle"><span class="inner"></span></span>
                    <span class="sparkle"><span class="inner"></span></span>
                    <span class="sparkle"><span class="inner"></span></span>
                  </span>
                </span>
              </div>
            </div>
          </div>

          <div class="poster">
            <img
              class="js-lazy lazy is-loaded"
              src="/assets/images/home-player-poster.webp"
              srcset="/assets/images/home-player-poster.webp"
              alt="Bruno Simon talking about the course"
            />
          </div>

          <div class="logo">
            <svg
              version="1.1"
              id="Calque_1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="0px"
              y="0px"
              viewBox="0 0 58.5 66.6"
              style="enable-background: new 0 0 58.5 66.6"
              xml:space="preserve"
            >
              <path
                class="face-1"
                d="M23.1,55.7l16.1-9.3c0,0,0,0,0,0c1.1-0.7,1.8-1.9,1.8-3.1l0.1-19.1L23.1,34.4V55.7z"
              ></path>
              <path
                class="face-2"
                d="M21.3,10L2.9,20.5l18,10.2l18.4-10.5c0,0,0,0-0.1,0l-17.4-10C21.7,10.1,21.5,10.1,21.3,10z"
              ></path>
              <path
                class="face-3"
                d="M1.8,46.7L18,56.6c0,0,0,0,0,0c0.3,0.2,0.5,0.3,0.8,0.3V34.5L0,23.8v19.7C0,44.9,0.7,46.1,1.8,46.7z"
              ></path>
              <path
                class="triangle-1"
                d="M56.8,30.4l-11.4-6.6l-0.1,19.2l11.5-6.7c1-0.6,1.7-1.7,1.7-2.9C58.5,32.1,57.9,31,56.8,30.4z"
              ></path>
              <path
                class="triangle-2"
                d="M0,50.7v12.6c0,1.2,0.6,2.3,1.7,2.9c0.5,0.3,1.1,0.5,1.7,0.5c0.6,0,1.2-0.2,1.7-0.5l10.4-6L0,50.7z"
              ></path>
              <path
                class="triangle-3"
                d="M16.4,7L5.1,0.5c-1-0.6-2.3-0.6-3.4,0C0.6,1.1,0,2.2,0,3.4v13.2L16.4,7z"
              ></path>
            </svg>
          </div>
        </div>
        <div class="join-container">
          <a
            href="https://threejs-journey.com/join"
            data-router-disabled=""
            class="js-join-button button join-button is-purple is-abyss-join has-icon-right"
          >
            <span class="hover"></span>
            <span class="label">Start learning now</span>
            <span class="icon"
              ><svg
                width="15"
                height="18"
                viewBox="0 0 15 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12.479 8.11445C13.6178 8.74903 13.6219 9.5473 12.479 10.2647L3.6482 16.2205C2.53862 16.8126 1.78502 16.463 1.70591 15.1817L1.66844 2.71652C1.64346 1.53629 2.61564 1.20283 3.54203 1.7687L12.479 8.11445Z"
                  stroke="#705DF2"
                  stroke-width="2"
                ></path>
              </svg>
            </span>
          </a>
        </div>

        <button class="js-close close" aria-label="Close">
          <span class="background"></span>
          <span class="bars">
            <span class="bar bar-1"></span>
            <span class="bar bar-2"></span>
          </span>
        </button>
      </div>
    </section>
    <section
      class="career js-anchor is-anchor-set"
      data-main-section=""
      id="career"
      data-slug="career"
    >
      <div class="radial-glow"></div>

      <div class="titles">
        <h2 class="section-title">Boost your creative developer career</h2>
        <p class="section-sub-title">
          It’s time to upgrade your front-end skills
        </p>
      </div>

      <div class="skills">
        <div class="skill enjoy">
          <div class="icon">
            <svg
              width="100"
              height="49"
              viewBox="0 0 100 49"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M49.9998 7.71731C36.6466 -5.84405 18.2914 12.795 31.6446 26.3587L49.9998 45L68.3551 26.3587C81.7083 12.7973 63.3554 -5.84405 49.9998 7.71731Z"
                stroke="url(#paint0_linear_2450_3254)"
                stroke-width="5"
                stroke-miterlimit="10"
                stroke-linecap="round"
              ></path>
              <path
                d="M15.2578 37.435L2.97656 25.0008L15.2578 12.5654"
                stroke="url(#paint1_linear_2450_3254)"
                stroke-width="5"
                stroke-miterlimit="10"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
              <path
                d="M84.7422 12.8721L97.0235 25.154L84.7422 37.4346"
                stroke="url(#paint2_linear_2450_3254)"
                stroke-width="5"
                stroke-miterlimit="10"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
              <defs>
                <linearGradient
                  id="paint0_linear_2450_3254"
                  x1="50"
                  y1="10.9423"
                  x2="50"
                  y2="45"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#FF9680"></stop>
                  <stop offset="1" stop-color="#FF6847"></stop>
                </linearGradient>
                <linearGradient
                  id="paint1_linear_2450_3254"
                  x1="9.11719"
                  y1="17.2683"
                  x2="9.11719"
                  y2="37.435"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#FF9680"></stop>
                  <stop offset="1" stop-color="#FF6847"></stop>
                </linearGradient>
                <linearGradient
                  id="paint2_linear_2450_3254"
                  x1="90.8828"
                  y1="17.5169"
                  x2="90.8828"
                  y2="37.4346"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#FF9680"></stop>
                  <stop offset="1" stop-color="#FF6847"></stop>
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div class="label">Enjoy coding like never before</div>
        </div>
        <div class="skill clients">
          <div class="icon">
            <svg
              width="70"
              height="70"
              viewBox="0 0 70 70"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M66.3057 36.9118C66.3057 35.5311 65.1864 34.4118 63.8057 34.4118C62.425 34.4118 61.3057 35.5311 61.3057 36.9118H66.3057ZM33.4029 8.82353C34.7836 8.82353 35.9029 7.70424 35.9029 6.32353C35.9029 4.94282 34.7836 3.82353 33.4029 3.82353V8.82353ZM51.1043 36.9118C51.1043 35.5311 49.985 34.4118 48.6043 34.4118C47.2236 34.4118 46.1043 35.5311 46.1043 36.9118H51.1043ZM33.4029 24.1176C34.7836 24.1176 35.9029 22.9984 35.9029 21.6176C35.9029 20.2369 34.7836 19.1176 33.4029 19.1176V24.1176ZM48.6123 24.5394C49.5856 23.5601 49.5808 21.9772 48.6015 21.0039C47.6223 20.0306 46.0394 20.0354 45.066 21.0146L48.6123 24.5394ZM31.6297 34.5329C30.6564 35.5121 30.6612 37.095 31.6405 38.0684C32.6197 39.0417 34.2027 39.0369 35.176 38.0576L31.6297 34.5329ZM67 13.3146L68.7731 15.077C69.4394 14.4066 69.6707 13.4178 69.3708 12.5214C69.071 11.6251 68.2912 10.9745 67.3557 10.84L67 13.3146ZM54.9073 25.481L54.1124 27.8512C55.0144 28.1537 56.0098 27.9181 56.6805 27.2434L54.9073 25.481ZM44.1583 14.6664L42.3852 12.904C41.7207 13.5725 41.4887 14.5579 41.7852 15.4526L44.1583 14.6664ZM56.251 2.5L58.7261 2.14855C58.5928 1.20929 57.9393 0.42644 57.0389 0.127427C56.1386 -0.171586 55.1466 0.0647597 54.4778 0.737614L56.251 2.5ZM46.8456 22.7773L44.4724 23.5636C44.7199 24.3105 45.3046 24.8974 46.0507 25.1476L46.8456 22.7773ZM57.5946 11.9628L55.1194 12.3142C55.2756 13.4143 56.1391 14.2793 57.2389 14.4373L57.5946 11.9628ZM61.3057 36.9118C61.3057 52.4388 48.7989 65 33.4029 65V70C51.5889 70 66.3057 55.1715 66.3057 36.9118H61.3057ZM33.4029 65C18.0068 65 5.5 52.4388 5.5 36.9118H0.5C0.5 55.1715 15.2168 70 33.4029 70V65ZM5.5 36.9118C5.5 21.3847 18.0068 8.82353 33.4029 8.82353V3.82353C15.2168 3.82353 0.5 18.652 0.5 36.9118H5.5ZM46.1043 36.9118C46.1043 43.9921 40.4034 49.7059 33.4029 49.7059V54.7059C43.1934 54.7059 51.1043 46.7248 51.1043 36.9118H46.1043ZM33.4029 49.7059C26.4024 49.7059 20.7014 43.9921 20.7014 36.9118H15.7014C15.7014 46.7248 23.6123 54.7059 33.4029 54.7059V49.7059ZM20.7014 36.9118C20.7014 29.8314 26.4024 24.1176 33.4029 24.1176V19.1176C23.6123 19.1176 15.7014 27.0987 15.7014 36.9118H20.7014ZM45.066 21.0146L31.6297 34.5329L35.176 38.0576L48.6123 24.5394L45.066 21.0146ZM65.2269 11.5522L53.1342 23.7186L56.6805 27.2434L68.7731 15.077L65.2269 11.5522ZM45.9314 16.4288L58.0241 4.26239L54.4778 0.737614L42.3852 12.904L45.9314 16.4288ZM55.7022 23.1107L47.6405 20.4071L46.0507 25.1476L54.1124 27.8512L55.7022 23.1107ZM49.2187 21.9911L46.5315 13.8801L41.7852 15.4526L44.4724 23.5636L49.2187 21.9911ZM53.7758 2.85145L55.1194 12.3142L60.0698 11.6113L58.7261 2.14855L53.7758 2.85145ZM57.2389 14.4373L66.6443 15.7891L67.3557 10.84L57.9503 9.48818L57.2389 14.4373Z"
                fill="url(#paint0_linear_2450_3262)"
              ></path>
              <defs>
                <linearGradient
                  id="paint0_linear_2450_3262"
                  x1="35"
                  y1="14.7917"
                  x2="35"
                  y2="67.5"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#FF9680"></stop>
                  <stop offset="1" stop-color="#FF6847"></stop>
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div class="label">Reach out to new clients</div>
        </div>
        <div class="skill competition">
          <div class="icon">
            <svg
              width="102"
              height="75"
              viewBox="0 0 102 75"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M50.1227 3.60979C50.5017 2.91485 51.4996 2.91485 51.8786 3.60979L54.4078 8.2475C54.5517 8.51123 54.8064 8.69633 55.1017 8.75162L60.294 9.72396C61.0721 9.86966 61.3804 10.8187 60.8366 11.3939L57.2075 15.2325C57.0011 15.4508 56.9038 15.7503 56.9424 16.0482L57.6222 21.2868C57.7241 22.0718 56.9168 22.6583 56.2017 22.3189L51.4295 20.0536C51.1581 19.9247 50.8432 19.9247 50.5718 20.0536L45.7996 22.3189C45.0845 22.6583 44.2772 22.0718 44.3791 21.2868L45.0589 16.0482C45.0975 15.7503 45.0002 15.4508 44.7938 15.2325L41.1647 11.3939C40.6209 10.8187 40.9292 9.86966 41.7073 9.72396L46.8996 8.75162C47.1949 8.69633 47.4496 8.51123 47.5935 8.2475L50.1227 3.60979Z"
                stroke="url(#paint0_linear_2504_2074)"
                stroke-width="5"
              ></path>
              <path
                d="M67.1544 72V36.1025H34.8468V72M67.1544 72H34.8468M67.1544 72H99.4621V60.3333H67.1544V72ZM34.8468 72V52.2564H2.53906V72H34.8468Z"
                stroke="url(#paint1_linear_2504_2074)"
                stroke-width="5"
              ></path>
              <defs>
                <linearGradient
                  id="paint0_linear_2504_2074"
                  x1="51.0007"
                  y1="6.41239"
                  x2="51.0007"
                  y2="25.3333"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#FF9680"></stop>
                  <stop offset="1" stop-color="#FF6847"></stop>
                </linearGradient>
                <linearGradient
                  id="paint1_linear_2504_2074"
                  x1="51.0006"
                  y1="42.8908"
                  x2="51.0006"
                  y2="72"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#FF9680"></stop>
                  <stop offset="1" stop-color="#FF6847"></stop>
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div class="label">Stand out against the competition</div>
        </div>
        <div class="skill money">
          <div class="icon">
            <svg
              width="72"
              height="78"
              viewBox="0 0 72 78"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M20.7075 66.8773C19.3965 67.3104 18.6847 68.7242 19.1177 70.0353C19.5507 71.3463 20.9646 72.0581 22.2756 71.6251L20.7075 66.8773ZM42.828 70.6606L42.6033 68.1708L42.828 70.6606ZM55.6299 67.8418L56.7182 70.0925L55.6299 67.8418ZM67.8623 56.8157L65.9266 55.2335V55.2335L67.8623 56.8157ZM59.496 49.9166L57.7364 48.1407V48.1407L59.496 49.9166ZM53.8623 55.4988L55.6219 57.2747V57.2747L53.8623 55.4988ZM38.5607 55.4757C37.18 55.4757 36.0607 56.595 36.0607 57.9757C36.0607 59.3564 37.18 60.4757 38.5607 60.4757V55.4757ZM66.5616 49.2234L65.1837 51.3093L66.5616 49.2234ZM25.8214 47.374L26.9312 49.6141L26.9312 49.6141L25.8214 47.374ZM41.1336 45.9861L41.7858 43.5726L41.7858 43.5726L41.1336 45.9861ZM47.1133 47.602L46.4611 50.0154V50.0154L47.1133 47.602ZM49.0079 54.6712L47.2482 52.8953L47.2482 52.8953L49.0079 54.6712ZM43.9132 56.1999C42.9325 57.1717 42.9252 58.7546 43.897 59.7354C44.8688 60.7161 46.4517 60.7234 47.4325 59.7516L43.9132 56.1999ZM22.2756 71.6251C22.8592 71.4323 23.8751 71.3496 25.4493 71.4609C26.9726 71.5685 28.7374 71.8316 30.7085 72.1384C34.5052 72.7293 39.1215 73.5054 43.0528 73.1505L42.6033 68.1708C39.4224 68.4579 35.5041 67.8246 31.4774 67.1979C29.5369 66.8959 27.5678 66.5981 25.8017 66.4733C24.0865 66.3521 22.2576 66.3654 20.7075 66.8773L22.2756 71.6251ZM43.0528 73.1505C48.602 72.6496 51.1454 72.7871 56.7182 70.0925L54.5416 65.5911C49.9322 67.8199 48.3372 67.6532 42.6033 68.1708L43.0528 73.1505ZM56.7182 70.0925C61.7028 67.6822 66.7277 62.1541 69.798 58.3979L65.9266 55.2335C62.8322 59.0194 58.4204 63.7155 54.5416 65.5911L56.7182 70.0925ZM57.7364 48.1407L52.1027 53.723L55.6219 57.2747L61.2556 51.6925L57.7364 48.1407ZM47.8275 55.4757H38.5607V60.4757H47.8275V55.4757ZM52.1027 53.723C50.9727 54.8426 49.4353 55.4757 47.8275 55.4757V60.4757C50.7466 60.4757 53.5508 59.3269 55.6219 57.2747L52.1027 53.723ZM67.9396 47.1374C64.7338 45.0197 60.4666 45.4354 57.7364 48.1407L61.2556 51.6925C62.3002 50.6574 63.9476 50.4928 65.1837 51.3093L67.9396 47.1374ZM69.798 58.3979C72.7763 54.7541 71.6644 49.5979 67.9396 47.1374L65.1837 51.3093C66.6486 52.277 66.874 54.0746 65.9266 55.2335L69.798 58.3979ZM5.84486 46.3813H17.2243V41.3813H5.84486V46.3813ZM17.5691 46.7002V72.0701H22.5691V46.7002H17.5691ZM17.2243 72.389H5.84486V77.389H17.2243V72.389ZM5.5 72.0701V46.7002H0.5V72.0701H5.5ZM5.84486 72.389C5.63271 72.389 5.5 72.2246 5.5 72.0701H0.5C0.5 75.0292 2.91466 77.389 5.84486 77.389V72.389ZM17.5691 72.0701C17.5691 72.2246 17.4364 72.389 17.2243 72.389V77.389C20.1545 77.389 22.5691 75.0292 22.5691 72.0701H17.5691ZM17.2243 46.3813C17.4364 46.3813 17.5691 46.5457 17.5691 46.7002H22.5691C22.5691 43.7411 20.1545 41.3813 17.2243 41.3813V46.3813ZM5.84486 41.3813C2.91465 41.3813 0.5 43.7411 0.5 46.7002H5.5C5.5 46.5457 5.63272 46.3813 5.84486 46.3813V41.3813ZM22.6014 51.7592L26.9312 49.6141L24.7116 45.1338L20.3817 47.2789L22.6014 51.7592ZM34.7272 47.7908H35.8939V42.7908H34.7272V47.7908ZM40.4814 48.3995L46.4611 50.0154L47.7654 45.1886L41.7858 43.5726L40.4814 48.3995ZM47.2482 52.8953L43.9132 56.1999L47.4325 59.7516L50.7675 56.447L47.2482 52.8953ZM46.4611 50.0154C47.7837 50.3728 48.1799 51.9722 47.2482 52.8953L50.7675 56.447C54.4696 52.7788 52.7649 46.5396 47.7654 45.1886L46.4611 50.0154ZM35.8939 47.7908C37.4438 47.7908 38.9865 47.9955 40.4814 48.3995L41.7858 43.5726C39.8654 43.0537 37.884 42.7908 35.8939 42.7908V47.7908ZM26.9312 49.6141C29.3508 48.4154 32.02 47.7908 34.7272 47.7908V42.7908C31.2514 42.7908 27.8224 43.5926 24.7116 45.1338L26.9312 49.6141Z"
                fill="url(#paint0_linear_2450_3280)"
              ></path>
              <path
                d="M50.7738 34.2146C57.2375 34.2146 62.4773 28.9748 62.4773 22.5111C62.4773 16.0474 57.2375 10.8076 50.7738 10.8076C44.3101 10.8076 39.0703 16.0474 39.0703 22.5111C39.0703 28.9748 44.3101 34.2146 50.7738 34.2146Z"
                stroke="url(#paint1_linear_2450_3280)"
                stroke-width="5"
              ></path>
              <path
                d="M41 4.79513C39.2153 3.72594 37.1271 3.11133 34.8953 3.11133C28.3257 3.11133 23 8.43706 23 15.0067C23 20.0238 26.106 24.3154 30.5 26.0636"
                stroke="url(#paint2_linear_2450_3280)"
                stroke-width="5"
                stroke-linecap="round"
              ></path>
              <path
                d="M53.79 19.4447C53.6507 19.0682 53.3962 18.74 53.0594 18.5024C52.7226 18.2647 52.3188 18.1285 51.9 18.1113H49.1C48.543 18.1113 48.0089 18.322 47.6151 18.6971C47.2212 19.0722 47 19.5809 47 20.1113C47 20.6418 47.2212 21.1505 47.6151 21.5255C48.0089 21.9006 48.543 22.1113 49.1 22.1113H51.9C52.457 22.1113 52.9911 22.322 53.3849 22.6971C53.7788 23.0722 54 23.5809 54 24.1113C54 24.6418 53.7788 25.1505 53.3849 25.5255C52.9911 25.9006 52.457 26.1113 51.9 26.1113H49.1C48.6812 26.0941 48.2774 25.9579 47.9406 25.7203C47.6038 25.4827 47.3493 25.1545 47.21 24.778M50.5 16.1113V18.1113M50.5 26.1113V28.1113"
                stroke="url(#paint3_linear_2450_3280)"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
              <defs>
                <linearGradient
                  id="paint0_linear_2450_3280"
                  x1="36"
                  y1="49.745"
                  x2="36"
                  y2="74.8889"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#FF9680"></stop>
                  <stop offset="1" stop-color="#FF6847"></stop>
                </linearGradient>
                <linearGradient
                  id="paint1_linear_2450_3280"
                  x1="50.7738"
                  y1="15.2339"
                  x2="50.7738"
                  y2="34.2146"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#FF9680"></stop>
                  <stop offset="1" stop-color="#FF6847"></stop>
                </linearGradient>
                <linearGradient
                  id="paint2_linear_2450_3280"
                  x1="32"
                  y1="7.45166"
                  x2="32"
                  y2="26.0636"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#FF9680"></stop>
                  <stop offset="1" stop-color="#FF6847"></stop>
                </linearGradient>
                <linearGradient
                  id="paint3_linear_2450_3280"
                  x1="50.5"
                  y1="18.3806"
                  x2="50.5"
                  y2="28.1113"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#FF9680"></stop>
                  <stop offset="1" stop-color="#FF6847"></stop>
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div class="label">Increase your pay rate</div>
        </div>
      </div>
    </section>
    <section
      class="testimonies clear-selection js-anchor is-anchor-set"
      data-main-section=""
      id="testimonies"
      data-slug="testimonies"
    >
      <div class="radial-glow"></div>

      <h2 class="section-title">Approved by <strong>professionals</strong></h2>

      <div
        class="items draggable-slider js-draggable-slider"
        style="cursor: grab"
      >
        <div class="mover js-mover" style="transform: translateX(50px)">
          <div class="item is-mrdoob">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/mrdoob.webp"
                  alt="Mr.doob"
                />
                <div class="details">
                  <div class="name">Mr.doob</div>
                  <div class="job">Three.js Creator</div>
                  <div class="followers">
                    <span class="count">69.6K</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  I'm in awe with the quality of Bruno's course. I can't imagine
                  a funner way to start with 3d programming ✨
                </p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/mrdoob/status/1352205795551809537"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet
              <span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
          <div class="item is-JanWillemTulp">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/JanWillemTulp.webp"
                  alt="Jan Willem Tulp"
                />
                <div class="details">
                  <div class="name">Jan Willem Tulp</div>
                  <div class="job">Data Experience Designer</div>
                  <div class="followers">
                    <span class="count">13.8K</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  I'm really enjoying <em>https://threejs-journey.com</em> by
                  <em>@bruno_simon</em> <br />Doing about 1 lesson a day.
                  There's a lot I didn't know yet, and I can't wait to use
                  <em>@threejs</em> for more advanced creative
                  <em>#dataviz</em> projects or experiments.
                </p>
                <p>Course is highly recommended!</p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/JanWillemTulp/status/1480899163625820162"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet<span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
          <div class="item is-Anemolito">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/Anemolito.webp"
                  alt="Daniel Velasquez"
                />
                <div class="details">
                  <div class="name">Daniel Velasquez</div>
                  <div class="job">Freelancer Creative Developer</div>
                  <div class="followers">
                    <span class="count">8,545</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  If you want to get into webgl, or want to learn even more.
                  This is an Instant buy.
                </p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/Anemolito/status/1351559730834112512"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet<span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
          <div class="item is-ilithya_rocks">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/ilithya_rocks.webp"
                  alt="ilithya"
                />
                <div class="details">
                  <div class="name">ilithya</div>
                  <div class="job">Digital Artist, Creative Deveveloper</div>
                  <div class="followers">
                    <span class="count">3,350</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  Ok, I was able to do <em>@bruno_simon</em> course early. As an
                  intermediate WebGL/ThreeJS level person I felt the course is
                  complete. It can aid ppl at various levels to start mastering
                  3D on the web. The plus ⏤ endless inspiration after all
                  beautiful creations one makes while learning⚡️
                </p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/ilithya_rocks/status/1352292873975308292"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet<span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
          <div class="item is-aqro">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/aqro.webp"
                  alt="Arno Di Nunzio"
                />
                <div class="details">
                  <div class="name">Arno Di Nunzio</div>
                  <div class="job">Frontend / WebGL Developer</div>
                  <div class="followers">
                    <span class="count">3,285</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  Just one name: <em>@bruno_simon</em> <br />And his online
                  course: <em>https://threejs-journey.com</em>
                </p>
                <p>
                  Super well explained and it covers a large scope of different
                  levels of difficulties. One of the best investment you could
                  do ✌️
                </p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/aqro/status/1511052234762723334"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet<span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
          <div class="item is-ayamflow">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/ayamflow.webp"
                  alt="Florian Morel"
                />
                <div class="details">
                  <div class="name">Florian Morel</div>
                  <div class="job">Freelance creative Developer</div>
                  <div class="followers">
                    <span class="count">3,258</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  Probably the most complete threejs course out there, wish I
                  had this when I started.
                  <br />And it has a text version as well!
                </p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/ayamflow/status/1351513683613126656"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet<span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
          <div class="item is-ameliemaiaa">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/ameliemaiaa.webp"
                  alt="Amelie Maia"
                />
                <div class="details">
                  <div class="name">Amelie Maia</div>
                  <div class="job">Creative Developer @otherlifexyz</div>
                  <div class="followers">
                    <span class="count">2,750</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  We’re so lucky we have people like
                  <em>@bruno_simon</em> spending the time to make this content
                  for others to learn. 🙌🏻
                </p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/ameliemaiaa/status/1351619014779404291"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet<span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
          <div class="item is-jtruk">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/jtruk.webp"
                  alt="Jtruk"
                />
                <div class="details">
                  <div class="name">Jtruk</div>
                  <div class="job">Demoscene Artist</div>
                  <div class="followers">
                    <span class="count">1,703</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  I can thoroughly recommend <em>@bruno_simon</em>'s
                  <em>#ThreejsJourney</em> video course. It covers: setup,
                  primitives, debug, animation, basic physics, shaders,
                  optimisations, a starter guide to Blender, and baked scenes.
                  <br />Each lesson is purposeful and builds something.
                </p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/jtruk/status/1488623469927571458"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet<span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
          <div class="item is-th_ebenezer">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/th_ebenezer.webp"
                  alt="thebenezer"
                />
                <div class="details">
                  <div class="name">thebenezer</div>
                  <div class="job">Creative Developer</div>
                  <div class="followers">
                    <span class="count">1,649</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  Guess what! I got my hands on Threejs Journey by the
                  incredible <em>@bruno_simon</em> a while back to master r3f!🎉
                  Although I've worked on r3f projects in the past, I've been
                  eager to learn more! Boy oh boy, is Bruno an amazing
                  teacher!🤩 I absolutely loved the lesson on Textures!😍
                </p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/th_ebenezer/status/1681889606382534657"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet<span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
          <div class="item is-3d_visionary">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/3d_visionary.webp"
                  alt="Visionary 3D"
                />
                <div class="details">
                  <div class="name">Visionary 3D</div>
                  <div class="job">3D Teacher (YouTube)</div>
                  <div class="followers">
                    <span class="count">1,388</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  #threejsJourney is the best course I've learned from in my
                  life.
                </p>
                <p>
                  Even though my knowledge has expanded, I still think it's had
                  the most impact on my learning journey.
                </p>
                <p>
                  I'll always be grateful for the work of <em>@bruno_simon</em>.
                </p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/3d_visionary/status/1684568745447153666"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet<span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
          <div class="item is-im_Charp">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/im_Charp.webp"
                  alt="Martin Charpentier"
                />
                <div class="details">
                  <div class="name">Martin Charpentier</div>
                  <div class="job">Founder &amp; Designer @source_paris</div>
                  <div class="followers">
                    <span class="count">1,299</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  I have been teaching alongside <em>@bruno_simon</em> for many
                  years and I can tell he is one of the most passionated mentor
                  you can find. So if you want to master ThreeJS there is only
                  one place 👇
                </p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/im_Charp/status/1351680627297423361"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet<span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
          <div class="item is-Axiome_CG">
            <div class="info">
              <div class="author">
                <img
                  class="illustration"
                  src="/assets/images/testimonies/Axiome_CG.webp"
                  alt="Adam NAILI"
                />
                <div class="details">
                  <div class="name">Adam NAILI</div>
                  <div class="job">Creative Developer</div>
                  <div class="followers">
                    <span class="count">749</span> followers
                  </div>
                </div>
              </div>
              <div class="message">
                <p>
                  Found a job as <em>#threejs</em> Developer for 6 months
                  recently. I'm one step closer to my goal of becoming a
                  Creative developer. And it is mostly thanks to
                  <em>@bruno_simon</em> and his course. It is the most
                  profitable 95 bucks I ever spent. <br />Thank you Bruno 🔥
                </p>
              </div>
            </div>
            <a
              class="link"
              href="https://twitter.com/Axiome_CG/status/1560665463067398144"
              target="_blank"
              rel="noopener noreferrer"
              >Open tweet/xeet<span class="arrow"
                ><svg
                  width="11"
                  height="7"
                  viewBox="0 0 11 7"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                    fill="white"
                  ></path>
                </svg> </span
            ></a>
          </div>
        </div>
      </div>
    </section>
    <section
      class="presentation js-anchor is-anchor-set"
      data-main-section=""
      id="presentation"
      data-slug="presentation"
    >
      <div class="content">
        <div class="section-title">The only course you need</div>

        <div class="description">
          <p>
            Three.js Journey is the <strong>most complete</strong>, yet
            <strong>accessible</strong> course you can find.
          </p>
          <p>
            You will start by discovering what <strong>WebGL</strong> is and why
            using the <strong>Three.js</strong> library is a must. You will then
            discover the various components of Three.js and once the
            <strong>basics</strong> are acquired, you will move on to more
            <strong>advanced techniques</strong> and build up
            <strong>experience</strong> through tons of exercises.
          </p>
          <p>
            At the end of the course, you will have enough experience and skills
            to <strong>create your own projects</strong>.
          </p>
        </div>

        <div class="js-stats numbers">
          <div class="number">
            <div class="js-value value">7</div>
            <div class="label">
              Chapters
              <span class="icon is-book"
                ><svg
                  width="19"
                  height="21"
                  viewBox="0 0 19 21"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M17.9846 14.0692H3.95385C2.32248 14.0692 1 15.3917 1 17.0231M17.9846 14.0692V18.5C17.9846 19.3157 17.3234 19.9769 16.5077 19.9769H3.95385C2.32248 19.9769 1 18.6544 1 17.0231M17.9846 14.0692V2.47692C17.9846 1.66124 17.3234 1 16.5077 1H5.8M1 17.0231V3.95385C1 2.32248 2.32248 1 3.95385 1H5.8M9.54969 5.43077H13.6M9.54969 9.86154H13.6M5.8 14.2V1"
                    stroke="white"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                </svg>
              </span>
            </div>
            <div class="radial-glow"></div>
          </div>
          <div class="number">
            <div class="js-value value">66</div>
            <div class="label">
              Lessons
              <span class="icon is-paper-lines"
                ><svg
                  width="18"
                  height="21"
                  viewBox="0 0 18 21"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12.0175 1.5V4.875C12.0175 5.49632 12.5341 6 13.1714 6H16.6328M14.9021 3.1875C14.3886 2.73951 13.8557 2.20817 13.5193 1.86307C13.2954 1.63344 12.9861 1.5 12.6612 1.5H3.94054C2.66607 1.5 1.63291 2.50735 1.6329 3.74999L1.63281 17.2499C1.6328 18.4926 2.66596 19.5 3.94044 19.5L14.3249 19.5C15.5993 19.5 16.6325 18.4927 16.6325 17.2501L16.6328 5.32297C16.6328 5.03531 16.5203 4.75879 16.3155 4.55169C15.9369 4.16873 15.3046 3.53861 14.9021 3.1875Z"
                    stroke="white"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                </svg>
              </span>
            </div>
            <div class="radial-glow"></div>
          </div>
          <div class="number">
            <div class="js-value value">93</div>
            <div class="label">
              Hours <span class="optional">of tutorial</span>
              <span class="icon is-player"
                ><svg
                  width="20"
                  height="14"
                  viewBox="0 0 20 14"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect
                    x="1"
                    y="1"
                    width="18"
                    height="12"
                    rx="2"
                    stroke="white"
                    stroke-width="2"
                  ></rect>
                  <path
                    d="M8.33008 5.43748C8.33008 4.5697 9.43448 4.13512 10.0804 4.74873L11.7253 6.31143C12.1257 6.69182 12.1257 7.30854 11.7253 7.68893L10.0804 9.25163C9.43448 9.86524 8.33008 9.43066 8.33008 8.56288V7.00018V5.43748Z"
                    fill="white"
                  ></path>
                </svg>
              </span>
            </div>
            <div class="radial-glow"></div>
          </div>
        </div>
      </div>
    </section>
    <section
      class="summary clear-selection js-anchor js-summary is-anchor-set"
      data-main-section=""
      id="summary"
      data-slug="summary"
    >
      <nav class="navigation js-navigation">
        <div class="mover">
          <a href="#" class="item js-item is-active">
            <span class="number">01</span>
          </a>
          <a href="#" class="item js-item">
            <span class="number">02</span>
          </a>
          <a href="#" class="item js-item">
            <span class="number">03</span>
          </a>
          <a href="#" class="item js-item">
            <span class="number">04</span>
          </a>
          <a href="#" class="item js-item">
            <span class="number">05</span>
          </a>
          <a href="#" class="item js-item">
            <span class="number">06</span>
          </a>
          <a href="#" class="item js-item">
            <span class="number">07</span>
          </a>
        </div>
      </nav>

      <div class="chapters js-chapters">
        <div class="chapter-container js-item">
          <div class="illustration">
            <div class="radial-glow"></div>
            <img
              class="js-lazy lazy is-loaded"
              src="/assets/images/chapters/chapter-01.webp"
              srcset="/assets/images/chapters/chapter-01@2x.webp 2x"
              alt="Basics 3D illustration"
            />
          </div>

          <div class="js-chapter chapter chapter-01" data-index="01">
            <h3 class="section-title element delay-1">Basics</h3>
            <div class="information element delay-3">
              <span class="format-icon"
                ><svg
                  width="18"
                  height="25"
                  viewBox="0 0 18 25"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M6 16.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M6 19.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M1 3.04687C1 4.15144 1.89543 5.04688 3 5.04688H17V1.12851C17 1.08342 16.9635 1.04687 16.9184 1.04687H3C1.89543 1.04687 1 1.94231 1 3.04687V3.04687Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M11 10.9288L13 9.92884V6.04688H9V9.92884L11 10.9288Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M1 3.04688V21.0469C1 22.1514 1.89543 23.0469 3 23.0469H16C16.5523 23.0469 17 22.5992 17 22.0469V3.04688"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                </svg>
              </span>
              13 lessons — 10h 12m&nbsp;<span class="optional">
                of tutorial</span
              >
            </div>
            <div class="description element delay-2">
              <p>
                Create your first scene and understand fundamentals like
                <strong>cameras</strong>, <strong>geometries</strong>,
                <strong>materials</strong>, <strong>textures</strong>. <br />Add
                a <strong>debug panel</strong>,
                <strong>animate</strong> everything and put your project online.
              </p>
            </div>
            <div class="lessons">
              <a
                class="lesson element delay-4"
                href="https://threejs-journey.com/lessons/introduction"
                data-router-disabled=""
              >
                <div class="column lesson-number">01</div>
                <div class="column lesson-title-badges">
                  <div class="title">Introduction</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">35m</div>
              </a>
              <a
                class="lesson element delay-5"
                href="https://threejs-journey.com/lessons/what-is-webgl-and-why-use-three-js"
                data-router-disabled=""
              >
                <div class="column lesson-number">02</div>
                <div class="column lesson-title-badges">
                  <div class="title">What is WebGL and why use Three.js</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">23m</div>
              </a>
              <a
                class="lesson element delay-6"
                href="https://threejs-journey.com/lessons/first-threejs-project"
                data-router-disabled=""
              >
                <div class="column lesson-number">03</div>
                <div class="column lesson-title-badges">
                  <div class="title">First Three.js Project</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 19m</div>
              </a>
              <a
                class="lesson element delay-7"
                href="https://threejs-journey.com/lessons/transform-objects"
                data-router-disabled=""
              >
                <div class="column lesson-number">04</div>
                <div class="column lesson-title-badges">
                  <div class="title">Transform objects</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">46m</div>
              </a>
              <a
                class="lesson element delay-8"
                href="https://threejs-journey.com/lessons/animations"
                data-router-disabled=""
              >
                <div class="column lesson-number">05</div>
                <div class="column lesson-title-badges">
                  <div class="title">Animations</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">30m</div>
              </a>
              <a
                class="lesson element delay-9"
                href="https://threejs-journey.com/lessons/cameras"
                data-router-disabled=""
              >
                <div class="column lesson-number">06</div>
                <div class="column lesson-title-badges">
                  <div class="title">Cameras</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">57m</div>
              </a>
              <a
                class="lesson element delay-10"
                href="https://threejs-journey.com/lessons/fullscreen-and-resizing"
                data-router-disabled=""
              >
                <div class="column lesson-number">07</div>
                <div class="column lesson-title-badges">
                  <div class="title">Fullscreen and resizing</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">30m</div>
              </a>
              <a
                class="lesson element delay-11"
                href="https://threejs-journey.com/lessons/geometries"
                data-router-disabled=""
              >
                <div class="column lesson-number">08</div>
                <div class="column lesson-title-badges">
                  <div class="title">Geometries</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">35m</div>
              </a>
              <a
                class="lesson element delay-12"
                href="https://threejs-journey.com/lessons/debug-ui"
                data-router-disabled=""
              >
                <div class="column lesson-number">09</div>
                <div class="column lesson-title-badges">
                  <div class="title">Debug UI</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">48m</div>
              </a>
              <a
                class="lesson element delay-13"
                href="https://threejs-journey.com/lessons/textures"
                data-router-disabled=""
              >
                <div class="column lesson-number">10</div>
                <div class="column lesson-title-badges">
                  <div class="title">Textures</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 14m</div>
              </a>
              <a
                class="lesson element delay-14"
                href="https://threejs-journey.com/lessons/materials"
                data-router-disabled=""
              >
                <div class="column lesson-number">11</div>
                <div class="column lesson-title-badges">
                  <div class="title">Materials</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 21m</div>
              </a>
              <a
                class="lesson element delay-15"
                href="https://threejs-journey.com/lessons/3d-text"
                data-router-disabled=""
              >
                <div class="column lesson-number">12</div>
                <div class="column lesson-title-badges">
                  <div class="title">3D Text</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">44m</div>
              </a>
              <a
                class="lesson element delay-16"
                href="https://threejs-journey.com/lessons/go-live"
                data-router-disabled=""
              >
                <div class="column lesson-number">13</div>
                <div class="column lesson-title-badges">
                  <div class="title">Go live</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">24m</div>
              </a>
            </div>
          </div>
        </div>
        <div class="chapter-container js-item">
          <div class="illustration">
            <div class="radial-glow"></div>
            <img
              class="js-lazy lazy is-loaded"
              src="/assets/images/chapters/chapter-02.webp"
              srcset="/assets/images/chapters/chapter-02@2x.webp 2x"
              alt="Classic techniques 3D illustration"
            />
          </div>

          <div class="js-chapter chapter chapter-02" data-index="02">
            <h3 class="section-title element delay-1">Classic techniques</h3>
            <div class="information element delay-3">
              <span class="format-icon"
                ><svg
                  width="18"
                  height="25"
                  viewBox="0 0 18 25"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M6 16.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M6 19.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M1 3.04687C1 4.15144 1.89543 5.04688 3 5.04688H17V1.12851C17 1.08342 16.9635 1.04687 16.9184 1.04687H3C1.89543 1.04687 1 1.94231 1 3.04687V3.04687Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M11 10.9288L13 9.92884V6.04688H9V9.92884L11 10.9288Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M1 3.04688V21.0469C1 22.1514 1.89543 23.0469 3 23.0469H16C16.5523 23.0469 17 22.5992 17 22.0469V3.04688"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                </svg>
              </span>
              6 lessons — 7h 55m&nbsp;<span class="optional"> of tutorial</span>
            </div>
            <div class="description element delay-2">
              <p>
                Illuminate your scene with various
                <strong>lights</strong> casting <strong>shadows</strong>, create
                millions of <strong>particles</strong> and
                <strong>animate on scroll</strong>.
              </p>
            </div>
            <div class="lessons">
              <a
                class="lesson element delay-4"
                href="https://threejs-journey.com/lessons/lights"
                data-router-disabled=""
              >
                <div class="column lesson-number">14</div>
                <div class="column lesson-title-badges">
                  <div class="title">Lights</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">42m</div>
              </a>
              <a
                class="lesson element delay-5"
                href="https://threejs-journey.com/lessons/shadows"
                data-router-disabled=""
              >
                <div class="column lesson-number">15</div>
                <div class="column lesson-title-badges">
                  <div class="title">Shadows</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 00m</div>
              </a>
              <a
                class="lesson element delay-6"
                href="https://threejs-journey.com/lessons/haunted-house"
                data-router-disabled=""
              >
                <div class="column lesson-number">16</div>
                <div class="column lesson-title-badges">
                  <div class="title">Haunted House</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">2h 50m</div>
              </a>
              <a
                class="lesson element delay-7"
                href="https://threejs-journey.com/lessons/particles"
                data-router-disabled=""
              >
                <div class="column lesson-number">17</div>
                <div class="column lesson-title-badges">
                  <div class="title">Particles</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">49m</div>
              </a>
              <a
                class="lesson element delay-8"
                href="https://threejs-journey.com/lessons/galaxy-generator"
                data-router-disabled=""
              >
                <div class="column lesson-number">18</div>
                <div class="column lesson-title-badges">
                  <div class="title">Galaxy Generator</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 08m</div>
              </a>
              <a
                class="lesson element delay-9"
                href="https://threejs-journey.com/lessons/scroll-based-animation"
                data-router-disabled=""
              >
                <div class="column lesson-number">19</div>
                <div class="column lesson-title-badges">
                  <div class="title">Scroll based animation</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 23m</div>
              </a>
            </div>
          </div>
        </div>
        <div class="chapter-container js-item">
          <div class="illustration">
            <div class="radial-glow"></div>
            <img
              class="js-lazy lazy is-loaded"
              src="/assets/images/chapters/chapter-03.webp"
              srcset="/assets/images/chapters/chapter-03@2x.webp 2x"
              alt="Advanced techniques 3D illustration"
            />
          </div>

          <div class="js-chapter chapter chapter-03" data-index="03">
            <h3 class="section-title element delay-1">Advanced techniques</h3>
            <div class="information element delay-3">
              <span class="format-icon"
                ><svg
                  width="18"
                  height="25"
                  viewBox="0 0 18 25"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M6 16.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M6 19.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M1 3.04687C1 4.15144 1.89543 5.04688 3 5.04688H17V1.12851C17 1.08342 16.9635 1.04687 16.9184 1.04687H3C1.89543 1.04687 1 1.94231 1 3.04687V3.04687Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M11 10.9288L13 9.92884V6.04688H9V9.92884L11 10.9288Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M1 3.04688V21.0469C1 22.1514 1.89543 23.0469 3 23.0469H16C16.5523 23.0469 17 22.5992 17 22.0469V3.04688"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                </svg>
              </span>
              7 lessons — 12h 29m&nbsp;<span class="optional">
                of tutorial</span
              >
            </div>
            <div class="description element delay-2">
              <p>
                Make your world even more realistic with
                <strong>physics</strong>, then import your own model made with
                <strong>Blender</strong>, make it look as
                <strong>realistic</strong> as possible and learn how to
                <strong>structure</strong> your code for more
                <strong>complex project</strong>.
              </p>
            </div>
            <div class="lessons">
              <a
                class="lesson element delay-4"
                href="https://threejs-journey.com/lessons/physics"
                data-router-disabled=""
              >
                <div class="column lesson-number">20</div>
                <div class="column lesson-title-badges">
                  <div class="title">Physics</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 57m</div>
              </a>
              <a
                class="lesson element delay-5"
                href="https://threejs-journey.com/lessons/imported-models"
                data-router-disabled=""
              >
                <div class="column lesson-number">21</div>
                <div class="column lesson-title-badges">
                  <div class="title">Imported models</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 07m</div>
              </a>
              <a
                class="lesson element delay-6"
                href="https://threejs-journey.com/lessons/raycaster-and-mouse-events"
                data-router-disabled=""
              >
                <div class="column lesson-number">22</div>
                <div class="column lesson-title-badges">
                  <div class="title">Raycaster and Mouse Events</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 07m</div>
              </a>
              <a
                class="lesson element delay-7"
                href="https://threejs-journey.com/lessons/custom-models-with-blender"
                data-router-disabled=""
              >
                <div class="column lesson-number">23</div>
                <div class="column lesson-title-badges">
                  <div class="title">Custom models with Blender</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 59m</div>
              </a>
              <a
                class="lesson element delay-8"
                href="https://threejs-journey.com/lessons/environment-map"
                data-router-disabled=""
              >
                <div class="column lesson-number">24</div>
                <div class="column lesson-title-badges">
                  <div class="title">Environment map</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 44m</div>
              </a>
              <a
                class="lesson element delay-9"
                href="https://threejs-journey.com/lessons/realistic-render"
                data-router-disabled=""
              >
                <div class="column lesson-number">25</div>
                <div class="column lesson-title-badges">
                  <div class="title">Realistic render</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 12m</div>
              </a>
              <a
                class="lesson element delay-10"
                href="https://threejs-journey.com/lessons/code-structuring-for-bigger-projects"
                data-router-disabled=""
              >
                <div class="column lesson-number">26</div>
                <div class="column lesson-title-badges">
                  <div class="title">Code structuring for bigger projects</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">3h 19m</div>
              </a>
            </div>
          </div>
        </div>
        <div class="chapter-container js-item">
          <div class="illustration">
            <div class="radial-glow"></div>
            <img
              class="js-lazy lazy is-loaded"
              src="/assets/images/chapters/chapter-04.webp"
              srcset="/assets/images/chapters/chapter-04@2x.webp 2x"
              alt="Shaders 3D illustration"
            />
          </div>

          <div class="js-chapter chapter chapter-04" data-index="04">
            <h3 class="section-title element delay-1">Shaders</h3>
            <div class="information element delay-3">
              <span class="format-icon"
                ><svg
                  width="18"
                  height="25"
                  viewBox="0 0 18 25"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M6 16.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M6 19.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M1 3.04687C1 4.15144 1.89543 5.04688 3 5.04688H17V1.12851C17 1.08342 16.9635 1.04687 16.9184 1.04687H3C1.89543 1.04687 1 1.94231 1 3.04687V3.04687Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M11 10.9288L13 9.92884V6.04688H9V9.92884L11 10.9288Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M1 3.04688V21.0469C1 22.1514 1.89543 23.0469 3 23.0469H16C16.5523 23.0469 17 22.5992 17 22.0469V3.04688"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                </svg>
              </span>
              18 lessons — 26h 24m&nbsp;<span class="optional">
                of tutorial</span
              >
            </div>
            <div class="description element delay-2">
              <p>
                Using <strong>Three.js</strong> materials is great but creating
                your own is even better. <br />Master <strong>GLSL</strong>, the
                <strong>shaders</strong> language, to create unseen effects and
                learn how to enhance and improve existing materials.
              </p>
            </div>
            <div class="lessons">
              <a
                class="lesson element delay-4"
                href="https://threejs-journey.com/lessons/shaders"
                data-router-disabled=""
              >
                <div class="column lesson-number">27</div>
                <div class="column lesson-title-badges">
                  <div class="title">Shaders</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">2h 17m</div>
              </a>
              <a
                class="lesson element delay-5"
                href="https://threejs-journey.com/lessons/shader-patterns"
                data-router-disabled=""
              >
                <div class="column lesson-number">28</div>
                <div class="column lesson-title-badges">
                  <div class="title">Shader patterns</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 49m</div>
              </a>
              <a
                class="lesson element delay-6"
                href="https://threejs-journey.com/lessons/raging-sea"
                data-router-disabled=""
              >
                <div class="column lesson-number">29</div>
                <div class="column lesson-title-badges">
                  <div class="title">Raging sea</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 15m</div>
              </a>
              <a
                class="lesson element delay-7"
                href="https://threejs-journey.com/lessons/animated-galaxy"
                data-router-disabled=""
              >
                <div class="column lesson-number">30</div>
                <div class="column lesson-title-badges">
                  <div class="title">Animated galaxy</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 14m</div>
              </a>
              <a
                class="lesson element delay-8"
                href="https://threejs-journey.com/lessons/modified-materials"
                data-router-disabled=""
              >
                <div class="column lesson-number">31</div>
                <div class="column lesson-title-badges">
                  <div class="title">Modified materials</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">51m</div>
              </a>
              <a
                class="lesson element delay-9"
                href="https://threejs-journey.com/lessons/coffee-smoke-shader"
                data-router-disabled=""
              >
                <div class="column lesson-number">32</div>
                <div class="column lesson-title-badges">
                  <div class="title">Coffee Smoke</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">1h 25m</div>
              </a>
              <a
                class="lesson element delay-10"
                href="https://threejs-journey.com/lessons/hologram-shader"
                data-router-disabled=""
              >
                <div class="column lesson-number">33</div>
                <div class="column lesson-title-badges">
                  <div class="title">Hologram</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">1h 21m</div>
              </a>
              <a
                class="lesson element delay-11"
                href="https://threejs-journey.com/lessons/fireworks-shaders"
                data-router-disabled=""
              >
                <div class="column lesson-number">34</div>
                <div class="column lesson-title-badges">
                  <div class="title">Fireworks</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">1h 47m</div>
              </a>
              <a
                class="lesson element delay-12"
                href="https://threejs-journey.com/lessons/lights-shading-shaders"
                data-router-disabled=""
              >
                <div class="column lesson-number">35</div>
                <div class="column lesson-title-badges">
                  <div class="title">Lights Shading</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">1h 17m</div>
              </a>
              <a
                class="lesson element delay-13"
                href="https://threejs-journey.com/lessons/raging-sea-shading-shaders"
                data-router-disabled=""
              >
                <div class="column lesson-number">36</div>
                <div class="column lesson-title-badges">
                  <div class="title">Raging Sea Shading</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">57m</div>
              </a>
              <a
                class="lesson element delay-14"
                href="https://threejs-journey.com/lessons/halftone-shading-shaders"
                data-router-disabled=""
              >
                <div class="column lesson-number">37</div>
                <div class="column lesson-title-badges">
                  <div class="title">Halftone Shading</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">56m</div>
              </a>
              <a
                class="lesson element delay-15"
                href="https://threejs-journey.com/lessons/earth-shaders"
                data-router-disabled=""
              >
                <div class="column lesson-number">38</div>
                <div class="column lesson-title-badges">
                  <div class="title">Earth</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">1h 40m</div>
              </a>
              <a
                class="lesson element delay-16"
                href="https://threejs-journey.com/lessons/particles-cursor-animation-shader"
                data-router-disabled=""
              >
                <div class="column lesson-number">39</div>
                <div class="column lesson-title-badges">
                  <div class="title">Particles Cursor Animation</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">1h 48m</div>
              </a>
              <a
                class="lesson element delay-17"
                href="https://threejs-journey.com/lessons/particles-morphing-shader"
                data-router-disabled=""
              >
                <div class="column lesson-number">40</div>
                <div class="column lesson-title-badges">
                  <div class="title">Particles Morphing</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">1h 35m</div>
              </a>
              <a
                class="lesson element delay-18"
                href="https://threejs-journey.com/lessons/gpgpu-flow-field-particles-shaders"
                data-router-disabled=""
              >
                <div class="column lesson-number">41</div>
                <div class="column lesson-title-badges">
                  <div class="title">GPGPU Flow Field Particles</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">2h 22m</div>
              </a>
              <a
                class="lesson element delay-19"
                href="https://threejs-journey.com/lessons/wobbly-sphere-shader"
                data-router-disabled=""
              >
                <div class="column lesson-number">42</div>
                <div class="column lesson-title-badges">
                  <div class="title">Wobbly Sphere</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">1h 16m</div>
              </a>
              <a
                class="lesson element delay-20"
                href="https://threejs-journey.com/lessons/sliced-model-shader"
                data-router-disabled=""
              >
                <div class="column lesson-number">43</div>
                <div class="column lesson-title-badges">
                  <div class="title">Sliced Model</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">1h 03m</div>
              </a>
              <a
                class="lesson element delay-21"
                href="https://threejs-journey.com/lessons/procedural-terrain-shader"
                data-router-disabled=""
              >
                <div class="column lesson-number">44</div>
                <div class="column lesson-title-badges">
                  <div class="title">Procedural Terrain</div>
                  <div class="badges">
                    <span class="badge is-new">new</span>
                  </div>
                </div>
                <div class="column lesson-duration">1h 24m</div>
              </a>
            </div>
          </div>
        </div>
        <div class="chapter-container js-item">
          <div class="illustration">
            <div class="radial-glow"></div>
            <img
              class="js-lazy lazy is-loaded"
              src="/assets/images/chapters/chapter-05.webp"
              srcset="/assets/images/chapters/chapter-05@2x.webp 2x"
              alt="Extra 3D illustration"
            />
          </div>

          <div class="js-chapter chapter chapter-05" data-index="05">
            <h3 class="section-title element delay-1">Extra</h3>
            <div class="information element delay-3">
              <span class="format-icon"
                ><svg
                  width="18"
                  height="25"
                  viewBox="0 0 18 25"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M6 16.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M6 19.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M1 3.04687C1 4.15144 1.89543 5.04688 3 5.04688H17V1.12851C17 1.08342 16.9635 1.04687 16.9184 1.04687H3C1.89543 1.04687 1 1.94231 1 3.04687V3.04687Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M11 10.9288L13 9.92884V6.04688H9V9.92884L11 10.9288Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M1 3.04688V21.0469C1 22.1514 1.89543 23.0469 3 23.0469H16C16.5523 23.0469 17 22.5992 17 22.0469V3.04688"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                </svg>
              </span>
              4 lessons — 4h 37m&nbsp;<span class="optional"> of tutorial</span>
            </div>
            <div class="description element delay-2">
              <p>
                Use your <strong>shaders</strong> knowledge to go even further
                and try new techniques. <br />But it's also important to make
                sure your projects are working on most devices by monitoring and
                <strong>optimising performance</strong>.
              </p>
            </div>
            <div class="lessons">
              <a
                class="lesson element delay-4"
                href="https://threejs-journey.com/lessons/post-processing"
                data-router-disabled=""
              >
                <div class="column lesson-number">45</div>
                <div class="column lesson-title-badges">
                  <div class="title">Post-processing</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 36m</div>
              </a>
              <a
                class="lesson element delay-5"
                href="https://threejs-journey.com/lessons/performance-tips"
                data-router-disabled=""
              >
                <div class="column lesson-number">46</div>
                <div class="column lesson-title-badges">
                  <div class="title">Performance tips</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 12m</div>
              </a>
              <a
                class="lesson element delay-6"
                href="https://threejs-journey.com/lessons/intro-and-loading-progress"
                data-router-disabled=""
              >
                <div class="column lesson-number">47</div>
                <div class="column lesson-title-badges">
                  <div class="title">Intro and loading progress</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">49m</div>
              </a>
              <a
                class="lesson element delay-7"
                href="https://threejs-journey.com/lessons/mixing-html-and-webgl"
                data-router-disabled=""
              >
                <div class="column lesson-number">48</div>
                <div class="column lesson-title-badges">
                  <div class="title">Mixing HTML and WebGL</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">58m</div>
              </a>
            </div>
          </div>
        </div>
        <div class="chapter-container js-item">
          <div class="illustration">
            <div class="radial-glow"></div>
            <img
              class="js-lazy lazy is-loaded"
              src="/assets/images/chapters/chapter-06.webp"
              srcset="/assets/images/chapters/chapter-06@2x.webp 2x"
              alt="Portal Scene 3D illustration"
            />
          </div>

          <div class="js-chapter chapter chapter-06" data-index="06">
            <h3 class="section-title element delay-1">Portal Scene</h3>
            <div class="information element delay-3">
              <span class="format-icon"
                ><svg
                  width="18"
                  height="25"
                  viewBox="0 0 18 25"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M6 16.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M6 19.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M1 3.04687C1 4.15144 1.89543 5.04688 3 5.04688H17V1.12851C17 1.08342 16.9635 1.04687 16.9184 1.04687H3C1.89543 1.04687 1 1.94231 1 3.04687V3.04687Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M11 10.9288L13 9.92884V6.04688H9V9.92884L11 10.9288Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M1 3.04688V21.0469C1 22.1514 1.89543 23.0469 3 23.0469H16C16.5523 23.0469 17 22.5992 17 22.0469V3.04688"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                </svg>
              </span>
              4 lessons — 6h 38m&nbsp;<span class="optional"> of tutorial</span>
            </div>
            <div class="description element delay-2">
              <p>
                Learn how to create a cool scene using
                <strong>Blender</strong> and discover the
                <strong>baking technique</strong> to get the best looking lights
                and shadows.
              </p>
            </div>
            <div class="lessons">
              <a
                class="lesson element delay-4"
                href="https://threejs-journey.com/lessons/creating-a-scene-in-blender"
                data-router-disabled=""
              >
                <div class="column lesson-number">49</div>
                <div class="column lesson-title-badges">
                  <div class="title">Creating a scene in Blender</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">2h 04m</div>
              </a>
              <a
                class="lesson element delay-5"
                href="https://threejs-journey.com/lessons/baking-and-exporting-the-scene"
                data-router-disabled=""
              >
                <div class="column lesson-number">50</div>
                <div class="column lesson-title-badges">
                  <div class="title">Baking and exporting the scene</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">2h 11m</div>
              </a>
              <a
                class="lesson element delay-6"
                href="https://threejs-journey.com/lessons/importing-and-optimizing-the-scene"
                data-router-disabled=""
              >
                <div class="column lesson-number">51</div>
                <div class="column lesson-title-badges">
                  <div class="title">Importing and optimizing the scene</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">46m</div>
              </a>
              <a
                class="lesson element delay-7"
                href="https://threejs-journey.com/lessons/adding-details-to-the-scene"
                data-router-disabled=""
              >
                <div class="column lesson-number">52</div>
                <div class="column lesson-title-badges">
                  <div class="title">Adding details to the scene</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 34m</div>
              </a>
            </div>
          </div>
        </div>
        <div class="chapter-container js-item">
          <div class="illustration">
            <div class="radial-glow"></div>
            <img
              class="js-lazy lazy is-loaded"
              src="/assets/images/chapters/chapter-07.webp"
              srcset="/assets/images/chapters/chapter-07@2x.webp 2x"
              alt="React Three Fiber 3D illustration"
            />
          </div>

          <div class="js-chapter chapter chapter-07" data-index="07">
            <h3 class="section-title element delay-1">React Three Fiber</h3>
            <div class="information element delay-3">
              <span class="format-icon"
                ><svg
                  width="18"
                  height="25"
                  viewBox="0 0 18 25"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M6 16.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M6 19.0469H13"
                    stroke="#ffffff"
                    stroke-width="2"
                    stroke-linecap="round"
                  ></path>
                  <path
                    d="M1 3.04687C1 4.15144 1.89543 5.04688 3 5.04688H17V1.12851C17 1.08342 16.9635 1.04687 16.9184 1.04687H3C1.89543 1.04687 1 1.94231 1 3.04687V3.04687Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M11 10.9288L13 9.92884V6.04688H9V9.92884L11 10.9288Z"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                  <path
                    d="M1 3.04688V21.0469C1 22.1514 1.89543 23.0469 3 23.0469H16C16.5523 23.0469 17 22.5992 17 22.0469V3.04688"
                    stroke="#ffffff"
                    stroke-width="2"
                  ></path>
                </svg>
              </span>
              14 lessons — 23h 59m&nbsp;<span class="optional">
                of tutorial</span
              >
            </div>
            <div class="description element delay-2">
              <p>
                Did you know that <strong>Three.js</strong> integrates well in
                <strong>React</strong>? <br />Thanks to
                <strong>React Three Fiber</strong> (<strong>R3F</strong>) you
                can create awesome <strong>Three.js</strong> experiences in
                <strong>React</strong> with just a few lines of code.
              </p>
            </div>
            <div class="lessons">
              <a
                class="lesson element delay-4"
                href="https://threejs-journey.com/lessons/what-are-react-and-react-three-fiber"
                data-router-disabled=""
              >
                <div class="column lesson-number">53</div>
                <div class="column lesson-title-badges">
                  <div class="title">What are React and React Three Fiber</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">25m</div>
              </a>
              <a
                class="lesson element delay-5"
                href="https://threejs-journey.com/lessons/first-react-application"
                data-router-disabled=""
              >
                <div class="column lesson-number">54</div>
                <div class="column lesson-title-badges">
                  <div class="title">First React Application</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">4h 23m</div>
              </a>
              <a
                class="lesson element delay-6"
                href="https://threejs-journey.com/lessons/first-r3f-application"
                data-router-disabled=""
              >
                <div class="column lesson-number">55</div>
                <div class="column lesson-title-badges">
                  <div class="title">First R3F Application</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">2h 05m</div>
              </a>
              <a
                class="lesson element delay-7"
                href="https://threejs-journey.com/lessons/r3f-drei"
                data-router-disabled=""
              >
                <div class="column lesson-number">56</div>
                <div class="column lesson-title-badges">
                  <div class="title">Drei</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 14m</div>
              </a>
              <a
                class="lesson element delay-8"
                href="https://threejs-journey.com/lessons/debug-a-r3f-application"
                data-router-disabled=""
              >
                <div class="column lesson-number">57</div>
                <div class="column lesson-title-badges">
                  <div class="title">Debug</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">51m</div>
              </a>
              <a
                class="lesson element delay-9"
                href="https://threejs-journey.com/lessons/environment-and-staging-with-r3f"
                data-router-disabled=""
              >
                <div class="column lesson-number">58</div>
                <div class="column lesson-title-badges">
                  <div class="title">Environment and Staging</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">2h 02m</div>
              </a>
              <a
                class="lesson element delay-10"
                href="https://threejs-journey.com/lessons/load-models-with-r3f"
                data-router-disabled=""
              >
                <div class="column lesson-number">59</div>
                <div class="column lesson-title-badges">
                  <div class="title">Load models</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 29m</div>
              </a>
              <a
                class="lesson element delay-11"
                href="https://threejs-journey.com/lessons/3d-text-with-r3f"
                data-router-disabled=""
              >
                <div class="column lesson-number">60</div>
                <div class="column lesson-title-badges">
                  <div class="title">3D Text</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">59m</div>
              </a>
              <a
                class="lesson element delay-12"
                href="https://threejs-journey.com/lessons/portal-scene-with-r3f"
                data-router-disabled=""
              >
                <div class="column lesson-number">61</div>
                <div class="column lesson-title-badges">
                  <div class="title">Portal Scene</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">41m</div>
              </a>
              <a
                class="lesson element delay-13"
                href="https://threejs-journey.com/lessons/mouse-events-with-r3f"
                data-router-disabled=""
              >
                <div class="column lesson-number">62</div>
                <div class="column lesson-title-badges">
                  <div class="title">Mouse Events</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">47m</div>
              </a>
              <a
                class="lesson element delay-14"
                href="https://threejs-journey.com/lessons/post-processing-with-r3f"
                data-router-disabled=""
              >
                <div class="column lesson-number">63</div>
                <div class="column lesson-title-badges">
                  <div class="title">Post-processing</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">1h 54m</div>
              </a>
              <a
                class="lesson element delay-15"
                href="https://threejs-journey.com/lessons/fun-and-simple-portfolio-with-r3f"
                data-router-disabled=""
              >
                <div class="column lesson-number">64</div>
                <div class="column lesson-title-badges">
                  <div class="title">Fun and Simple Portfolio</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">51m</div>
              </a>
              <a
                class="lesson element delay-16"
                href="https://threejs-journey.com/lessons/physics-with-r3f"
                data-router-disabled=""
              >
                <div class="column lesson-number">65</div>
                <div class="column lesson-title-badges">
                  <div class="title">Physics</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">2h 11m</div>
              </a>
              <a
                class="lesson element delay-17"
                href="https://threejs-journey.com/lessons/create-a-game-with-r3f"
                data-router-disabled=""
              >
                <div class="column lesson-number">66</div>
                <div class="column lesson-title-badges">
                  <div class="title">Create a game</div>
                  <div class="badges"></div>
                </div>
                <div class="column lesson-duration">4h 01m</div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section
      class="bruno-simon js-anchor is-anchor-set"
      data-main-section=""
      id="bruno-simon"
      data-slug="bruno-simon"
    >
      <div class="content">
        <h2 class="section-title">
          Meet <strong>Bruno Simon</strong>
          <img
            class="js-lazy lazy hand is-loaded"
            width="50"
            height="50"
            src="/assets/images/hand-emoji-100x100.webp"
            alt="Hi emoji"
          />
        </h2>

        <div class="description">
          <p>
            Bruno Simon is a French
            <strong>creative developer</strong> specialized in WebGL. He has
            worked on many projects for
            <strong>worldwide renowned clients</strong> to create interactive 3D
            web experiences.
          </p>
          <p>
            Bruno has been teaching web development and WebGL in various
            <strong>schools</strong> for more than <strong>7 years</strong>,
            totaling more than <strong>700 real life students</strong> and
            making him a pedagogical trainer.
          </p>
        </div>

        <div class="social-links">
          <a
            class="link twitter"
            href="https://twitter.com/bruno_simon"
            target="_blank"
          >
            <span class="icon twitter-logo"
              ><svg
                width="24"
                height="20"
                viewBox="0 0 24 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M23.954 2.323C23.069 2.712 22.124 2.977 21.129 3.098C22.143 2.487 22.923 1.524 23.292 0.375C22.341 0.93 21.287 1.334 20.165 1.559C19.269 0.6 17.992 0 16.574 0C13.857 0 11.654 2.203 11.654 4.917C11.654 5.307 11.699 5.682 11.781 6.041C7.691 5.848 4.066 3.884 1.64 0.915C1.213 1.637 0.974 2.476 0.974 3.39C0.974 5.1 1.844 6.603 3.162 7.486C2.355 7.46 1.596 7.238 0.934 6.87V6.931C0.934 9.316 2.627 11.305 4.88 11.758C4.467 11.869 4.031 11.929 3.584 11.929C3.27 11.929 2.969 11.899 2.668 11.843C3.299 13.796 5.113 15.22 7.272 15.26C5.592 16.579 3.463 17.365 1.17 17.365C0.78 17.365 0.391 17.342 0 17.298C2.189 18.692 4.768 19.507 7.557 19.507C16.611 19.507 21.556 12.011 21.556 5.521C21.556 5.312 21.556 5.101 21.541 4.891C22.502 4.202 23.341 3.331 24.001 2.343L23.954 2.323Z"
                  fill="#1DA1F2"
                ></path>
              </svg>
            </span>
            <span class="number">
              <div class="value">61k</div>
            </span>
          </a>
          <a
            class="link github"
            href="https://github.com/brunosimon"
            target="_blank"
          >
            <span class="icon github-logo"
              ><svg
                width="26"
                height="25"
                viewBox="0 0 26 25"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12.8572 0C5.75361 0 0 5.73902 0 12.8175C0 18.4817 3.6836 23.2851 8.79113 24.978C9.43399 25.0987 9.66971 24.7024 9.66971 24.3617C9.66971 24.0573 9.65899 23.2509 9.65364 22.1828C6.07718 22.9561 5.32289 20.4631 5.32289 20.4631C4.73789 18.9837 3.89253 18.5885 3.89253 18.5885C2.72788 17.7938 3.98253 17.8099 3.98253 17.8099C5.27361 17.8996 5.95183 19.1301 5.95183 19.1301C7.09826 21.0901 8.96149 20.524 9.6965 20.196C9.81221 19.3672 10.1433 18.8021 10.5108 18.4817C7.65541 18.1613 4.65432 17.059 4.65432 12.1477C4.65432 10.7485 5.15254 9.60562 5.97754 8.7084C5.8329 8.38476 5.39897 7.08165 6.09004 5.31604C6.09004 5.31604 7.16683 4.97211 9.62578 6.62983C10.6544 6.34464 11.7472 6.20365 12.8401 6.19724C13.933 6.20365 15.0258 6.34464 16.0544 6.62983C18.4973 4.97211 19.5741 5.31604 19.5741 5.31604C20.2651 7.08165 19.8312 8.38476 19.7026 8.7084C20.5223 9.60562 21.0205 10.7485 21.0205 12.1477C21.0205 17.0718 18.0151 18.1559 15.1544 18.471C15.6044 18.8556 16.0223 19.6417 16.0223 20.8423C16.0223 22.5577 16.0062 23.9355 16.0062 24.3521C16.0062 24.6886 16.2312 25.0891 16.8901 24.9609C22.0341 23.2797 25.7145 18.4732 25.7145 12.8175C25.7145 5.73902 19.9576 0 12.8572 0Z"
                  fill="white"
                ></path>
              </svg>
            </span>
            <span class="number">
              <div class="value">17k</div>
            </span>
          </a>
          <a
            class="link linkedin"
            href="https://www.linkedin.com/in/simonbruno77/"
            target="_blank"
          >
            <span class="icon linkedin-logo"
              ><svg
                width="25"
                height="25"
                viewBox="0 0 25 25"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M21.2991 21.3043H17.597V15.5032C17.597 14.1199 17.5689 12.3397 15.6678 12.3397C13.7376 12.3397 13.4428 13.8449 13.4428 15.4011V21.3043H9.74069V9.37506H13.297V11.0011H13.3449C13.8418 10.0636 15.0501 9.07402 16.8553 9.07402C20.6064 9.07402 21.3001 11.5428 21.3001 14.7564V21.3043H21.2991ZM5.55941 7.74276C4.36774 7.74276 3.41044 6.77817 3.41044 5.5917C3.41044 4.40628 4.36878 3.44273 5.55941 3.44273C6.74692 3.44273 7.70943 4.40628 7.70943 5.5917C7.70943 6.77817 6.74588 7.74276 5.55941 7.74276ZM7.41568 21.3043H3.70315V9.37506H7.41568V21.3043ZM23.1512 0H1.8448C0.825006 0 0 0.806255 0 1.80105V23.1991C0 24.195 0.825006 25.0002 1.8448 25.0002H23.1481C24.1668 25.0002 25.0002 24.195 25.0002 23.1991V1.80105C25.0002 0.806255 24.1668 0 23.1481 0H23.1512Z"
                  fill="white"
                ></path>
              </svg>
            </span>
            <span class="number">
              <div class="value">4k</div>
            </span>
          </a>
        </div>

        <div class="photo">
          <span class="gradient"></span>
          <div class="image">
            <img
              class="js-lazy lazy bruno is-loaded"
              src="/assets/images/bruno.webp"
              srcset="/assets/images/bruno@2x.webp 2x"
              width="797"
              height="601"
              alt="Bruno Simon"
            />

            <div class="object sphere">
              <div class="placeholder"></div>
              <img
                class="js-lazy lazy is-loaded"
                src="/assets/images/sphere.webp"
                srcset="/assets/images/sphere@2x.webp 2x"
                width="200"
                height="200"
                alt="Ball"
              />
            </div>
            <div class="object pyramid">
              <div class="placeholder"></div>
              <img
                class="js-lazy lazy is-loaded"
                src="/assets/images/pyramid.webp"
                srcset="/assets/images/pyramid@2x.webp 2x"
                width="200"
                height="200"
                alt="Pyramid"
              />
            </div>
            <div class="object cube">
              <div class="placeholder"></div>
              <img
                class="js-lazy lazy is-loaded"
                src="/assets/images/cube.webp"
                srcset="/assets/images/cube@2x.webp 2x"
                width="200"
                height="200"
                alt="Cube"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="projects">
        <h3 class="sub-title">Some projects made by <strong>Bruno</strong></h3>

        <div class="draggable-slider js-draggable-slider" style="cursor: grab">
          <div
            class="mover js-mover js-projects"
            style="transform: translateX(50px)"
          >
            <a
              class="item js-project"
              href="https://chartogne-taillet.com"
              rel="noopener noreferrer"
              target="_blank"
              data-video="/assets/images/projects/chartogne.mp4"
            >
              <div class="radial-glow"></div>
              <div class="visual">
                <img
                  src="/assets/images/projects/chartogne.webp"
                  srcset="/assets/images/projects/chartogne@2x.webp 2x"
                  width="342"
                  height="236"
                  alt="Chartogne project"
                />
                <div class="video-placeholder js-video-placeholder"></div>
              </div>
              <div class="info">
                <div class="title-details">
                  <div class="title">Chartogne Taillet</div>
                  <div class="details">with Immersive Garden</div>
                </div>
                <div class="icon">
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 2H3C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H11C12.1046 14 13 13.1046 13 12V9"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M8 7L14 1"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M10 1H14V5"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                  </svg>
                </div>
              </div>
            </a>

            <a
              class="item js-project"
              href="https://madbox.io"
              rel="noopener noreferrer"
              target="_blank"
              data-video="/assets/images/projects/madbox.mp4"
            >
              <div class="radial-glow"></div>
              <div class="visual">
                <img
                  src="/assets/images/projects/madbox.webp"
                  srcset="/assets/images/projects/madbox@2x.webp 2x"
                  width="342"
                  height="236"
                  alt="Madbox project"
                />
                <div class="video-placeholder js-video-placeholder"></div>
              </div>
              <div class="info">
                <div class="title-details">
                  <div class="title">Madbox</div>
                  <div class="details">with Hervé Studio</div>
                </div>
                <div class="icon">
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 2H3C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H11C12.1046 14 13 13.1046 13 12V9"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M8 7L14 1"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M10 1H14V5"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                  </svg>
                </div>
              </div>
            </a>

            <a
              class="item js-project"
              href="https://bruno-simon.com"
              rel="noopener noreferrer"
              target="_blank"
              data-video="/assets/images/projects/brunoSimon.mp4"
            >
              <div class="radial-glow"></div>
              <div class="visual">
                <img
                  src="/assets/images/projects/brunoSimon.webp"
                  srcset="/assets/images/projects/brunoSimon@2x.webp 2x"
                  width="342"
                  height="236"
                  alt="Bruno Simon project"
                />
                <div class="video-placeholder js-video-placeholder"></div>
              </div>
              <div class="info">
                <div class="title-details">
                  <div class="title">Bruno Simon</div>
                  <div class="details">personal portfolio</div>
                </div>
                <div class="icon">
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 2H3C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H11C12.1046 14 13 13.1046 13 12V9"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M8 7L14 1"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M10 1H14V5"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                  </svg>
                </div>
              </div>
            </a>

            <a
              class="item js-project"
              href="https://luni.app"
              rel="noopener noreferrer"
              target="_blank"
              data-video="/assets/images/projects/luni.mp4"
            >
              <div class="radial-glow"></div>
              <div class="visual">
                <img
                  src="/assets/images/projects/luni.webp"
                  srcset="/assets/images/projects/luni@2x.webp 2x"
                  width="342"
                  height="236"
                  alt="Luni project"
                />
                <div class="video-placeholder js-video-placeholder"></div>
              </div>
              <div class="info">
                <div class="title-details">
                  <div class="title">Luni</div>
                  <div class="details">with Hervé Studio</div>
                </div>
                <div class="icon">
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 2H3C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H11C12.1046 14 13 13.1046 13 12V9"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M8 7L14 1"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M10 1H14V5"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                  </svg>
                </div>
              </div>
            </a>

            <a
              class="item js-project"
              href="https://anniversary.bonhommeparis.com"
              rel="noopener noreferrer"
              target="_blank"
              data-video="/assets/images/projects/bonhomme10ans.mp4"
            >
              <div class="radial-glow"></div>
              <div class="visual">
                <img
                  src="/assets/images/projects/bonhomme10ans.webp"
                  srcset="/assets/images/projects/bonhomme10ans@2x.webp 2x"
                  width="342"
                  height="236"
                  alt="Bonhomme | 10 ans project"
                />
                <div class="video-placeholder js-video-placeholder"></div>
              </div>
              <div class="info">
                <div class="title-details">
                  <div class="title">Bonhomme | 10 ans</div>
                  <div class="details">with Bonhomme</div>
                </div>
                <div class="icon">
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 2H3C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H11C12.1046 14 13 13.1046 13 12V9"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M8 7L14 1"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M10 1H14V5"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                  </svg>
                </div>
              </div>
            </a>

            <a
              class="item js-project"
              href="https://fromscout.com"
              rel="noopener noreferrer"
              target="_blank"
              data-video="/assets/images/projects/scout.mp4"
            >
              <div class="radial-glow"></div>
              <div class="visual">
                <img
                  src="/assets/images/projects/scout.webp"
                  srcset="/assets/images/projects/scout@2x.webp 2x"
                  width="342"
                  height="236"
                  alt="Scout project"
                />
                <div class="video-placeholder js-video-placeholder"></div>
              </div>
              <div class="info">
                <div class="title-details">
                  <div class="title">Scout</div>
                  <div class="details">with Hervé Studio</div>
                </div>
                <div class="icon">
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 2H3C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H11C12.1046 14 13 13.1046 13 12V9"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M8 7L14 1"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M10 1H14V5"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                  </svg>
                </div>
              </div>
            </a>

            <a
              class="item js-project"
              href="https://prior.co.jp/discover/"
              rel="noopener noreferrer"
              target="_blank"
              data-video="/assets/images/projects/prior.mp4"
            >
              <div class="radial-glow"></div>
              <div class="visual">
                <img
                  src="/assets/images/projects/prior.webp"
                  srcset="/assets/images/projects/prior@2x.webp 2x"
                  width="342"
                  height="236"
                  alt="Prior project"
                />
                <div class="video-placeholder js-video-placeholder"></div>
              </div>
              <div class="info">
                <div class="title-details">
                  <div class="title">Prior Holdings</div>
                  <div class="details">with Immersive Garden</div>
                </div>
                <div class="icon">
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 2H3C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H11C12.1046 14 13 13.1046 13 12V9"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M8 7L14 1"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M10 1H14V5"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                  </svg>
                </div>
              </div>
            </a>

            <a
              class="item js-project"
              href="https://orano.imm-g-prod.com/experience/innovation/en"
              rel="noopener noreferrer"
              target="_blank"
              data-video="/assets/images/projects/orano.mp4"
            >
              <div class="radial-glow"></div>
              <div class="visual">
                <img
                  src="/assets/images/projects/orano.webp"
                  srcset="/assets/images/projects/orano@2x.webp 2x"
                  width="342"
                  height="236"
                  alt="Orano project"
                />
                <div class="video-placeholder js-video-placeholder"></div>
              </div>
              <div class="info">
                <div class="title-details">
                  <div class="title">Orano (legacy version)</div>
                  <div class="details">with Immersive Garden</div>
                </div>
                <div class="icon">
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 2H3C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H11C12.1046 14 13 13.1046 13 12V9"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M8 7L14 1"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M10 1H14V5"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                  </svg>
                </div>
              </div>
            </a>

            <a
              class="item js-project"
              href="https://threejs-journey.com/apps/bounce-friday/"
              rel="noopener noreferrer"
              target="_blank"
              data-video="/assets/images/projects/bounceFriday.mp4"
              data-router-set=""
            >
              <div class="radial-glow"></div>
              <div class="visual">
                <img
                  src="/assets/images/projects/bounceFriday.webp"
                  srcset="/assets/images/projects/bounceFriday@2x.webp 2x"
                  width="342"
                  height="236"
                  alt="Bounce Friday project"
                />
                <div class="video-placeholder js-video-placeholder"></div>
              </div>
              <div class="info">
                <div class="title-details">
                  <div class="title">Bounce Friday</div>
                  <div class="details">Three.js Journey event</div>
                </div>
                <div class="icon">
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 2H3C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H11C12.1046 14 13 13.1046 13 12V9"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M8 7L14 1"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <path
                      d="M10 1H14V5"
                      stroke="white"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                  </svg>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </section>
    <section
      class="community js-anchor js-community is-anchor-set"
      data-main-section=""
      id="community"
      data-slug="community"
    >
      <div class="section-title">An <strong>active community</strong></div>
      <div class="items">
        <a
          class="item is-challenge js-has-video"
          href="https://threejs-journey.com/challenges/013-magic-spells"
          data-router-set=""
        >
          <div class="background"></div>
          <div class="title">Students Monthly Challenges</div>
          <div class="description">
            <p>Challenge yourself with topics chosen by the members.</p>
          </div>
          <div class="separator"></div>
          <div class="project-title">Magic Spells winner</div>
          <div class="radial-glow"></div>
          <div class="preview">
            <video
              class="video js-video"
              src="/assets/challenges/013-magic-spells-preview-small.mp4"
              width="480"
              height="270"
              muted=""
              loop=""
            ></video>
            <div class="author">By <strong>Gianluca Lomarco</strong></div>
          </div>
          <div class="bottom-label">
            Discover the winners
            <div class="arrow">
              <svg
                width="11"
                height="7"
                viewBox="0 0 11 7"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                  fill="white"
                ></path>
              </svg>
            </div>
          </div>
        </a>

        <a
          class="item is-selection js-has-video"
          href="https://threejs-journey.com/selection"
          data-router-set=""
        >
          <div class="background"></div>
          <div class="title">Bruno's<br />Selection</div>
          <div class="description">
            <p>
              Every once in a while, Bruno shares with you his favorite project
              built by students.
            </p>
          </div>
          <div class="separator"></div>
          <div class="project-title">Salzzeit-Museum</div>
          <div class="radial-glow"></div>
          <div class="preview">
            <video
              class="video js-video"
              src="/assets/selection/048-salzzeit-museum-preview.mp4"
              width="480"
              height="270"
              muted=""
              loop=""
            ></video>
            <div class="author">By <strong>Ilja Slamar</strong></div>
          </div>
          <div class="bottom-label">
            Discover the other projects
            <div class="arrow">
              <svg
                width="11"
                height="7"
                viewBox="0 0 11 7"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M5.5 7C5.10218 7 4.72064 6.84197 4.43934 6.56066L0.439339 2.56066C-0.146447 1.97487 -0.146447 1.02513 0.439339 0.43934C1.02513 -0.146446 1.97487 -0.146446 2.56066 0.43934L5.5 3.37868L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.439339C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L6.56066 6.56066C6.27936 6.84197 5.89782 7 5.5 7Z"
                  fill="white"
                ></path>
              </svg>
            </div>
          </div>
        </a>

        <div class="item is-discord">
          <div class="background">
            <svg
              version="1.1"
              id="Calque_1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="0px"
              y="0px"
              viewBox="0 0 175 200"
              style="enable-background: new 0 0 175 200"
              xml:space="preserve"
            >
              <path
                d="M69.4,83.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1C79.7,88.9,75.1,83.9,69.4,83.9z M105.9,83.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1S111.6,83.9,105.9,83.9z"
              ></path>
              <path
                d="M154.5,0h-134C9.2,0,0,9.2,0,20.6v135.2c0,11.4,9.2,20.6,20.5,20.6h113.4l-5.3-18.5l12.8,11.9l12.1,11.2l21.5,19V20.6C175,9.2,165.8,0,154.5,0z M115.9,130.6c0,0-3.6-4.3-6.6-8.1c13.1-3.7,18.1-11.9,18.1-11.9c-4.1,2.7-8,4.6-11.5,5.9c-5,2.1-9.8,3.5-14.5,4.3c-9.6,1.8-18.4,1.3-25.9-0.1c-5.7-1.1-10.6-2.7-14.7-4.3c-2.3-0.9-4.8-2-7.3-3.4c-0.3-0.2-0.6-0.3-0.9-0.5c-0.2-0.1-0.3-0.2-0.4-0.3c-1.8-1-2.8-1.7-2.8-1.7s4.8,8,17.5,11.8c-3,3.8-6.7,8.3-6.7,8.3c-22.1-0.7-30.5-15.2-30.5-15.2c0-32.2,14.4-58.3,14.4-58.3c14.4-10.8,28.1-10.5,28.1-10.5l1,1.2c-18,5.2-26.3,13.1-26.3,13.1s2.2-1.2,5.9-2.9c10.7-4.7,19.2-6,22.7-6.3c0.6-0.1,1.1-0.2,1.7-0.2c6.1-0.8,13-1,20.2-0.2c9.5,1.1,19.7,3.9,30.1,9.6c0,0-7.9-7.5-24.9-12.7l1.4-1.6c0,0,13.7-0.3,28.1,10.5c0,0,14.4,26.1,14.4,58.3C146.5,115.4,138,129.9,115.9,130.6z"
              ></path>
            </svg>
          </div>

          <div class="title">Members-only Discord server</div>

          <div class="description">
            <p>
              The best place the ask questions and hang out with the rest of the
              community.
            </p>
            <p>
              With more than 21k members you’ll find there a channel for each
              lesson, announcements, challenges, job opportunities and a place
              to share your projects.
            </p>
          </div>

          <div class="radial-glow"></div>

          <a
            class="button has-icon-left is-discord"
            href="https://threejs-journey.com/discord"
            data-router-disabled=""
          >
            <span class="hover"></span>
            <span class="icon"
              ><svg
                version="1.1"
                id="Calque_1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 175 200"
                style="enable-background: new 0 0 175 200"
                xml:space="preserve"
              >
                <path
                  d="M69.4,83.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1C79.7,88.9,75.1,83.9,69.4,83.9z M105.9,83.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1S111.6,83.9,105.9,83.9z"
                ></path>
                <path
                  d="M154.5,0h-134C9.2,0,0,9.2,0,20.6v135.2c0,11.4,9.2,20.6,20.5,20.6h113.4l-5.3-18.5l12.8,11.9l12.1,11.2l21.5,19V20.6C175,9.2,165.8,0,154.5,0z M115.9,130.6c0,0-3.6-4.3-6.6-8.1c13.1-3.7,18.1-11.9,18.1-11.9c-4.1,2.7-8,4.6-11.5,5.9c-5,2.1-9.8,3.5-14.5,4.3c-9.6,1.8-18.4,1.3-25.9-0.1c-5.7-1.1-10.6-2.7-14.7-4.3c-2.3-0.9-4.8-2-7.3-3.4c-0.3-0.2-0.6-0.3-0.9-0.5c-0.2-0.1-0.3-0.2-0.4-0.3c-1.8-1-2.8-1.7-2.8-1.7s4.8,8,17.5,11.8c-3,3.8-6.7,8.3-6.7,8.3c-22.1-0.7-30.5-15.2-30.5-15.2c0-32.2,14.4-58.3,14.4-58.3c14.4-10.8,28.1-10.5,28.1-10.5l1,1.2c-18,5.2-26.3,13.1-26.3,13.1s2.2-1.2,5.9-2.9c10.7-4.7,19.2-6,22.7-6.3c0.6-0.1,1.1-0.2,1.7-0.2c6.1-0.8,13-1,20.2-0.2c9.5,1.1,19.7,3.9,30.1,9.6c0,0-7.9-7.5-24.9-12.7l1.4-1.6c0,0,13.7-0.3,28.1,10.5c0,0,14.4,26.1,14.4,58.3C146.5,115.4,138,129.9,115.9,130.6z"
                ></path>
              </svg>
            </span>
            <span class="label">Discord</span>
          </a>
        </div>
      </div>
    </section>
    <section
      class="highlights clear-selection js-anchor is-anchor-set"
      data-main-section=""
      id="highlights"
      data-slug="highlights"
    >
      <h2 class="section-title">And thousands of projects made by students</h2>

      <div class="tweets">
        <div class="columns">
          <div class="column">
            <div class="js-tweet tweet">
              <div class="placeholder">
                <div class="head">
                  <div class="user"></div>
                  <div class="titles">
                    <div class="name"></div>
                    <div class="sub-name"></div>
                  </div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                </div>
                <div class="pictures">
                  <div class="picture"></div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                </div>
              </div>

              <div
                class="twitter-tweet twitter-tweet-rendered"
                style="
                  display: flex;
                  max-width: 550px;
                  width: 100%;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              >
                <iframe
                  id="twitter-widget-0"
                  scrolling="no"
                  frameborder="0"
                  allowtransparency="true"
                  allowfullscreen="true"
                  class=""
                  title="X Post"
                  src="https://platform.twitter.com/embed/Tweet.html?dnt=true&amp;embedId=twitter-widget-0&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=true&amp;id=1830965955071209754&amp;lang=en&amp;origin=https%3A%2F%2Fthreejs-journey.com%2F%23career&amp;sessionId=019065a00ae5df43a07d6e41505bf7050f951505&amp;theme=dark&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px"
                  style="
                    position: static;
                    visibility: visible;
                    width: 500px;
                    height: 587px;
                    display: block;
                    flex-grow: 1;
                  "
                  data-tweet-id="1830965955071209754"
                ></iframe>
              </div>
            </div>
            <div class="js-tweet tweet">
              <div class="placeholder">
                <div class="head">
                  <div class="user"></div>
                  <div class="titles">
                    <div class="name"></div>
                    <div class="sub-name"></div>
                  </div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                </div>
                <div class="pictures">
                  <div class="picture"></div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                </div>
              </div>

              <div
                class="twitter-tweet twitter-tweet-rendered"
                style="
                  display: flex;
                  max-width: 550px;
                  width: 100%;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              >
                <iframe
                  id="twitter-widget-1"
                  scrolling="no"
                  frameborder="0"
                  allowtransparency="true"
                  allowfullscreen="true"
                  class=""
                  title="X Post"
                  src="https://platform.twitter.com/embed/Tweet.html?dnt=true&amp;embedId=twitter-widget-1&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=true&amp;id=1831617490268385779&amp;lang=en&amp;origin=https%3A%2F%2Fthreejs-journey.com%2F%23career&amp;sessionId=019065a00ae5df43a07d6e41505bf7050f951505&amp;theme=dark&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px"
                  style="
                    position: static;
                    visibility: visible;
                    width: 500px;
                    height: 645px;
                    display: block;
                    flex-grow: 1;
                  "
                  data-tweet-id="1831617490268385779"
                ></iframe>
              </div>
            </div>
            <div class="js-tweet tweet">
              <div class="placeholder">
                <div class="head">
                  <div class="user"></div>
                  <div class="titles">
                    <div class="name"></div>
                    <div class="sub-name"></div>
                  </div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                </div>
                <div class="pictures">
                  <div class="picture"></div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                </div>
              </div>

              <div
                class="twitter-tweet twitter-tweet-rendered"
                style="
                  display: flex;
                  max-width: 550px;
                  width: 100%;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              >
                <iframe
                  id="twitter-widget-2"
                  scrolling="no"
                  frameborder="0"
                  allowtransparency="true"
                  allowfullscreen="true"
                  class=""
                  title="X Post"
                  src="https://platform.twitter.com/embed/Tweet.html?dnt=true&amp;embedId=twitter-widget-2&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=true&amp;id=1830135285637640616&amp;lang=en&amp;origin=https%3A%2F%2Fthreejs-journey.com%2F%23career&amp;sessionId=019065a00ae5df43a07d6e41505bf7050f951505&amp;theme=dark&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px"
                  style="
                    position: static;
                    visibility: visible;
                    width: 500px;
                    height: 823px;
                    display: block;
                    flex-grow: 1;
                  "
                  data-tweet-id="1830135285637640616"
                ></iframe>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="js-tweet tweet">
              <div class="placeholder">
                <div class="head">
                  <div class="user"></div>
                  <div class="titles">
                    <div class="name"></div>
                    <div class="sub-name"></div>
                  </div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                </div>
                <div class="pictures">
                  <div class="picture"></div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                </div>
              </div>

              <div
                class="twitter-tweet twitter-tweet-rendered"
                style="
                  display: flex;
                  max-width: 550px;
                  width: 100%;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              >
                <iframe
                  id="twitter-widget-3"
                  scrolling="no"
                  frameborder="0"
                  allowtransparency="true"
                  allowfullscreen="true"
                  class=""
                  title="X Post"
                  src="https://platform.twitter.com/embed/Tweet.html?dnt=true&amp;embedId=twitter-widget-3&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=true&amp;id=1831022687386251686&amp;lang=en&amp;origin=https%3A%2F%2Fthreejs-journey.com%2F%23career&amp;sessionId=019065a00ae5df43a07d6e41505bf7050f951505&amp;theme=dark&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px"
                  style="
                    position: static;
                    visibility: visible;
                    width: 500px;
                    height: 895px;
                    display: block;
                    flex-grow: 1;
                  "
                  data-tweet-id="1831022687386251686"
                ></iframe>
              </div>
            </div>
            <div class="js-tweet tweet">
              <div class="placeholder">
                <div class="head">
                  <div class="user"></div>
                  <div class="titles">
                    <div class="name"></div>
                    <div class="sub-name"></div>
                  </div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                </div>
                <div class="pictures">
                  <div class="picture"></div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                </div>
              </div>

              <div
                class="twitter-tweet twitter-tweet-rendered"
                style="
                  display: flex;
                  max-width: 550px;
                  width: 100%;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              >
                <iframe
                  id="twitter-widget-4"
                  scrolling="no"
                  frameborder="0"
                  allowtransparency="true"
                  allowfullscreen="true"
                  class=""
                  title="X Post"
                  src="https://platform.twitter.com/embed/Tweet.html?dnt=true&amp;embedId=twitter-widget-4&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=true&amp;id=1829416739467071955&amp;lang=en&amp;origin=https%3A%2F%2Fthreejs-journey.com%2F%23career&amp;sessionId=019065a00ae5df43a07d6e41505bf7050f951505&amp;theme=dark&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px"
                  style="
                    position: static;
                    visibility: visible;
                    width: 500px;
                    height: 732px;
                    display: block;
                    flex-grow: 1;
                  "
                  data-tweet-id="1829416739467071955"
                ></iframe>
              </div>
            </div>
            <div class="js-tweet tweet">
              <div class="placeholder">
                <div class="head">
                  <div class="user"></div>
                  <div class="titles">
                    <div class="name"></div>
                    <div class="sub-name"></div>
                  </div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                </div>
                <div class="pictures">
                  <div class="picture"></div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                </div>
              </div>

              <div
                class="twitter-tweet twitter-tweet-rendered"
                style="
                  display: flex;
                  max-width: 550px;
                  width: 100%;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              >
                <iframe
                  id="twitter-widget-5"
                  scrolling="no"
                  frameborder="0"
                  allowtransparency="true"
                  allowfullscreen="true"
                  class=""
                  title="X Post"
                  src="https://platform.twitter.com/embed/Tweet.html?dnt=true&amp;embedId=twitter-widget-5&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=true&amp;id=1830224697130381554&amp;lang=en&amp;origin=https%3A%2F%2Fthreejs-journey.com%2F%23career&amp;sessionId=019065a00ae5df43a07d6e41505bf7050f951505&amp;theme=dark&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px"
                  style="
                    position: static;
                    visibility: visible;
                    width: 500px;
                    height: 645px;
                    display: block;
                    flex-grow: 1;
                  "
                  data-tweet-id="1830224697130381554"
                ></iframe>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="js-tweet tweet">
              <div class="placeholder">
                <div class="head">
                  <div class="user"></div>
                  <div class="titles">
                    <div class="name"></div>
                    <div class="sub-name"></div>
                  </div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                </div>
                <div class="pictures">
                  <div class="picture"></div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                </div>
              </div>

              <div
                class="twitter-tweet twitter-tweet-rendered"
                style="
                  display: flex;
                  max-width: 550px;
                  width: 100%;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              >
                <iframe
                  id="twitter-widget-6"
                  scrolling="no"
                  frameborder="0"
                  allowtransparency="true"
                  allowfullscreen="true"
                  class=""
                  title="X Post"
                  src="https://platform.twitter.com/embed/Tweet.html?dnt=true&amp;embedId=twitter-widget-6&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=true&amp;id=1831330219346841706&amp;lang=en&amp;origin=https%3A%2F%2Fthreejs-journey.com%2F%23career&amp;sessionId=019065a00ae5df43a07d6e41505bf7050f951505&amp;theme=dark&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px"
                  style="
                    position: static;
                    visibility: visible;
                    width: 500px;
                    height: 548px;
                    display: block;
                    flex-grow: 1;
                  "
                  data-tweet-id="1831330219346841706"
                ></iframe>
              </div>
            </div>
            <div class="js-tweet tweet">
              <div class="placeholder">
                <div class="head">
                  <div class="user"></div>
                  <div class="titles">
                    <div class="name"></div>
                    <div class="sub-name"></div>
                  </div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                </div>
                <div class="pictures">
                  <div class="picture"></div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                </div>
              </div>

              <div
                class="twitter-tweet twitter-tweet-rendered"
                style="
                  display: flex;
                  max-width: 550px;
                  width: 100%;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              >
                <iframe
                  id="twitter-widget-7"
                  scrolling="no"
                  frameborder="0"
                  allowtransparency="true"
                  allowfullscreen="true"
                  class=""
                  title="X Post"
                  src="https://platform.twitter.com/embed/Tweet.html?dnt=true&amp;embedId=twitter-widget-7&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=true&amp;id=1829817842394378692&amp;lang=en&amp;origin=https%3A%2F%2Fthreejs-journey.com%2F%23career&amp;sessionId=019065a00ae5df43a07d6e41505bf7050f951505&amp;theme=dark&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px"
                  style="
                    position: static;
                    visibility: visible;
                    width: 500px;
                    height: 716px;
                    display: block;
                    flex-grow: 1;
                  "
                  data-tweet-id="1829817842394378692"
                ></iframe>
              </div>
            </div>
            <div class="js-tweet tweet">
              <div class="placeholder">
                <div class="head">
                  <div class="user"></div>
                  <div class="titles">
                    <div class="name"></div>
                    <div class="sub-name"></div>
                  </div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                  <div class="text-line"></div>
                </div>
                <div class="pictures">
                  <div class="picture"></div>
                </div>
                <div class="text">
                  <div class="text-line"></div>
                </div>
              </div>

              <div
                class="twitter-tweet twitter-tweet-rendered"
                style="
                  display: flex;
                  max-width: 550px;
                  width: 100%;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              >
                <iframe
                  id="twitter-widget-8"
                  scrolling="no"
                  frameborder="0"
                  allowtransparency="true"
                  allowfullscreen="true"
                  class=""
                  title="X Post"
                  src="https://platform.twitter.com/embed/Tweet.html?dnt=true&amp;embedId=twitter-widget-8&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=true&amp;id=1830419721625223509&amp;lang=en&amp;origin=https%3A%2F%2Fthreejs-journey.com%2F%23career&amp;sessionId=019065a00ae5df43a07d6e41505bf7050f951505&amp;theme=dark&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px"
                  style="
                    position: static;
                    visibility: visible;
                    width: 500px;
                    height: 668px;
                    display: block;
                    flex-grow: 1;
                  "
                  data-tweet-id="1830419721625223509"
                ></iframe>
              </div>
            </div>
          </div>
        </div>

        <div class="more">
          <a
            href="https://threejs-journey.com/highlights/1"
            data-router-disabled=""
            class="abyss-button is-primary"
          >
            <div class="inner">Discover more</div>
            <div class="inner is-hover">Discover more</div>
          </a>
        </div>
      </div>
    </section>

    <script
      src="https://platform.twitter.com/widgets.js"
      charset="utf-8"
    ></script>
    <section
      class="beginner js-anchor is-anchor-set"
      data-main-section=""
      id="beginner"
      data-slug="beginner"
    >
      <div class="content">
        <h2 class="section-title">
          A <strong>beginner friendly</strong> course
        </h2>
        <div class="items">
          <div class="item">
            <img
              class="js-lazy lazy illustration is-loaded"
              src="/assets/images/illustration-webgl.webp"
              srcset="/assets/images/illustration-webgl@2x.webp 2x"
              width="138"
              height="138"
              alt="Geometry illustration"
            />
            <div class="label">Three.js and WebGL for dummies</div>
            <div class="description">
              <p>
                Everything will be explained starting with basics concepts
                before tackling more advanced topics.
              </p>
            </div>
          </div>
          <div class="item">
            <img
              class="js-lazy lazy illustration is-loaded"
              src="/assets/images/illustration-mathematics.webp"
              srcset="/assets/images/illustration-mathematics@2x.webp 2x"
              width="138"
              height="138"
              alt="Calculator illustration"
            />
            <div class="label">Easy mathematics</div>
            <div class="description">
              <p>
                Yes, we're going to do mathematics, but at a simple level and we
                will explain how the formulas work with drawings and practice.
              </p>
            </div>
          </div>
          <div class="item">
            <img
              class="js-lazy lazy illustration is-loaded"
              src="/assets/images/illustration-3d-software.webp"
              srcset="/assets/images/illustration-3d-software@2x.webp 2x"
              width="138"
              height="138"
              alt="3D axes illustration"
            />
            <div class="label">Blender as a bonus</div>
            <div class="description">
              <p>
                Together we will learn the basics of the 3D software Blender to
                create our own model. No experience needed and it’s free.
              </p>
            </div>
          </div>
          <div class="item">
            <img
              class="js-lazy lazy illustration is-loaded"
              src="/assets/images/illustration-javascript.webp"
              srcset="/assets/images/illustration-javascript@2x.webp 2x"
              width="138"
              height="138"
              alt="JavaScript illustration"
            />
            <div class="label">For JavaScript beginners</div>
            <div class="description">
              <p>
                All you need are JavaScript basics like variables, objects,
                arrays, loops, functions and events. We will learn the rest
                together.
              </p>
            </div>
          </div>
          <div class="item">
            <img
              class="js-lazy lazy illustration is-loaded"
              src="/assets/images/illustration-computer.webp"
              srcset="/assets/images/illustration-computer@2x.webp 2x"
              width="138"
              height="138"
              alt="Computer illustration"
            />
            <div class="label">For most computer configurations</div>
            <div class="description">
              <p>
                In some lessons, we will tackle performance limits, and learn
                how to handle and optimize our code to get good frame rates.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section
      class="faq clear-selection js-anchor is-anchor-set"
      data-main-section=""
      id="faq"
      data-slug="faq"
    >
      <div class="content">
        <h2 class="section-title">Frequently Asked Questions</h2>
        <div class="columns">
          <div class="column">
            <div class="item">
              <div class="question">What are the prerequisites?</div>
              <div class="answer">
                <p>
                  Even if the course is beginner friendly, you need to know
                  JavaScript basics like variables, objects, arrays, loops,
                  functions, conditions and events.
                </p>
                <p>
                  The code editor used in the lessons is Visual Studio Code but
                  you can use any editor you like.
                </p>
                <p>
                  The browser used in the lessons is Chrome but you can use any
                  browser you like. However, it is recommended to use one with a
                  good developer tools panel like Chrome or Firefox.
                </p>
                <p>
                  Eventually, you will have to install Blender, but the software
                  is free and works on all major OS.
                </p>
              </div>
            </div>
            <div class="item">
              <div class="question">Can I use Three.js with React?</div>
              <div class="answer">
                <p>
                  Yes, thanks to the
                  <a
                    href="https://docs.pmnd.rs/react-three-fiber/getting-started/introduction"
                    target="_blank"
                    >React Three Fiber</a
                  >
                  renderer, we can write Three.js application directly in React.
                </p>
                <p>
                  And it doesn't stop there. React Three is a huge ecosystem
                  with many tools and features that will improve your
                  developer's life.
                </p>
                <p>
                  It's so big that a whole chapter is dedicated to the topic.
                </p>
                <p>
                  And if you don't know React, the course includes a 4 hours
                  long lesson that will teach you the basics of React.
                </p>
              </div>
            </div>
            <div class="item">
              <div class="question">Is the content up to date?</div>
              <div class="answer">
                <p>
                  All the dependencies used throughout the lessons are updated
                  multiple times a year and the content is adjusted accordingly.
                </p>
                <p>
                  New lessons are also regularly added in order to cope with the
                  latest features and to answer community requests.
                </p>
              </div>
            </div>
            <div class="item">
              <div class="question">What if I need help?</div>
              <div class="answer">
                <p>
                  With the course, you will also get access to a
                  <a
                    href="https://threejs-journey.com/discord"
                    data-router-disabled=""
                    >private Discord</a
                  >
                  server. If you get stuck or you don't understand a specific
                  part of a lesson, you can share your problem to get help.
                </p>
              </div>
            </div>
            <div class="item">
              <div class="question">
                I don't speak English very well. Will it be a problem?
              </div>
              <div class="answer">
                <p>
                  Although the lessons are in English, they have all been
                  <strong>captioned</strong>.<br />For a better comprehension,
                  the technical terms are perfectly written and highlighted.<br />And
                  if the video is going too fast, you can slow down the pace.
                </p>
                <p>
                  French, Spanish, and Hindi subtitles are available as well.
                </p>
                <p>
                  To test and see how difficult it is for you to follow, all
                  beginnings and some full lessons are available for free.
                </p>
                <p>
                  Finally, all the lessons are available as text right below the
                  video with the exact same content (screenshots, code snippets,
                  video previews, etc.)
                </p>
              </div>
            </div>
            <div class="item">
              <div class="question">Can I offer it?</div>
              <div class="answer">
                <p>
                  Yes, you can gift the course to someone else by clicking on
                  <a
                    href="https://threejs-journey.com/gift"
                    data-router-disabled=""
                    class="gift"
                    >this link</a
                  >.
                </p>
                <p>
                  You can pick an option between letting us email the gift to
                  the receiver or you can share the gift yourself.
                </p>
                <p>
                  You'll receive an invoice by email and the recipient won't
                  have access to your billing information.
                </p>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="item">
              <div class="question">Can I test the lessons?</div>
              <div class="answer">
                <p>
                  The first lessons are free! Have a look and see for yourself
                  if you like the content.
                </p>
                <p>
                  And if it's not enough, the beginning of every other lesson is
                  also free.
                </p>
              </div>
            </div>
            <div class="item">
              <div class="question">What if I don't like the course?</div>
              <div class="answer">
                <p>
                  If you are not happy with the course, whatever the reason is,
                  you can ask for a refund at any time by sending an email at
                  <a href="mailto:contact@threejs-journey.com" target="_blank"
                    >contact@threejs-journey.com</a
                  >.
                </p>
                <p>Following the refund, your account will be deleted.</p>
              </div>
            </div>
            <div class="item">
              <div class="question">Is there a way to get a discount?</div>
              <div class="answer">
                <p>
                  The price of the course has already been calculated to be as
                  low as possible in order to be accessible for everyone and the
                  VAT is included.
                </p>
                <p>
                  You pay only once and get access to all the lessons, a
                  members-only Discord server and upcoming updates!
                </p>
                <p>
                  Still, if it's too expensive for you, discounts might happen
                  at some occasions. Follow
                  <a href="https://twitter.com/bruno_simon" target="_blank"
                    >@bruno_simon</a
                  >
                  on Twitter to be alerted.
                </p>
              </div>
            </div>
            <div class="item">
              <div class="question">
                Do I have to do the entire course to start my own project?
              </div>
              <div class="answer">
                <p>
                  No! Once you feel comfortable, you can start working on your
                  personal experiences by yourself. You won't have to wait until
                  the end of the course, but obviously, you will be able to jump
                  back to the course at any time where you left it.
                </p>
                <p>
                  And if you struggle on any project, whether it is personal or
                  professional, the Three.js Journey community will always be
                  happy to help.
                </p>
              </div>
            </div>
            <div class="item">
              <div class="question">
                Do you provide a certificate of completion?
              </div>
              <div class="answer">
                <p>
                  Yes! Each lesson comes with a quiz. Completing all quizzes
                  will grant you access to a public certificate that you can
                  print or share with the world.
                </p>
                <p>
                  Failing on answering a quiz will result in a few minutes time
                  out, letting you time to find the information before answering
                  again.
                </p>
              </div>
            </div>
            <div class="item">
              <div class="question">Can I ask for a VAT refund?</div>
              <div class="answer">
                <p>
                  If your company is in the EU (outside of France), you can ask
                  for a VAT refund.
                </p>
                <p>
                  To do that, after buying the course, go to your account
                  settings and fill the VAT refund request form. Information
                  will be reviewed and proof that you work at the company might
                  be requested.
                </p>
              </div>
            </div>
            <div class="item">
              <div class="question">Can I have an invoice?</div>
              <div class="answer">
                <p>
                  Once you've bought the course, you get access to an invoice.
                  You can add any additional data you need on the document.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="start">
      <div class="background"></div>

      <div class="content">
        <div class="texts">
          <h2 class="section-title">Start learning now</h2>
          <h3 class="section-sub-title">
            <span>Only </span><strong>$95</strong><span> for a </span
            ><strong>93 hour</strong><span> complete course</span>
          </h3>
          <p class="trustpilot has-theme-dark">
            <span class="stars">
              <span class="star"
                ><svg
                  width="21"
                  height="20"
                  viewBox="0 0 21 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M10.5 0.505859L12.8574 7.76118H20.4861L14.3143 12.2452L16.6717 19.5005L10.5 15.0165L4.32825 19.5005L6.68565 12.2452L0.513906 7.76118H8.1426L10.5 0.505859Z"
                    fill="#705DF2"
                  ></path>
                </svg>
              </span>
              <span class="star"
                ><svg
                  width="21"
                  height="20"
                  viewBox="0 0 21 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M10.5 0.505859L12.8574 7.76118H20.4861L14.3143 12.2452L16.6717 19.5005L10.5 15.0165L4.32825 19.5005L6.68565 12.2452L0.513906 7.76118H8.1426L10.5 0.505859Z"
                    fill="#705DF2"
                  ></path>
                </svg>
              </span>
              <span class="star"
                ><svg
                  width="21"
                  height="20"
                  viewBox="0 0 21 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M10.5 0.505859L12.8574 7.76118H20.4861L14.3143 12.2452L16.6717 19.5005L10.5 15.0165L4.32825 19.5005L6.68565 12.2452L0.513906 7.76118H8.1426L10.5 0.505859Z"
                    fill="#705DF2"
                  ></path>
                </svg>
              </span>
              <span class="star"
                ><svg
                  width="21"
                  height="20"
                  viewBox="0 0 21 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M10.5 0.505859L12.8574 7.76118H20.4861L14.3143 12.2452L16.6717 19.5005L10.5 15.0165L4.32825 19.5005L6.68565 12.2452L0.513906 7.76118H8.1426L10.5 0.505859Z"
                    fill="#705DF2"
                  ></path>
                </svg>
              </span>
              <span class="star"
                ><svg
                  width="21"
                  height="20"
                  viewBox="0 0 21 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M10.5 0.505859L12.8574 7.76118H20.4861L14.3143 12.2452L16.6717 19.5005L10.5 15.0165L4.32825 19.5005L6.68565 12.2452L0.513906 7.76118H8.1426L10.5 0.505859Z"
                    fill="#705DF2"
                  ></path>
                </svg>
              </span>
            </span>
            <span class="label"
              >on
              <a
                href="https://nz.trustpilot.com/review/threejs-journey.com"
                target="_blank"
                rel="noopener"
                >Trustpilot</a
              ></span
            >
          </p>
        </div>

        <div class="join-group">
          <a
            href="https://threejs-journey.com/join"
            data-router-disabled=""
            class="button is-white is-main-join"
          >
            <span class="hover"></span>
            <span class="label">Start learning now</span>
          </a>

          <a
            href="https://threejs-journey.com/gift"
            data-router-disabled=""
            class="gift"
            >It's for a gift
            <span class="gift-icon"
              ><svg
                xmlns="http://www.w3.org/2000/svg"
                width="61"
                height="63.96"
                viewBox="0 0 61 63.96"
              >
                <rect y="19.96" width="61" height="11" fill="#898989"></rect>
                <path
                  d="M19.77,16H28V9c0-5-9.24-13.34-15.62-6.17S15,16,19.77,16Z"
                  fill="#898989"
                ></path>
                <g>
                  <rect
                    x="5.5"
                    y="34.96"
                    width="20.5"
                    height="29"
                    fill="#898989"
                  ></rect>
                  <rect
                    x="35"
                    y="34.96"
                    width="20.5"
                    height="29"
                    fill="#898989"
                  ></rect>
                </g>
                <path
                  d="M41.41,16H33.17V9c0-5,9.24-13.34,15.62-6.17S46.17,16,41.41,16Z"
                  fill="#898989"
                ></path>
              </svg> </span
          ></a>
        </div>

        <img
          class="js-lazy lazy illustration is-loaded"
          src="/assets/images/illustration-student@2x.webp"
          srcset="/assets/images/illustration-student@4x.webp 2x"
          width="120"
          height="94"
          alt="Students hat"
        />
      </div>
    </section>

    <span class="js-user-witness"></span>
  </section>
  -->
</main>

<!-- <footer class="footer">
  <div class="inner">
    <div class="column is-logo">
      <a
        href="https://threejs-journey.com/"
        class="main-logo is-light"
        data-router-set=""
      >
        <div class="logo">
          <svg
            version="1.1"
            id="Calque_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 58.5 66.6"
            style="enable-background: new 0 0 58.5 66.6"
            xml:space="preserve"
          >
            <path
              class="face-1"
              d="M23.1,55.7l16.1-9.3c0,0,0,0,0,0c1.1-0.7,1.8-1.9,1.8-3.1l0.1-19.1L23.1,34.4V55.7z"
            ></path>
            <path
              class="face-2"
              d="M21.3,10L2.9,20.5l18,10.2l18.4-10.5c0,0,0,0-0.1,0l-17.4-10C21.7,10.1,21.5,10.1,21.3,10z"
            ></path>
            <path
              class="face-3"
              d="M1.8,46.7L18,56.6c0,0,0,0,0,0c0.3,0.2,0.5,0.3,0.8,0.3V34.5L0,23.8v19.7C0,44.9,0.7,46.1,1.8,46.7z"
            ></path>
            <path
              class="triangle-1"
              d="M56.8,30.4l-11.4-6.6l-0.1,19.2l11.5-6.7c1-0.6,1.7-1.7,1.7-2.9C58.5,32.1,57.9,31,56.8,30.4z"
            ></path>
            <path
              class="triangle-2"
              d="M0,50.7v12.6c0,1.2,0.6,2.3,1.7,2.9c0.5,0.3,1.1,0.5,1.7,0.5c0.6,0,1.2-0.2,1.7-0.5l10.4-6L0,50.7z"
            ></path>
            <path
              class="triangle-3"
              d="M16.4,7L5.1,0.5c-1-0.6-2.3-0.6-3.4,0C0.6,1.1,0,2.2,0,3.4v13.2L16.4,7z"
            ></path>
          </svg>
        </div>
        <div class="text">
          <svg
            width="160"
            height="22"
            viewBox="0 0 160 22"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              class="letter t"
              d="M7.52113 7.98393V5.22393H5.47413V1.93493H1.79413V5.22393H0.161133V7.98393H1.79413V13.1359C1.79413 15.7809 2.55313 17.2069 5.24413 17.2069C6.27913 17.2069 6.85413 17.0919 7.52113 16.9539V14.1939C5.95713 14.1939 5.47413 14.1939 5.47413 12.8599V7.98393H7.52113Z"
              fill="white"
            ></path>
            <path
              class="letter h"
              d="M16.2516 4.85593C14.3656 4.85593 13.2156 5.84493 12.5946 6.92593H12.5486V0.554932H8.86861V16.9999H12.5486V10.1919C12.5486 8.55893 13.5146 7.84593 14.6876 7.84593C16.0216 7.84593 16.5966 8.44393 16.5966 10.2149V16.9999H20.2766V9.04193C20.2766 6.35093 18.7356 4.85593 16.2516 4.85593Z"
              fill="white"
            ></path>
            <path
              class="letter r"
              d="M28.5868 5.01693C27.2988 5.01693 26.2868 5.84493 25.7118 7.15593H25.6658V5.22393H21.9858V16.9999H25.6658V11.5259C25.6658 9.01893 27.6668 7.98393 29.5528 8.32893H29.5988V5.10893C29.1848 5.01693 28.9088 5.01693 28.5868 5.01693Z"
              fill="white"
            ></path>
            <path
              class="letter e"
              d="M36.2469 14.6079C34.9359 14.6079 33.7169 13.7339 33.7169 12.0779H42.1809C42.1809 7.79993 40.1339 4.85593 36.1089 4.85593C32.3599 4.85593 30.0369 7.52393 30.0369 11.1119C30.0369 14.7919 32.4059 17.3679 36.3159 17.3679C39.5129 17.3679 41.3529 15.8039 41.9969 13.4349H38.3399C38.1099 14.0099 37.5119 14.6079 36.2469 14.6079ZM36.1089 7.38593C37.5119 7.38593 38.5009 8.21393 38.5009 9.84693H33.7169C33.7169 8.21393 34.7059 7.38593 36.1089 7.38593Z"
              fill="white"
            ></path>
            <path
              class="letter e"
              d="M49.117 14.6079C47.806 14.6079 46.587 13.7339 46.587 12.0779H55.051C55.051 7.79993 53.004 4.85593 48.979 4.85593C45.23 4.85593 42.907 7.52393 42.907 11.1119C42.907 14.7919 45.276 17.3679 49.186 17.3679C52.383 17.3679 54.223 15.8039 54.867 13.4349H51.21C50.98 14.0099 50.382 14.6079 49.117 14.6079ZM48.979 7.38593C50.382 7.38593 51.371 8.21393 51.371 9.84693H46.587C46.587 8.21393 47.576 7.38593 48.979 7.38593Z"
              fill="white"
            ></path>
            <path
              class="letter dot"
              d="M57.9878 17.2069C59.0688 17.2069 59.9428 16.4479 59.9428 15.2519C59.9428 14.0789 59.0688 13.2969 57.9878 13.2969C56.8838 13.2969 56.0328 14.0789 56.0328 15.2519C56.0328 16.4479 56.8838 17.2069 57.9878 17.2069Z"
              fill="white"
            ></path>
            <path
              class="letter j"
              d="M63.718 3.82093C64.753 3.82093 65.558 3.26893 65.558 2.18793C65.558 1.12993 64.753 0.554932 63.718 0.554932C62.683 0.554932 61.878 1.12993 61.878 2.18793C61.878 3.26893 62.683 3.82093 63.718 3.82093ZM61.878 5.22393V16.7239C61.878 18.0579 61.395 18.0579 59.831 18.0579V20.8179C60.498 20.9559 61.073 21.0709 62.108 21.0709C64.799 21.0709 65.558 19.6449 65.558 16.9999V5.22393H61.878Z"
              fill="white"
            ></path>
            <path
              class="letter s"
              d="M73.1069 9.57093C71.2899 9.17993 70.5539 9.15693 70.5539 8.32893C70.5539 7.75393 71.0829 7.38593 72.1179 7.38593C73.3139 7.38593 73.8199 7.89193 73.9349 8.83493H77.3849C77.2699 6.76493 75.7979 4.85593 72.0259 4.85593C68.7139 4.85593 66.8739 6.48893 66.8739 8.62793C66.8739 11.0889 69.0819 11.8249 71.0829 12.2619C72.9459 12.6759 74.0499 12.8139 74.0499 13.8259C74.0499 14.4929 73.4749 14.8379 72.4399 14.8379C70.9909 14.8379 70.2089 14.2629 70.0939 13.0899H66.6439C66.7589 15.4819 68.3689 17.3679 72.5779 17.3679C75.8439 17.3679 77.7299 16.0109 77.7299 13.5269C77.7299 10.8589 75.4299 10.0769 73.1069 9.57093Z"
              fill="white"
            ></path>
            <path
              class="letter j"
              d="M86.2079 2.99293C86.7369 2.99293 87.3579 2.60193 87.3579 1.88893C87.3579 1.17593 86.7369 0.784931 86.2079 0.784931C85.7019 0.784931 85.0579 1.17593 85.0579 1.88893C85.0579 2.60193 85.7019 2.99293 86.2079 2.99293ZM85.2879 5.26993V17.9889C85.2879 19.3229 84.9199 19.4379 83.3559 19.3229V20.7029C84.0229 20.8869 84.4829 20.9559 85.0579 20.9559C86.6219 20.9559 87.1279 19.7599 87.1279 17.8049V5.26993H85.2879Z"
              fill="white"
            ></path>
            <path
              class="letter o"
              d="M94.9749 17.3219C91.3869 17.3219 89.2249 14.7919 89.2249 11.1349C89.2249 7.47793 91.3869 4.94793 94.9749 4.94793C98.5399 4.94793 100.702 7.47793 100.702 11.1349C100.702 14.7919 98.5399 17.3219 94.9749 17.3219ZM94.9749 15.7119C97.5969 15.7119 98.8619 13.6419 98.8619 11.1349C98.8619 8.62793 97.5969 6.55793 94.9749 6.55793C92.3299 6.55793 91.0649 8.62793 91.0649 11.1349C91.0649 13.6419 92.3299 15.7119 94.9749 15.7119Z"
              fill="white"
            ></path>
            <path
              class="letter u"
              d="M110.334 5.26993V12.5839C110.334 14.4009 108.954 15.7119 106.884 15.7119C105.044 15.7119 104.331 14.5159 104.331 12.9979V5.26993H102.491V13.4579C102.491 16.1489 104.285 17.3219 106.424 17.3219C108.425 17.3219 109.667 16.4249 110.288 15.5969H110.334V16.9999H112.174V5.26993H110.334Z"
              fill="white"
            ></path>
            <path
              class="letter r"
              d="M119.84 4.94793C118.161 4.94793 117.218 6.05193 116.597 7.59293H116.551V5.26993H114.711V16.9999H116.551V10.7439C116.551 8.23693 118.322 6.44293 120.875 6.85693H120.921V5.01693C120.599 4.97093 120.277 4.94793 119.84 4.94793Z"
              fill="white"
            ></path>
            <path
              class="letter n"
              d="M128.345 4.94793C126.344 4.94793 125.102 5.84493 124.481 6.67293H124.435V5.26993H122.595V16.9999H124.435V9.68593C124.435 7.86893 125.815 6.55793 127.885 6.55793C129.725 6.55793 130.438 7.75393 130.438 9.27193V16.9999H132.278V8.81193C132.278 6.12093 130.484 4.94793 128.345 4.94793Z"
              fill="white"
            ></path>
            <path
              class="letter e"
              d="M139.737 15.7119C137.184 15.7119 135.919 13.7339 135.919 11.6179H145.188C145.188 7.45493 143.394 4.94793 139.714 4.94793C136.287 4.94793 134.079 7.22493 134.079 11.1349C134.079 14.8149 136.241 17.3219 139.806 17.3219C142.727 17.3219 144.406 15.5739 145.004 13.3889H143.164C142.957 14.1939 142.083 15.7119 139.737 15.7119ZM139.714 6.55793C141.922 6.55793 143.348 8.12193 143.348 10.0079H135.919C135.919 8.12193 137.506 6.55793 139.714 6.55793Z"
              fill="white"
            ></path>
            <path
              class="letter y"
              d="M156.721 5.26993H154.651L151.27 14.8379H151.224L147.636 5.26993H145.566L150.005 16.0339C150.465 17.1839 149.982 18.1729 149.499 18.7019C148.878 19.3689 148.165 19.4379 147.153 19.3459H146.877V20.7259C147.176 20.8179 147.705 20.9559 148.441 20.9559C150.603 20.9559 151.201 19.2309 151.707 17.9659L156.721 5.26993Z"
              fill="white"
            ></path>
          </svg>
        </div>
        <span class="copyright">© 2024. All rights reserved.</span>
      </a>
    </div>
    <div class="column is-navigation">
      <div class="column-title">Navigation</div>
      <ul>
        <li>
          <a href="https://threejs-journey.com/" data-router-set="">Home</a>
        </li>

        <li>
          <a href="https://threejs-journey.com/lessons" data-router-disabled=""
            >Lessons</a
          >
        </li>
        <li>
          <a
            href="https://threejs-journey.com/account/details"
            data-router-disabled=""
            >Account</a
          >
        </li>
        <li></li>
        <li>
          <a
            href="https://threejs-journey.com/account/invoice/en"
            data-router-disabled=""
            >Invoice</a
          >
          (<a
            href="https://threejs-journey.com/account/invoice/en"
            data-router-disabled=""
            >EN</a
          >
          /
          <a
            href="https://threejs-journey.com/account/invoice/fr"
            data-router-disabled=""
            >FR</a
          >)
        </li>
        <li>
          <a href="https://threejs-journey.com/logout" data-router-disabled=""
            >Logout</a
          >
        </li>

        <li>
          <a href="https://threejs-journey.com/gift" data-router-disabled=""
            ><span class="icon gift"
              ><svg
                xmlns="http://www.w3.org/2000/svg"
                width="61"
                height="63.96"
                viewBox="0 0 61 63.96"
              >
                <rect y="19.96" width="61" height="11" fill="#898989"></rect>
                <path
                  d="M19.77,16H28V9c0-5-9.24-13.34-15.62-6.17S15,16,19.77,16Z"
                  fill="#898989"
                ></path>
                <g>
                  <rect
                    x="5.5"
                    y="34.96"
                    width="20.5"
                    height="29"
                    fill="#898989"
                  ></rect>
                  <rect
                    x="35"
                    y="34.96"
                    width="20.5"
                    height="29"
                    fill="#898989"
                  ></rect>
                </g>
                <path
                  d="M41.41,16H33.17V9c0-5,9.24-13.34,15.62-6.17S46.17,16,41.41,16Z"
                  fill="#898989"
                ></path>
              </svg>
            </span>
            Gift the course</a
          >
        </li>
      </ul>
    </div>
    <div class="column is-navigation">
      <div class="column-title">Contact</div>
      <ul>
        <li>
          <a href="mailto:contact@threejs-journey.com" target="_blank"
            ><span class="icon email"
              ><svg
                width="14"
                height="14"
                viewBox="0 0 14 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M11.667 2.3335H2.33366C1.69199 2.3335 1.17283 2.8585 1.17283 3.50016L1.16699 10.5002C1.16699 11.1418 1.69199 11.6668 2.33366 11.6668H11.667C12.3087 11.6668 12.8337 11.1418 12.8337 10.5002V3.50016C12.8337 2.8585 12.3087 2.3335 11.667 2.3335ZM11.667 4.66683L7.00033 7.5835L2.33366 4.66683V3.50016L7.00033 6.41683L11.667 3.50016V4.66683Z"
                  fill="#8B8B8B"
                ></path>
              </svg> </span
            >contact@threejs-journey.com</a
          >
        </li>
        <li>
          <a href="https://twitter.com/bruno_simon" target="_blank"
            ><span class="icon twitter"
              ><svg
                width="24"
                height="20"
                viewBox="0 0 24 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M23.954 2.323C23.069 2.712 22.124 2.977 21.129 3.098C22.143 2.487 22.923 1.524 23.292 0.375C22.341 0.93 21.287 1.334 20.165 1.559C19.269 0.6 17.992 0 16.574 0C13.857 0 11.654 2.203 11.654 4.917C11.654 5.307 11.699 5.682 11.781 6.041C7.691 5.848 4.066 3.884 1.64 0.915C1.213 1.637 0.974 2.476 0.974 3.39C0.974 5.1 1.844 6.603 3.162 7.486C2.355 7.46 1.596 7.238 0.934 6.87V6.931C0.934 9.316 2.627 11.305 4.88 11.758C4.467 11.869 4.031 11.929 3.584 11.929C3.27 11.929 2.969 11.899 2.668 11.843C3.299 13.796 5.113 15.22 7.272 15.26C5.592 16.579 3.463 17.365 1.17 17.365C0.78 17.365 0.391 17.342 0 17.298C2.189 18.692 4.768 19.507 7.557 19.507C16.611 19.507 21.556 12.011 21.556 5.521C21.556 5.312 21.556 5.101 21.541 4.891C22.502 4.202 23.341 3.331 24.001 2.343L23.954 2.323Z"
                  fill="#1DA1F2"
                ></path>
              </svg> </span
            >bruno_simon</a
          >
        </li>
        <li>
          <a href="https://threejs-journey.com/discord" data-router-disabled=""
            ><span class="icon discord"
              ><svg
                version="1.1"
                id="Calque_1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 175 200"
                style="enable-background: new 0 0 175 200"
                xml:space="preserve"
              >
                <path
                  d="M69.4,83.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1C79.7,88.9,75.1,83.9,69.4,83.9z M105.9,83.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1S111.6,83.9,105.9,83.9z"
                ></path>
                <path
                  d="M154.5,0h-134C9.2,0,0,9.2,0,20.6v135.2c0,11.4,9.2,20.6,20.5,20.6h113.4l-5.3-18.5l12.8,11.9l12.1,11.2l21.5,19V20.6C175,9.2,165.8,0,154.5,0z M115.9,130.6c0,0-3.6-4.3-6.6-8.1c13.1-3.7,18.1-11.9,18.1-11.9c-4.1,2.7-8,4.6-11.5,5.9c-5,2.1-9.8,3.5-14.5,4.3c-9.6,1.8-18.4,1.3-25.9-0.1c-5.7-1.1-10.6-2.7-14.7-4.3c-2.3-0.9-4.8-2-7.3-3.4c-0.3-0.2-0.6-0.3-0.9-0.5c-0.2-0.1-0.3-0.2-0.4-0.3c-1.8-1-2.8-1.7-2.8-1.7s4.8,8,17.5,11.8c-3,3.8-6.7,8.3-6.7,8.3c-22.1-0.7-30.5-15.2-30.5-15.2c0-32.2,14.4-58.3,14.4-58.3c14.4-10.8,28.1-10.5,28.1-10.5l1,1.2c-18,5.2-26.3,13.1-26.3,13.1s2.2-1.2,5.9-2.9c10.7-4.7,19.2-6,22.7-6.3c0.6-0.1,1.1-0.2,1.7-0.2c6.1-0.8,13-1,20.2-0.2c9.5,1.1,19.7,3.9,30.1,9.6c0,0-7.9-7.5-24.9-12.7l1.4-1.6c0,0,13.7-0.3,28.1,10.5c0,0,14.4,26.1,14.4,58.3C146.5,115.4,138,129.9,115.9,130.6z"
                ></path>
              </svg> </span
            >Discord</a
          >
        </li>
        <li>
          <a
            href="https://www.linkedin.com/company/three-js-journey"
            target="_blank"
            ><span class="icon linkedin"
              ><svg
                width="25"
                height="25"
                viewBox="0 0 25 25"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M21.2991 21.3043H17.597V15.5032C17.597 14.1199 17.5689 12.3397 15.6678 12.3397C13.7376 12.3397 13.4428 13.8449 13.4428 15.4011V21.3043H9.74069V9.37506H13.297V11.0011H13.3449C13.8418 10.0636 15.0501 9.07402 16.8553 9.07402C20.6064 9.07402 21.3001 11.5428 21.3001 14.7564V21.3043H21.2991ZM5.55941 7.74276C4.36774 7.74276 3.41044 6.77817 3.41044 5.5917C3.41044 4.40628 4.36878 3.44273 5.55941 3.44273C6.74692 3.44273 7.70943 4.40628 7.70943 5.5917C7.70943 6.77817 6.74588 7.74276 5.55941 7.74276ZM7.41568 21.3043H3.70315V9.37506H7.41568V21.3043ZM23.1512 0H1.8448C0.825006 0 0 0.806255 0 1.80105V23.1991C0 24.195 0.825006 25.0002 1.8448 25.0002H23.1481C24.1668 25.0002 25.0002 24.195 25.0002 23.1991V1.80105C25.0002 0.806255 24.1668 0 23.1481 0H23.1512Z"
                  fill="white"
                ></path>
              </svg> </span
            >LinkedIn</a
          >
        </li>
        <li>
          <a href="https://www.youtube.com/@BrunoSimon" target="_blank"
            ><span class="icon youtube"
              ><svg
                width="23"
                height="16"
                viewBox="0 0 23 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g clip-path="url(#clip0_2059_5204)">
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M20.2805 0.538633C21.254 0.800451 22.0134 1.567 22.2767 2.54591C22.9652 5.33863 22.9204 10.6186 22.2911 13.455C22.0308 14.4339 21.2684 15.1975 20.2949 15.4623C17.5465 16.1459 5.23643 16.0615 2.64712 15.4623C1.6736 15.2005 0.914166 14.4339 0.650895 13.455C0.00139857 10.7932 0.0462414 5.16409 0.63643 2.56045C0.896807 1.58154 1.65913 0.817906 2.63266 0.553178C6.30687 -0.217731 18.9728 0.0309965 20.2805 0.538633ZM9.28676 4.59673L15.1886 8.00037L9.28676 11.404V4.59673Z"
                    fill="white"
                  ></path>
                </g>
                <defs>
                  <clipPath id="clip0_2059_5204">
                    <rect width="23" height="16" fill="white"></rect>
                  </clipPath>
                </defs>
              </svg> </span
            >Youtube</a
          >
        </li>
      </ul>
      <div class="column-title">Other</div>
      <ul>
        <li>
          <a href="https://mux.com/" target="_blank" rel="noopener noreferrer"
            >Mux (video streaming)</a
          >
        </li>
      </ul>
    </div>
    <div class="column is-legal">
      <div class="column-title">Legal</div>
      <ul>
        <li>
          <a
            href="https://threejs-journey.com/legal-notice"
            data-router-disabled=""
            >Legal notice</a
          >
        </li>
        <li>
          <a
            href="https://threejs-journey.com/general-conditions"
            data-router-disabled=""
            >General Conditions of Sale and Use</a
          >
        </li>
        <li><span class="separator"></span></li>
        <li>
          <a
            href="https://threejs-journey.com/legal-notice/fr"
            data-router-disabled=""
            >Mentions légales (fr)</a
          >
        </li>
        <li>
          <a
            href="https://threejs-journey.com/general-conditions/fr"
            data-router-disabled=""
            >Conditions Générales de Vente et d'Utilisation (fr)</a
          >
        </li>
      </ul>
    </div>
  </div>
</footer> -->

<div class="js-popins popins">
  <span class="js-background background"></span>
  <canvas class="js-popins-confetti-canvas confetti-canvas"></canvas>
</div>

<!-- <script>
  window.environment = "production";
  window.siteJoinUrl = "https://threejs-journey.com/join";
</script> -->

<!-- <script type="module" src="/bundles/public/index.js?cb=dy"></script> -->

<!-- <iframe
  allow="join-ad-interest-group"
  data-tagging-id="AW-10834667600"
  data-load-time="1726980587094"
  height="0"
  width="0"
  src="https://td.doubleclick.net/td/rul/10834667600?random=1726980587085&amp;cv=11&amp;fst=1726980587085&amp;fmt=3&amp;bg=ffffff&amp;guid=ON&amp;async=1&amp;gtm=45be49j0v872273759za200&amp;gcd=13l3l3l3l1l1&amp;dma=0&amp;tag_exp=0&amp;u_w=1920&amp;u_h=1080&amp;url=https%3A%2F%2Fthreejs-journey.com%2F&amp;ref=https%3A%2F%2Fthreejs-journey.com%2Flessons%2Ffun-and-simple-portfolio-with-r3f&amp;hn=www.googleadservices.com&amp;frm=0&amp;tiba=Three.js%20Journey%20%E2%80%94%20Learn%20WebGL%20with%20Three.js&amp;npa=0&amp;pscdl=noapi&amp;auid=235082472.1726022074&amp;uaa=arm&amp;uab=64&amp;uafvl=Chromium%3B129.0.6668.59%7CNot%253DA%253FBrand%3B8.0.0.0&amp;uamb=0&amp;uam=&amp;uap=macOS&amp;uapv=15.1.0&amp;uaw=0&amp;fledge=1&amp;data=event%3Dgtag.config"
  style="display: none; visibility: hidden"
></iframe
> -->

<!-- <iframe
  scrolling="no"
  frameborder="0"
  allowtransparency="true"
  src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fthreejs-journey.com"
  title="Twitter settings iframe"
  style="display: none"
></iframe
>-->

<!-- <iframe
  id="rufous-sandbox"
  scrolling="no"
  frameborder="0"
  allowtransparency="true"
  allowfullscreen="true"
  style="
    position: absolute;
    visibility: hidden;
    display: none;
    width: 0px;
    height: 0px;
    padding: 0px;
    border: none;
  "
  title="Twitter analytics iframe"
></iframe>