feat: adjust slides based on course feedback

Author: JanDeDobbeleer

src/sections/copilot.tsx

@@ -647,7 +647,7 @@ export const copilotSlides: SlideType[] = [
               <ul className="space-y-2 text-sm text-gray-700">
                 <li className="flex"><span className="mr-2">•</span><span><strong>Remote:</strong> GitHub-hosted repos with fast search</span></li>
                 <li className="flex"><span className="mr-2">•</span><span><strong>Local:</strong> Semantic index on your machine</span></li>
-                <li className="flex"><span className="mr-2">•</span><span><strong>Basic:</strong> Fallback for larger codebases</span></li>
+                <li className="flex"><span className="mr-2">•</span><span><strong>Basic:</strong> Minimal indexing mode that uses simple file/path heuristics for very large repos</span></li>
               </ul>
             </div>
 
@@ -862,59 +862,5 @@ export const copilotSlides: SlideType[] = [
           </div>
         </div>
       )
-    },
-    {
-      title: "Tracking Your Copilot Usage",
-      subtitle: "Monitor Token Consumption with Copilot Token Tracker",
-      content: (
-        <div className="flex flex-col space-y-5 max-w-3xl mx-auto">
-          <div className="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
-            <h3 className="text-xl font-bold text-blue-900 mb-2">Copilot Token Tracker Extension</h3>
-            <p className="text-gray-700">
-              A VS Code extension that displays your daily and monthly GitHub Copilot estimated token usage directly in the status bar — helping you stay aware of your consumption.
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="bg-white p-4 rounded-lg shadow border border-blue-200">
-              <h4 className="font-semibold text-blue-900 mb-2">Key Features:</h4>
-              <ul className="space-y-2 text-gray-700">
-                <li className="flex"><span className="mr-2">•</span><span>Real-time status bar display: <code className="bg-gray-100 px-1 rounded text-sm"># today | month</code></span></li>
-                <li className="flex"><span className="mr-2">•</span><span>Auto-refreshes every 5 minutes</span></li>
-                <li className="flex"><span className="mr-2">•</span><span>Click to manually refresh or view details</span></li>
-                <li className="flex"><span className="mr-2">•</span><span>Hover for quick breakdown</span></li>
-              </ul>
-            </div>
-            <div className="bg-white p-4 rounded-lg shadow border border-blue-200">
-              <h4 className="font-semibold text-blue-900 mb-2">How It Works:</h4>
-              <ul className="space-y-2 text-gray-700">
-                <li className="flex"><span className="mr-2">•</span><span>Analyzes Copilot Chat log files</span></li>
-                <li className="flex"><span className="mr-2">•</span><span>Uses model-specific character-to-token ratios</span></li>
-                <li className="flex"><span className="mr-2">•</span><span>Intelligent caching for performance</span></li>
-                <li className="flex"><span className="mr-2">•</span><span>Detailed statistics panel on click</span></li>
-              </ul>
-            </div>
-          </div>
-
-          <div className="bg-gray-800 p-4 rounded-lg">
-            <p className="text-green-400 font-mono text-sm mb-2">Install from VS Code:</p>
-            <div className="text-gray-300 font-mono text-sm">
-              <p>ext install RobBos.copilot-token-tracker</p>
-            </div>
-          </div>
-
-          <div className="bg-amber-50 p-3 rounded-lg border border-amber-200">
-            <p className="text-sm text-amber-900">
-              <strong>⚠️ Note:</strong> Token counts are estimates based on local logs only. Multi-machine usage, web Copilot, and Premium Requests are not tracked.
-            </p>
-          </div>
-
-          <div className="bg-blue-100 p-4 rounded-lg">
-            <p className="text-sm italic text-blue-900">
-              <strong>4D Connection:</strong> Tracking usage supports <strong>Diligence</strong> — being accountable for how you use AI tools and understanding your consumption patterns. <a href="https://marketplace.visualstudio.com/items?itemName=RobBos.copilot-token-tracker" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">View on Marketplace</a>.
-            </p>
-          </div>
-        </div>
-      )
     }
 ];

src/sections/evolution.tsx

@@ -381,7 +381,7 @@ export const evolutionSlides: SlideType[] = [
               </li>
               <li className="flex items-start">
                 <span className="mr-2">•</span>
-                <span>Optional diff review</span>
+                <span>Optional code review</span>
               </li>
             </ul>
           </div>
@@ -507,71 +507,6 @@ export const evolutionSlides: SlideType[] = [
       </div>
     )
   },
