Model Evaluation Metrics Dashboard

<section id="stack" class="max-w-7xl sm:px-6 sm:mt-20 border-white/10 border-t mt-16 pt-10">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
        <!-- Skills -->
        <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>

        <!-- Code Snippet -->
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="flex items-center justify-between">
            <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="terminal" class="lucide lucide-terminal w-4 h-4 text-white/80"><path d="M12 19h8" class=""></path><path d="m4 17 6-6-6-6" class=""></path></svg>
              <h3 class="text-xl font-semibold tracking-tight">RAG Pipeline</h3>
            </div>
            <span class="text-[11px] text-white/60">~42 lines</span>
          </div>
          <pre class="text-[12px] leading-relaxed overflow-auto text-white/90 bg-black/40 border-white/10 border rounded-xl mt-3 pt-3 pr-3 pb-3 pl-3" style="font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;"><span style="color: #ff7b72;">from</span> <span style="color: #79c0ff;">fastapi</span> <span style="color: #ff7b72;" class="">import</span> <span style="color: #79c0ff;" class="">FastAPI</span>
<span style="color: #ff7b72;">from</span> <span style="color: #79c0ff;" class="">rag</span> <span style="color: #ff7b72;">import</span> <span style="color: #79c0ff;" class="">embed</span>, <span style="color: #79c0ff;" class="">search</span>, <span style="color: #79c0ff;">rerank</span>, <span style="color: #79c0ff;">answer</span>
<span style="color: #ff7b72;">from</span> <span style="color: #79c0ff;">tracers</span> <span style="color: #ff7b72;" class="">import</span> <span style="color: #79c0ff;" class="">trace</span>

<span style="color: #ffa657;">app</span> = <span style="color: #79c0ff;">FastAPI</span>()

<span style="color: #a5a5a5;">@</span><span style="color: #ffa657;" class="">app</span>.<span style="color: #d2a8ff;" class="">post</span>(<span style="color: #a5d6ff;" class="">"/ask"</span>)
<span style="color: #a5a5a5;">@</span><span style="color: #d2a8ff;">trace</span>(<span style="color: #a5d6ff;">"ask"</span>)
<span style="color: #ff7b72;">def</span> <span style="color: #d2a8ff;">ask</span>(<span style="color: #ffa657;">q</span>: <span style="color: #ff7b72;">str</span>, <span style="color: #ffa657;">user_id</span>: <span style="color: #ff7b72;">str</span>):
    <span style="color: #ffa657;" class="">q_vec</span> = <span style="color: #d2a8ff;" class="">embed</span>(<span style="color: #ffa657;" class="">q</span>)
    <span style="color: #ffa657;">chunks</span> = <span style="color: #d2a8ff;" class="">search</span>(<span style="color: #ffa657;" class="">q_vec</span>, <span style="color: #ffa657;">k</span>=<span style="color: #a5d6ff;" class="">20</span>, <span style="color: #ffa657;" class="">filters</span>={<span style="color: #a5d6ff;" class="">"user"</span>: <span style="color: #ffa657;">user_id</span>})
    <span style="color: #ffa657;" class="">ranked</span> = <span style="color: #d2a8ff;" class="">rerank</span>(<span style="color: #ffa657;" class="">q</span>, <span style="color: #ffa657;" class="">chunks</span>)[:<span style="color: #a5d6ff;">6</span>]
    <span style="color: #ff7b72;">return</span> <span style="color: #d2a8ff;">answer</span>(<span style="color: #ffa657;">q</span>, <span style="color: #ffa657;">ranked</span>, <span style="color: #ffa657;" class="">tools</span>=[<span style="color: #a5d6ff;" class="">"browser"</span>, <span style="color: #a5d6ff;" class="">"code"</span>], <span style="color: #ffa657;">guardrails</span>=<span style="color: #ff7b72;">True</span>)</pre>
        </div>

        <!-- Timeline -->
        <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 data-lucide="timeline" class="w-4 h-4 text-white/80"></svg>
    <h3 class="text-xl font-semibold tracking-tight">Timeline</h3>
  </div>
  <ol class="mt-3">
    <li class="relative pl-6 pb-4 border-l border-white/10">
      <span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white"></span>
      <p class="text-xs text-white/60">2025</p>
      <p class="text-sm font-medium tracking-tight">Independent — AI Engineer</p>
      <p class="text-xs text-white/60 mt-1">Building production AI systems, RAG pipelines, and agentic workflows for startups and enterprise teams.</p>
    </li>
    <li class="relative pl-6 pb-4 border-l border-white/10">
      <span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white/80"></span>
      <p class="text-xs text-white/60">2022 — 2024</p>
      <p class="text-sm font-medium tracking-tight">Senior Product Designer — Analytics</p>
      <p class="text-xs text-white/60 mt-1">Led design for data visualization platform, shipped ML-powered insights dashboard used by 10k+ analysts.</p>
    </li>
    
    <li class="relative pl-6 border-l border-white/10">
      <span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white/60"></span>
      <p class="text-xs text-white/60">2017 — 2021</p>
      <p class="text-sm font-medium tracking-tight">Frontend Engineer — Commerce</p>
      <p class="text-xs text-white/60 mt-1">Built responsive e-commerce platform with React/Node.js, optimized for mobile conversion and performance.</p>
    </li>
  </ol>
</div>
      </div>
    </section>