Tech concept behind this website

{% 
  set header_classes = [
    'bg-slate-50/70',
    'backdrop-blur-lg',
    'sticky',
    'top-0',
    'p-4',
    'mx-auto',
    'z-10',
  ]
%}
{% 
  set main_classes = [
    'blur-sm',
    'container',
    'my-16',
    'mx-auto',
    'px-4',
  ]
%}
{% 
  set footer_classes = [
    'h-16',
    'bg-slate-50/70',
  ]
%}
{# Sticky header #}
<header{{ create_attribute({'class': header_classes}).setAttribute('role', 'banner') }}>
  <div class="container mx-auto lg:px-4 flex content-between place-content-between items-center space-x-2">
    <div class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:basis-full lg:space-x-12 lg:items-center">
      {{ page.header }}
    </div>
    {% if page.header_right %}
      <div class="flex items-center justify-end space-x-2" data-collapsible-parent-id="nav_right">
        {{ page.header_right }}
      </div>
    {% endif %}
  </div>
</header>
{# Main loading spinner #}
<div data-spinner="main" class="animate__animated container mt-2 mx-auto px-4 text-green-pale opacity-60">
  <svg class="absolute animate-spin -ml-1 mr-3 w-6 h-6 text-green-pale" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
</div>
{# Main container #}
<main{{ create_attribute({'class': main_classes}).setAttribute('role', 'main') }}>
  <a id="main-content" tabindex="-1"></a>
  {{ page.help }}
  {{ page.highlighted }}
  <div class="md:flex">
    <div class="md:flex-1">
      {{ page.content }}
    </div>
    {% if page.sidebar_first %}
      <aside class="p-4 md:w-1/4" role="complementary">
        {{ page.sidebar_first }}
      </aside>
    {% endif %}
    {% if page.sidebar_second %}
      <aside class="p-4 md:w-1/4" role="complementary">
        {{ page.sidebar_second }}
      </aside>
    {% endif %}
  </div>
</main>
{# Footer #}
{% if page.footer %}
  <footer{{ create_attribute({'class': footer_classes}).setAttribute('role', 'contentinfo') }}>{{ page.footer }}</footer>
{% endif %}

/**
 * @file
 * Ph TailwindCss theme scripts.
 */
(function(Drupal) {
  'use strict';
  document.onreadystatechange = () => {
    let timeout;
    if (document.readyState == 'interactive') {
      // Always a good idea to clear timeout.
      if (typeof timeout === 'number') {
        clearTimeout(timeout);
      }
    } else if (document.readyState == 'complete') {
      // Remove blur from the <main> element.
      document.querySelector('main').classList.remove('blur-sm');

      // Loading spinner animation handling.
      const spinner = document.querySelector('[data-spinner="main"]');
      if (spinner) {
        spinner.classList.add('animate__fadeOut');
        timeout = setTimeout((s) => {
          s.remove();
        }, 1500, spinner);
      }
    }
  };
  Drupal.behaviors.phDefault = {
    attach: function(context, settings) {
      if (settings.path.isFront) {
        // Fill star "*" path in logo svg when on front page (miming "is-active" class).
        const logo = document.getElementById('site-logo');
        if (logo) {
          const paths = logo.children[0].children;
          if (paths[1]) {
            paths[1].setAttribute('fill', '#ef4444b3');
          }
        }
      }
    }
  };
})(Drupal);

/**
 * @file
 * Ph* search widget.
 *
 * @ingroup Ph* core scripts.
 */
(function(Drupal) {

  'use strict';

  Drupal.behaviors.phSearch = {

    attach: function(context, settings) {

      const searchInputs = [].slice.call(context.querySelectorAll(
        '[data-collapsible-search-target]'));
      searchInputs.forEach(input => {
        const collapsibleId = input.dataset.collapsibleSearchTarget;
        if (collapsibleId && context.querySelector(
            '[data-collapsible-search=' + collapsibleId + ']')) {
          const toggle = context.querySelector(
            '[data-collapsible-search=' + collapsibleId + ']');
          if (toggle) {
            let timeout;
            toggle.addEventListener('click', event => {

              event.preventDefault();

              // Do out custom "grow" animation here.
              // It works with the following Tailwind classes.
              input.classList.toggle('scale-x-0');
              input.classList.toggle('scale-x-100');
              input.classList.toggle('invisible');
              input.classList.toggle('visible');

              // Take care of the siblings, being part of the same wrapper in DOM.
              if (Drupal.behaviors.phDefault) {
                const collapsibleParentId = event.currentTarget.dataset
                  .collapsibleParent;
                let parent = collapsibleParentId ? context.querySelector(
                    '[data-collapsible-parent-id="' +
                    collapsibleParentId + '"]') : event.currentTarget
                  .parentNode.parentNode;
                Drupal.behaviors.phDefault.siblings(event.currentTarget,
                  parent, '[data-collapsible]', {
                    'class': 'is-active',
                    'op': 'remove'
                  });
              }

              // Drupal's "is-active" class.
              event.currentTarget.parentNode.classList.toggle(
                'is-active');

              // Focus on this search input after a while.
              if (input.classList.contains('scale-x-100')) {
                timeout = setTimeout((element) => {
                  element.focus();
                }, 600, input);
              } else {
                // Always a good idea to clear timeout.
                if (typeof timeout === 'number') {
                  clearTimeout(timeout);
                }
              }
            });
            // Always a good idea to clear timeout.
            if (typeof timeout === 'number') {
              clearTimeout(timeout);
            }
          }
        }
      });
    }
  };
})(Drupal);