-  {
-    title: "The Vibe Coding Future",
-    subtitle: "What work looks like at Stage 8+",
-    content: (
-      <div className="flex flex-col items-center md:justify-center md:h-full space-y-8 px-8">
-        <div className="bg-gradient-to-r from-purple-600 to-pink-600 p-8 rounded-lg shadow-2xl max-w-4xl">
-          <h3 className="text-3xl font-bold text-white mb-4 text-center">
-            "Work becomes fluid, an uncountable substance that you sling around freely"
-          </h3>
-          <p className="text-purple-100 text-center text-lg">
-            — Steve Yegge on vibe coding
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-6xl w-full">
-          <div className="bg-white p-6 rounded-lg shadow-lg border-l-4 border-purple-500">
-            <h4 className="font-bold text-gray-900 mb-3 flex items-center">
-              <span className="mr-2 text-2xl">⚡</span>
-              Throughput Over Perfection
-            </h4>
-            <p className="text-gray-700">
-              Focus on creation and correction at the speed of thought. Not 100% efficient, but you're flying.
-            </p>
-          </div>
-
-          <div className="bg-white p-6 rounded-lg shadow-lg border-l-4 border-pink-500">
-            <h4 className="font-bold text-gray-900 mb-3 flex items-center">
-              <span className="mr-2 text-2xl">🔄</span>
-              Regenerative Workflow
-            </h4>
-            <p className="text-gray-700">
-              Some work gets lost, regenerated. Some bugs get fixed 2-3 times. More work will come.
-            </p>
-          </div>
-
-          <div className="bg-white p-6 rounded-lg shadow-lg border-l-4 border-indigo-500">
-            <h4 className="font-bold text-gray-900 mb-3 flex items-center">
-              <span className="mr-2 text-2xl">🎯</span>
-              Product Manager Role
-            </h4>
-            <p className="text-gray-700">
-              You become a Product Manager. Gas Town is an Idea Compiler. You make up features, design them, sling work to agents.
-            </p>
-          </div>
-
-          <div className="bg-white p-6 rounded-lg shadow-lg border-l-4 border-blue-500">
-            <h4 className="font-bold text-gray-900 mb-3 flex items-center">
-              <span className="mr-2 text-2xl">🌊</span>
-              Simultaneous Creation & Consumption
-            </h4>
-            <p className="text-gray-700">
-              You both generate and consume work simultaneously. Churning forward relentlessly on huge piles of work.
-            </p>
-          </div>
-        </div>
-
-        <div className="bg-blue-50 border-l-4 border-blue-500 p-6 max-w-6xl w-full rounded-lg">
-          <h4 className="font-bold text-blue-900 mb-2">💡 The Shift</h4>
-          <p className="text-blue-800">
-            Your job is no longer to write code. Your job is to make tasks for superintelligent AI agents that can handle any reasonably sized task.
-          </p>
-        </div>
-      </div>
-    )
-  },
   {
     title: "Key Insights: The Evolution Path",
     subtitle: "Understanding the transformation",
@@ -621,10 +556,10 @@ export const evolutionSlides: SlideType[] = [
           <div className="bg-gradient-to-r from-teal-500 to-cyan-500 p-6 rounded-lg shadow-xl">
             <h4 className="font-bold text-white text-xl mb-2 flex items-center">
               <span className="mr-3 text-3xl">🏗️</span>
-              Infrastructure Follows Need
+              Tools Follow Needs
             </h4>
             <p className="text-teal-50">
-              Don't try to use Stage 8 tools at Stage 3. Let your pain points guide you. Infrastructure needs emerge naturally at each stage.
+              Don't try to use Stage 8 tools at Stage 3. Let your pain points guide you. Tools needs emerge naturally at each stage.
             </p>
           </div>
         </div>

src/sections/fluency.tsx

@@ -60,8 +60,8 @@ export const fluencySlides: SlideType[] = [
             <div className="inline-block bg-gray-100 px-6 py-3 rounded-lg">
               <div className="font-semibold text-gray-800 mb-2">Three Modes of AI Interaction:</div>
               <div className="text-sm text-gray-600 space-y-1">
-                <div>• Automation: AI executes specific tasks</div>
                 <div>• Augmentation: Humans & AI collaborate</div>
+                <div>• Automation: AI executes specific tasks</div>
                 <div>• Agency: AI performs future tasks independently</div>
               </div>
             </div>

src/sections/instructions.tsx

@@ -445,5 +445,67 @@ these mistakes in the future.`}
           </div>
         </div>
       )
+    },
+    {
+      title: "",
+      subtitle: "",
+      content: (
+        <div className="flex flex-col items-center justify-center h-full space-y-8">
+          <div className="text-center space-y-4">
+            <div className="text-6xl mb-4">🚀</div>
+            <h1 className="text-5xl md:text-6xl font-bold text-green-900">
+              Live Demo
+            </h1>
+            <p className="text-xl md:text-2xl text-gray-600 max-w-2xl">
+              Explore real-world examples of instructions in action
+            </p>
+          </div>
+
+          <div className="bg-green-50 p-6 rounded-lg border-l-4 border-green-500 max-w-3xl">
+            <h3 className="text-2xl font-bold text-green-900 mb-4">📂 Example Repositories</h3>
+            <p className="text-lg text-gray-700 mb-4">
+              Let's explore how instructions are structured in production codebases:
+            </p>
+            
+            <div className="space-y-4">
+              <div className="bg-white p-4 rounded-lg shadow border border-green-200">
+                <h4 className="font-semibold text-green-900 mb-2">🎓 This Workshop Repository</h4>
+                <p className="text-gray-700 text-sm mb-2">
+                  Instructions for building and maintaining this presentation app
+                </p>
+                <a 
+                  href="https://github.com/JanDeDobbeleer/workshop_ai_native/tree/main/.github" 
+                  target="_blank" 
+                  rel="noopener noreferrer" 
+                  className="text-green-600 hover:underline font-mono text-sm"
+                >
+                  github.com/JanDeDobbeleer/workshop_ai_native/.github →
+                </a>
+              </div>
+
+              <div className="bg-white p-4 rounded-lg shadow border border-green-200">
+                <h4 className="font-semibold text-green-900 mb-2">⭐ Oh My Posh</h4>
+                <p className="text-gray-700 text-sm mb-2">
+                  Advanced multi-language project with comprehensive agent instructions
+                </p>
+                <a 
+                  href="https://github.com/JanDeDobbeleer/oh-my-posh/tree/main/.github" 
+                  target="_blank" 
+                  rel="noopener noreferrer" 
+                  className="text-green-600 hover:underline font-mono text-sm"
+                >
+                  github.com/JanDeDobbeleer/oh-my-posh/.github →
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex space-x-2 mt-4">
+            <div className="w-3 h-3 bg-green-300 rounded-full"></div>
+            <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+            <div className="w-3 h-3 bg-green-300 rounded-full"></div>
+          </div>
+        </div>
+      )
     }
 ];

src/sections/intro.tsx

@@ -133,26 +133,4 @@ export const introSlides: SlideType[] = [
       </div>
     )
   },
-  {
-    title: "Personal Experience with AI",
-    subtitle: "A journey from skepticism to renewed joy",
-    content: (
-      <div className="flex flex-col space-y-4 md:space-y-6 max-w-3xl mx-auto px-4 md:px-0">
-        <div className="bg-white p-4 md:p-5 rounded-lg shadow border border-gray-200 w-full text-center">
-          <h4 className="font-semibold text-gray-900 mb-2 text-sm md:text-base">Initial Skepticism</h4>
-          <p className="text-gray-700 text-sm md:text-base">A lot of marketing terminology thrown at us does not spark enthusiasm, especially when it doesn't seem approachable.</p>
-        </div>
-
-        <div className="bg-white p-4 md:p-5 rounded-lg shadow border border-gray-200 w-full text-center">
-          <h4 className="font-semibold text-gray-900 mb-2 text-sm md:text-base">Enhanced Productivity</h4>
-          <p className="text-gray-700 text-sm md:text-base">AI enabled faster building processes and deeper understanding, improving overall development efficiency.</p>
-        </div>
-
-        <div className="bg-white p-4 md:p-5 rounded-lg shadow border border-gray-200 w-full text-center">
-          <h4 className="font-semibold text-gray-900 mb-2 text-sm md:text-base">Renewed Joy in Coding</h4>
-          <p className="text-gray-700 text-sm md:text-base">Fine tuning AI usage opened a world of new opportunities.</p>
-        </div>
-      </div>
-    )
-  },
 ];

src/sections/llm.tsx

@@ -222,7 +222,7 @@ export const llmSlides: SlideType[] = [
             </div>
             <div className="bg-gray-50 p-3 rounded-lg">
               <p className="font-semibold text-gray-800 text-sm md:text-base">Embedding & Attention</p>
-              <p className="text-gray-600 text-xs md:text-base">Tokens become numbers; attention finds relationships between words</p>
+              <p className="text-gray-600 text-xs md:text-base">Tokens become number vectors; attention weighs how relevant each token is to others</p>
             </div>
             <div className="bg-gray-50 p-3 rounded-lg">
               <p className="font-semibold text-gray-800 text-sm md:text-base">Layer Processing</p>

src/sections/prompting.tsx

@@ -20,7 +20,7 @@ export const promptingSlides: SlideType[] = [
           <div className="w-3 h-3 bg-blue-300 rounded-full"></div>
         </div>
       </div>
-    ),
+    )
   },
   {
     title: "The 4 S's of Effective Prompts",
@@ -94,7 +94,7 @@ export const promptingSlides: SlideType[] = [
           </p>
         </div>
       </div>
-    ),
+    )
   },
   {
     title: "Prompting Best Practices",
@@ -236,7 +236,7 @@ export const promptingSlides: SlideType[] = [
           </p>
         </div>
       </div>
-    ),
+    )
   },
   {
     title: "Meta Prompting",
@@ -289,7 +289,7 @@ ambiguity and keep the instructions concise.`}
           </p>
         </div>
       </div>
-    ),
+    )
   },
   {
     title: "Continuous Improvement",
@@ -346,7 +346,7 @@ these mistakes in the future.`}
           </p>
         </div>
       </div>
-    ),
+    )
   },
   {
     title: "The Core Loop",
@@ -430,69 +430,6 @@ these mistakes in the future.`}
           </p>
         </div>
       </div>
