Skip to content

Commit 55dbfaa

Browse files
ProCO-RPHopkinsProCO-RPHopkins
committed
Added generated thumbnail clip to represent my capstone project.
1 parent ee8ae8f commit 55dbfaa

File tree

3 files changed

+40
-68
lines changed

3 files changed

+40
-68
lines changed

‎frontend/assets/capstone-thumb.mp4‎

2.59 MB
Binary file not shown.

‎frontend/index.html‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -225,19 +225,39 @@ <h3 class="text-xl font-semibold mb-2 group-hover:text-teal-600 dark:group-hover
225225

226226
<!-- Capstone: Redirecting Authoritarian Leadership -->
227227
<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">
228-
<a href="#capstone-io" class="block">
229-
<div class="w-full aspect-video rounded-xl mb-4 ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-700 border-2 border-dashed flex items-center justify-center text-gray-500">
230-
<i class="ti ti-chart-bar text-4xl"></i>
231-
</div>
228+
<!-- Video thumbnail -->
229+
<video autoplay loop muted playsinline
230+
class="w-full aspect-[16/9] object-cover rounded-xl mb-4 ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-800">
231+
<source src="assets/capstone-thumb.mp4" type="video/mp4" />
232+
Your browser does not support the video tag.
233+
</video>
234+
235+
<!-- Title & description -->
232236
<h3 class="text-xl font-semibold mb-2 group-hover:text-teal-600 dark:group-hover:text-teal-300 transition">
233-
Capstone — Redirecting Authoritarian Leadership
237+
Capstone — Authoritarian Leadership & Employee Outcomes
234238
</h3>
235239
<p class="text-gray-600 dark:text-white/80 text-sm mb-4">
236-
Quasi-experimental research designing a metrics-based intervention to redirect authoritarian leaders’ power needs and improve employee motivation & morale.
240+
MS in Industrial-Organizational Psychology capstone project. Explores how authoritarian leadership styles influence employee trust, performance, and wellbeing — blending research design, data analysis, and critical evaluation.
237241
</p>
238242

243+
<!-- Buttons -->
244+
<div class="flex flex-wrap gap-3">
245+
<a href="https://docs.google.com/presentation/d/1RM04EsPeiL34__VhqWeOKPtR3FcDbnCX/edit?usp=sharing&ouid=111666876681793617489&rtpof=true&sd=true"
246+
target="_blank"
247+
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">
248+
<i class="ti ti-presentation"></i>
249+
View Slideshow
250+
</a>
251+
<a href="https://drive.google.com/file/d/1ZYeAmoUZKIiaJpXmpDDLcLRNZQXHXwum/view?usp=sharing"
252+
target="_blank"
253+
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-pink-600 text-white text-xs font-semibold shadow-md hover:scale-105 transition ring-1 ring-purple-500">
254+
<i class="ti ti-headphones"></i>
255+
Play Podcast
256+
</a>
257+
</div>
258+
239259
<!-- Tech/skills chips -->
240-
<div class="flex flex-wrap gap-2">
260+
<div class="flex flex-wrap gap-2 mt-4">
241261
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">I-O Psychology</span>
242262
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">Research Design</span>
243263
<span class="px-2 py-1 bg-gray-200 dark:bg-slate-700 text-xs rounded">SDT & Power Needs</span>

‎frontend/src/output.css‎

