From f297e25b520af99a464e365c6c4aee37d96b6734 Mon Sep 17 00:00:00 2001
From: Jason Zheng <50124246+M1ght1203@users.noreply.github.com>
Date: Thu, 23 Oct 2025 12:07:46 -0500
Subject: [PATCH 1/5] Restyle career carousel overlays

---
 index.html | 30 +++++++++++++++++++
 style.css  | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 115 insertions(+)

diff --git a/index.html b/index.html
index f743676..3943a42 100644
--- a/index.html
+++ b/index.html
@@ -147,12 +147,42 @@ <h3>
             <h2 class="section-title">Career</h2>
             <div class="image-carousel" role="list" id="careerCarousel">
                 <div class="carousel-item" role="listitem">
+                    <div class="carousel-overlay" aria-hidden="false">
+                        <p class="overlay-label">Internship</p>
+                        <h3 class="overlay-title">Electromagnetic Compatibility Testing</h3>
+                        <p class="overlay-subtitle">L3Harris · Melbourne, FL</p>
+                        <p class="overlay-date">August 2025</p>
+                        <p class="overlay-description">
+                            Supported avionics testing campaigns to safeguard onboard systems from signal interference
+                            during integration and launch readiness.
+                        </p>
+                    </div>
                     <img src="images/L3Harris-1.jpg" alt="L3Harris Tactical Communication" />
                 </div>
                 <div class="carousel-item" role="listitem">
+                    <div class="carousel-overlay" aria-hidden="false">
+                        <p class="overlay-label">Automation</p>
+                        <h3 class="overlay-title">Pricing Intelligence Platform</h3>
+                        <p class="overlay-subtitle">L3Harris · Melbourne, FL</p>
+                        <p class="overlay-date">June 2024</p>
+                        <p class="overlay-description">
+                            Delivered a WPF-based CPQ solution that accelerated quoting workflows and introduced versioned
+                            pricing governance across teams.
+                        </p>
+                    </div>
                     <img src="images/L3Harris-2.jpg" alt="L3Harris Tactical Communication" />
                 </div>
                 <div class="carousel-item" role="listitem">
+                    <div class="carousel-overlay" aria-hidden="false">
+                        <p class="overlay-label">Operations</p>
+                        <h3 class="overlay-title">Logistics Optimization</h3>
+                        <p class="overlay-subtitle">C U Plastic · Orlando, FL</p>
+                        <p class="overlay-date">May 2024</p>
+                        <p class="overlay-description">
+                            Introduced cross-department workflows and staging strategies that improved throughput and
+                            reduced load times by 25%.
+                        </p>
+                    </div>
                     <img src="images/CU-Plastic.jpg" alt="C U Plastic" />
                 </div>
             </div>
