Skip to content

Commit 234f39d

Browse files
ProCO-RPHopkinsProCO-RPHopkins
committed
Ran rebuild to display CSS changes.
1 parent 568dd7b commit 234f39d

File tree

2 files changed

+170
-1
lines changed

2 files changed

+170
-1
lines changed

‎frontend/index.html‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,8 +295,37 @@ <h3 class="font-semibold mb-2">My Role — Context Engineer</h3>
295295
<img src="assets/achieve-analytics.png" class="rounded-xl ring-1 ring-gray-200 dark:ring-white/10" alt="Analytics & job-tracking">
296296
</div>
297297

298-
298+
<!-- Analytics & AI Analyst -->
299+
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10 mt-10">
300+
<h3 class="font-semibold text-xl mb-4">Super Admin Data Dashboard & AI Analyst</h3>
301+
<p class="text-gray-700 dark:text-white/85 mb-4">
302+
The admin suite captures novel quantitative signals across the job-search journey, provides interactive visualizations,
303+
and includes an <b>AI Analyst</b> that answers questions about the data using a guarded pipeline to minimize hallucinations—
304+
showing the generated aggregation pipeline and range so admins can verify results.
305+
</p>
299306

307+
<ul class="list-disc pl-5 space-y-2 text-sm text-gray-700 dark:text-white/80 mb-6">
308+
<li>Filters by race/ethnicity, gender, conviction type; equity-gap and opportunity heatmaps.</li>
309+
<li>Application analytics: totals, active pipeline, interviews, offers, rescinds; time-series trends.</li>
310+
<li>AI Analyst: prompt templates + schema-aware context; pipeline preview + range disclosure for transparency.</li>
311+
</ul>
312+
313+
<div class="grid gap-6 md:grid-cols-3 justify-items-center">
314+
<img src="assets/ai-analyst.png"
315+
alt="AI Analyst – verified pipeline & range"
316+
class="w-[260px] md:w-[300px] lg:w-[340px] h-auto object-contain rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-900"
317+
loading="lazy" />
318+
<img src="assets/data-dashboard.png"
319+
alt="Admin dashboard – KPIs and equity analysis"
320+
class="w-[260px] md:w-[300px] lg:w-[340px] h-auto object-contain rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-900"
321+
loading="lazy" />
322+
<img src="assets/user-data.png"
323+
alt="User summary table – outcomes and demographics"
324+
class="w-[260px] md:w-[300px] lg:w-[340px] h-auto object-contain rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-900"
325+
loading="lazy" />
326+
</div>
327+
</div>
328+
300329
<!-- Architecture & Stack -->
301330
<div class="grid md:grid-cols-2 gap-6">
302331
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">

