updated presentation

2026-04-22 15:49:29 +05:00
parent ada024f672
commit d258e63fa3
7 changed files with 7 additions and 139 deletions
@@ -239,11 +239,11 @@
                    onmouseover="this.style.transform='translateY(-3px)'; this.style.boxShadow='0 8px 28px rgba(230,81,0,0.22)'; this.style.background='#fff3e0';"
                    onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'; this.style.background='#f8f9fa';"
                >
-                    <img src="../assets/logo/claude-mascot.svg" alt="Claude mascot" style="width: 56px; height: 56px; object-fit: contain; flex-shrink: 0;" />
+                    <img src="../../!/claude-jumping.svg" alt="Claude mascot" style="width: 56px; height: 56px; object-fit: contain; flex-shrink: 0;" />
                    <div style="text-align: left; flex: 1;">
-                        <div style="font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: #e65100; font-weight: 700; margin-bottom: 4px;">Achievement</div>
+                        <div style="font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: #e65100; font-weight: 700; margin-bottom: 4px;">Open Source</div>
                        <div style="font-size: 1.0rem; font-weight: 600; color: #1a1a1a; line-height: 1.3;">Creator of <code style="background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; font-size: 0.93rem;">claude-code-best-practice</code></div>
-                        <div style="font-size: 0.87rem; color: #666; margin-top: 3px;">The most-starred AI repo from Pakistan &mdash; over 50,000 stars <span style="color: #e65100;">&#9733;</span></div>
+                        <div style="font-size: 0.87rem; color: #666; margin-top: 3px;">The most starred 🇵🇰 Pakistani AI repo <img src="../assets/logo/github.svg" alt="GitHub" style="height: 22px; width: auto; vertical-align: middle; margin: 0 4px;" /> with almost 50,000 stars <span style="color: #e65100;">&#9733;</span></div>
                    </div>
                </a>

@@ -492,8 +492,8 @@ todoapp/
            </div>
        </div>
        <div style="display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 28px; max-width: 720px; margin-left: auto; margin-right: auto;">
-            <img src="../assets/hallucinations-opus-strawperry.jpg" alt="Claude Opus hallucinating the letter count in 'strawberry'" style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
-            <img src="../assets/hallucinations-opus-year.jpg" alt="Claude Opus hallucinating the current year" style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
+            <img src="../assets/hallucination/hallucinations-opus-strawperry.jpg" alt="Claude Opus hallucinating the letter count in 'strawberry'" style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
+            <img src="../assets/hallucination/hallucinations-opus-year.jpg" alt="Claude Opus hallucinating the current year" style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
        </div>
        <div class="trigger-box" style="margin-top: 28px;">
            <h4>The Fix Isn't Better Prompting</h4>
@@ -985,7 +985,7 @@ Fetch the current temperature for Dubai, UAE.
            <h4>Think of it like this</h4>
            <p>Imagine Claude has a <strong>brain</strong> that holds everything it's aware of right now &mdash; your question, every file it's opened, every tool result, every word it's said back to you. If a thought isn't in the brain, Claude can't use it. Simple as that.</p>
        </div>
-        <img src="../assets/context-window.jpeg" alt="Context window diagram showing how the 1M token limit is divided across system prompt, tools, files, and conversation" style="width: 100%; max-width: 800px; margin: 24px auto; display: block; border-radius: 8px;" />
+        <img src="../assets/concepts/context-window.jpeg" alt="Context window diagram showing how the 1M token limit is divided across system prompt, tools, files, and conversation" style="width: 100%; max-width: 800px; margin: 24px auto; display: block; border-radius: 8px;" />
        <p>When the <code>weather-agent</code> is dispatched, it gets its own fresh brain &mdash; and <code>weather-fetcher</code> is pinned into it at startup via the <code>skills:</code> field. Everything you give Claude in a conversation lands in its brain:</p>
        <div class="use-cases">
            <div class="use-case-item">
@@ -1020,7 +1020,7 @@ Fetch the current temperature for Dubai, UAE.
    <div class="slide" data-slide="24">
        <h1>What Loads at Session Start</h1>
        <p>The moment you open Claude Code, certain things land in Claude's brain <strong>before you've typed a word</strong>. The rest waits in the wings &mdash; only loaded when you actually need it. This is called <strong>progressive disclosure</strong>.</p>
-        <img src="../assets/context.jpg" alt="Diagram showing what loads into Claude's context window at session start" style="width: 100%; max-width: 800px; margin: 24px auto; display: block; border-radius: 8px;" />
+        <img src="../assets/concepts/context.jpg" alt="Diagram showing what loads into Claude's context window at session start" style="width: 100%; max-width: 800px; margin: 24px auto; display: block; border-radius: 8px;" />
        <div class="use-cases" style="margin-top: 24px;">
            <div class="use-case-item">
                <span class="use-case-icon">&#x1F4CB;</span>
