feat: serve blog at /blog from main Space + badge showcase

- Mount blog/ as FastAPI static files at /blog so the blog lives on
the same Space as the app (no separate repo needed)
- Add badges section to blog/index.html: 5 earned, 1 locked
- Add badges table to BLOG.md

BLOG.md

@@ -40,6 +40,21 @@ PDF upload
 
 ---
 
+## Badges Earned — 5 / 6
+
+Build Small Hackathon awards merit badges for specific technical achievements. Here's where we landed:
+
+| Badge | Status | What it took |
+|---|---|---|
+| **Off the Grid** | ✅ Earned | Zero external APIs — everything runs via ZeroGPU, no OpenAI key, no rate limits, no data leaving the machine |
+| **Well-Tuned** | ✅ Earned | QLoRA fine-tune on SQuAD, model published at `build-small-hackathon/MiniCPM4-8B-PaperProf` |
+| **Off-Brand** | ✅ Earned | Hand-built HTML/CSS/JS — Gradio is invisible, the entire UI is 100% custom (see Lesson 2 below) |
+| **Llama Champion** | ✅ Earned | GGUF published at `build-small-hackathon/MiniCPM4-8B-PaperProf-GGUF`, llama.cpp CPU runtime wired in via `PAPERPROF_RUNTIME=llamacpp` |
+| **Field Notes** | ✅ Earned | This post, plus the interactive `blog/index.html` site |
+| Sharing is Caring | — | Share an agent trace on the Hub for the community |
+
+---
+
 ## The Real Story: 68 Commits of Lessons
 
 A hackathon README tells you what was built. The git log tells you what actually happened. Ours has 68 commits, and roughly two-thirds of them start with `fix:`. Here is the honest version.

app.py

@@ -12,6 +12,9 @@ try:
     import threading
     import gradio as gr
     import spaces
+    import uvicorn
+    from fastapi import FastAPI
+    from fastapi.staticfiles import StaticFiles
     from core.parser import extract_text
     from core.chunker import chunk_text
     from core.questioner import generate_question, generate_mcq
@@ -1074,4 +1077,9 @@ with gr.Blocks(title="PaperProf", css=CSS) as demo:
 print("✅ Gradio demo defined successfully")
 
 print("✅ Launching demo...")
-demo.launch(server_name="0.0.0.0", server_port=7860)
+_fastapi = FastAPI()
+app = gr.mount_gradio_app(_fastapi, demo, path="/")
+app.mount("/blog", StaticFiles(directory="blog", html=True), name="blog")
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)

blog/index.html

