Added Raspberry Pi offline learning project card.

Author: ProCO-RPHopkins

frontend/index.html

@@ -316,6 +316,54 @@ <h3 class="text-xl font-semibold mb-2 group-hover:text-teal-600 dark:group-hover
           </a>
         </article>
 
+        <!-- Raspberry Pi Offline Learning Platform -->
+        <article class="group bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/15 shadow-lg transition-all duration-500 hover:shadow-teal-500/20 dark:hover:shadow-teal-500/30 hover:-translate-y-2">
+          <a href="#raspberry-pi-offline" class="block">
+            <!-- Video thumbnail -->
+            <video autoplay loop muted playsinline
+              class="w-full aspect-[16/9] object-cover rounded-xl mb-4 ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-800">
+              <source src="assets/raspberrypi-thumb.mp4" type="video/mp4" />
+              Your browser does not support the video tag.
+            </video>
+
+            <h3 class="text-xl font-semibold mb-2 group-hover:text-teal-600 dark:group-hover:text-teal-300 transition">
+              Raspberry Pi Offline Learning — Dockerized LMS
+            </h3>
+            <p class="text-gray-600 dark:text-white/80 text-sm mb-4">
+              Dockerized offline server for Raspberry Pi that hosts Kolibri LMS and Kiwix content. Designed for disconnected environments, it automates builds with GitHub Actions and supports modular .zim updates for scalable, reproducible deployments.
+            </p>
+            
+            <!-- Buttons -->
+            <div class="flex flex-wrap gap-3">
+              <a href="https://github.com/ProCO-RPHopkins/raspberry-pi-offline-learning"
+                target="_blank"
+                class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-gradient-to-r from-teal-600 to-cyan-600 text-white text-xs font-semibold shadow-md hover:scale-105 transition ring-1 ring-teal-500">
+                <i class="ti ti-rocket"></i>
+                Open Source
+              </a>
+              <a href="https://drive.google.com/file/d/raspberrypi-demo-video/view?usp=sharing"
+                target="_blank"
+                class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-pink-600 text-white text-xs font-semibold shadow-md hover:scale-105 transition ring-1 ring-purple-500">
+                <i class="ti ti-player-play"></i>
+                Watch Demo
+              </a>
+            </div>
+
+            <!-- Tech Stack Chips -->
+            <div class="flex flex-wrap gap-2 mt-4">
+              <span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Raspberry Pi OS</span>
+              <span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Kolibri LMS</span>
+              <span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Kiwix + ZIM</span>
+              <span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Docker</span>
+              <span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">GitHub Actions (CI/CD)</span>
+              <span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">GitHub Releases (Versioning)</span>
+              <span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Bash / WSL2</span>
+              <span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">HCL (Packer)</span>
+              <span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">LLM-Aided Dev</span>
+            </div>
+          </a>
+        </article>
+
         <!-- Capstone: Redirecting Authoritarian Leadership -->
         <article class="group bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/15 shadow-lg transition-all duration-500 hover:shadow-teal-500/20 dark:hover:shadow-teal-500/30 hover:-translate-y-2">
           <!-- Video thumbnail -->