Skip to content

Commit 4d1fbb2

Browse files
ProCO-RPHopkinsProCO-RPHopkins
committed
added rapberry pi icon
1 parent c0f2fee commit 4d1fbb2

File tree

3 files changed

+212
-42
lines changed

3 files changed

+212
-42
lines changed

‎frontend/assets/raspberry-pi-icon.png‎

1.31 MB
Loading

‎frontend/index.html‎

Lines changed: 177 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -771,54 +771,189 @@ <h3 class="font-semibold mb-3">Technology Stack</h3>
771771
</div>
772772
</section>
773773

774-
<!-- ════════ CASE STUDY: CAPSTONE ════════ -->
775-
<section id="capstone-io" class="py-24">
776-
<div class="max-w-5xl mx-auto px-6 flex items-center justify-between mb-6">
777-
<h2 class="text-3xl font-bold text-teal-600 dark:text-teal-300">
778-
Case Study · Capstone (I-O Psychology)
779-
</h2>
780-
<div class="flex gap-3">
781-
<a href="https://docs.google.com/presentation/d/1RM04EsPeiL34__VhqWeOKPtR3FcDbnCX/edit?usp=sharing"
782-
target="_blank" rel="noopener"
783-
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-teal-600 to-cyan-600 text-white text-sm font-semibold shadow-md hover:scale-105 transition ring-1 ring-teal-500">
784-
<i class="ti ti-presentation text-lg"></i>
785-
View Slideshow
786-
</a>
787-
<a href="https://drive.google.com/file/d/1ZYeAmoUZKIiaJpXmpDDLcLRNZQXHXwum/view?usp=sharing"
788-
target="_blank" rel="noopener"
789-
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-teal-600 to-cyan-600 text-white text-sm font-semibold shadow-md hover:scale-105 transition ring-1 ring-teal-500">
790-
<i class="ti ti-headphones text-lg"></i>
791-
Play Podcast
792-
</a>
774+
<!-- ════════ CASE STUDY: RASPBERRY PI OFFLINE LEARNING ════════ -->
775+
<section id="raspberry-pi-offline" class="py-24">
776+
<div class="max-w-5xl mx-auto px-6 flex items-center justify-between mb-6">
777+
<h2 class="text-3xl font-bold text-teal-600 dark:text-teal-300">
778+
Case Study · Raspberry Pi Offline Learning
779+
</h2>
780+
<!-- Optional icon (replace file when available) -->
781+
<img src="assets/raspberry-pi-icon.png" alt="Raspberry Pi"
782+
class="w-10 h-10 rounded-lg ring-1 ring-gray-200 dark:ring-white/10 bg-white/30 dark:bg-white/5 p-1 hidden sm:block" />
783+
</div>
784+
785+
<!-- Intro / Outcome -->
786+
<div class="grid md:grid-cols-3 gap-6 mb-10">
787+
<!-- Intro summary -->
788+
<div class="md:col-span-2 bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
789+
<h3 class="font-semibold mb-2">Intro Summary</h3>
790+
<p class="text-gray-700 dark:text-white/85">
791+
A self-contained, offline-first learning hub built on Raspberry Pi. Serves Kolibri LMS and Kiwix ZIM archives over a local network—no internet required.
792+
The system is Dockerized, reproducible, and versioned via GitHub Releases, with modular content updates for secure facilities.
793+
</p>
794+
<ul class="mt-4 space-y-2 text-gray-700 dark:text-white/80 text-sm">
795+
<li>• Goals: accessibility in prison settings, zero-internet delivery, simple updates, and auditability.</li>
796+
<li>• Outcomes: reproducible images, quicker field installs, controlled content curation, and low-touch maintenance.</li>
797+
<li>• Process: multi-LLM workflow (ChatGPT ↔ Debugger LLM) with handoffs & verification checks.</li>
798+
</ul>
799+
</div>
800+
801+
<!-- My Role — Context Engineer -->
802+
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
803+
<h3 class="font-semibold mb-2">My Role — Context Engineer</h3>
804+
<ul class="space-y-2 text-sm text-gray-700 dark:text-white/80">
805+
<li>• Designed offline architecture, content packaging, and CI/CD release strategy.</li>
806+
<li>• Built Docker/Packer (HCL) pipelines and GitHub Actions for artifact vs release flows.</li>
807+
<li>• Ran cross-LLM debugging loops; authored templates for handoffs and reproducible fixes.</li>
808+
</ul>
809+
</div>
793810
</div>
794-
</div>
795-
796-
<div class="grid md:grid-cols-3 gap-6">
797-
<!-- Summary -->
798-
<div class="md:col-span-2 bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
799-
<h3 class="font-semibold mb-2">Research Summary</h3>
800-
<p class="text-gray-700 dark:text-white/85">
801-
Proposed a metrics-based leadership intervention to <em>redirect</em> authoritarian leaders’ power needs toward
802-
goal attainment—testing whether this boosts employee motivation & morale in a realistic organizational setting.
811+
812+
<!-- Visuals area (placeholders until you add images) -->
813+
<div class="grid md:grid-cols-2 gap-6 mb-10">
814+
<div class="rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-white/5
815+
shadow-md hover:shadow-2xl hover:shadow-teal-500/30
816+
transition-all duration-300 flex items-center justify-center h-64">
817+
<div class="text-center text-sm text-gray-600 dark:text-white/70">
818+
<img src="assets/raspberry-pi-icon.png" alt="Raspberry Pi"
819+
class="w-16 h-16 mx-auto mb-3 opacity-80" />
820+
<p>Device + Classroom Topology (placeholder)</p>
821+
</div>
822+
</div>
823+
<div class="rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-white/5
824+
shadow-md hover:shadow-2xl hover:shadow-teal-500/30
825+
transition-all duration-300 flex items-center justify-center h-64">
826+
<div class="text-center text-sm text-gray-600 dark:text-white/70">
827+
<img src="assets/raspberry-pi-icon.png" alt="Raspberry Pi"
828+
class="w-16 h-16 mx-auto mb-3 opacity-80" />
829+
<p>Content Flow: ZIM → Kiwix → Local Wi-Fi (placeholder)</p>
830+
</div>
831+
</div>
832+
</div>
833+
834+
<!-- Offline Content & Sync Model -->
835+
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10 mt-10">
836+
<h3 class="font-semibold text-xl mb-4">Offline Content & Sync Model</h3>
837+
<p class="text-gray-700 dark:text-white/85 mb-4">
838+
The platform packages open educational content into <b>ZIM archives</b> for Kiwix and channels for <b>Kolibri</b>. Content can be updated modularly without reflashing the device.
839+
For QA, ZIMs are validated with a local <code>kiwix-serve</code> instance before being promoted to a release.
803840
</p>
804-
<ul class="mt-4 space-y-2 text-gray-700 dark:text-white/80 text-sm">
805-
<li>• Single-group quasi-experimental design (pre / post / follow-up).</li>
806-
<li>• Validated instruments (e.g., PMI, UWES subscales); repeated-measures ANOVA.</li>
807-
<li>• Theory-driven: McClelland’s Power Needs & Self-Determination Theory.</li>
841+
<ul class="list-disc pl-5 space-y-2 text-sm text-gray-700 dark:text-white/80 mb-6">
842+
<li><b>Kiwix:</b> host <code>.zim</code> archives (e.g., Wikipedia subsets, NASA pages) via <code>kiwix-serve --port=8099 content.zim</code>.</li>
843+
<li><b>Kolibri:</b> load curated channels (TED-Ed, CK-12, Khan Academy, MIT Blossoms, etc.); track learner progress offline.</li>
844+
<li><b>Modular updates:</b> swap or add ZIMs/channels; keep the base system stable.</li>
845+
<li><b>Size strategy:</b> separate “test artifacts” from “release images”; avoid bloating the build pipeline (160GB+ datasets kept external to CI build steps).</li>
808846
</ul>
847+
<div class="grid md:grid-cols-3 gap-4 text-xs text-gray-700 dark:text-white/80">
848+
<div class="p-4 rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-white/5">
849+
<b>Content QA</b>
850+
<pre class="mt-2 whitespace-pre-wrap text-[11px] leading-4">kiwix-serve --port=8099 ./zim/test.zim
851+
# open http://localhost:8099 for quick checks</pre>
852+
</div>
853+
<div class="p-4 rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-white/5">
854+
<b>Kolibri Import</b>
855+
<pre class="mt-2 whitespace-pre-wrap text-[11px] leading-4"># via UI or CLI (kolibri manage importchannel)
856+
# test content & progress tracking fully offline</pre>
857+
</div>
858+
<div class="p-4 rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-white/5">
859+
<b>Release Hygiene</b>
860+
<pre class="mt-2 whitespace-pre-wrap text-[11px] leading-4"># artifacts for temporary QA
861+
# GitHub Releases for versioned images + notes</pre>
862+
</div>
863+
</div>
809864
</div>
810865

