Skip to content

Commit a881fa1

Browse files
ProCO-RPHopkinsProCO-RPHopkins
committed
Aligned project cards.
1 parent 55dbfaa commit a881fa1

File tree

2 files changed

+108
-3
lines changed

2 files changed

+108
-3
lines changed

‎frontend/index.html‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -206,12 +206,29 @@ <h2 class="text-3xl font-bold mb-10 text-center text-teal-600 dark:text-teal-300
206206
loading="lazy"
207207
/>
208208
<h3 class="text-xl font-semibold mb-2 group-hover:text-teal-600 dark:group-hover:text-teal-300 transition">
209-
Achieve Reentry — AI Job Search & Support
209+
Achieve Reentry — AI Job Search Tools & Admin AI Dashboard
210210
</h3>
211211
<p class="text-gray-600 dark:text-white/80 text-sm mb-4">
212-
Full-stack platform helping justice-impacted job seekers discover roles, track progress, and generate tailored career docs with LLM assistance.
212+
Full-stack reentry platform that blends AI-powered job discovery, application tracking, and tailored résumé/cover-letter generation with an admin dashboard with data visualizations and a built-in AI Analyst for deeper data insights.
213213
</p>
214-
<div class="flex flex-wrap gap-2">
214+
215+
<!-- Buttons -->
216+
<div class="flex flex-wrap gap-3">
217+
<a href="#"
218+
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-xs font-semibold shadow-md hover:scale-105 transition ring-1 ring-emerald-400">
219+
<i class="ti ti-rocket"></i>
220+
Live Demo (coming soon)
221+
</a>
222+
<a href="https://drive.google.com/file/d/1T0vriv51OrSNy37oIJDMQL4UFP6XesZu/view?usp=sharing"
223+
target="_blank"
224+
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-gradient-to-r from-pink-500 to-rose-600 text-white text-xs font-semibold shadow-md hover:scale-105 transition ring-1 ring-pink-400">
225+
<i class="ti ti-headphones"></i>
226+
Play Podcast
227+
</a>
228+
</div>
229+
230+
<!-- Tech Stack Chips -->
231+
<div class="flex flex-wrap gap-2 mt-4">
215232
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Node/Express</span>
216233
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">MongoDB</span>
217234
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">EJS + Bootstrap</span>

