Skip to content

Commit 503df34

Browse files
ProCO-RPHopkinsProCO-RPHopkins
committed
Added LLM Process section - TODO: add links to handoff template / debugger prompt. Fix UX on entire page. Pull case studies away from margins (container?).
1 parent bd75737 commit 503df34

File tree

1 file changed

+130
-15
lines changed

1 file changed

+130
-15
lines changed

‎frontend/index.html‎

Lines changed: 130 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<div class="flex items-center gap-6">
3434
<nav class="hidden sm:flex gap-6 text-sm font-medium">
3535
<a href="#about" class="hover:text-teal-500 dark:hover:text-teal-300 transition">About</a>
36+
<a href="#process" class="hover:text-teal-500 dark:hover:text-teal-300 transition">Process</a>
3637
<a href="#projects" class="hover:text-teal-500 dark:hover:text-teal-300 transition">Projects</a>
3738
<a href="#tech" class="hover:text-teal-500 dark:hover:text-teal-300 transition">Tech Stack</a>
3839
<a href="#education" class="hover:text-teal-500 dark:hover:text-teal-300 transition">Education</a>
@@ -218,6 +219,133 @@ <h3 class="font-semibold mb-2">How I build with LLMs</h3>
218219
</div>
219220
</section>
220221

222+
<!-- ════════ HOW I USE LLMS (PROCESS) ════════ -->
223+
<section id="process" class="py-24 bg-gray-100 dark:bg-slate-900/50">
224+
<div class="max-w-6xl mx-auto px-6">
225+
<div class="flex items-center justify-between mb-10">
226+
<h2 class="text-3xl font-bold text-teal-600 dark:text-teal-300">How I Use LLMs for Development</h2>
227+
<div class="hidden md:flex items-center gap-2 text-xs text-gray-600 dark:text-white/70">
228+
<span class="px-2 py-1 bg-white dark:bg-slate-800 rounded-full ring-1 ring-gray-200 dark:ring-white/10">Context Engineering</span>
229+
<span class="px-2 py-1 bg-white dark:bg-slate-800 rounded-full ring-1 ring-gray-200 dark:ring-white/10">Multi-Agent Orchestration</span>
230+
<span class="px-2 py-1 bg-white dark:bg-slate-800 rounded-full ring-1 ring-gray-200 dark:ring-white/10">LLM QA & Evals</span>
231+
</div>
232+
</div>
233+
234+
<!-- Process ribbon -->
235+
<div class="grid grid-cols-2 sm:grid-cols-5 gap-3 mb-10">
236+
<div class="flex items-center gap-3 p-4 bg-white dark:bg-slate-800 rounded-2xl ring-1 ring-gray-200 dark:ring-white/10">
237+
<i class="ti ti-bulb text-teal-500"></i><span class="text-sm">1 · Ideate</span>
238+
</div>
239+
<div class="flex items-center gap-3 p-4 bg-white dark:bg-slate-800 rounded-2xl ring-1 ring-gray-200 dark:ring-white/10">
240+
<i class="ti ti-clipboard-list text-teal-500"></i><span class="text-sm">2 · Plan</span>
241+
</div>
242+
<div class="flex items-center gap-3 p-4 bg-white dark:bg-slate-800 rounded-2xl ring-1 ring-gray-200 dark:ring-white/10">
243+
<i class="ti ti-hammer text-teal-500"></i><span class="text-sm">3 · Build</span>
244+
</div>
245+
<div class="flex items-center gap-3 p-4 bg-white dark:bg-slate-800 rounded-2xl ring-1 ring-gray-200 dark:ring-white/10">
246+
<i class="ti ti-bug text-teal-500"></i><span class="text-sm">4 · Debug</span>
247+
</div>
248+
<div class="flex items-center gap-3 p-4 bg-white dark:bg-slate-800 rounded-2xl ring-1 ring-gray-200 dark:ring-white/10">
249+
<i class="ti ti-rocket text-teal-500"></i><span class="text-sm">5 · Release</span>
250+
</div>
251+
</div>
252+
253+
<!-- Role cards -->
254+
<div class="grid md:grid-cols-2 gap-6 mb-8">
255+
<div class="group bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/15 shadow-lg transition">
256+
<div class="flex items-center gap-3 mb-3">
257+
<i class="ti ti-hierarchy-3 text-xl text-teal-500"></i>
258+
<h3 class="font-semibold">LLM Roles & Orchestration</h3>
259+
</div>
260+
<ul class="text-sm text-gray-700 dark:text-white/80 space-y-2">
261+
<li>• <b>ChatGPT → Senior Engineer / PM:</b> architecture, code, CI/CD, docs, prompts.</li>
262+
<li>• <b>Gemini → Senior Debugging Agent:</b> analyzes stack traces, logs, env mismatches.</li>
263+
<li>• <b>Arbitration loop:</b> ChatGPT drafts the debugging prompt → Gemini returns analysis → ChatGPT verifies/contests → iterate to convergence.</li>
264+
</ul>
265+
</div>
266+
267+
<div class="group bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/15 shadow-lg transition">
268+
<div class="flex items-center gap-3 mb-3">
269+
<i class="ti ti-settings-code text-xl text-teal-500"></i>
270+
<h3 class="font-semibold">Working Protocols</h3>
271+
</div>
272+
<ul class="text-sm text-gray-700 dark:text-white/80 space-y-2">
273+
<li>• <b>Small, testable steps</b> with “Checks” after each command.</li>
274+
<li>• <b>Stop-points</b> for questions on type/runtime puzzles.</li>
275+
<li>• <b>Eval & regression sets</b> for prompt changes and LLM features.</li>
276+
<li>• <b>Docs-first artifacts:</b> READMEs, runbooks, handoff notes.</li>
277+
</ul>
278+
</div>
279+
</div>
280+
281+
<!-- Mechanics / Handoffs / CustomGPTs -->
282+
<div class="grid md:grid-cols-3 gap-6">
283+
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
284+
<div class="flex items-center gap-3 mb-3">
285+
<i class="ti ti-arrows-exchange text-xl text-teal-500"></i>
286+
<h3 class="font-semibold">Cross-LLM Dialogue Loop</h3>
287+
</div>
288+
<ol class="list-decimal pl-5 text-sm text-gray-700 dark:text-white/80 space-y-1">
289+
<li>ChatGPT composes context-rich debugger prompt.</li>
290+
<li>Gemini returns root-cause & fix plan.</li>
291+
<li>ChatGPT validates; if misaligned, critiques and re-tests.</li>
292+
</ol>
293+
<p class="text-xs text-gray-500 dark:text-white/60 mt-3">Outcome: faster bug cycles, clearer reasoning traces.</p>
294+
</div>
295+
296+
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
297+
<div class="flex items-center gap-3 mb-3">
298+
<i class="ti ti-recycle text-xl text-teal-500"></i>
299+
<h3 class="font-semibold">Context Handoff Protocols</h3>
300+
</div>
301+
<ul class="text-sm text-gray-700 dark:text-white/80 space-y-2">
302+
<li>• <b>Project Handoff Prompt:</b> goals, arch diagram, routes, env, known issues.</li>
303+
<li>• <b>Context compression:</b> brief history + current state + Next Steps.</li>
304+
<li>• <b>LLM/session swaps</b> without losing momentum.</li>
305+
</ul>
306+
<div class="mt-4 flex flex-wrap gap-2">
307+
<a href="#" class="px-3 py-1 text-xs rounded-lg bg-teal-600 text-white ring-1 ring-teal-500">Download Handoff Template</a>
308+
<a href="#" class="px-3 py-1 text-xs rounded-lg bg-slate-700 text-white ring-1 ring-white/10">Debugger Prompt</a>
309+
</div>
310+
</div>
311+
312+
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
313+
<div class="flex items-center gap-3 mb-3">
314+
<i class="ti ti-robot text-xl text-teal-500"></i>
315+
<h3 class="font-semibold">CustomGPTs & Reuse</h3>
316+
</div>
317+
<ul class="text-sm text-gray-700 dark:text-white/80 space-y-2">
318+
<li>• <b>System prompts</b> encode roles, tone, tools, and guardrails.</li>
319+
<li>• <b>Reusable packs</b>: Ticket Copilot, CS Copilot, AI Debugger Pro.</li>
320+
<li>• <b>Process portability</b> across projects (Achieve Reentry, Snapshot, Pi LMS).</li>
321+
</ul>
322+
<div class="mt-3 flex flex-wrap gap-2">
323+
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Prompt Design</span>
324+
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Knowledge Packs</span>
325+
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Tool Patterns</span>
326+
</div>
327+
</div>
328+
</div>
329+
330+
<!-- Footer strip -->
331+
<div class="mt-10 grid md:grid-cols-3 gap-6">
332+
<div class="p-5 bg-white dark:bg-slate-800 rounded-2xl ring-1 ring-gray-200 dark:ring-white/10">
333+
<h4 class="font-semibold mb-2"><i class="ti ti-shield-check text-teal-500"></i> Verification & QA</h4>
334+
<p class="text-sm text-gray-700 dark:text-white/80">Lightweight evals, repeatable fixtures, and regression prompts to keep LLM features honest.</p>
335+
</div>
336+
<div class="p-5 bg-white dark:bg-slate-800 rounded-2xl ring-1 ring-gray-200 dark:ring-white/10">
337+
<h4 class="font-semibold mb-2"><i class="ti ti-cloud-cog text-teal-500"></i> DevOps Integration</h4>
338+
<p class="text-sm text-gray-700 dark:text-white/80">CI gates (lint/tests), Dockerized builds, and release notes generated with LLM assistance.</p>
339+
</div>
340+
<div class="p-5 bg-white dark:bg-slate-800 rounded-2xl ring-1 ring-gray-200 dark:ring-white/10">
341+
<h4 class="font-semibold mb-2"><i class="ti ti-notes text-teal-500"></i> Documentation</h4>
342+
<p class="text-sm text-gray-700 dark:text-white/80">Step-by-step guides, checks sections, and case-study write-ups for transparent handoffs.</p>
343+
</div>
344+
</div>
345+
</div>
346+
</section>
347+
348+
221349
<!-- ════════ PROJECTS ════════ -->
222350
<section id="projects" class="bg-gray-100 dark:bg-slate-900/50 py-24">
223351
<div class="max-w-6xl mx-auto px-6">
@@ -339,7 +467,7 @@ <h3 class="text-xl font-semibold mb-2 group-hover:text-teal-600 dark:group-hover
339467
target="_blank"
340468
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">
341469
<i class="ti ti-rocket"></i>
342-
Open Source
470+
Closed Source
343471
</a>
344472
<a href="https://drive.google.com/file/d/raspberrypi-demo-video/view?usp=sharing"
345473
target="_blank"
@@ -489,20 +617,7 @@ <h3 class="text-xl font-semibold mb-2 group-hover:text-teal-600 dark:group-hover
489617
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Structured Templates</span>
490618
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Reflection & Tracking</span>
491619
</div>
492-
</article>
493-
494-
<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">
495-
<div class="bg-gray-200 dark:bg-slate-700 border-2 border-dashed rounded-xl w-full aspect-video mb-4 flex items-center justify-center text-gray-500">
496-
<i class="ti ti-app-window text-4xl"></i>
497-
</div>
498-
<h3 class="text-xl font-semibold mb-2 group-hover:text-teal-600 dark:group-hover:text-teal-300 transition">Reentry Quest</h3>
499-
<p class="text-gray-600 dark:text-white/80 text-sm mb-4">A simulation game that builds empathy for the post‑incarceration journey.</p>
500-
<div class="flex flex-wrap gap-2">
501-
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Unity</span>
502-
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">C#</span>
503-
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">AI Agents</span>
504-
</div>
505-
</article>
620+
</article>
506621
</section>
507622

508623
<!-- ════════ CASE STUDY: ACHIEVE REENTRY ════════ -->

0 commit comments

Comments
 (0)