Tech Stack Overview Card with Badges

<div class="bg-white/5 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4">
  <div class="flex items-center gap-2">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-4 h-4 text-white/80"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
    <h3 class="text-xl font-semibold tracking-tight">Tech Stack</h3>
  </div>
  
  <div class="mt-3 space-y-4">
    <div>
      <h4 class="text-sm font-medium text-white/80 mb-2">Frontend &amp; UI</h4>
      <div class="flex flex-wrap gap-2">
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">TypeScript</span>
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Next.js 14</span>
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">React 18</span>
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Tailwind CSS</span>
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Framer Motion</span>
      </div>
    </div>

    <div class="">
      <h4 class="text-sm font-medium text-white/80 mb-2">AI &amp; Backend</h4>
      <div class="flex flex-wrap gap-2">
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Python 3.11+</span>
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">FastAPI</span>
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">LangChain</span>
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">OpenAI API</span>
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Claude API</span>
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">vLLM</span>
        <span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Ollama</span>
      </div>
    </div>

    

    

    
  </div>

  <div class="mt-4 p-3 bg-black/30 rounded-lg border border-white/10">
    <p class="text-xs text-white/70 leading-relaxed">
      <span class="font-medium text-white/80">Focus areas:</span> RAG optimization, agentic workflows, prompt engineering, model evaluation, and production-ready AI systems with sub-second latency.
    </p>
  </div>
</div>