Brutalism_Portfolio_Columns_Component

<section class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-100 dark:bg-gray-900 font-mono text-gray-900 dark:text-gray-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto border-4 border-gray-900 dark:border-gray-100 p-4 lg:p-8 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">

    <!-- Left Column - Main Title & Intro -->
    <div class="lg:col-span-1 border-b-4 lg:border-b-0 lg:border-r-4 border-gray-900 dark:border-gray-100 pb-4 lg:pb-0 lg:pr-4">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl uppercase leading-none mb-4 tracking-tighter text-gray-900 dark:text-gray-100">
        <span class="block">My</span>
        <span class="block text-red-700 dark:text-red-300">Work</span>
        <span class="block">Showcase</span>
      </h1>
      <p class="text-lg md:text-xl leading-snug tracking-tight max-w-sm mb-4">
        A raw collection of creations, defying norms and embracing the unexpected.
      </p>
      <div class="flex space-x-2">
        <button class="px-4 py-2 border-2 border-gray-900 dark:border-gray-100 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 uppercase text-sm font-bold hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-200">
          See All
        </button>
        <button class="px-4 py-2 border-2 text-gray-900 dark:text-gray-100 border-gray-900 dark:border-gray-100 uppercase text-sm font-bold hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
          About Me
        </button>
      </div>
    </div>

    <!-- Right Columns - Projects -->
    <div class="lg:col-span-2 space-y-8">
      
      <!-- Project 1 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b-4 border-gray-900 dark:border-gray-100 pb-8">
        <div class="md:col-span-1">
          <img src="https://picsum.photos/seed/brutalim_proj1/600/400" alt="Project 1 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
        <div class="md:col-span-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">The Grid Disjunction</h2>
          <p class="text-base leading-snug">
            An experimental web interface exploring fragmented layouts and stark contrasts. Built with raw HTML and CSS. 
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">UI/UX</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Web Design</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Brutalism</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
      </div>

      <!-- Project 2 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b-4 border-gray-900 dark:border-gray-100 pb-8">
        <div class="md:col-span-1 order-2 md:order-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">Echoes of Form</h2>
          <p class="text-base leading-snug">
            A series of digital art pieces focusing on deconstructed shapes and desaturated palettes.
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Generative Art</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Digital Painting</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
        <div class="md:col-span-1 order-1 md:order-2">
          <img src="https://picsum.photos/seed/brutalim_proj2/600/400" alt="Project 2 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
      </div>

      <!-- Project 3 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="md:col-span-1">
          <img src="https://picsum.photos/seed/brutalim_proj3/600/400" alt="Project 3 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
        <div class="md:col-span-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">Concrete Dreams</h2>
          <p class="text-base leading-snug">
            Architectural visualizations with harsh lighting and exposed structures.
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">3D Modeling</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Rendering</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Architecture</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
      </div>

    </div>

  </div>
</section>