811-
<!-- Role/Skills -->
812-
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
813-
<h3 class="font-semibold mb-2">My Role — Research Lead</h3>
814-
<ul class="space-y-2 text-sm text-gray-700 dark:text-white/80">
815-
<li>• Built the study design, measures, and analysis plan.</li>
816-
<li>• Operationalized constructs; selected validated scales.</li>
817-
<li>• Planned data handling, ethics, and dissemination.</li>
818-
</ul>
866+
<!-- Architecture -->
867+
<div class="grid md:grid-cols-2 gap-6 mt-12">
868+
<!-- High-level Architecture -->
869+
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
870+
<h3 class="font-semibold mb-3">Architecture (high-level)</h3>
871+
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10 mt-6">
872+
<ul class="list-disc pl-5 space-y-2 text-sm text-gray-700 dark:text-white/80">
873+
<li><b>Edge node:</b> Raspberry Pi OS; local Wi-Fi/LAN; no WAN dependency.</li>
874+
<li><b>Services:</b> Kolibri (LMS) + Kiwix (ZIM server); system services start on boot.</li>
875+
<li><b>Content store:</b> external storage partition for large ZIMs/channels; hot-swappable.</li>
876+
<li><b>Admin flow:</b> web UI over the local network; image upgrades via GitHub Releases.</li>
877+
<li><b>Security posture:</b> minimal open ports; non-root services; secrets via env files; no telemetry by default.</li>
878+
</ul>
879+
</div>
880+
</div>
881+
882+
<!-- Tech Highlights -->
883+
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
884+
<h3 class="font-semibold mb-3">Tech Highlights</h3>
885+
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10 mt-6">
886+
<h3 class="font-semibold mb-3">Technology Stack</h3>
887+
<ul class="list-disc pl-5 space-y-1 text-sm text-gray-700 dark:text-white/80">
888+
<li><b>OS / Device:</b> Raspberry Pi OS</li>
889+
<li><b>LMS:</b> Kolibri</li>
890+
<li><b>Offline web:</b> Kiwix + ZIM archives</li>
891+
<li><b>Containerization:</b> Docker (multi-stage)</li>
892+
<li><b>Image build:</b> Packer (<code>HCL</code>) for SD-card images</li>
893+
<li><b>Scripting:</b> Bash / WSL2</li>
894+
<li><b>CI/CD:</b> GitHub Actions (build, lint/tests, artifact uploads)</li>
895+
<li><b>Releases:</b> GitHub Releases (versioned images, changelogs)</li>
896+
<li><b>LLM workflow:</b> ChatGPT (Senior Engineer/PM) + Debugger LLM (cross-model loop)</li>
897+
</ul>
898+
899+
<!-- Optional CTA (keep consistent style; add real link later) -->
900+
<a href="#"
901+
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-teal-600/90 hover:bg-teal-600 text-white text-sm ring-1 ring-teal-500 mt-6">
902+
Release notes (coming soon)
903+
</a>
904+
</div>
905+
</div>
819906
</div>
820-
</div>
821-
</section>
907+
</section>
908+
909+
<!-- ════════ CASE STUDY: CAPSTONE ════════ -->
910+
<section id="capstone-io" class="py-24">
911+
<div class="max-w-5xl mx-auto px-6 flex items-center justify-between mb-6">
912+
<h2 class="text-3xl font-bold text-teal-600 dark:text-teal-300">
913+
Case Study · Capstone (I-O Psychology)
914+
</h2>
915+
<div class="flex gap-3">
916+
<a href="https://docs.google.com/presentation/d/1RM04EsPeiL34__VhqWeOKPtR3FcDbnCX/edit?usp=sharing"
917+
target="_blank" rel="noopener"
918+
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-teal-600 to-cyan-600 text-white text-sm font-semibold shadow-md hover:scale-105 transition ring-1 ring-teal-500">
919+
<i class="ti ti-presentation text-lg"></i>
920+
View Slideshow
921+
</a>
922+
<a href="https://drive.google.com/file/d/1ZYeAmoUZKIiaJpXmpDDLcLRNZQXHXwum/view?usp=sharing"
923+
target="_blank" rel="noopener"
924+
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-teal-600 to-cyan-600 text-white text-sm font-semibold shadow-md hover:scale-105 transition ring-1 ring-teal-500">
925+
<i class="ti ti-headphones text-lg"></i>
926+
Play Podcast
927+
</a>
928+
</div>
929+
</div>
930+
931+
<div class="grid md:grid-cols-3 gap-6">
932+
<!-- Summary -->
933+
<div class="md:col-span-2 bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
934+
<h3 class="font-semibold mb-2">Research Summary</h3>
935+
<p class="text-gray-700 dark:text-white/85">
936+
Proposed a metrics-based leadership intervention to <em>redirect</em> authoritarian leaders’ power needs toward
937+
goal attainment—testing whether this boosts employee motivation & morale in a realistic organizational setting.
938+
</p>
939+
<ul class="mt-4 space-y-2 text-gray-700 dark:text-white/80 text-sm">
940+
<li>• Single-group quasi-experimental design (pre / post / follow-up).</li>
941+
<li>• Validated instruments (e.g., PMI, UWES subscales); repeated-measures ANOVA.</li>
942+
<li>• Theory-driven: McClelland’s Power Needs & Self-Determination Theory.</li>
943+
</ul>
944+
</div>
945+
946+
<!-- Role/Skills -->
947+
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
948+
<h3 class="font-semibold mb-2">My Role — Research Lead</h3>
949+
<ul class="space-y-2 text-sm text-gray-700 dark:text-white/80">
950+
<li>• Built the study design, measures, and analysis plan.</li>
951+
<li>• Operationalized constructs; selected validated scales.</li>
952+
<li>• Planned data handling, ethics, and dissemination.</li>
953+
</ul>
954+
</div>
955+
</div>
956+
</section>
822957

