Pixel Art Personal Portfolio Hero Section

<div class="h-screen w-full relative flex flex-col selection:bg-pink-500 selection:text-white overflow-hidden"
  style="background-color: #051a1a; color: #f8fafc; font-family: 'Space Mono', monospace;">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <link
    href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400&family=Space+Mono:wght@400;700&display=swap"
    rel="stylesheet">

  <style>
    .font-serif-italic {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-weight: 400;
    }

    .bg-grid {
      background-size: 50px 50px;
      background-image: linear-gradient(to right, rgba(236, 72, 153, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(236, 72, 153, 0.05) 1px, transparent 1px);
    }

    .pixel-art {
      image-rendering: pixelated;
    }

    @keyframes bloom {

      0%,
      100% {
        transform: translateY(0) scale(1);
      }

      50% {
        transform: translateY(-12px) scale(1.05);
      }
    }

    .animate-bloom {
      animation: bloom 5s ease-in-out infinite;
    }

    @keyframes sway {

      0%,
      100% {
        transform: rotate(-3deg);
      }

      50% {
        transform: rotate(3deg);
      }
    }

    .animate-sway {
      animation: sway 3s ease-in-out infinite;
    }
  </style>

  <div class="absolute inset-0 z-0 bg-grid pointer-events-none"></div>

  <nav class="relative z-50 w-full px-8 py-8 flex justify-between items-center">
    <div class="w-10 h-10 pixel-art animate-sway">
      <svg viewBox="0 0 24 24" class="w-full h-full">
        <rect x="10" y="16" width="4" height="8" fill="#166534" />
        <rect x="6" y="8" width="12" height="8" fill="#ec4899" />
        <rect x="10" y="4" width="4" height="4" fill="#fbcfe8" />
        <rect x="10" y="10" width="4" height="4" fill="#9d174d" />
      </svg>
    </div>

    <button class="group flex flex-col gap-1.5 p-2">
      <div class="w-8 h-0.5 bg-pink-400 transition-all group-hover:w-4"></div>
      <div class="w-8 h-0.5 bg-white"></div>
      <div class="w-4 h-0.5 bg-pink-400 self-end transition-all group-hover:w-8"></div>
    </button>
  </nav>

  <main class="flex-grow flex flex-col items-center justify-center px-6 text-center relative z-20">
    <div class="mb-6 text-[11px] font-bold tracking-[0.4em] text-pink-500 uppercase">
      Experience Designer
    </div>

    <h1 class="font-serif-italic text-[24vw] leading-[0.8] text-slate-50 tracking-tighter flex flex-col items-center">
      <span class="relative">jac</span>
      <span class="flex items-center -mt-4">
        k
        <div class="w-[10vw] h-[12vw] mx-2 pixel-art self-center translate-y-[10%] animate-bloom">
          <svg viewBox="0 0 24 32" class="w-full h-full drop-shadow-[0_0_15px_rgba(236,72,153,0.3)]">
            <rect x="11" y="20" width="2" height="12" fill="#166534" />
            <rect x="4" y="8" width="16" height="12" fill="#db2777" />
            <rect x="8" y="4" width="8" height="16" fill="#ec4899" />
            <rect x="10" y="10" width="4" height="4" fill="#fdf2f8" />
            <rect x="6" y="12" width="2" height="4" fill="#9d174d" />
            <rect x="16" y="12" width="2" height="4" fill="#9d174d" />
          </svg>
        </div>
        ie
      </span>
    </h1>

    <div
      class="mt-8 px-4 py-1 border border-pink-500/30 rounded-full text-[10px] font-bold tracking-[0.3em] text-pink-400 uppercase bg-pink-950/20 backdrop-blur-sm">
      Based in Singapore
    </div>
  </main>

  <footer
    class="relative z-30 w-full p-8 flex flex-col gap-6 text-[10px] font-bold tracking-widest opacity-80 text-pink-100/70 uppercase">
    <div class="flex justify-between border-t border-pink-500/20 pt-6">
      <span class="flex items-center gap-2">
        <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
      Available for Collaboration
      </span>
      <span>GST +8 • 2024</span>
    </div>

    <div class="flex justify-between items-center">
      <div class="flex gap-6">
        <a href="#" class="hover:text-pink-400 transition-colors">Behance</a>
        <a href="#" class="hover:text-pink-400 transition-colors">Dribbble</a>
        <a href="#" class="hover:text-pink-400 transition-colors">Read.cv</a>
      </div>
      <div class="text-right">
        Jackie &copy; Garden City
      </div>
    </div>
  </footer>

  <div class="absolute inset-0 z-10 pointer-events-none opacity-30 overflow-hidden">
    <div class="absolute top-[15%] right-[15%] w-6 h-8 pixel-art animate-bloom" style="animation-delay: -1s">
      <svg viewBox="0 0 16 20">
        <rect x="4" y="4" width="8" height="8" fill="#ec4899" />
        <rect x="7" y="12" width="2" height="8" fill="#166534" />
      </svg>
    </div>
    <div class="absolute bottom-[25%] left-[10%] w-8 h-10 pixel-art animate-bloom" style="animation-delay: -2.5s">
      <svg viewBox="0 0 16 20">
        <rect x="4" y="4" width="8" height="8" fill="#db2777" />
        <rect x="7" y="12" width="2" height="8" fill="#14532d" />
      </svg>
    </div>
  </div>
</div>