feat: use mask to blend content to background

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">

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>
-    <div class="tech-stack-slider relative overflow-hidden py-4 sm:py-8">
+    <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>