823958
<!-- ════════ EDUCATION & CERTS ════════ -->
824959
<section id="education" class="max-w-5xl mx-auto px-6 py-24">

‎frontend/src/output.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,9 @@
378378
.h-16 {
379379
height: calc(var(--spacing) * 16);
380380
}
381+
.h-64 {
382+
height: calc(var(--spacing) * 64);
383+
}
381384
.h-78 {
382385
height: calc(var(--spacing) * 78);
383386
}
@@ -603,6 +606,12 @@
603606
background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
604607
}
605608
}
609+
.bg-white\/30 {
610+
background-color: color-mix(in srgb, #fff 30%, transparent);
611+
@supports (color: color-mix(in lab, red, red)) {
612+
background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
613+
}
614+
}
606615
.bg-white\/80 {
607616
background-color: color-mix(in srgb, #fff 80%, transparent);
608617
@supports (color: color-mix(in lab, red, red)) {
@@ -681,6 +690,9 @@
681690
.object-cover {
682691
object-fit: cover;
683692
}
693+
.p-1 {
694+
padding: calc(var(--spacing) * 1);
695+
}
684696
.p-2 {
685697
padding: calc(var(--spacing) * 2);
686698
}
@@ -769,6 +781,13 @@
769781
font-size: var(--text-xs);
770782
line-height: var(--tw-leading, var(--text-xs--line-height));
771783
}
784+
.text-\[11px\] {
785+
font-size: 11px;
786+
}
787+
.leading-4 {
788+
--tw-leading: calc(var(--spacing) * 4);
789+
line-height: calc(var(--spacing) * 4);
790+
}
772791
.leading-relaxed {
773792
--tw-leading: var(--leading-relaxed);
774793
line-height: var(--leading-relaxed);
@@ -797,6 +816,9 @@
797816
--tw-tracking: var(--tracking-wide);
798817
letter-spacing: var(--tracking-wide);
799818
}
819+
.whitespace-pre-wrap {
820+
white-space: pre-wrap;
821+
}
800822
.text-amber-500 {
801823
color: var(--color-amber-500);
802824
}
@@ -875,6 +897,9 @@
875897
.opacity-40 {
876898
opacity: 40%;
877899
}
900+
.opacity-80 {
901+
opacity: 80%;
902+
}
878903
.mix-blend-soft-light {
879904
mix-blend-mode: soft-light;
880905
}
@@ -1113,6 +1138,11 @@
11131138
}
11141139
}
11151140
}
1141+
.sm\:block {
1142+
@media (width >= 40rem) {
1143+
display: block;
1144+
}
1145+
}
11161146
.sm\:flex {
11171147
@media (width >= 40rem) {
11181148
display: flex;
@@ -1251,6 +1281,11 @@
12511281
line-height: var(--tw-leading, var(--text-6xl--line-height));
12521282
}
12531283
}
1284+
.lg\:block {
1285+
@media (width >= 64rem) {
1286+
display: block;
1287+
}
1288+
}
12541289
.lg\:w-\[340px\] {
12551290
@media (width >= 64rem) {
12561291
width: 340px;

0 commit comments

Comments
 (0)