Skills & Certifications Portfolio Section

<section id="skills" class="max-w-7xl sm:px-6 sm:mt-20 border-black/5 border-t mt-16 mr-auto ml-auto pt-10 pr-4 pl-4">
  <div class="flex items-end justify-between">
    <h2 class="text-2xl sm:text-3xl tracking-tight">Skills &amp; Expertise</h2>
    <p class="hidden sm:block text-xs text-gray-500">Tools, technologies &amp; focus areas</p>
  </div>

  <div class="mt-6 space-y-8">
    <!-- Design Skills -->
    <div class="">
      <h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-600"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" class=""></path></svg>
        Design &amp; Strategy
      </h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Design Systems</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Figma</div>
          <div class="text-xs text-gray-500 mt-0.5">Expert</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Prototyping</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">User Research</div>
          <div class="text-xs text-gray-500 mt-0.5">Intermediate</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Accessibility</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Usability Testing</div>
          <div class="text-xs text-gray-500 mt-0.5">Intermediate</div>
        </div>
      </div>
    </div>

    <!-- Development Skills -->
    <div class="">
      <h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-600"><polyline points="16 18 22 12 16 6" class=""></polyline><polyline points="8 6 2 12 8 18" class=""></polyline></svg>
        Frontend Development
      </h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">React</div>
          <div class="text-xs text-gray-500 mt-0.5">Expert</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">TypeScript</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Next.js</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">HTML/CSS</div>
          <div class="text-xs text-gray-500 mt-0.5">Expert</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Tailwind CSS</div>
          <div class="text-xs text-gray-500 mt-0.5">Expert</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Framer Motion</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
      </div>
    </div>

    <!-- Specialized Skills -->
    <div class="">
      <h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-600"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" class=""></path><path d="M13 13l6 6" class=""></path></svg>
        Specializations
      </h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Data Visualization</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Performance</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Analytics</div>
          <div class="text-xs text-gray-500 mt-0.5">Intermediate</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">System Thinking</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">A/B Testing</div>
          <div class="text-xs text-gray-500 mt-0.5">Intermediate</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">API Integration</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
      </div>
    </div>

    <!-- Recent Certifications & Learning -->
    <div class="bg-gray-50 rounded-2xl p-6 border border-gray-100">
      <h3 class="text-sm font-semibold text-gray-900 mb-4">Recent Learning &amp; Certifications</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="flex items-start gap-3">
          <div class="w-2 h-2 rounded-full bg-green-500 mt-2"></div>
          <div class="">
            <div class="text-sm font-medium">WCAG 2.1 AA Certification</div>
            <div class="text-xs text-gray-500">Web Accessibility Guidelines • 2024</div>
          </div>
        </div>
        <div class="flex items-start gap-3">
          <div class="w-2 h-2 rounded-full bg-blue-500 mt-2"></div>
          <div>
            <div class="text-sm font-medium">Advanced React Patterns</div>
            <div class="text-xs text-gray-500">Epic React by Kent C. Dodds • 2024</div>
          </div>
        </div>
        <div class="flex items-start gap-3">
          <div class="w-2 h-2 rounded-full bg-purple-500 mt-2"></div>
          <div class="">
            <div class="text-sm font-medium">Design System Architecture</div>
            <div class="text-xs text-gray-500">Independent study • 2023</div>
          </div>
        </div>
        <div class="flex items-start gap-3">
          <div class="w-2 h-2 rounded-full bg-orange-500 mt-2"></div>
          <div class="">
            <div class="text-sm font-medium">WebGL Fundamentals</div>
            <div class="text-xs text-gray-500">Three.js &amp; Interactive Graphics • 2024</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>