feat: release 2.16.0

Reviewed-on: #354

.gitea/workflows/release-image-gitea.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 24.13.1
+          node-version: 24.14.0
           cache: pnpm
 
       - name: Install Dependencies

.gitea/workflows/release-image-harbor.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 24.13.1
+          node-version: 24.14.0
           cache: pnpm
 
       - name: Install Dependencies

.gitea/workflows/test-build.yaml

@@ -24,7 +24,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 24.13.1
+          node-version: 24.14.0
           cache: pnpm
 
       - name: Install Dependencies

Dockerfile

@@ -1,4 +1,4 @@
-FROM docker.io/node:24.13.1-alpine AS builder
+FROM docker.io/node:24.14.0-alpine AS builder
 
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
@@ -17,12 +17,12 @@ FROM build-deps AS build
 COPY . .
 RUN pnpm run build
 
-FROM dhi.io/node:24.13.1 AS runtime
+FROM dhi.io/node:24.14.0 AS runtime
 WORKDIR /app
 COPY --from=prod-deps /app/node_modules /app/node_modules
 COPY --from=build /app/dist /app/dist
 
-LABEL version="2.14.1"
+LABEL version="2.16.0"
 LABEL description="Astro based personal website"
 
 ENV HOST=0.0.0.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "site-profile",
   "type": "module",
-  "version": "2.14.1",
+  "version": "2.16.0",
   "homepage": "https://www.alexlebens.dev",
   "bugs": {
     "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
@@ -49,7 +49,7 @@
     "marked": "^17.0.2",
     "marked-shiki": "^1.2.1",
     "mdast-util-to-string": "^4.0.0",
-    "preline": "^4.0.1",
+    "preline": "^4.1.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "reading-time": "^1.5.0",
@@ -66,7 +66,7 @@
     "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-astro": "^1.6.0",
-    "eslint-plugin-format": "^1.4.0",
+    "eslint-plugin-format": "^2.0.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.0",

src/components/Header.astro

@@ -11,7 +11,6 @@ const currentPath = pathname.slice(1);
   id="nav"
   class="fixed flex flex-wrap md:flex-nowrap md:justify-start inset-x-0 top-0 w-full z-50"
 >
-  <div class="bg-linear-to-b from-background from-65% to-transparent to-90% absolute top-0 bottom-0 left-0 w-full h-36 z-0"/>
   <nav
     class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] w-full px-4 mx-2 py-3 mt-4"
     aria-label="Global"

src/components/cards/FeaturesCard.astro

@@ -1,5 +1,4 @@
 ---
-import { Icon } from 'astro-icon/components';
 import Logo from "@components/images/Logo.astro"
 
 interface Props {

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>

src/layouts/BaseLayout.astro

@@ -66,21 +66,21 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
       data-site-id={global.rybbit_site_id}
       defer
     />
-
   </head>
 
-  <body class="bg-background selection:bg-yellow-400">
+  <body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-x-hidden">
-    <!-- Disabled texture background for now
-    <div class="fixed inset-0 -z-10">
-      <div class="bg-grid-pattern absolute inset-0 mask-[radial-gradient(white,transparent_85%)] bg-position-[center_top_-1px]"/>
-    </div>
-    -->
 
+    <!-- Sliding backgrounds -->
+    <div class="bg"/>
+    <div class="bg bg2"/>
+    <div class="bg bg3"/>
+
+    <!-- Layout -->
     <div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
 
       <Header />
 
-      <main class="min-h-screen">
+      <main class="has-js scroll-fade-container min-h-screen">
         <slot />
       </main>
 
@@ -91,14 +91,84 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
   </body>
 </html>
 
+<script>
+  document.addEventListener('astro:page-load', () => {
+    const onScroll = () => {
+      document.documentElement.style.setProperty('--scroll-offset', `${window.scrollY}px`);
+      document.documentElement.classList.add('has-js');
+    };
+
+    window.removeEventListener('scroll', onScroll);
+    window.addEventListener('scroll', onScroll, { passive: true });
+
+    onScroll();
+  });
+</script>
+
 <style>
-  .bg-grid-pattern {
+  /* Fade away content below header when scrolling */
-    background-size: 24px 24px;
+  .has-js .scroll-fade-container {
-    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
+    -webkit-mask-image: linear-gradient(
-    transition: background-image 0.7s cubic-bezier(0.65, 0, 0.35, 1);
+      to bottom,
+      transparent 0px,
+      transparent 16px,
+      black 80px,
+      black 100%
+    );
+
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0px,
+      transparent 16px,
+      black 80px,
+      black 100%
+    );
+
+    -webkit-mask-size: 100vw 100vh;
+    -webkit-mask-repeat: no-repeat;
+
+    -webkit-mask-position-y: var(--scroll-offset);
+    mask-position-y: var(--scroll-offset);
   }
 
-  :global(.dark) .bg-grid-pattern {
+  /* Background that creates the "glimmer" effect */
-    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
+  .bg {
+    animation: slide 20s ease-in-out infinite alternate;
+    background-image: linear-gradient(-60deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
+    filter: blur(80px);
+    top: 0;
+    bottom: 0;
+    left: -50%;
+    right: -50%;
+    opacity: .5;
+    position: fixed;
+    z-index: -1;
+    --bg-primary: #e5e5e5;
+    --bg-secondary: #d9d9d9;
+    --bg-tertiary: #ededed;
+  }
+
+  :global(.dark) .bg {
+    --bg-primary: #292524;
+    --bg-secondary: #44403c;
+    --bg-tertiary: #57534e;
+  }
+
+  .bg2 {
+    animation-direction: alternate-reverse;
+    animation-duration: 30s;
+  }
+
+  .bg3 {
+    animation-duration: 25s;
+  }
+
+  @keyframes slide {
+    0% {
+      transform:translateX(-25%);
+    }
+    100% {
+      transform:translateX(25%);
+    }
   }
 </style>

src/styles/global.css

@@ -1,5 +1,4 @@
 @import 'tailwindcss';
-@import 'preline/variants.css';
 @import './utilities.css';
 
 @plugin '@tailwindcss/typography';
@@ -50,8 +49,9 @@
   :root {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    
     --theme-transition: 0.3s ease;
-    color-scheme: light;
+    --scroll-offset: 0px;
   }
 
   :root:where(.dark, .dark *) {
@@ -73,9 +73,6 @@
   }
 
   body {
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
     --swup-fade-theme-duration: 0.2s;
   }
 

src/styles/utilities.css

@@ -74,9 +74,9 @@
 }
 
 @utility card-hover-icon-scale {
-  @apply transition-all duration-300
+  @apply transition-transform duration-300 will-change-transform 
          drop-shadow-md dark:drop-shadow-xl dark:drop-shadow-neutral-500/60
-         group-hover:scale-110
+         group-hover:scale-3d group-hover:scale-110
 }
 
 @utility card-text-header {