Skip to content

Commit c0f2fee

Browse files
ProCO-RPHopkinsProCO-RPHopkins
committed
Repositioned about me image and changed text.
1 parent 2a25674 commit c0f2fee

File tree

2 files changed

+80
-63
lines changed

2 files changed

+80
-63
lines changed

‎frontend/index.html‎

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -180,44 +180,37 @@ <h2 class="text-3xl font-bold mb-12 text-center text-teal-600 dark:text-teal-300
180180
<!-- ════════ ABOUT ════════ -->
181181
<section id="about" class="max-w-6xl mx-auto px-6 py-24">
182182
<div class="flex flex-col md:flex-row gap-8 items-start">
183-
<div class="md:w-1/3">
184-
<img src="assets/about.jpg" alt="Ryan Hopkins portrait" class="w-full aspect-square object-cover rounded-xl shadow-lg" />
183+
<!-- Image (lowered slightly on desktop for cleaner alignment) -->
184+
<div class="md:w-1/3 md:mt-16">
185+
<img src="assets/about.jpg" alt="Ryan Hopkins portrait"
186+
class="w-full aspect-square object-cover rounded-xl shadow-lg ring-1 ring-gray-200 dark:ring-white/10" />
185187
</div>
188+
189+
<!-- Content -->
186190
<div class="md:w-3/5">
187191
<h2 class="text-3xl font-bold mb-6 text-teal-600 dark:text-teal-300">About Me</h2>
188192

189193
<p class="text-gray-700 dark:text-white/85 leading-relaxed mb-4">
190-
I’m Ryan Hopkins — an <strong>AI systems engineer & context architect</strong> with an M.S. in Industrial‑Organizational Psychology. I focus on building <strong>reliable LLM features</strong> by pairing clear context patterns with small, testable delivery steps.
194+
I’m Ryan Hopkins — an <strong>AI systems engineer & context architect</strong>. I design reliable LLM workflows and ship
195+
full-stack + edge/offline systems, turning ambiguous specs into small, testable steps with clear checks.
191196
</p>
192197

193198
<p class="text-gray-700 dark:text-white/85 leading-relaxed mb-4">
194-
I work across the stack: <strong>Node/Express</strong> with <strong>MongoDB</strong> and EJS/Bootstrap for server‑rendered apps, and <strong>Next.js + TypeScript</strong> with Tailwind/Framer Motion for newer builds like <em>GameSnap X‑Ray</em>. I develop on <strong>WSL2 (Ubuntu)</strong>, use <strong>Docker</strong> for both hot‑reload dev and multi‑stage production images, and keep LLM features honest with small eval/regression checks plus basic CI gates (lint/format, unit/E2E tests).
199+
I build with <strong>Node/Express</strong>, <strong>MongoDB</strong>, and EJS/Bootstrap, and newer stacks in
200+
<strong>Next.js + TypeScript</strong> with Tailwind/Framer. I develop on <strong>WSL2 (Ubuntu)</strong>, containerize with
201+
<strong>Docker</strong>, and wire CI gates (lint/format, unit/E2E) into <strong>GitHub Actions</strong>.
195202
</p>
196203

197-
<p class="text-gray-700 dark:text-white/85 leading-relaxed mb-6">
198-
Recent work includes <strong>Snapshot X‑Ray</strong> (a new app exploring faster spec‑to‑code loops) and <strong>Achieve Reentry</strong> (AI‑assisted job tools). I’m currently exploring <strong>multi‑agent workflows</strong> and <strong>LLM observability</strong>.
204+
<p class="text-gray-700 dark:text-white/85 leading-relaxed">
205+
On devices, my Raspberry Pi offline-learning work sharpened my <strong>edge/offline</strong> toolkit:
206+
<strong>Kolibri</strong> & <strong>Kiwix (ZIM)</strong> content packaging, multi-stage Docker and
207+
<strong>Packer/HCL</strong> imaging, artifact vs <strong>GitHub Releases</strong> versioning, and size-aware pipelines.
208+
I orchestrate <strong>ChatGPT</strong> (Senior Engineer/PM) with a Debugger LLM in a cross-model loop and use
209+
succinct handoff prompts to maintain continuity across sessions.
199210
</p>
200-
201-
<h3 class="font-semibold mb-2">How I build with LLMs</h3>
202-
<ol class="list-decimal pl-5 space-y-1 text-sm text-gray-700 dark:text-white/80 mb-6">
203-
<li><strong>Discuss & design:</strong> iterate on ideas; write a clear problem statement and solution outline.</li>
204-
<li><strong>Roadmap:</strong> segment features into phases and “next steps.”</li>
205-
<li><strong>Protocols:</strong> define instruction schemas, stop‑points for questions, and testable deliverables for each step.</li>
206-
<li><strong>Ship in slices:</strong> build one step at a time with small evals/fixtures.</li>
207-
<li><strong>Verify:</strong> keep regression sets, logs, and guardrails; refine prompts/context when tests fail.</li>
208-
</ol>
209-
210-
<!-- Compact skill badges (optional) -->
211-
<div class="flex flex-wrap gap-2">
212-
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Prompt/Context Patterns</span>
213-
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Instruction Protocols</span>
214-
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Evaluation & QA</span>
215-
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Phased Delivery</span>
216-
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Docs & Runbooks</span>
217-
</div>
218211
</div>
219212
</div>
220-
</section>
213+
</section>
221214