@@ -1,132 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 82" width="160" height="82">
-  <style>
-    .right-arm {
-      animation: arm-idle 2s ease-in-out infinite;
-      transform-origin: 86px 40px;
-    }
-    .eye {
-      animation: blink 3s ease-in-out infinite;
-    }
-    .right-leg {
-      animation: kick-leg 2s ease-in-out infinite;
-      transform-origin: 70px 60px;
-    }
-    .football {
-      animation: ball-travel 2s ease-in-out infinite;
-    }
-    @keyframes arm-idle {
-      0%, 100% { transform: rotate(-2deg); }
-      50% { transform: rotate(2deg); }
-    }
-    @keyframes blink {
-      0%, 45%, 55%, 100% { transform: scaleY(1); }
-      50% { transform: scaleY(0.1); }
-    }
-    @keyframes kick-leg {
-      0%, 10% { transform: rotate(0deg); }
-      20%, 25% { transform: rotate(-25deg); }
-      35%, 100% { transform: rotate(0deg); }
-    }
-    @keyframes ball-travel {
-      0%, 10% { transform: translate(0, 0); }
-      20% { transform: translate(5px, -2px); }
-      45% { transform: translate(55px, -5px); }
-      50% { transform: translate(55px, -5px); }
-      80% { transform: translate(5px, -2px); }
-      90%, 100% { transform: translate(0, 0); }
-    }
-  </style>
-
-  <!-- Gradient definitions -->
-  <defs>
-    <!-- 3D gradient for ball -->
-    <radialGradient id="ballGradient" cx="35%" cy="35%" r="60%" fx="30%" fy="30%">
-      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
-      <stop offset="70%" style="stop-color:#e8e8e8;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#c0c0c0;stop-opacity:1" />
-    </radialGradient>
-    <!-- Gradient for black pentagons -->
-    <linearGradient id="pentagonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#333333;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-
-  <!-- Shadow -->
-  <ellipse cx="50" cy="82" rx="22" ry="5" fill="#000" opacity="0.25"/>
-
-  <!-- Claude Character Group -->
-  <g class="claude-body">
-    <!-- Claude Orange: #E07C4C -->
-
-    <!-- Left ear -->
-    <rect x="22" y="10" width="8" height="14" fill="#E07C4C"/>
-
-    <!-- Right ear -->
-    <rect x="70" y="10" width="8" height="14" fill="#E07C4C"/>
-
-    <!-- Main body - top row (narrower) -->
-    <rect x="18" y="24" width="64" height="4" fill="#E07C4C"/>
-
-    <!-- Main body - full block -->
-    <rect x="14" y="28" width="72" height="32" fill="#E07C4C"/>
-
-    <!-- Eyes looking right (with blink animation) -->
-    <rect class="eye" x="38" y="34" width="8" height="10" fill="#000000" style="transform-origin: 42px 39px;"/>
-    <rect class="eye" x="68" y="34" width="8" height="10" fill="#000000" style="transform-origin: 72px 39px;"/>
-
-    <!-- Left arm at side -->
-    <rect x="2" y="36" width="12" height="8" fill="#E07C4C"/>
-
-    <!-- Right arm at side (no stick) -->
-    <rect class="right-arm" x="86" y="36" width="14" height="8" fill="#E07C4C"/>
-
-    <!-- Left leg -->
-    <rect x="24" y="60" width="12" height="10" fill="#E07C4C"/>
-    <!-- Left shoe -->
-    <rect x="22" y="70" width="16" height="6" rx="1" fill="#1a1a1a"/>
-
-    <!-- Right leg (kicking) -->
-    <g class="right-leg">
-      <rect x="64" y="60" width="12" height="10" fill="#E07C4C"/>
-      <!-- Right shoe -->
-      <rect x="62" y="70" width="16" height="6" rx="1" fill="#1a1a1a"/>
-    </g>
-  </g>
-
-  <!-- Football (soccer ball, in front of mascot) -->
-  <g class="football">
-    <!-- Shadow under ball -->
-    <ellipse cx="88" cy="82" rx="9" ry="3" fill="#000" opacity="0.2"/>
-    <!-- White base with gradient for 3D effect -->
-    <circle cx="88" cy="67" r="12" fill="url(#ballGradient)" stroke="#555" stroke-width="0.5"/>
-    <!-- Clip path to keep pentagons inside the ball -->
-    <clipPath id="ballClip">
-      <circle cx="88" cy="67" r="11.5"/>
-    </clipPath>
-    <g clip-path="url(#ballClip)">
-      <!-- Center black pentagon (smaller) -->
-      <path d="M88,64 L90,65.5 L89.5,68 L86.5,68 L86,65.5 Z" fill="url(#pentagonGradient)"/>
-      <!-- Top pentagon (partial) -->
-      <path d="M88,56 L90,57.5 L89.5,60 L86.5,60 L86,57.5 Z" fill="url(#pentagonGradient)"/>
-      <!-- Right pentagon (partial) -->
-      <path d="M97,62 L99,65 L98,68 L95.5,67 L96,63.5 Z" fill="url(#pentagonGradient)"/>
-      <!-- Bottom-right pentagon (partial) -->
-      <path d="M95,72 L97,75 L94,77.5 L91,75 L93,72 Z" fill="url(#pentagonGradient)"/>
-      <!-- Bottom-left pentagon (partial) -->
-      <path d="M81,72 L83,75 L80,77.5 L77,75 L79,72 Z" fill="url(#pentagonGradient)"/>
-      <!-- Left pentagon (partial) -->
-      <path d="M79,62 L80,63.5 L79.5,67 L77,68 L76,65 Z" fill="url(#pentagonGradient)"/>
-      <!-- Panel lines -->
-      <line x1="88" y1="64" x2="88" y2="56" stroke="#666" stroke-width="0.4"/>
-      <line x1="90" y1="65.5" x2="97" y2="62" stroke="#666" stroke-width="0.4"/>
-      <line x1="89.5" y1="68" x2="95" y2="72" stroke="#666" stroke-width="0.4"/>
-      <line x1="86.5" y1="68" x2="81" y2="72" stroke="#666" stroke-width="0.4"/>
-      <line x1="86" y1="65.5" x2="79" y2="62" stroke="#666" stroke-width="0.4"/>
-      <!-- Highlight shine -->
-      <ellipse cx="84" cy="61" rx="3" ry="2" fill="#fff" opacity="0.6"/>
-    </g>
-  </g>
-
-
-</svg>