-    ),
-  },
-  {
-    title: "Core Loop: When to Automate",
-    subtitle: "Master the Fundamentals First",
-    content: (
-      <div className="flex flex-col items-center md:justify-center md:h-full space-y-8 max-w-5xl mx-auto px-4">
-        <div className="bg-yellow-50 p-5 rounded-lg border-l-4 border-yellow-500 max-w-3xl">
-          <h3 className="text-2xl font-bold text-yellow-900 mb-2">
-            Don't Speedrun It
-          </h3>
-          <p className="text-base text-gray-700">
-            The bottleneck isn't what AI can do — it's how effectively you can
-            direct it. Master the core loop before adding automation layers.
-          </p>
-        </div>
-
-        <div className="grid grid-cols-3 gap-6 w-full max-w-4xl">
-          <div className="bg-white p-4 rounded-lg shadow border-t-4 border-green-500">
-            <h4 className="font-semibold text-green-900 mb-3 text-center">
-              ✅ Do First
-            </h4>
-            <ul className="space-y-1.5 text-sm text-gray-700">
-              <li>• Clean context</li>
-              <li>• Fast plan-approve loop</li>
-              <li>• Solid repo instructions</li>
-              <li>• Master the basics</li>
-            </ul>
-          </div>
-
-          <div className="bg-white p-4 rounded-lg shadow border-t-4 border-orange-500">
-            <h4 className="font-semibold text-orange-900 mb-3 text-center">
-              ⚖️ Then Add
-            </h4>
-            <ul className="space-y-1.5 text-sm text-gray-700">
-              <li>• MCPs (specific needs)</li>
-              <li>• Subagents (complex)</li>
-              <li>• Automation (proven)</li>
-              <li>• Tools (real problems)</li>
-            </ul>
-          </div>
-
-          <div className="bg-gray-900 p-4 rounded-lg shadow border-t-4 border-blue-500">
-            <h4 className="font-semibold text-blue-400 mb-3 text-center">
-              📊 Success
-            </h4>
-            <div className="space-y-1.5 text-xs text-gray-300">
-              <div className="text-green-400">✓ Master core loop</div>
-              <div className="text-green-400">✓ Clean context</div>
-              <div className="text-green-400">✓ Plan everything</div>
-              <div className="text-red-400 mt-2">✗ Skip planning</div>
-              <div className="text-red-400">✗ Add tools early</div>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-blue-100 px-6 py-3 rounded-lg max-w-3xl">
-          <p className="text-sm text-blue-900 text-center">
-            <strong>Key Takeaway:</strong> The boring fundamentals work. Get
-            fast at the core loop — it gets you 90% of the way there.
-          </p>
-        </div>
-      </div>
-    ),
-  },
+    )
+  }
 ];