@@ -358,6 +358,33 @@ td strong { color: #fff; font-weight: 600; }
 .btn:hover span { color: #07090F; }
 
 footer { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; padding: 70px 28px 46px; display: flex; flex-wrap: wrap; gap: 12px 40px; justify-content: space-between; font-family: var(--mono); font-size: .74rem; letter-spacing: 1px; color: var(--faint); }
+
+/* ============ BADGES ============ */
+.badges-section { position: relative; z-index: 1; max-width: 1060px; margin: 72px auto 0; padding: 0 28px; }
+.badges-header { display: flex; align-items: flex-end; gap: 28px; margin-bottom: 32px; flex-wrap: wrap; }
+.badges-eyebrow { font-family: var(--mono); font-size: .74rem; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan); display: block; margin-bottom: 10px; }
+.badges-score { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -2px; color: #fff; line-height: 1; }
+.badges-score em { font-style: normal; font-size: .55em; color: var(--dim); font-weight: 400; letter-spacing: -0.5px; }
+.badges-note { font-family: var(--mono); font-size: .76rem; color: var(--dim); max-width: 340px; line-height: 1.6; border-left: 2px solid var(--line-hot); padding-left: 16px; }
+.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
+.badge {
+  background: var(--bg-raise); border: 1px solid var(--line); border-radius: 18px;
+  padding: 24px 22px; display: flex; flex-direction: column; gap: 13px;
+  transition: border-color .3s, transform .3s;
+}
+.badge.earned { border-color: rgba(74,222,128,0.28); }
+.badge.earned:hover { border-color: rgba(74,222,128,0.6); transform: translateY(-5px); }
+.badge.locked { opacity: 0.42; }
+.badge-icon { font-size: 2rem; line-height: 1; }
+.badge-name { font-family: var(--display); font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: -0.3px; }
+.badge-desc { font-family: var(--mono); font-size: .72rem; color: var(--dim); line-height: 1.6; flex: 1; }
+.badge-chip {
+  display: inline-block; align-self: flex-start;
+  font-family: var(--mono); font-size: .65rem; letter-spacing: 2px; text-transform: uppercase;
+  border-radius: 50px; padding: 4px 12px;
+}
+.badge.earned .badge-chip { color: var(--green); background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.22); }
+.badge.locked .badge-chip { color: var(--faint); background: transparent; border: 1px solid rgba(255,255,255,0.08); }
 </style>
 </head>
 <body>
@@ -397,6 +424,54 @@ footer { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; padd
   <div class="stat reveal"><span class="stat-num" data-count="0">0</span><span class="stat-label">external APIs</span></div>
 </section>
 
+<section class="badges-section" aria-label="Hackathon badges earned">
+  <div class="badges-header reveal">
+    <div>
+      <span class="badges-eyebrow">Build Small Hackathon · Merit Badges</span>
+      <p class="badges-score">5 <em>/ 6 earned</em></p>
+    </div>
+    <p class="badges-note">Build Small awards badges for specific technical achievements. We collected five of six — every badge we could earn by shipping real, verifiable work.</p>
+  </div>
+  <div class="badges-grid">
+    <div class="badge earned reveal">
+      <span class="badge-icon">🔌</span>
+      <strong class="badge-name">Off the Grid</strong>
+      <span class="badge-desc">Zero external APIs. MiniCPM4-8B and FLUX.2-klein run entirely on ZeroGPU — no OpenAI key, no rate limits, no data leaving the machine.</span>
+      <span class="badge-chip">✓ Earned</span>
+    </div>
+    <div class="badge earned reveal">
+      <span class="badge-icon">🎯</span>
+      <strong class="badge-name">Well-Tuned</strong>
+      <span class="badge-desc">QLoRA fine-tune on SQuAD via Modal. Model published on Hugging Face at <code>build-small-hackathon/MiniCPM4-8B-PaperProf</code>.</span>
+      <span class="badge-chip">✓ Earned</span>
+    </div>
+    <div class="badge earned reveal">
+      <span class="badge-icon">🎨</span>
+      <strong class="badge-name">Off-Brand</strong>
+      <span class="badge-desc">Hand-built HTML/CSS/JS over a hidden-Gradio bridge. Glassmorphism, animated score ring, dark academia palette — no default Gradio chrome visible.</span>
+      <span class="badge-chip">✓ Earned</span>
+    </div>
+    <div class="badge earned reveal">
+      <span class="badge-icon">🦙</span>
+      <strong class="badge-name">Llama Champion</strong>
+      <span class="badge-desc">GGUF published at <code>build-small-hackathon/MiniCPM4-8B-PaperProf-GGUF</code>. llama.cpp CPU runtime wired in via <code>PAPERPROF_RUNTIME=llamacpp</code>.</span>
+      <span class="badge-chip">✓ Earned</span>
+    </div>
+    <div class="badge earned reveal">
+      <span class="badge-icon">📝</span>
+      <strong class="badge-name">Field Notes</strong>
+      <span class="badge-desc">This post — 68 commits, 10 days, zero sugarcoating. Honest account of what broke and what shipped.</span>
+      <span class="badge-chip">✓ Earned</span>
+    </div>
+    <div class="badge locked reveal">
+      <span class="badge-icon">🤝</span>
+      <strong class="badge-name">Sharing is Caring</strong>
+      <span class="badge-desc">Share an agent trace on the Hub so the community can learn from your runs.</span>
+      <span class="badge-chip">Not yet</span>
+    </div>
+  </div>
+</section>
+
 <main id="article">
 
   <p class="lede reveal">It's 11 PM, the exam is tomorrow, and you're re-reading the same lecture PDF for the fourth time, feeling productive while learning nothing. Passive re-reading is one of the worst study techniques on record. Active recall, forcing yourself to answer questions, is one of the best.</p>