From 0c63c6bef4472dc078323c937ca516d42ff0b91e Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Thu, 19 Feb 2026 23:48:34 -0600
Subject: [PATCH] feat: use mask to blend content to background

---
 src/components/sections/ExperienceSection.astro   | 2 +-
 src/components/sections/SkillsSliderSection.astro | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/sections/ExperienceSection.astro b/src/components/sections/ExperienceSection.astro
index f267f72..2684d32 100644
--- a/src/components/sections/ExperienceSection.astro
+++ b/src/components/sections/ExperienceSection.astro
@@ -78,7 +78,7 @@ const experiences = ((await directus.request(
             </div>
             )}
             {(experience.responsibilities || experience.achievements) &&  (
-            <div class="relative flex flex-col gap-4 after:absolute after:bottom-0 after:h-12 after:w-full after:bg-linear-to-t after:from-neutral-200 dark:after:from-stone-700 after:content-[''] " :class="expanded ? 'after:hidden' : ''" x-show="expanded" x-collapse.min.50px>
+            <div class="relative flex flex-col gap-4" :class="expanded ? '' : 'mask-[linear-gradient(to_bottom,black_50%,transparent)]'" x-show="expanded" x-collapse.min.50px>
               {experience.responsibilities && (
               <div class="flex flex-col gap-1">
                 <h4 class="text-header font-semibold">
diff --git a/src/components/sections/SkillsSliderSection.astro b/src/components/sections/SkillsSliderSection.astro
index 9f600c3..bda626e 100644
--- a/src/components/sections/SkillsSliderSection.astro
+++ b/src/components/sections/SkillsSliderSection.astro
@@ -18,8 +18,8 @@ const skills = ((await directus.request(
   <h3 class="smooth-reveal card-text-header flex relative items-center w-full gap-3 pb-5">
     Skills
   </h3>
-  <div class="">
-    <div class="tech-stack-slider relative overflow-hidden py-4 sm:py-8">
+  <div>
+    <div class="tech-stack-slider relative overflow-hidden py-4 sm:py-8 mask-[linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]">
       <!-- Main slider container -->
       <div class="slider-track animate-slide flex">
         {[...skills, ...skills, ...skills].map((skill: Skill) => {
@@ -54,9 +54,6 @@ const skills = ((await directus.request(
         );
         })}
       </div>
-      <!-- Gradient overlays -->
-      <div class="bg-linear-to-r from-neutral-200 to-transparent dark:from-stone-700 absolute top-0 bottom-0 left-0 z-10 w-12 sm:w-24"/>
-      <div class="bg-linear-to-l from-neutral-200 to-transparent dark:from-stone-700 absolute top-0 bottom-0 right-0 z-10 w-12 sm:w-24"/>
     </div>
   </div>
 </section>