Redesign components

- Moved back to scrolling portfolio
- Mobile first components
- Missing content for experience and contact
-  Need to fix project card to become a grid when there's space

package.json

@@ -34,6 +34,7 @@
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "3.4.4",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
@@ -46,8 +47,12 @@
     "@floating-ui/dom": "1.6.5",
     "@selemondev/svelte-marquee": "^0.0.2",
     "@sveltejs/enhanced-img": "^0.2.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "highlight.js": "11.9.0",
     "ldrs": "^1.0.2",
-    "lucide-svelte": "^0.395.0"
+    "lucide-svelte": "^0.395.0",
+    "svelte-motion": "^0.12.2",
+    "tailwind-merge": "^3.0.2"
   }
 }

src/app.postcss

@@ -41,4 +41,24 @@ body {
 	/* Color Stops */
 	@apply from-primary-500 via-success-500 to-tertiary-500;
 }
+
+.animate-gradient {
+	background-size: 300%;
+	-webkit-animation: animatedgradient 6s ease infinite alternate;
+	-moz-animation: animatedgradient 6s ease infinite alternate;
+	animation: animatedgradient 6s ease infinite alternate;
+}
+
+
+@keyframes animatedgradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
 

src/lib/components/Dock.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { Motion } from "svelte-motion";
+  import { cva, type VariantProps } from "class-variance-authority";
+  import { cn } from "$lib/utils";
+
+  interface DockProps extends VariantProps<typeof dockVariants> {
+    className?: string;
+    magnification?: number;
+    distance?: number;
+    direction?: "top" | "middle" | "bottom";
+  }
+
+  let className: DockProps["className"] = undefined;
+  export { className as class };
+  export let magnification: DockProps["magnification"] = 60;
+  export let distance: DockProps["distance"] = 140;
+  export let direction: DockProps["direction"] = "middle";
+
+  const dockVariants = cva(
+    "mx-auto w-max mt-8 h-[58px] p-2 flex gap-2 rounded-2xl border supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 backdrop-blur-md"
+  );
+
+  let dockElement: HTMLDivElement;
+  let mouseX = Infinity;
+  function handleMouseMove(e: MouseEvent) {
+    mouseX = e.pageX;
+  }
+
+  function handleMouseLeave() {
+    mouseX = Infinity;
+  }
+
+  let dockClass = cn(dockVariants({ className }), {
+    "items-start": direction === "top",
+    "items-center": direction === "middle",
+    "items-end": direction === "bottom",
+  });
+</script>
+
+<Motion let:motion>
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    use:motion
+    bind:this={dockElement}
+    on:mousemove={(e) => handleMouseMove(e)}
+    on:mouseleave={handleMouseLeave}
+    class={dockClass}
+  >
+    <slot {mouseX} {magnification} {distance}>
+      <!-- Your Content -->
+      Default
+    </slot>
+  </div>
+</Motion>

src/lib/components/DockIcon.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { cn } from "$lib/utils";
+  import {
+    Motion,
+    useMotionValue,
+    useSpring,
+    useTransform,
+  } from "svelte-motion";
+
+  export let magnification = 60;
+  export let distance = 160;
+  export let mouseX = 0;
+  let mint = useMotionValue(mouseX);
+  $: mint.set(mouseX);
+
+  let className: string | undefined  = "";
+  export { className as class };
+
+  let iconElement: HTMLDivElement;
+
+  let distanceCalc = useTransform(mint, (val: number) => {
+    const bounds = iconElement?.getBoundingClientRect() ?? { x: 0, width: 0 };
+    return val - bounds.x - bounds.width / 2;
+  });
+
+  let widthSync = useTransform(
+    distanceCalc,
+    [-distance, 0, distance],
+    [38, magnification, 38]
+  );
+
+  let width = useSpring(widthSync, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+
+  let iconClass = cn(
+    "flex aspect-square cursor-pointer items-center justify-center rounded-full",
+    className
+  );
+</script>
+
+<Motion style={{ width: width }} let:motion>
+  <div use:motion bind:this={iconElement} class={iconClass}>
+    <slot></slot>
+  </div>
+</Motion>