Lines changed: 13 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,10 @@
3131
--color-purple-100: oklch(94.6% 0.033 307.174);
3232
--color-purple-200: oklch(90.2% 0.063 306.703);
3333
--color-purple-500: oklch(62.7% 0.265 303.9);
34+
--color-purple-600: oklch(55.8% 0.288 302.321);
3435
--color-purple-800: oklch(43.8% 0.218 303.724);
3536
--color-fuchsia-600: oklch(59.1% 0.293 322.896);
37+
--color-pink-600: oklch(59.2% 0.249 0.584);
3638
--color-rose-100: oklch(94.1% 0.03 12.58);
3739
--color-rose-200: oklch(89.2% 0.058 10.001);
3840
--color-rose-500: oklch(64.5% 0.246 16.439);
@@ -417,12 +419,6 @@
417419
.max-w-xl {
418420
max-width: var(--container-xl);
419421
}
420-
.border-collapse {
421-
border-collapse: collapse;
422-
}
423-
.transform {
424-
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
425-
}
426422
.animate-pulse {
427423
animation: var(--animate-pulse);
428424
}
@@ -515,10 +511,6 @@
515511
.rounded-xl {
516512
border-radius: var(--radius-xl);
517513
}
518-
.border {
519-
border-style: var(--tw-border-style);
520-
border-width: 1px;
521-
}
522514
.border-2 {
523515
border-style: var(--tw-border-style);
524516
border-width: 2px;
@@ -569,9 +561,6 @@
569561
background-color: color-mix(in oklab, var(--color-teal-500) 30%, transparent);
570562
}
571563
}
572-
.bg-teal-600 {
573-
background-color: var(--color-teal-600);
574-
}
575564
.bg-teal-600\/90 {
576565
background-color: color-mix(in srgb, oklch(60% 0.118 184.704) 90%, transparent);
577566
@supports (color: color-mix(in lab, red, red)) {
@@ -614,6 +603,10 @@
614603
--tw-gradient-from: var(--color-gray-50);
615604
--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));
616605
}
606+
.from-purple-600 {
607+
--tw-gradient-from: var(--color-purple-600);
608+
--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));
609+
}
617610
.from-teal-500 {
618611
--tw-gradient-from: var(--color-teal-500);
619612
--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,6 +624,10 @@
631624
--tw-gradient-to: var(--color-cyan-600);
632625
--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));
633626
}
627+
.to-pink-600 {
628+
--tw-gradient-to: var(--color-pink-600);
629+
--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));
630+
}
634631
.to-white {
635632
--tw-gradient-to: var(--color-white);
636633
--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));
@@ -820,9 +817,6 @@
820817
color: color-mix(in oklab, var(--color-white) 90%, transparent);
821818
}
822819
}
823-
.underline {
824-
text-decoration-line: underline;
825-
}
826820
.opacity-20 {
827821
opacity: 20%;
828822
}
@@ -862,25 +856,21 @@
862856
.ring-gray-300 {
863857
--tw-ring-color: var(--color-gray-300);
864858
}
859+
.ring-purple-500 {
860+
--tw-ring-color: var(--color-purple-500);
861+
}
865862
.ring-teal-400 {
866863
--tw-ring-color: var(--color-teal-400);
867864
}
868865
.ring-teal-500 {
869866
--tw-ring-color: var(--color-teal-500);
870867
}
871-
.ring-white {
872-
--tw-ring-color: var(--color-white);
873-
}
874868
.ring-white\/50 {
875869
--tw-ring-color: color-mix(in srgb, #fff 50%, transparent);
876870
@supports (color: color-mix(in lab, red, red)) {
877871
--tw-ring-color: color-mix(in oklab, var(--color-white) 50%, transparent);
878872
}
879873
}
880-
.outline {
881-
outline-style: var(--tw-outline-style);
882-
outline-width: 1px;
883-
}
884874
.blur-3xl {
885875
--tw-blur: blur(var(--blur-3xl));
886876
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,);
@@ -894,9 +884,6 @@
894884
--tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
895885
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,);
896886
}
897-
.filter {
898-
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,);
899-
}
900887
.backdrop-blur {
901888
--tw-backdrop-blur: blur(8px);
902889
-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,);
@@ -907,10 +894,6 @@
907894
-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,);
908895
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,);
909896
}
910-
.backdrop-filter {
911-
-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,);
912-
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,);
913-
}
914897
.transition {
915898
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;
916899
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1435,26 +1418,6 @@
14351418
}
14361419
}
14371420
}
1438-
@property --tw-rotate-x {
1439-
syntax: "*";
1440-
inherits: false;
1441-
}
1442-
@property --tw-rotate-y {
1443-
syntax: "*";
1444-
inherits: false;
1445-
}
1446-
@property --tw-rotate-z {
1447-
syntax: "*";
1448-
inherits: false;
1449-
}
1450-
@property --tw-skew-x {
1451-
syntax: "*";
1452-
inherits: false;
1453-
}
1454-
@property --tw-skew-y {
1455-
syntax: "*";
1456-
inherits: false;
1457-
}
14581421
@property --tw-space-y-reverse {
14591422
syntax: "*";
14601423
inherits: false;
@@ -1584,11 +1547,6 @@
15841547
inherits: false;
15851548
initial-value: 0 0 #0000;
15861549
}
1587-
@property --tw-outline-style {
1588-
syntax: "*";
1589-
inherits: false;
1590-
initial-value: solid;
1591-
}
15921550
@property --tw-blur {
15931551
syntax: "*";
15941552
inherits: false;
@@ -1730,11 +1688,6 @@
17301688
@layer properties {
17311689
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
17321690
*, ::before, ::after, ::backdrop {
1733-
--tw-rotate-x: initial;
1734-
--tw-rotate-y: initial;
1735-
--tw-rotate-z: initial;
1736-
--tw-skew-x: initial;
1737-
--tw-skew-y: initial;
17381691
--tw-space-y-reverse: 0;
17391692
--tw-border-style: solid;
17401693
--tw-gradient-position: initial;
@@ -1763,7 +1716,6 @@
17631716
--tw-ring-offset-width: 0px;
17641717
--tw-ring-offset-color: #fff;
17651718
--tw-ring-offset-shadow: 0 0 #0000;
1766-
--tw-outline-style: solid;
17671719
--tw-blur: initial;
17681720
--tw-brightness: initial;
17691721
--tw-contrast: initial;

0 commit comments

Comments
 (0)