‎frontend/src/output.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
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-400: oklch(76.5% 0.177 163.223);
17+
--color-emerald-500: oklch(69.6% 0.17 162.48);
1618
--color-emerald-600: oklch(59.6% 0.145 163.225);
1719
--color-teal-100: oklch(95.3% 0.051 180.801);
1820
--color-teal-200: oklch(91% 0.096 180.426);
@@ -34,10 +36,13 @@
3436
--color-purple-600: oklch(55.8% 0.288 302.321);
3537
--color-purple-800: oklch(43.8% 0.218 303.724);
3638
--color-fuchsia-600: oklch(59.1% 0.293 322.896);
39+
--color-pink-400: oklch(71.8% 0.202 349.761);
40+
--color-pink-500: oklch(65.6% 0.241 354.308);
3741
--color-pink-600: oklch(59.2% 0.249 0.584);
3842
--color-rose-100: oklch(94.1% 0.03 12.58);
3943
--color-rose-200: oklch(89.2% 0.058 10.001);
4044
--color-rose-500: oklch(64.5% 0.246 16.439);
45+
--color-rose-600: oklch(58.6% 0.253 17.585);
4146
--color-rose-800: oklch(45.5% 0.188 13.697);
4247
--color-slate-50: oklch(98.4% 0.003 247.858);
4348
--color-slate-700: oklch(37.2% 0.044 257.287);
@@ -419,6 +424,12 @@
419424
.max-w-xl {
420425
max-width: var(--container-xl);
421426
}
427+
.border-collapse {
428+
border-collapse: collapse;
429+
}
430+
.transform {
431+
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
432+
}
422433
.animate-pulse {
423434
animation: var(--animate-pulse);
424435
}
@@ -511,6 +522,10 @@
511522
.rounded-xl {
512523
border-radius: var(--radius-xl);
513524
}
525+
.border {
526+
border-style: var(--tw-border-style);
527+
border-width: 1px;
528+
}
514529
.border-2 {
515530
border-style: var(--tw-border-style);
516531
border-width: 2px;
@@ -561,6 +576,9 @@
561576
background-color: color-mix(in oklab, var(--color-teal-500) 30%, transparent);
562577
}
563578
}
579+
.bg-teal-600 {
580+
background-color: var(--color-teal-600);
581+
}
564582
.bg-teal-600\/90 {
565583
background-color: color-mix(in srgb, oklch(60% 0.118 184.704) 90%, transparent);
566584
@supports (color: color-mix(in lab, red, red)) {
@@ -599,10 +617,18 @@
599617
.bg-\[url\(\'https\:\/\/images\.unsplash\.com\/photo-1527443154391-507e9dc6c5cc\?auto\=format\&fit\=crop\&w\=1920\&q\=80\'\)\] {
600618
background-image: url('https://images.unsplash.com/photo-1527443154391-507e9dc6c5cc?auto=format&fit=crop&w=1920&q=80');
601619
}
620+
.from-emerald-500 {
621+
--tw-gradient-from: var(--color-emerald-500);
622+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
623+
}
602624
.from-gray-50 {
603625
--tw-gradient-from: var(--color-gray-50);
604626
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
605627
}
628+
.from-pink-500 {
629+
--tw-gradient-from: var(--color-pink-500);
630+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
631+
}
606632
.from-purple-600 {
607633
--tw-gradient-from: var(--color-purple-600);
608634
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -628,6 +654,14 @@
628654
--tw-gradient-to: var(--color-pink-600);
629655
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
630656
}
657+
.to-rose-600 {
658+
--tw-gradient-to: var(--color-rose-600);
659+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
660+
}
661+
.to-teal-600 {
662+
--tw-gradient-to: var(--color-teal-600);
663+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
664+
}
631665
.to-white {
632666
--tw-gradient-to: var(--color-white);
633667
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -817,6 +851,9 @@
817851
color: color-mix(in oklab, var(--color-white) 90%, transparent);
818852
}
819853
}
854+
.underline {
855+
text-decoration-line: underline;
856+
}
820857
.opacity-20 {
821858
opacity: 20%;
822859
}
@@ -850,12 +887,18 @@
850887
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
851888
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
852889
}
890+
.ring-emerald-400 {
891+
--tw-ring-color: var(--color-emerald-400);
892+
}
853893
.ring-gray-200 {
854894
--tw-ring-color: var(--color-gray-200);
855895
}
856896
.ring-gray-300 {
857897
--tw-ring-color: var(--color-gray-300);
858898
}
899+
.ring-pink-400 {
900+
--tw-ring-color: var(--color-pink-400);
901+
}
859902
.ring-purple-500 {
860903
--tw-ring-color: var(--color-purple-500);
861904
}
@@ -865,12 +908,19 @@
865908
.ring-teal-500 {
866909
--tw-ring-color: var(--color-teal-500);
867910
}
911+
.ring-white {
912+
--tw-ring-color: var(--color-white);
913+
}
868914
.ring-white\/50 {
869915
--tw-ring-color: color-mix(in srgb, #fff 50%, transparent);
870916
@supports (color: color-mix(in lab, red, red)) {
871917
--tw-ring-color: color-mix(in oklab, var(--color-white) 50%, transparent);
872918
}
873919
}
920+
.outline {
921+
outline-style: var(--tw-outline-style);
922+
outline-width: 1px;
923+
}
874924
.blur-3xl {
875925
--tw-blur: blur(var(--blur-3xl));
876926
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -884,6 +934,9 @@
884934
--tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
885935
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
886936
}
937+
.filter {
938+
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
939+
}
887940
.backdrop-blur {
888941
--tw-backdrop-blur: blur(8px);
889942
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -894,6 +947,10 @@
894947
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
895948
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
896949
}
950+
.backdrop-filter {
951+
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
952+
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
953+
}
897954
.transition {
898955
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
899956
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1418,6 +1475,26 @@
14181475
}
14191476
}
14201477
}
1478+
@property --tw-rotate-x {
1479+
syntax: "*";
1480+
inherits: false;
1481+
}
1482+
@property --tw-rotate-y {
1483+
syntax: "*";
1484+
inherits: false;
1485+
}
1486+
@property --tw-rotate-z {
1487+
syntax: "*";
1488+
inherits: false;
1489+
}
1490+
@property --tw-skew-x {
1491+
syntax: "*";
1492+
inherits: false;
1493+
}
1494+
@property --tw-skew-y {
1495+
syntax: "*";
1496+
inherits: false;
1497+
}
14211498
@property --tw-space-y-reverse {
14221499
syntax: "*";
14231500
inherits: false;
@@ -1547,6 +1624,11 @@
15471624
inherits: false;
15481625
initial-value: 0 0 #0000;
15491626
}
1627+
@property --tw-outline-style {
1628+
syntax: "*";
1629+
inherits: false;
1630+
initial-value: solid;
1631+
}
15501632
@property --tw-blur {
15511633
syntax: "*";
15521634
inherits: false;
@@ -1688,6 +1770,11 @@
16881770
@layer properties {
16891771
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
16901772
*, ::before, ::after, ::backdrop {
1773+
--tw-rotate-x: initial;
1774+
--tw-rotate-y: initial;
1775+
--tw-rotate-z: initial;
1776+
--tw-skew-x: initial;
1777+
--tw-skew-y: initial;
16911778
--tw-space-y-reverse: 0;
16921779
--tw-border-style: solid;
16931780
--tw-gradient-position: initial;
@@ -1716,6 +1803,7 @@
17161803
--tw-ring-offset-width: 0px;
17171804
--tw-ring-offset-color: #fff;
17181805
--tw-ring-offset-shadow: 0 0 #0000;
1806+
--tw-outline-style: solid;
17191807
--tw-blur: initial;
17201808
--tw-brightness: initial;
17211809
--tw-contrast: initial;

0 commit comments

Comments
 (0)