CLAUDE.md

Project

Jekyll + Minimal Mistakes (remote_theme: mmistakes/minimal-mistakes) personal tech blog (choeyunbeom.github.io). AI-engineer job-search focused.

Home (index.html) = Featured Projects card grid + theme’s Recent Posts. /portfolio/ (_pages/portfolio.md) = full project showcase + Reply competition card.

Project showcase = _includes/project-cards.html

The Featured Projects / portfolio cards are HTML + inline CSS, not Markdown. Both the home and the portfolio page render them with:

<style>
.pcard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
  margin: 1.5em 0 2em;
}
@media (max-width: 768px) {
  .pcard-grid { grid-template-columns: 1fr; }
}
.pcard {
  display: flex;
  flex-direction: column;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.pcard-head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 1.1em 1.2em;
  color: #fff;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.3;
}
.pcard-head i { font-size: 1.4em; flex-shrink: 0; }
.pcard-arxiv  { background: linear-gradient(135deg, #4568dc, #3f5efb); }
.pcard-fin    { background: linear-gradient(135deg, #11998e, #38ef7d); }
.pcard-defect { background: linear-gradient(135deg, #c31432, #f45c43); }
.pcard-torcs  { background: linear-gradient(135deg, #f7971e, #ffd200); }
.pcard-reply  { background: linear-gradient(135deg, #654ea3, #da4453); }
.pcard-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1em 1.2em 1.2em;
}
.pcard-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-bottom: 0.8em;
}
.pcard-metric {
  background: #f1f3f5;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 0.25em 0.6em;
  font-size: 0.8em;
  font-weight: 600;
  color: #24292e;
  white-space: nowrap;
}
.pcard-desc {
  font-size: 0.92em;
  color: #444;
  line-height: 1.5;
  margin-bottom: 0.6em;
}
.pcard-stack {
  font-size: 0.8em;
  color: #6a737d;
  margin-bottom: 1em;
}
.pcard-actions {
  display: flex;
  gap: 0.5em;
  margin-top: auto;
}
.pcard-actions .btn { margin: 0; }
</style>

<div class="pcard-grid">

  <div class="pcard">
    <div class="pcard-head pcard-arxiv">
      <i class="fas fa-search"></i><span>arXiv RAG System</span>
    </div>
    <div class="pcard-body">
      <div class="pcard-metrics">
        <span class="pcard-metric">Hit Rate 60→100%</span>
        <span class="pcard-metric">MRR 0.51→0.82</span>
        <span class="pcard-metric">async pipeline</span>
      </div>
      <div class="pcard-desc">
        End-to-end RAG for academic papers, built and optimised from scratch.
        FastAPI <code>lifespan</code> startup, fully async I/O, and a documented
        28pp fine-tuning regression traced to training-data contamination.
      </div>
      <div class="pcard-stack">FastAPI · ChromaDB · LLM (Qwen3 4B / Ollama) · Docker</div>
      <div class="pcard-actions">
        <a href="https://github.com/choeyunbeom/arxiv_rag_system" class="btn btn--primary btn--small">Code</a>
        <a href="/machine%20learning/nlp/arxiv-rag-system/" class="btn btn--inverse btn--small">Write-up</a>
      </div>
    </div>
  </div>

  <div class="pcard">
    <div class="pcard-head pcard-fin">
      <i class="fas fa-project-diagram"></i><span>FinScope — Multi-Agent Analyst</span>
    </div>
    <div class="pcard-body">
      <div class="pcard-metrics">
        <span class="pcard-metric">3-agent LangGraph</span>
        <span class="pcard-metric">~15s parallel</span>
        <span class="pcard-metric">hallucination check</span>
      </div>
      <div class="pcard-desc">
        Multi-agent RAG over SEC EDGAR & Companies House filings.
        Retriever → Analyzer → Critic pipeline, parallel analysis via
        <code>asyncio.gather</code>, and a Critic Agent with a conditional retry loop.
      </div>
      <div class="pcard-stack">LangGraph · Groq (llama-3.3-70b) · ChromaDB · FastAPI · Langfuse</div>
      <div class="pcard-actions">
        <a href="https://github.com/choeyunbeom/finscope" class="btn btn--primary btn--small">Code</a>
        <a href="/machine%20learning/nlp/finscope-multi-agent-financial-analyst/" class="btn btn--inverse btn--small">Write-up</a>
      </div>
    </div>
  </div>

  <div class="pcard">
    <div class="pcard-head pcard-defect">
      <i class="fas fa-microscope"></i><span>DefectVision</span>
    </div>
    <div class="pcard-body">
      <div class="pcard-metrics">
        <span class="pcard-metric">100% AUROC (bottle)</span>
        <span class="pcard-metric">normal-only training</span>
        <span class="pcard-metric">real-time webcam</span>
      </div>
      <div class="pcard-desc">
        Real-time manufacturing defect detection with PatchCore — trained on
        normal images only, no labelled defects. FastAPI inference API plus a
        Streamlit dashboard with live webcam streaming.
      </div>
      <div class="pcard-stack">Anomalib · PatchCore · PyTorch · OpenVINO · FastAPI · Streamlit</div>
      <div class="pcard-actions">
        <a href="https://github.com/choeyunbeom/defectvision" class="btn btn--primary btn--small">Code</a>
        <a href="/machine%20learning/computer%20vision/defectvision-anomaly-detection/" class="btn btn--inverse btn--small">Write-up</a>
      </div>
    </div>
  </div>

  <div class="pcard">
    <div class="pcard-head pcard-torcs">
      <i class="fas fa-flag-checkered"></i><span>TORCS RL Racing Agent</span>
    </div>
    <div class="pcard-body">
      <div class="pcard-metrics">
        <span class="pcard-metric">SAC · 9.7M steps</span>
        <span class="pcard-metric">reward shaping</span>
        <span class="pcard-metric">curriculum learning</span>
      </div>
      <div class="pcard-desc">
        Autonomous racing agent on the TORCS Corkscrew track. Self-implemented
        SAC (auto-entropy, twin-Q) with reward shaping and curriculum learning,
        plus a catastrophic-forgetting investigation.
      </div>
      <div class="pcard-stack">Python · PyTorch · SAC · PPO</div>
      <div class="pcard-actions">
        <a href="https://github.com/choeyunbeom/ibm_ai_race" class="btn btn--primary btn--small">Code</a>
        <a href="/reinforcement%20learning/autonomous%20driving/torcs-rl-journey/" class="btn btn--inverse btn--small">Write-up</a>
      </div>
    </div>
  </div>

</div>

Card grid is a self-contained <style> + .pcard-grid of .pcards: gradient icon header, metric badges (.pcard-metric), description, stack line, and bottom-pinned Code / Write-up buttons. flexbox keeps card heights even; grid is responsive (2-col desktop → 1-col mobile).

Rules when editing cards:

Project repos (GitHub)

Reply AI Challenge

Rank is always 137 / 1,971 (Top 7%). Never show the bare number without context — it lives as a “Competition” card on /portfolio/ only, NOT as a badge on the home page (a context-free “137/1,971” reads as noise to recruiters).

Conventions

Build

System Ruby is 2.6 and lacks the pinned bundler — use rbenv Ruby 3.2.2:

RB=~/.rbenv/versions/3.2.2/bin
rm -rf _site .jekyll-cache .jekyll-metadata   # avoid stale incremental cache
PATH="$RB:$PATH" $RB/bundle exec jekyll build

Always do a clean build before committing — incremental builds silently skip include/layout changes.