Moving pattern

Author: ReKylee

src/app.css

@@ -11,6 +11,15 @@
 @theme {
     --font-sans: "JetBrains Mono", sans-serif;
     --font-hebrew: "Noto Sans Hebrew", sans-serif;
+    --animate-infinite-pan: infinite-pan 60s linear infinite;
+    @keyframes infinite-pan {
+        0% {
+            pattern-transform: translate(0, 0);
+        }
+        100% {
+            pattern-transform: translate(250px, 250px);
+        }
+    }
 }
 * {
     box-sizing: border-box;
@@ -22,6 +31,7 @@ html {
 main {
     -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
 }
+
 .skill-chip {
     @apply rounded-md bg-ctp-surface0 px-4 py-2 font-mono text-ctp-text shadow-md transition-all hover:scale-105 hover:text-ctp-base;
 }

static/godot_logo_vertical_color_dark.svg …ssets/godot_logo_vertical_color_dark.svgstatic/godot_logo_vertical_color_dark.svg renamed to src/lib/assets/godot_logo_vertical_color_dark.svg static/godot_logo_vertical_color_dark.svg renamed to src/lib/assets/godot_logo_vertical_color_dark.svg

@@ -10,6 +10,11 @@
     import WiiContriller from "$lib/icons/ryan-beck-wii-controller.svg?component";
     import NESController from "$lib/icons/ryan-beck-nes-controller.svg?component";
     import NSFController from "$lib/icons/ryan-beck-n64-controller.svg?component";
+    // Logos
+    import GodotLogoLight from "$lib/assets/godot_logo_vertical_color_light.svg?component";
+    import GodotLogoDark from "$lib/assets/godot_logo_vertical_color_dark.svg?component";
+    import UnityLogoLight from "$lib/assets/unity-original-wordmark-logo_light.svg?component";
+    import UnityLogoDark from "$lib/assets/unity-original-wordmark-logo_dark.svg?component";
     import { t } from "$lib/stores/language";
 
     const controllerIcons = [
@@ -33,21 +38,19 @@
                 icons={controllerIcons}
                 scale={40}
                 spacing={40}
-                rotation={-15}>
-                <div
-                    class="flex flex-wrap items-center justify-center gap-4 p-4">
-                    <SkillIcon
-                        lightSrc="/unity-original-wordmark-logo_light.svg"
-                        darkSrc="/unity-original-wordmark-logo_dark.svg"
-                        alt="Unity Logo" />
+                rotation={-15} />
+            <div class="flex flex-wrap items-center justify-center gap-4 p-4">
+                <SkillIcon
+                    lightIcon={UnityLogoLight}
+                    darkIcon={UnityLogoDark}
+                    alt="Unity Logo"
+                    delay={300} />
 
-                    <SkillIcon
-                        lightSrc="/godot_logo_vertical_color_light.svg"
-                        darkSrc="/godot_logo_vertical_color_dark.svg"
-                        alt="Godot Logo"
-                        delay={300} />
-                </div>
-            </DecoBG>
+                <SkillIcon
+                    lightIcon={GodotLogoLight}
+                    darkIcon={GodotLogoDark}
+                    alt="Godot Logo" />
+            </div>
         </SkillCard>
         <SkillCard title={$t("skills.languages")} theme="green" delay={150}>
             <svg

…atic/godot_logo_vertical_color_light.svg …sets/godot_logo_vertical_color_light.svgstatic/godot_logo_vertical_color_light.svg renamed to src/lib/assets/godot_logo_vertical_color_light.svg static/godot_logo_vertical_color_light.svg renamed to src/lib/assets/godot_logo_vertical_color_light.svg

@@ -5,7 +5,6 @@
     // --- TYPE DEFINITIONS ---
     // This is the correct, specific type for a Svelte component generated by an SVG plugin.
     type SvgComponent = Component<SVGAttributes<SVGSVGElement>>;
-
     // --- PROPS ---
     /** An array of imported Svelte SVG components for the pattern. */
     export let icons: SvgComponent[] = [];
@@ -41,6 +40,15 @@
                     patternUnits="userSpaceOnUse"
                     width={patternSize}
                     height={patternSize}>
+                    <animateTransform
+                        attributeType="xml"
+                        attributeName="patternTransform"
+                        type="translate"
+                        from="0 0"
+                        to="{patternSize} {patternSize}"
+                        begin="0"
+                        dur="10s"
+                        repeatCount="indefinite" />
                     {#each icons as _, i}
                         <use
                             href="#pattern-icon-{patternId}-{i}"

…ic/unity-original-wordmark-logo_dark.svg …ts/unity-original-wordmark-logo_dark.svgstatic/unity-original-wordmark-logo_dark.svg renamed to src/lib/assets/unity-original-wordmark-logo_dark.svg static/unity-original-wordmark-logo_dark.svg renamed to src/lib/assets/unity-original-wordmark-logo_dark.svg

@@ -1,17 +1,31 @@
 <script lang="ts">
     import { theme } from "$lib/stores/theme";
+    import type { Component } from "svelte";
+    import type { SVGAttributes } from "svelte/elements";
 
-    export let lightSrc: string;
-    export let darkSrc: string;
+    type SvgComponent = Component<SVGAttributes<SVGSVGElement>>;
+
+    /** The Svelte component for the icon to display in light mode. */
+    export let lightIcon: SvgComponent;
+
+    /** The Svelte component for the icon to display in dark mode. */
+    export let darkIcon: SvgComponent;
+
+    /** The accessible description for the icon. */
     export let alt: string;
+
+    /** An optional animation delay. */
     export let delay: number = 0;
+
+    $: iconToRender = $theme === "light" ? lightIcon : darkIcon;
 </script>
 
 <div
     class="group relative flex h-20 w-20 items-center justify-center"
-    style="animation-delay: {delay}ms">
-    <img
-        src={$theme === "light" ? darkSrc : lightSrc}
-        {alt}
+    style="animation-delay: {delay}ms"
+    role="img"
+    aria-label={alt}>
+    <svelte:component
+        this={iconToRender}
         class="h-full w-full object-contain transition-all duration-300 animate-in animate-bounce-in group-hover:scale-110 group-hover:drop-shadow-[0_0_10px_theme(colors.ctp.mauve)]" />
 </div>