Animated Personal Intro Hero Section

<div
  style="background-color: #F4F4F1; color: #121412; font-family: 'Inter', sans-serif; min-height: 100vh; font-size: 2.5rem; line-height: 1.3; letter-spacing: -0.04em; overflow-x: hidden;">

  <header class="fixed top-0 left-0 w-full flex justify-between items-center z-50 mix-blend-multiply"
    style="padding: 40px 60px;">
    <div class="flex gap-1.5 items-center">
      <div style="width: 14px; height: 14px; background: #121412;"></div>
      <div style="width: 14px; height: 14px; background: #121412; border-radius: 50%;"></div>
      <div
        style="width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid #121412;">
      </div>
    </div>
    <div class="flex flex-col gap-1.5 cursor-pointer" style="width: 32px;">
      <div style="width: 100%; height: 2px; background-color: #121412;"></div>
      <div style="width: 100%; height: 2px; background-color: #121412;"></div>
    </div>
  </header>

  <main class="mx-auto flex flex-col gap-16" style="padding: 180px 60px 120px 60px; max-width: 1400px;">
    <div style="font-size: 4rem; width: 60px; height: 60px; animation: spin 12s linear infinite;">
      <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2V22M2 12H22M4.929 4.929L19.071 19.071M4.929 19.071L19.071 4.929" stroke="currentColor"
          stroke-width="1.5" stroke-linecap="round"></path>
      </svg>
      <style>
        @keyframes spin {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(360deg);
          }
        }
      </style>
    </div>

    <article style="max-width: 960px;">
      <p class="reveal-text"
        style="margin-bottom: 60px; opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
        Hello, I’m Julian Thorne. I am a Sustainable Design Engineer based in
        <span style="display: inline-flex; align-items: center; height: 0.85em; margin: 0 0.1em; transform: translateY(0.1em);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="height: 100%;">
                        <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"></path>
                        <path d="M3.6 9H20.4M3.6 15H20.4M12 3V21M16 3C16 3 19 8 19 12C19 16 16 21 16 21M8 3C8 3 5 8 5 12C5 16 8 21 8 21"></path>
                    </svg>
                </span>
        Vancouver, Canada. I currently lead the circular systems lab at
        <span style="display: inline-flex; align-items: center; height: 0.85em; margin: 0 0.1em; transform: translateY(0.1em);">
                    <svg viewBox="0 0 24 24" fill="currentColor" style="height: 100%;">
                        <path d="M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22L6.66 19.7C8.58 15.06 10.13 10.59 13.1 9.16C15.68 7.93 18.68 8.86 21 10V5C21 5 18 2 12 2C6 2 4 5 4 5C4 5 7 5 9 6C9 6 6 8 4 12" stroke="currentColor" stroke-width="1.5"></path>
                    </svg>
                </span>
        <a href="#"
          style="color: inherit; text-decoration: none; border-bottom: 2px solid #121412; padding-bottom: 2px;">EcoSynth</a>
        — a collective reimagining infrastructure for future cities.
      </p>

      <p class="reveal-text"
        style="margin-bottom: 60px; opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
        I’ve collaborated on carbon-neutral developments with innovators including
        <span style="display: inline-flex; align-items: center; height: 1em; margin: 0 0.1em; transform: translateY(0.1em);">
                    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" fill="none" style="height: 100%;">
                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                    </svg>
                </span>
        <a href="#" style="color: inherit; text-decoration: none; border-bottom: 2px solid #121412;">Arc'teryx</a>,
        <span style="display: inline-flex; align-items: center; height: 0.85em; margin: 0 0.1em; transform: translateY(0.1em);">
                    <svg viewBox="0 0 24 24" fill="currentColor" style="height: 100%;">
                        <circle cx="12" cy="12" r="10"></circle>
                    </svg>
                </span>
        <a href="#" style="color: inherit; text-decoration: none; border-bottom: 2px solid #121412;">Moss</a>,
        <span style="display: inline-flex; align-items: center; height: 1em; margin: 0 0.1em; transform: translateY(0.1em);">
                    <svg viewBox="0 0 24 24" fill="currentColor" style="height: 100%;">
                        <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z"></path>
                    </svg>
                </span>
        <a href="#" style="color: inherit; text-decoration: none; border-bottom: 2px solid #121412;">Rivian</a>,
        <span style="display: inline-flex; align-items: center; height: 0.85em; margin: 0 0.1em; transform: translateY(0.1em);">
                    <svg viewBox="0 0 24 24" fill="currentColor" style="height: 100%;">
                        <rect x="3" y="3" width="18" height="18" rx="2"></rect>
                    </svg>
                </span>
        <a href="#" style="color: inherit; text-decoration: none; border-bottom: 2px solid #121412;">Interface</a>, and
        <span style="display: inline-flex; align-items: center; height: 0.85em; margin: 0 0.1em; transform: translateY(0.1em);">
                    <svg viewBox="0 0 24 24" fill="currentColor" style="height: 100%;">
                         <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path>
                    </svg>
                </span>
        <a href="#" style="color: inherit; text-decoration: none; border-bottom: 2px solid #121412;">CarbonCure</a>.
      </p>

      <p class="reveal-text"
        style="opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);">
        <a href="#" style="color: inherit; text-decoration: none; border-bottom: 2px solid #121412;">Read Manifesto</a>
        <span style="font-size: 0.7em; vertical-align: middle; margin-left: 4px;">↗</span>
      </p>
    </article>
  </main>

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
            const items = document.querySelectorAll('.reveal-text');
            items.forEach((item, index) => {
                setTimeout(() => {
                    item.style.opacity = '1';
                    item.style.transform = 'translateY(0)';
                }, 200 * index);
            });
        });
  </script>
</div>