‎frontend/src/output.css‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
--color-amber-800: oklch(47.3% 0.137 46.201);
1515
--color-green-600: oklch(62.7% 0.194 149.214);
1616
--color-emerald-600: oklch(59.6% 0.145 163.225);
17+
--color-teal-50: oklch(98.4% 0.014 180.72);
1718
--color-teal-100: oklch(95.3% 0.051 180.801);
1819
--color-teal-200: oklch(91% 0.096 180.426);
1920
--color-teal-300: oklch(85.5% 0.138 181.071);
@@ -80,6 +81,7 @@
8081
--font-weight-extrabold: 800;
8182
--tracking-wide: 0.025em;
8283
--leading-relaxed: 1.625;
84+
--radius-lg: 0.5rem;
8385
--radius-xl: 0.75rem;
8486
--radius-2xl: 1rem;
8587
--radius-3xl: 1.5rem;
@@ -299,12 +301,24 @@
299301
.mt-3 {
300302
margin-top: calc(var(--spacing) * 3);
301303
}
304+
.mt-4 {
305+
margin-top: calc(var(--spacing) * 4);
306+
}
307+
.mt-6 {
308+
margin-top: calc(var(--spacing) * 6);
309+
}
302310
.mt-8 {
303311
margin-top: calc(var(--spacing) * 8);
304312
}
313+
.mt-10 {
314+
margin-top: calc(var(--spacing) * 10);
315+
}
305316
.mb-2 {
306317
margin-bottom: calc(var(--spacing) * 2);
307318
}
319+
.mb-3 {
320+
margin-bottom: calc(var(--spacing) * 3);
321+
}
308322
.mb-4 {
309323
margin-bottom: calc(var(--spacing) * 4);
310324
}
@@ -320,6 +334,9 @@
320334
.mb-12 {
321335
margin-bottom: calc(var(--spacing) * 12);
322336
}
337+
.block {
338+
display: block;
339+
}
323340
.flex {
324341
display: flex;
325342
}
@@ -332,6 +349,12 @@
332349
.inline-flex {
333350
display: inline-flex;
334351
}
352+
.table {
353+
display: table;
354+
}
355+
.aspect-\[16\/9\] {
356+
aspect-ratio: 16/9;
357+
}
335358
.aspect-square {
336359
aspect-ratio: 1 / 1;
337360
}
@@ -353,6 +376,9 @@
353376
.h-96 {
354377
height: calc(var(--spacing) * 96);
355378
}
379+
.h-auto {
380+
height: auto;
381+
}
356382
.h-full {
357383
height: 100%;
358384
}
@@ -374,6 +400,9 @@
374400
.w-96 {
375401
width: calc(var(--spacing) * 96);
376402
}
403+
.w-\[260px\] {
404+
width: 260px;
405+
}
377406
.w-full {
378407
width: 100%;
379408
}
@@ -392,6 +421,9 @@
392421
.resize {
393422
resize: both;
394423
}
424+
.list-disc {
425+
list-style-type: disc;
426+
}
395427
.grid-cols-2 {
396428
grid-template-columns: repeat(2, minmax(0, 1fr));
397429
}
@@ -416,6 +448,9 @@
416448
.justify-center {
417449
justify-content: center;
418450
}
451+
.justify-items-center {
452+
justify-items: center;
453+
}
419454
.gap-2 {
420455
gap: calc(var(--spacing) * 2);
421456
}
@@ -434,6 +469,20 @@
434469
.gap-12 {
435470
gap: calc(var(--spacing) * 12);
436471
}
472+
.space-y-1 {
473+
:where(& > :not(:last-child)) {
474+
--tw-space-y-reverse: 0;
475+
margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
476+
margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
477+
}
478+
}
479+
.space-y-2 {
480+
:where(& > :not(:last-child)) {
481+
--tw-space-y-reverse: 0;
482+
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
483+
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
484+
}
485+
}
437486
.overflow-hidden {
438487
overflow: hidden;
439488
}
@@ -452,6 +501,9 @@
452501
.rounded-full {
453502
border-radius: calc(infinity * 1px);
454503
}
504+
.rounded-lg {
505+
border-radius: var(--radius-lg);
506+
}
455507
.rounded-xl {
456508
border-radius: var(--radius-xl);
457509
}
@@ -472,6 +524,9 @@
472524
.bg-fuchsia-600 {
473525
background-color: var(--color-fuchsia-600);
474526
}
527+
.bg-gray-50 {
528+
background-color: var(--color-gray-50);
529+
}
475530
.bg-gray-100 {
476531
background-color: var(--color-gray-100);
477532
}
@@ -484,6 +539,12 @@
484539
.bg-rose-100 {
485540
background-color: var(--color-rose-100);
486541
}
542+
.bg-teal-50\/60 {
543+
background-color: color-mix(in srgb, oklch(98.4% 0.014 180.72) 60%, transparent);
544+
@supports (color: color-mix(in lab, red, red)) {
545+
background-color: color-mix(in oklab, var(--color-teal-50) 60%, transparent);
546+
}
547+
}
487548
.bg-teal-100 {
488549
background-color: var(--color-teal-100);
489550
}
@@ -502,6 +563,12 @@
502563
background-color: color-mix(in oklab, var(--color-teal-500) 30%, transparent);
503564
}
504565
}
566+
.bg-teal-600\/90 {
567+
background-color: color-mix(in srgb, oklch(60% 0.118 184.704) 90%, transparent);
568+
@supports (color: color-mix(in lab, red, red)) {
569+
background-color: color-mix(in oklab, var(--color-teal-600) 90%, transparent);
570+
}
571+
}
505572
.bg-white {
506573
background-color: var(--color-white);
507574
}
@@ -555,6 +622,9 @@
555622
.bg-center {
556623
background-position: center;
557624
}
625+
.object-contain {
626+
object-fit: contain;
627+
}
558628
.object-cover {
559629
object-fit: cover;
560630
}
@@ -573,12 +643,18 @@
573643
.px-3 {
574644
padding-inline: calc(var(--spacing) * 3);
575645
}
646+
.px-4 {
647+
padding-inline: calc(var(--spacing) * 4);
648+
}
576649
.px-6 {
577650
padding-inline: calc(var(--spacing) * 6);
578651
}
579652
.py-1 {
580653
padding-block: calc(var(--spacing) * 1);
581654
}
655+
.py-2 {
656+
padding-block: calc(var(--spacing) * 2);
657+
}
582658
.py-3 {
583659
padding-block: calc(var(--spacing) * 3);
584660
}
@@ -597,6 +673,9 @@
597673
.pb-24 {
598674
padding-bottom: calc(var(--spacing) * 24);
599675
}
676+
.pl-5 {
677+
padding-left: calc(var(--spacing) * 5);
678+
}
600679
.text-center {
601680
text-align: center;
602681
}
@@ -686,6 +765,9 @@
686765
.text-gray-700 {
687766
color: var(--color-gray-700);
688767
}
768+
.text-gray-800 {
769+
color: var(--color-gray-800);
770+
}
689771
.text-gray-900 {
690772
color: var(--color-gray-900);
691773
}
@@ -757,9 +839,18 @@
757839
.ring-gray-300 {
758840
--tw-ring-color: var(--color-gray-300);
759841
}
842+
.ring-teal-300\/40 {
843+
--tw-ring-color: color-mix(in srgb, oklch(85.5% 0.138 181.071) 40%, transparent);
844+
@supports (color: color-mix(in lab, red, red)) {
845+
--tw-ring-color: color-mix(in oklab, var(--color-teal-300) 40%, transparent);
846+
}
847+
}
760848
.ring-teal-400 {
761849
--tw-ring-color: var(--color-teal-400);
762850
}
851+
.ring-teal-500 {
852+
--tw-ring-color: var(--color-teal-500);
853+
}
763854
.ring-white\/50 {
764855
--tw-ring-color: color-mix(in srgb, #fff 50%, transparent);
765856
@supports (color: color-mix(in lab, red, red)) {
@@ -866,6 +957,13 @@
866957
}
867958
}
868959
}
960+
.hover\:bg-teal-600 {
961+
&:hover {
962+
@media (hover: hover) {
963+
background-color: var(--color-teal-600);
964+
}
965+
}
966+
}
869967
.hover\:bg-white\/30 {
870968
&:hover {
871969
@media (hover: hover) {
@@ -920,6 +1018,11 @@
9201018
line-height: var(--tw-leading, var(--text-xl--line-height));
9211019
}
9221020
}
1021+
.md\:col-span-2 {
1022+
@media (width >= 48rem) {
1023+
grid-column: span 2 / span 2;
1024+
}
1025+
}
9231026
.md\:h-94 {
9241027
@media (width >= 48rem) {
9251028
height: calc(var(--spacing) * 94);
@@ -945,11 +1048,21 @@
9451048
width: calc(var(--spacing) * 94);
9461049
}
9471050
}
1051+
.md\:w-\[300px\] {
1052+
@media (width >= 48rem) {
1053+
width: 300px;
1054+
}
1055+
}
9481056
.md\:grid-cols-2 {
9491057
@media (width >= 48rem) {
9501058
grid-template-columns: repeat(2, minmax(0, 1fr));
9511059
}
9521060
}
1061+
.md\:grid-cols-3 {
1062+
@media (width >= 48rem) {
1063+
grid-template-columns: repeat(3, minmax(0, 1fr));
1064+
}
1065+
}
9531066
.md\:grid-cols-4 {
9541067
@media (width >= 48rem) {
9551068
grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -971,6 +1084,11 @@
9711084
line-height: var(--tw-leading, var(--text-6xl--line-height));
9721085
}
9731086
}
1087+
.lg\:w-\[340px\] {
1088+
@media (width >= 64rem) {
1089+
width: 340px;
1090+
}
1091+
}
9741092
.lg\:grid-cols-3 {
9751093
@media (width >= 64rem) {
9761094
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1051,6 +1169,14 @@
10511169
}
10521170
}
10531171
}
1172+
.dark\:bg-teal-500\/10 {
1173+
@media (prefers-color-scheme: dark) {
1174+
background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 10%, transparent);
1175+
@supports (color: color-mix(in lab, red, red)) {
1176+
background-color: color-mix(in oklab, var(--color-teal-500) 10%, transparent);
1177+
}
1178+
}
1179+
}
10541180
.dark\:bg-teal-500\/20 {
10551181
@media (prefers-color-scheme: dark) {
10561182
background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent);
@@ -1182,6 +1308,14 @@
11821308
}
11831309
}
11841310
}
1311+
.dark\:ring-teal-400\/20 {
1312+
@media (prefers-color-scheme: dark) {
1313+
--tw-ring-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 20%, transparent);
1314+
@supports (color: color-mix(in lab, red, red)) {
1315+
--tw-ring-color: color-mix(in oklab, var(--color-teal-400) 20%, transparent);
1316+
}
1317+
}
1318+
}
11851319
.dark\:ring-white\/10 {
11861320
@media (prefers-color-scheme: dark) {
11871321
--tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
@@ -1250,6 +1384,11 @@
12501384
}
12511385
}
12521386
}
1387+
@property --tw-space-y-reverse {
1388+
syntax: "*";
1389+
inherits: false;
1390+
initial-value: 0;
1391+
}
12531392
@property --tw-border-style {
12541393
syntax: "*";
12551394
inherits: false;
@@ -1515,6 +1654,7 @@
15151654
@layer properties {
15161655
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
15171656
*, ::before, ::after, ::backdrop {
1657+
--tw-space-y-reverse: 0;
15181658
--tw-border-style: solid;
15191659
--tw-gradient-position: initial;
15201660
--tw-gradient-from: #0000;

0 commit comments

Comments
 (0)