diff --git a/style.css b/style.css
index 5b917e5..0e7e2a9 100644
--- a/style.css
+++ b/style.css
@@ -146,6 +146,8 @@ body {
     aspect-ratio: 16 / 9;
     background: transparent;
     border-radius: 0;
+    position: relative;
+    overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -166,6 +168,78 @@ body {
     pointer-events: none;
 }
 
+.carousel-overlay {
+    position: absolute;
+    left: clamp(1rem, 3vw, 2.5rem);
+    bottom: clamp(1rem, 3vw, 2.5rem);
+    padding: clamp(1rem, 2.5vw, 1.75rem);
+    max-width: min(24rem, 80%);
+    background: rgba(6, 9, 16, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 14px;
+    box-shadow: 0 18px 35px rgba(3, 5, 10, 0.45);
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    color: #f8f9fb;
+    pointer-events: none;
+}
+
+.overlay-label {
+    font-size: 0.7rem;
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.7);
+    margin: 0;
+}
+
+.overlay-title {
+    font-size: clamp(1.1rem, 2.2vw, 1.55rem);
+    font-weight: 700;
+    line-height: 1.2;
+    margin: 0;
+}
+
+.overlay-subtitle,
+.overlay-date,
+.overlay-description {
+    font-size: clamp(0.85rem, 1.6vw, 0.95rem);
+    line-height: 1.5;
+    margin: 0;
+    font-weight: 400;
+}
+
+.overlay-date {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.overlay-description {
+    margin-top: 0.35rem;
+    max-width: none;
+}
+
+@media (max-width: 640px) {
+    .carousel-item {
+        flex: 0 0 85vw;
+        max-width: 85vw;
+    }
+
+    .carousel-overlay {
+        left: clamp(0.75rem, 4vw, 1.5rem);
+        right: clamp(0.75rem, 4vw, 1.5rem);
+        max-width: none;
+        border-radius: 12px;
+        padding: clamp(0.85rem, 4vw, 1.25rem);
+    }
+
+    .overlay-label {
+        font-size: 0.65rem;
+        letter-spacing: 0.22em;
+    }
+}
+
 .image-carousel.is-free-scroll {
     scroll-snap-type: none;
 }
@@ -528,6 +602,17 @@ body {
         aspect-ratio: auto;
     }
 
+    .carousel-overlay {
+        inset: 0;
+        padding: clamp(1rem, 6vw, 2.5rem);
+        gap: 0.5rem;
+        background: linear-gradient(180deg, rgba(5, 8, 15, 0.9) 0%, rgba(5, 8, 15, 0.7) 65%, rgba(5, 8, 15, 0) 100%);
+    }
+
+    .overlay-description {
+        max-width: 100%;
+    }
+
     .scroll-wrapper {
         padding-top: 0;
     }

From e37027bd63883419fc3b13b2ba4da1de7872070e Mon Sep 17 00:00:00 2001
From: Jason Zheng <50124246+M1ght1203@users.noreply.github.com>
Date: Thu, 23 Oct 2025 12:23:39 -0500
Subject: [PATCH 2/5] Tighten carousel overlay margins

---
 style.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/style.css b/style.css
index 0e7e2a9..e76cdbc 100644
--- a/style.css
+++ b/style.css
@@ -170,8 +170,8 @@ body {
 
 .carousel-overlay {
     position: absolute;
-    left: clamp(1rem, 3vw, 2.5rem);
-    bottom: clamp(1rem, 3vw, 2.5rem);
+    left: clamp(0.65rem, 2.5vw, 1.75rem);
+    bottom: clamp(0.65rem, 2.5vw, 1.75rem);
     padding: clamp(1rem, 2.5vw, 1.75rem);
     max-width: min(24rem, 80%);
     background: rgba(6, 9, 16, 0.9);
@@ -227,8 +227,8 @@ body {
     }
 
     .carousel-overlay {
-        left: clamp(0.75rem, 4vw, 1.5rem);
-        right: clamp(0.75rem, 4vw, 1.5rem);
+        left: clamp(0.5rem, 3.5vw, 1.25rem);
+        right: clamp(0.5rem, 3.5vw, 1.25rem);
         max-width: none;
         border-radius: 12px;
         padding: clamp(0.85rem, 4vw, 1.25rem);

From eabeb7da71a4d4b151f33efc18903d0a6a7e29b3 Mon Sep 17 00:00:00 2001
From: Jason Zheng <50124246+M1ght1203@users.noreply.github.com>
Date: Thu, 23 Oct 2025 12:29:19 -0500
Subject: [PATCH 3/5] Align carousel overlay spacing with carousel gap

---
 style.css | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/style.css b/style.css
index e76cdbc..72aa690 100644
--- a/style.css
+++ b/style.css
@@ -120,8 +120,9 @@ body {
 }
 
 .image-carousel {
+    --carousel-gap: 1.5rem;
     display: flex;
-    gap: 1.5rem;
+    gap: var(--carousel-gap);
     overflow-x: auto;
     padding-bottom: 1rem;
     scroll-snap-type: x mandatory;
@@ -170,8 +171,8 @@ body {
 
 .carousel-overlay {
     position: absolute;
-    left: clamp(0.65rem, 2.5vw, 1.75rem);
-    bottom: clamp(0.65rem, 2.5vw, 1.75rem);
+    left: var(--carousel-gap);
+    bottom: var(--carousel-gap);
     padding: clamp(1rem, 2.5vw, 1.75rem);
     max-width: min(24rem, 80%);
     background: rgba(6, 9, 16, 0.9);
@@ -226,9 +227,13 @@ body {
         max-width: 85vw;
     }
 
+    .image-carousel {
+        --carousel-gap: clamp(0.75rem, 4vw, 1.25rem);
+    }
+
     .carousel-overlay {
-        left: clamp(0.5rem, 3.5vw, 1.25rem);
-        right: clamp(0.5rem, 3.5vw, 1.25rem);
+        left: var(--carousel-gap);
+        right: var(--carousel-gap);
         max-width: none;
         border-radius: 12px;
         padding: clamp(0.85rem, 4vw, 1.25rem);

From 0d82487714689a1aa8aa840ed27c5d2a24ac9982 Mon Sep 17 00:00:00 2001
From: Jason Zheng <50124246+M1ght1203@users.noreply.github.com>
Date: Thu, 23 Oct 2025 12:33:38 -0500
Subject: [PATCH 4/5] Remove carousel overlay border radius

---
 style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/style.css b/style.css
index 72aa690..f53e461 100644
--- a/style.css
+++ b/style.css
@@ -177,7 +177,7 @@ body {
     max-width: min(24rem, 80%);
     background: rgba(6, 9, 16, 0.9);
     border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 14px;
+    border-radius: 0;
     box-shadow: 0 18px 35px rgba(3, 5, 10, 0.45);
     display: flex;
     flex-direction: column;
@@ -235,7 +235,7 @@ body {
         left: var(--carousel-gap);
         right: var(--carousel-gap);
         max-width: none;
-        border-radius: 12px;
+        border-radius: 0;
         padding: clamp(0.85rem, 4vw, 1.25rem);
     }
 

From 181df12f2c1bc4a90bcadcc792b955ca8dfc885e Mon Sep 17 00:00:00 2001
From: Jason Zheng <50124246+M1ght1203@users.noreply.github.com>
Date: Thu, 23 Oct 2025 12:37:20 -0500
Subject: [PATCH 5/5] Soften carousel overlay background

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.css b/style.css
index f53e461..c3298c6 100644
--- a/style.css
+++ b/style.css
@@ -175,7 +175,7 @@ body {
     bottom: var(--carousel-gap);
     padding: clamp(1rem, 2.5vw, 1.75rem);
     max-width: min(24rem, 80%);
-    background: rgba(6, 9, 16, 0.9);
+    background: rgba(6, 9, 16, 0.82);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 0;
     box-shadow: 0 18px 35px rgba(3, 5, 10, 0.45);