bugfix: upgrade issues with animations

Author: JeffreyTheTukkr

package.json

@@ -13,17 +13,17 @@
         "prepare": "husky"
     },
     "dependencies": {
-        "@sentry/sveltekit": "^10.22.0",
+        "@sentry/sveltekit": "^10.24.0",
         "gray-matter": "^4.0.3",
         "mdsvex": "^0.12.6"
     },
     "devDependencies": {
-        "@eslint/js": "^9.39.0",
+        "@eslint/js": "^9.39.1",
         "@sveltejs/adapter-node": "^5.4.0",
         "@sveltejs/kit": "^2.48.4",
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
         "@types/node": "^24.10.0",
-        "eslint": "^9.39.0",
+        "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-svelte": "^3.13.0",
         "globals": "^16.5.0",
@@ -32,11 +32,11 @@
         "prettier": "^3.6.2",
         "prettier-plugin-svelte": "^3.4.0",
         "sass": "^1.93.3",
-        "svelte": "^5.43.2",
+        "svelte": "^5.43.5",
         "svelte-check": "^4.3.3",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.46.2",
-        "vite": "^7.1.12"
+        "typescript-eslint": "^8.46.3",
+        "vite": "^7.2.2"
     },
     "lint-staged": {
         "*": [

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { browser } from '$app/environment';
+    import { resolve } from '$app/paths';
     import { PUBLIC_GA4_ID } from '$env/static/public';
 
     // locally store if a user has allowed the usage of cookies
@@ -45,8 +46,8 @@
         <div class="container">
             <span>Cookie notice</span>
             <p>
-                This website uses cookies to improve your user experience. By using our website, you consent to all cookies in accordance with our <a href="/privacy-policy"
-                    >privacy policy</a
+                This website uses cookies to improve your user experience. By using our website, you consent to all cookies in accordance with our <a
+                    href={resolve('/privacy-policy')}>privacy policy</a
                 >.
             </p>
             <div class="buttons">
@@ -101,7 +102,7 @@
                 cursor: pointer;
                 transition:
                     background-color $animation-duration-default ease-in-out,
-                    color $animation-duration-default ease-in-out;
+                    color $animation-duration-default ease-in-out !important;
 
                 &:hover {
                     color: $color-brand-primary;

src/lib/components/analytics.svelte

@@ -1,15 +1,19 @@
+<script lang="ts">
+    import { resolve } from '$app/paths';
+</script>
+
 <footer>
     <div class="container">
         <div class="info">
             <span class="name"><b>tukkr</b></span>
             <span><a href="mailto:info@tukkr.dev">info@tukkr.dev</a></span>
-            <span><a href="/contact">Contact</a></span>
+            <span><a href={resolve('/contact')}>Contact</a></span>
         </div>
         <nav aria-label="Footer menu">
-            <a href="/">Home</a>
-            <a href="/about">About</a>
-            <a href="/snippets">Snippets</a>
-            <a href="/contact">Contact</a>
+            <a href={resolve('/')}>Home</a>
+            <a href={resolve('/about')}>About</a>
+            <a href={resolve('/snippets')}>Snippets</a>
+            <a href={resolve('/contact')}>Contact</a>
         </nav>
         <div class="socials">
             <a href="https://www.linkedin.com/in/jeffrey-boesenkool/" target="_blank" rel="noopener">LinkedIn</a>

src/lib/layout/footer.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import { page } from '$app/state';
 
     // verify the current url pathname equals the menu href
     let isCurrentPage = (path: string): boolean => page.url.pathname.split('/')[1] === path;
 
     // check the scroll state to decrease the header padding
     let scrollY: number = $state(0);
-    let scrollOffsetClass = (): string | null => (scrollY > 1 ? 'scrolled' : null);
+    let isScrolled = $derived(scrollY > 1);
 
     // toggle mobile menu state
     let mobileMenuActive: boolean = $state(false);
@@ -28,9 +29,9 @@
 
 <svelte:window bind:scrollY bind:innerWidth />
 
-<header class={scrollOffsetClass()}>
+<header class:scrolled={isScrolled}>
     <div class="logo">
-        <a href="/">
+        <a href={resolve('/')}>
             <img alt="tukkr logo" height="42" width="42" src="/logo.svg" />
         </a>
     </div>
@@ -42,10 +43,10 @@
         </svg>
     </button>
     <nav aria-label="Main menu" class:active={mobileMenuActive} id="main-menu">
-        <a class:active={isCurrentPage('')} href="/">Home</a>
-        <a class:active={isCurrentPage('about')} href="/about">About</a>
-        <a class:active={isCurrentPage('snippets')} href="/snippets">Snippets</a>
-        <a class:active={isCurrentPage('contact')} href="/contact">Contact</a>
+        <a class:active={isCurrentPage('')} href={resolve('/')}>Home</a>
+        <a class:active={isCurrentPage('about')} href={resolve('/about')}>About</a>
+        <a class:active={isCurrentPage('snippets')} href={resolve('/snippets')}>Snippets</a>
+        <a class:active={isCurrentPage('contact')} href={resolve('/contact')}>Contact</a>
     </nav>
 </header>
 
@@ -61,7 +62,7 @@
         will-change: padding;
         padding: 1.8rem 2rem;
         background-color: rgba(255, 255, 255, 0.94);
-        transition: padding 0.2s ease-in-out;
+        transition: padding 0.2s ease-in-out !important;
         z-index: 999;
 
         // change padding if window is scrolled
@@ -86,7 +87,7 @@
                 will-change: transform, stroke-dashoffset;
                 transition:
                     transform $animation-duration-slow ease-in-out,
-                    stroke-dashoffset $animation-duration-slow ease-in-out;
+                    stroke-dashoffset $animation-duration-slow ease-in-out !important;
 
                 path {
                     fill: none;
@@ -128,7 +129,7 @@
             margin-top: 0;
             transition:
                 height $animation-duration-slow ease-in-out,
-                margin-top $animation-duration-slow ease-in-out;
+                margin-top $animation-duration-slow ease-in-out !important;
 
             &.active {
                 // note: height must be a fixed value for transition to work properly
@@ -144,7 +145,7 @@
                 margin-top: 0 !important;
 
                 // disable transition to prevent weird rescaling animations
-                transition: none;
+                transition: none !important;
             }
 
             a {

src/lib/layout/header.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import SEO from '$lib/components/seo.svelte';
 </script>
 
@@ -8,15 +9,15 @@
     <h1>tukkr</h1>
     <p>Hey! I am Jeffrey, a Fullstack Web Developer from The Netherlands.</p>
     <div class="page-actions">
-        <a href="/about" class="about">
+        <a href={resolve('/about')} class="about">
             <h2>About me</h2>
             <p>Read more about me and my past experiences.</p>
         </a>
-        <a href="/snippets" class="snippets">
+        <a href={resolve('/snippets')} class="snippets">
             <h2>Snippets</h2>
             <p>The place where I store some cool snippets / knowledge.</p>
         </a>
-        <a href="/contact" class="contact">
+        <a href={resolve('/contact')} class="contact">
             <h2>Get in touch</h2>
             <p>In for a friendly chat? Contact me directly!</p>
         </a>
@@ -41,7 +42,7 @@
             padding: 1rem;
             border: 1px solid $color-border-primary;
             border-radius: 16px;
-            transition: border-color $animation-duration-default ease-in-out;
+            transition: border-color $animation-duration-default ease-in-out !important;
 
             @include mediaQuery(s) {
                 width: calc((100% - 2rem) / 2);

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import SEO from '$lib/components/seo.svelte';
 
     // calculate my age in years
@@ -40,8 +41,9 @@
         <li><b>Hosting:</b> Debian and RHEL based distributions, Plesk, DirectAdmin, WHM.</li>
     </ul>
     <p>
-        Please note that these are only the technologies I am most confident in, I have worked with other stacks and technologies so feel free to <a href="/contact">reach out</a> to
-        me for a friendly chat!
+        Please note that these are only the technologies I am most confident in, I have worked with other stacks and technologies so feel free to <a href={resolve('/contact')}
+            >reach out</a
+        > to me for a friendly chat!
     </p>
 </div>
 

src/routes/about/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import SEO from '$lib/components/seo.svelte';
     import type { PageData } from './$types';
 
@@ -12,7 +13,8 @@
     <p>While I'm not big on blog writing, I do occasionally come across some neat pieces of code or specific knowledge which I find worth sharing - <i>or storing</i>.</p>
     <div class="posts">
         {#each data.posts as post (post.date)}
-            <a href={'/snippets/' + post.slug} class="post>">
+            <!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+            <a href={resolve(('/snippets/' + post.slug) as any)} class="post">
                 <div class="title">
                     <h2>{post.title}</h2>
                     <span>{post.date.toLocaleDateString('en-GB')}</span>
@@ -34,7 +36,7 @@
             padding: 1rem;
             border: 1px solid $color-border-primary;
             border-radius: 16px;
-            transition: border-color $animation-duration-default ease-in-out;
+            transition: border-color $animation-duration-default ease-in-out !important;
 
             &:hover {
                 border-color: $color-border-dark;

src/routes/snippets/+page.svelte

@@ -15,7 +15,7 @@ export const load: ServerLoad = async ({ url }): Promise<{ post: SnippetI }> =>
     };
 };
 
-const highlighter = (code: string, lang?: string): string => {
+const highlighter = (code: string, lang?: string | null): string => {
     const className: string = 'language-' + lang;
 
     return `<pre><code class=${className}>${code}</code></pre>`;

src/routes/snippets/[...path]/+page.server.ts

@@ -35,7 +35,7 @@
         border-radius: 1px;
         background-color: $color-brand-primary;
         transform: scaleX(0);
-        transition: transform $animation-duration-default ease-in-out;
+        transition: transform $animation-duration-default ease-in-out !important;
     }
 
     &:hover::before {