222215
<!-- ════════ HOW I USE LLMS (PROCESS) ════════ -->
223216
<section id="process" class="py-24 bg-gray-100 dark:bg-slate-900/50">

‎frontend/src/output.css‎

Lines changed: 62 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,7 @@
1313
--color-amber-500: oklch(76.9% 0.188 70.08);
1414
--color-amber-800: oklch(47.3% 0.137 46.201);
1515
--color-green-600: oklch(62.7% 0.194 149.214);
16-
--color-emerald-100: oklch(95% 0.052 163.051);
17-
--color-emerald-200: oklch(90.5% 0.093 164.15);
18-
--color-emerald-400: oklch(76.5% 0.177 163.223);
19-
--color-emerald-500: oklch(69.6% 0.17 162.48);
2016
--color-emerald-600: oklch(59.6% 0.145 163.225);
21-
--color-emerald-800: oklch(43.2% 0.095 166.913);
2217
--color-teal-100: oklch(95.3% 0.051 180.801);
2318
--color-teal-200: oklch(91% 0.096 180.426);
2419
--color-teal-300: oklch(85.5% 0.138 181.071);
@@ -49,8 +44,6 @@
4944
--color-purple-800: oklch(43.8% 0.218 303.724);
5045
--color-fuchsia-500: oklch(66.7% 0.295 322.15);
5146
--color-fuchsia-600: oklch(59.1% 0.293 322.896);
52-
--color-pink-400: oklch(71.8% 0.202 349.761);
53-
--color-pink-500: oklch(65.6% 0.241 354.308);
5447
--color-pink-600: oklch(59.2% 0.249 0.584);
5548
--color-rose-100: oklch(94.1% 0.03 12.58);
5649
--color-rose-200: oklch(89.2% 0.058 10.001);
@@ -110,7 +103,6 @@
110103
--blur-lg: 16px;
111104
--blur-xl: 24px;
112105
--blur-3xl: 64px;
113-
--aspect-video: 16 / 9;
114106
--default-transition-duration: 150ms;
115107
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
116108
--default-font-family: var(--font-sans);
@@ -380,9 +372,6 @@
380372
.aspect-square {
381373
aspect-ratio: 1 / 1;
382374
}
383-
.aspect-video {
384-
aspect-ratio: var(--aspect-video);
385-
}
386375
.h-10 {
387376
height: calc(var(--spacing) * 10);
388377
}
@@ -449,6 +438,9 @@
449438
.resize {
450439
resize: both;
451440
}
441+
.list-decimal {
442+
list-style-type: decimal;
443+
}
452444
.list-disc {
453445
list-style-type: disc;
454446
}
@@ -539,14 +531,6 @@
539531
border-style: var(--tw-border-style);
540532
border-width: 1px;
541533
}
542-
.border-2 {
543-
border-style: var(--tw-border-style);
544-
border-width: 2px;
545-
}
546-
.border-dashed {
547-
--tw-border-style: dashed;
548-
border-style: dashed;
549-
}
550534
.bg-amber-100 {
551535
background-color: var(--color-amber-100);
552536
}
@@ -556,9 +540,6 @@
556540
.bg-cyan-100 {
557541
background-color: var(--color-cyan-100);
558542
}
559-
.bg-emerald-100 {
560-
background-color: var(--color-emerald-100);
561-
}
562543
.bg-fuchsia-600 {
563544
background-color: var(--color-fuchsia-600);
564545
}
@@ -703,6 +684,12 @@
703684
.p-2 {
704685
padding: calc(var(--spacing) * 2);
705686
}
687+
.p-4 {
688+
padding: calc(var(--spacing) * 4);
689+
}
690+
.p-5 {
691+
padding: calc(var(--spacing) * 5);
692+
}
706693
.p-6 {
707694
padding: calc(var(--spacing) * 6);
708695
}
@@ -831,9 +818,6 @@
831818
.text-emerald-600 {
832819
color: var(--color-emerald-600);
833820
}
834-
.text-emerald-800 {
835-
color: var(--color-emerald-800);
836-
}
837821
.text-gray-500 {
838822
color: var(--color-gray-500);
839823
}
@@ -1144,6 +1128,11 @@
11441128
grid-template-columns: repeat(3, minmax(0, 1fr));
11451129
}
11461130
}
1131+
.sm\:grid-cols-5 {
1132+
@media (width >= 40rem) {
1133+
grid-template-columns: repeat(5, minmax(0, 1fr));
1134+
}
1135+
}
11471136
.sm\:text-5xl {
11481137
@media (width >= 40rem) {
11491138
font-size: var(--text-5xl);
@@ -1161,6 +1150,46 @@
11611150
grid-column: span 2 / span 2;
11621151
}
11631152
}
1153+
.md\:mt-1 {
1154+
@media (width >= 48rem) {
1155+
margin-top: calc(var(--spacing) * 1);
1156+
}
1157+
}
1158+
.md\:mt-2 {
1159+
@media (width >= 48rem) {
1160+
margin-top: calc(var(--spacing) * 2);
1161+
}
1162+
}
1163+
.md\:mt-6 {
1164+
@media (width >= 48rem) {
1165+
margin-top: calc(var(--spacing) * 6);
1166+
}
1167+
}
1168+
.md\:mt-8 {
1169+
@media (width >= 48rem) {
1170+
margin-top: calc(var(--spacing) * 8);
1171+
}
1172+
}
1173+
.md\:mt-10 {
1174+
@media (width >= 48rem) {
1175+
margin-top: calc(var(--spacing) * 10);
1176+
}
1177+
}
1178+
.md\:mt-16 {
1179+
@media (width >= 48rem) {
1180+
margin-top: calc(var(--spacing) * 16);
1181+
}
1182+
}
1183+
.md\:mt-24 {
1184+
@media (width >= 48rem) {
1185+
margin-top: calc(var(--spacing) * 24);
1186+
}
1187+
}
1188+
.md\:flex {
1189+
@media (width >= 48rem) {
1190+
display: flex;
1191+
}
1192+
}
11641193
.md\:h-94 {
11651194
@media (width >= 48rem) {
11661195
height: calc(var(--spacing) * 94);
@@ -1271,14 +1300,6 @@
12711300
}
12721301
}
12731302
}
1274-
.dark\:bg-emerald-500\/20 {
1275-
@media (prefers-color-scheme: dark) {
1276-
background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
1277-
@supports (color: color-mix(in lab, red, red)) {
1278-
background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
1279-
}
1280-
}
1281-
}
12821303
.dark\:bg-gray-700 {
12831304
@media (prefers-color-scheme: dark) {
12841305
background-color: var(--color-gray-700);
@@ -1389,11 +1410,6 @@
13891410
color: var(--color-cyan-200);
13901411
}
13911412
}
1392-
.dark\:text-emerald-200 {
1393-
@media (prefers-color-scheme: dark) {
1394-
color: var(--color-emerald-200);
1395-
}
1396-
}
13971413
.dark\:text-indigo-200 {
13981414
@media (prefers-color-scheme: dark) {
13991415
color: var(--color-indigo-200);
@@ -1432,6 +1448,14 @@
14321448
}
14331449
}
14341450
}
1451+
.dark\:text-white\/70 {
1452+
@media (prefers-color-scheme: dark) {
1453+
color: color-mix(in srgb, #fff 70%, transparent);
1454+
@supports (color: color-mix(in lab, red, red)) {
1455+
color: color-mix(in oklab, var(--color-white) 70%, transparent);
1456+
}
1457+
}
1458+
}
14351459
.dark\:text-white\/75 {
14361460
@media (prefers-color-scheme: dark) {
14371461
color: color-mix(in srgb, #fff 75%, transparent);

0 commit comments

Comments
 (0)