gilles/claude-code-best-practice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

presentation/learning-journey: rebuild slide 2 chip set with visual hierarchy

Browse Source 
Introduce a hero tier (6 blue chips, ~1.55-1.6rem, weight 800, glow shadow)
and a supporting tier (12 chips across purple/green/amber, ~0.9-1.0rem, weight
600, softer shadow). Recolor agentic engineering, orchestration, dumb zone →
blue hero; recolor harness, compaction → purple supporting. Add new chip
"agentic workflows" as a blue hero chip. Randomize positions of all 18 chips
for natural distribution and breathing room.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shayan Rais
2026-04-19 12:27:41 +05:00
parent 69b51ec6a3
commit b3a7e2decd
1 changed files with 41 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/learning-journey/index.html
+41 -24
View File
@@ -158,46 +158,63 @@
<p style="font-size: 1rem; color: #aaa; margin-bottom: 0; font-style: italic;">I'll unpack each of these as we go &mdash; for now, just let them wash over you.</p>
<div style="position: relative; width: 100%; height: calc(100vh - 200px); min-height: 480px; overflow: hidden;">
<!-- Row 1 (top cluster) -->
<span style="position: absolute; top: 4%; left: 12%; transform: rotate(-4deg); background: #1565c0; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.25rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">vibe coding</span>
<!-- ===== HERO TIER: Blue chips (bigger, bolder, dominant) ===== -->
<!-- vibe coding — top-left anchor -->
<span style="position: absolute; top: 3%; left: 5%; transform: rotate(-3deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.6rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">vibe coding</span>
<span style="position: absolute; top: 2%; left: 45%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">agentic engineering</span>
<!-- agentic engineering — top-right -->
<span style="position: absolute; top: 2%; left: 52%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.55rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">agentic engineering</span>
<span style="position: absolute; top: 5%; left: 72%; transform: rotate(-5deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">hallucination</span>
<!-- progressive disclosure — centre-right, row 2 -->
<span style="position: absolute; top: 22%; left: 55%; transform: rotate(-4deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.5rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">progressive disclosure</span>
<!-- Row 1b -->
<span style="position: absolute; top: 11%; left: 68%; transform: rotate(4deg); background: #2e7d32; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">prompt engineering</span>
<!-- orchestration — left-centre -->
<span style="position: absolute; top: 42%; left: 6%; transform: rotate(3deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.6rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">orchestration</span>
<!-- Row 2 -->
<span style="position: absolute; top: 18%; left: 3%; transform: rotate(5deg); background: #2e7d32; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context engineering</span>
<!-- dumb zone — centre, row 4 -->
<span style="position: absolute; top: 60%; left: 36%; transform: rotate(-5deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.55rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">dumb zone</span>
<span style="position: absolute; top: 20%; left: 35%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 7px 14px; border-radius: 24px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context bloat</span>
<!-- agentic workflows — bottom-right (NEW) -->
<span style="position: absolute; top: 72%; left: 58%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.5rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">agentic workflows</span>
<span style="position: absolute; top: 17%; left: 58%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">progressive disclosure</span>
<!-- ===== SUPPORTING TIER: Purple chips (smaller, softer) ===== -->
<!-- MCP -->
<span style="position: absolute; top: 14%; left: 3%; transform: rotate(5deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">MCP</span>
<!-- Row 3 (middle) -->
<span style="position: absolute; top: 35%; left: 8%; transform: rotate(-5deg); background: #2e7d32; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.15rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context rot</span>
<!-- hooks -->
<span style="position: absolute; top: 31%; left: 46%; transform: rotate(-4deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">hooks</span>
<span style="position: absolute; top: 37%; left: 30%; transform: rotate(6deg); background: #7b1fa2; color: #fff; padding: 12px 24px; border-radius: 24px; font-size: 1.4rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">orchestration</span>
<!-- harness (was blue, now purple) -->
<span style="position: absolute; top: 52%; left: 64%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">harness</span>
<span style="position: absolute; top: 33%; left: 60%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">one-shot prompting</span>
<!-- compaction (was blue, now purple) -->
<span style="position: absolute; top: 80%; left: 8%; transform: rotate(-3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">compaction</span>
<!-- Row 3b -->
<span style="position: absolute; top: 42%; left: 62%; transform: rotate(5deg); background: #2e7d32; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">AI slop</span>
<!-- ===== SUPPORTING TIER: Green chips ===== -->
<!-- context engineering -->
<span style="position: absolute; top: 8%; left: 28%; transform: rotate(-2deg); background: #2e7d32; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">context engineering</span>
<!-- Row 4 -->
<span style="position: absolute; top: 52%; left: 2%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">MCP</span>
<!-- context rot -->
<span style="position: absolute; top: 36%; left: 30%; transform: rotate(5deg); background: #2e7d32; color: #fff; padding: 7px 14px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">context rot</span>
<span style="position: absolute; top: 50%; left: 18%; transform: rotate(-6deg); background: #2e7d32; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.2rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">dumb zone</span>
<!-- prompt engineering -->
<span style="position: absolute; top: 55%; left: 3%; transform: rotate(-4deg); background: #2e7d32; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">prompt engineering</span>
<span style="position: absolute; top: 54%; left: 42%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">harness</span>
<!-- AI slop -->
<span style="position: absolute; top: 68%; left: 24%; transform: rotate(4deg); background: #2e7d32; color: #fff; padding: 7px 14px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">AI slop</span>
<span style="position: absolute; top: 51%; left: 62%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.25rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">token burn</span>
<!-- ===== SUPPORTING TIER: Amber chips ===== -->
<!-- hallucination -->
<span style="position: absolute; top: 5%; left: 78%; transform: rotate(-5deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">hallucination</span>
<!-- Row 5 (bottom cluster) -->
<span style="position: absolute; top: 68%; left: 10%; transform: rotate(5deg); background: #7b1fa2; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">hooks</span>
<!-- context bloat -->
<span style="position: absolute; top: 20%; left: 22%; transform: rotate(3deg); background: #e65100; color: #fff; padding: 7px 14px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">context bloat</span>
<span style="position: absolute; top: 70%; left: 35%; transform: rotate(-5deg); background: #1565c0; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">compaction</span>
<!-- one-shot prompting -->
<span style="position: absolute; top: 45%; left: 52%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">one-shot prompting</span>
<!-- token burn -->
<span style="position: absolute; top: 81%; left: 42%; transform: rotate(5deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">token burn</span>
</div>
</div>