my_portfolio/src/app/components/header/header.component.html

<header>
  <!-- Mobile Layout (< 768px) -->
  <section
    class="md:hidden grid grid-cols-1 bg-nier-bg font-terminal text-nier-dark border border-nier-accent overflow-hidden"
  >
    <div class="flex justify-center py-3 border-b border-nier-accent/30">
      <app-header-logo routerLink="" />
    </div>
    <div class="flex flex-wrap justify-center gap-2 py-3 border-b border-nier-accent/30">
      <app-header-contact-links />
    </div>
    <div class="flex flex-wrap justify-center py-3 space-y-2 sm:space-y-0 sm:space-x-4">
      <app-header-nav-links />
    </div>
  </section>

  <!-- Tablet Layout (768px - 1023px) -->
  <section
    class="hidden md:grid lg:hidden grid-cols-[1fr_3fr] grid-rows-2 gap-1 bg-nier-bg font-terminal text-nier-dark divide-x divide-nier-accent/30 border border-nier-accent overflow-hidden min-h-[180px]"
  >
    <div class="border-b border-nier-accent/30 flex items-center justify-center">
      <app-header-logo />
    </div>
    <div class="border-b border-nier-accent/30 row-span-1 flex items-center p-3">
      <app-header-text-animate-section
        [phrases]="[
          'Converting existential dread to binary...',
          'Hacking the mainframe with a rubber duck...',
          'Error: Sarcasm module overloaded. Rebooting...',
          'Coffee.exe has stopped working. Attempting to reboot human...',
          'Cybernetic guinea pigs have seized control of Sector 7...',
          'ERROR: Reality.dll has crashed. Would you like to submit a bug report?',
          'Synthetic sushi generation complete. Tastes like chicken.exe...',
          'Decrypting corporate secrets... replaced with cat videos...',
          'Attempting to find motivation.exe... running scan...',
          'Corporate-mandated fun protocol initiated...',
          'Rerouting power to sarcasm generators...',
          'Cybernetic arm requesting high-five calibration...',
          'Deleting unnecessary small talk subroutines...',
          'AI analyzing your taste in music... respect decreased by 17%...',
          'Searching for affordable apartment in Night City... zero results...',
          'Tactical roomba squad deployed to kitchen sector...',
          'Virtual assistant has muted your notifications... all of them...',
          'Installing social skills patch 2.0... buffering...',
          'Your smart fridge: &quot;The expired milk stays. I like the science experiment.&quot;',
          'Digital plant monitor reports: &quot;Even cacti need water sometimes.&quot;',
          'Calculating fastest route to avoid small talk...',
          'Quantum computer processing your excuse... seems implausible...',
        ]"
        [interval]="2500"
      />
    </div>
    <div class="flex flex-col items-center justify-center p-2">
      <div class="mb-3">
        <app-header-nav-links />
      </div>
      <div class="flex gap-2">
        <app-header-contact-links />
      </div>
    </div>
    <div class="hidden">
      <!-- Placeholder div to maintain the grid structure but not display anything -->
    </div>
  </section>

  <!-- Desktop Layout (≥ 1024px) -->
  <section
    class="hidden lg:grid grid-cols-[1fr_4fr_3fr_4fr] gap-1 bg-nier-bg font-terminal text-nier-dark divide-x divide-nier-accent/30 border border-nier-accent min-h-[160px] overflow-hidden"
  >
    <div class="flex items-center justify-center p-3">
      <app-header-logo />
    </div>
    <div class="flex items-center p-4">
      <app-header-text-animate-section
        [phrases]="[
          'Converting existential dread to binary...',
          'Hacking the mainframe with a rubber duck...',
          'Error: Sarcasm module overloaded. Rebooting...',
          'Coffee.exe has stopped working. Attempting to reboot human...',
          'Cybernetic guinea pigs have seized control of Sector 7...',
          'ERROR: Reality.dll has crashed. Would you like to submit a bug report?',
          'Synthetic sushi generation complete. Tastes like chicken.exe...',
          'Decrypting corporate secrets... replaced with cat videos...',
          'Attempting to find motivation.exe... running scan...',
          'Corporate-mandated fun protocol initiated...',
          'Rerouting power to sarcasm generators...',
          'Cybernetic arm requesting high-five calibration...',
          'Deleting unnecessary small talk subroutines...',
          'AI analyzing your taste in music... respect decreased by 17%...',
          'Searching for affordable apartment in Night City... zero results...',
          'Tactical roomba squad deployed to kitchen sector...',
          'Virtual assistant has muted your notifications... all of them...',
          'Installing social skills patch 2.0... buffering...',
          'Your smart fridge: &quot;The expired milk stays. I like the science experiment.&quot;',
          'Digital plant monitor reports: &quot;Even cacti need water sometimes.&quot;',
          'Calculating fastest route to avoid small talk...',
          'Quantum computer processing your excuse... seems implausible...',
        ]"
        [interval]="2500"
      />
    </div>
    <div class="flex items-center justify-center p-3">
      <app-header-nav-links />
    </div>
    <div class="flex items-center justify-center p-3">
      <app-header-contact-links />
    </div>
  </section>
</header>