Animation rework

src/app.css

@@ -214,14 +214,19 @@
     box-shadow:
       0 1px 3px 0 rgb(0 0 0 / 0.1),
       0 1px 2px -1px rgb(0 0 0 / 0.1);
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    transition:
+      border-color 0.3s ease,
+      box-shadow 0.3s ease,
+      transform 0.3s ease;
   }
 
   .terminal-window:hover {
     border-color: hsl(var(--primary) / 0.5);
     box-shadow:
-      0 4px 6px -1px rgb(0 0 0 / 0.1),
-      0 2px 4px -2px rgb(0 0 0 / 0.1);
+      0 10px 15px -3px rgb(0 0 0 / 0.15),
+      0 4px 6px -4px rgb(0 0 0 / 0.1),
+      0 0 0 1px hsl(var(--primary) / 0.1);
+    transform: translateY(-4px) scale(1.02);
   }
 
   /* Terminal title bar */

src/lib/utils.ts

@@ -1,6 +1,6 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { cubicOut } from "svelte/easing";
+import { backOut } from "svelte/easing";
 import type { TransitionConfig } from "svelte/transition";
 
 export function cn(...inputs: ClassValue[]) {
@@ -17,7 +17,7 @@ type FlyAndScaleParams = {
 
 export const flyAndScale = (
 	node: Element,
-	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.8, duration: 400 }
 ): TransitionConfig => {
 	const style = getComputedStyle(node);
 	const transform = style.transform === "none" ? "" : style.transform;
@@ -46,18 +46,18 @@ export const flyAndScale = (
 	};
 
 	return {
-		duration: params.duration ?? 200,
-		delay: 0,
+		duration: params.duration ?? 400,
+		delay: params.delay ?? 0,
 		css: (t) => {
 			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
 			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.8, 1]);
 
 			return styleToString({
 				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
 				opacity: t
 			});
 		},
-		easing: cubicOut
+		easing: backOut
 	};
 };

src/routes/+page.svelte

@@ -162,7 +162,7 @@
     </button>
 
     <!-- Header -->
-    <header class="text-center space-y-2 py-4 px-4 md:py-6 relative z-[100]" in:flyAndScale={{ y:0, duration:500, start:0.95}}>
+    <header class="text-center space-y-2 py-4 px-4 md:py-6 relative z-[100]" in:flyAndScale={{ y:-30, duration:450, start:0.7}}>
       <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight flex flex-col md:flex-row items-center justify-center gap-2 md:gap-0">
           <Terminal class="h-6 w-6 md:h-8 md:w-8 md:mr-2 text-primary" />
           <span class="flex items-center gap-2">Interface Système: <span class="text-primary">Az'</span></span>
@@ -178,7 +178,7 @@
         {#each dashboardLinks as item, i}
           <div
             class="terminal-window w-full"
-            in:flyAndScale|global={{ y: 20, duration: 300, start: 0.98, delay: i * 100 }}
+            in:flyAndScale|global={{ y: 50, duration: 400, start: 0.75, delay: i * 120 }}
           >
             <!-- Terminal Title Bar -->
             <div class="terminal-titlebar">
@@ -220,7 +220,7 @@
       {#if showTerminal}
         <div
           class="fixed inset-0 z-[200] bg-background/95 backdrop-blur-sm p-4 flex flex-col"
-          in:flyAndScale|global={{ y: 20, duration: 500, start: 0.95 }}
+          in:flyAndScale|global={{ y: 60, duration: 450, start: 0.7 }}
         >
           <div class="terminal-window flex-1 flex flex-col mb-4">
             <HomeTerminal onClose={closeTerminal} />
@@ -248,7 +248,7 @@
             bind:this={cardElements[i]}
             class="terminal-window absolute {activeWindowIndex === i ? 'active' : ''}"
             style="z-index: {10 + i}; width: {CARD_WIDTH}px;"
-            in:flyAndScale|global={{ y: 20, duration: 300, start: 0.98, delay: i * 100 }}
+            in:flyAndScale|global={{ y: 50, duration: 400, start: 0.75, delay: i * 120 }}
             use:draggable={{
               handleSelector: '.terminal-titlebar',
               initialPosition: { x: initialPositions[i].x, y: initialPositions[i].y },
@@ -297,7 +297,7 @@
           bind:this={terminalElement}
           class="terminal-window absolute {activeWindowIndex === -1 ? 'active' : ''} w-[90vw] max-w-4xl"
           style="z-index: 200;"
-          in:flyAndScale|global={{ y: 20, duration: 500, start: 0.95 }}
+          in:flyAndScale|global={{ y: 60, duration: 450, start: 0.7 }}
           use:draggable={{
             handleSelector: '.terminal-titlebar',
             initialPosition: { x: browser ? (window.innerWidth * 0.05) : 50, y: 300 },

src/routes/about/+page.svelte

@@ -46,7 +46,7 @@
 </style>
 
 <div class="container mx-auto px-4 py-8 md:py-12 min-h-screen_minus_header_footer">
-  <div class="text-center mb-12 md:mb-16" in:flyAndScale={{ y: -20, duration: 500, start: 0.95 }}>
+  <div class="text-center mb-12 md:mb-16" in:flyAndScale={{ y: -40, duration: 450, start: 0.7 }}>
     <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-foreground flex items-center justify-center">
       <UserCircle class="w-10 h-10 md:w-12 md:h-12 mr-3 text-primary" />
       À propos de moi
@@ -57,13 +57,13 @@
   </div>
 
   <div class="space-y-16 md:space-y-24">
-    <section in:flyAndScale|global={{ y: 20, duration: 500 }}>
+    <section in:flyAndScale|global={{ y: 50, duration: 400, start: 0.75 }}>
       <div class="flex items-center mb-6">
         <Terminal class="h-10 w-10 mr-3 text-primary" />
         <h2 class="text-4xl md:text-5xl font-bold text-foreground">Qui je suis</h2>
         <span class="text-4xl md:text-5xl font-bold text-primary blinking-cursor ml-1">_</span>
       </div>
-      <Card class="shadow-lg">
+      <Card class="shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-[1.005]">
         <CardContent class="p-6 md:p-8">
           <p class="text-xl md:text-2xl text-muted-foreground leading-relaxed">
             Je suis Dylan R. (ou Az' sur internet), {yearsSince()} ans, passionné de technologie. Je passe mon temps à cultiver ma passion en tant qu'autodidacte au travers de plus en plus de domaines.
@@ -72,13 +72,13 @@
       </Card>
     </section>
 
-    <section in:flyAndScale|global={{ y: 20, duration: 500 }}>
+    <section in:flyAndScale|global={{ y: 50, duration: 400, start: 0.75 }}>
       <div class="flex items-center mb-6">
          <Terminal class="h-10 w-10 mr-3 text-primary" />
         <h2 class="text-4xl md:text-5xl font-bold text-foreground">Ce que je fais</h2>
          <span class="text-4xl md:text-5xl font-bold text-primary blinking-cursor ml-1">_</span>
       </div>
-      <Card class="shadow-lg">
+      <Card class="shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-[1.005]">
         <CardContent class="p-6 md:p-8">
           <p class="text-xl md:text-2xl text-muted-foreground leading-relaxed">
             Je cultive mes connaissances depuis de nombreuses années dans plusieurs domaines tels que le développement, le "hardware", ou la gestion de serveurs

src/routes/infra/+page.svelte

@@ -15,7 +15,7 @@
 </svelte:head>
 
 <div class="container mx-auto px-4 py-8 md:py-12 min-h-screen_minus_header_footer">
-  <div class="text-center mb-12 md:mb-16" in:flyAndScale={{ y: -20, duration: 500 }}>
+  <div class="text-center mb-12 md:mb-16" in:flyAndScale={{ y: -40, duration: 450, start: 0.7 }}>
     <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-foreground flex items-center justify-center">
       <ServerIcon class="w-10 h-10 md:w-12 md:h-12 mr-3 text-primary" />
       Mon infrastructure
@@ -27,8 +27,8 @@
 
   <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 md:gap-8">
     {#each infrastructure as machine, i (machine.id)}
-    <div in:flyAndScale|global={{ y: 20, duration: 300, start: 0.98, delay: i * 100 }}>
-        <Card class="flex flex-col h-full shadow-lg hover:shadow-primary/20 transition-shadow duration-300">
+    <div in:flyAndScale|global={{ y: 50, duration: 400, start: 0.75, delay: i * 120 }}>
+        <Card class="flex flex-col h-full shadow-lg hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-1 hover:scale-[1.01]">
           {#if machine.imageUrl}
             <a href={`/infra/${machine.id}`} class="block relative h-48 w-full overflow-hidden rounded-t-lg group">
               <img
@@ -94,15 +94,15 @@
     {/each}
   </div>
 
-  <div class="text-center mt-1 md:mt-2" in:flyAndScale|global={{ y: 20, duration: 300, delay: infrastructure.length * 100 + 200 }}>
+  <div class="text-center mt-1 md:mt-2" in:flyAndScale|global={{ y: 50, duration: 400, start: 0.75, delay: infrastructure.length * 120 + 200 }}>
     <div class="p-10 pt-4">
             <Button href={`/rack`} variant="outline" size="sm" class="p-6">
               Afficher le diagramme du rack <ArrowRight class="ml-2 h-4 w-4" />
             </Button>
           </div>
   </div>
 
-  <div class="text-center mt-16 md:mt-20" in:flyAndScale|global={{ y: 20, duration: 300, delay: infrastructure.length * 100 + 200 }}>
+  <div class="text-center mt-16 md:mt-20" in:flyAndScale|global={{ y: 50, duration: 400, start: 0.75, delay: infrastructure.length * 120 + 200 }}>
     <p class="text-lg sm:text-xl md:text-2xl text-muted-foreground">
       Vous pouvez vérifier le statut de l'infrastructure en temps réel
       <a

src/routes/infra/[machineId]/+page.svelte

@@ -33,7 +33,7 @@
 </script>
 
 {#if machine}
-  <div class="container mx-auto px-4 py-8 md:py-12 min-h-screen_minus_header_footer" in:flyAndScale={{ y: 20, duration: 500, start: 0.95 }}>
+  <div class="container mx-auto px-4 py-8 md:py-12 min-h-screen_minus_header_footer" in:flyAndScale={{ y: 50, duration: 400, start: 0.75 }}>
     <div class="mb-8">
       <Button href="/infra" variant="outline" size="sm">
         <ArrowLeft class="mr-2 h-4 w-4" /> Retour à l'infrastructure

src/routes/museum/+page.svelte

@@ -78,7 +78,7 @@
 </svelte:head>
 
 <div class="container mx-auto px-4 py-8 md:py-12">
-  <div class="text-center mb-12 md:mb-16" in:flyAndScale={{ y: -20, duration: 500, start: 0.95 }}>
+  <div class="text-center mb-12 md:mb-16" in:flyAndScale={{ y: -40, duration: 450, start: 0.7 }}>
     <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-foreground flex items-center justify-center">
       <ArchiveIcon class="w-10 h-10 md:w-12 md:h-12 mr-3 text-primary" />
       Le musée
@@ -91,8 +91,8 @@
   {#if $visibleItems.length > 0}
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
       {#each $visibleItems as item (item.id)}
-        <div in:flyAndScale|global={{ y: 20, duration: 300, start:0.98, delay: (($visibleItems.indexOf(item) % itemsPerLoad) * 75)}}>
-          <Card class="h-full flex flex-col museum-card hover:shadow-xl dark:hover:shadow-primary/30 transition-shadow duration-300 overflow-hidden">
+        <div in:flyAndScale|global={{ y: 50, duration: 400, start: 0.75, delay: (($visibleItems.indexOf(item) % itemsPerLoad) * 80)}}>
+          <Card class="h-full flex flex-col museum-card hover:shadow-xl dark:hover:shadow-primary/30 transition-all duration-300 overflow-hidden hover:-translate-y-1 hover:scale-[1.01]">
             {#if item.imageUrl}
               <div class="aspect-[4/3] w-full overflow-hidden rounded-t-lg bg-muted/50 dark:bg-muted/20 border-b border-border/30">
                 <img src={item.imageUrl} alt="Image de {item.name}" class="object-contain w-full h-full p-2 hover:scale-105 transition-transform duration-300" />

src/routes/projects/+page.svelte

@@ -110,7 +110,7 @@
 </svelte:head>
 
 <div class="container mx-auto px-4 py-8 md:py-12">
-  <div class="text-center mb-8 md:mb-12" in:flyAndScale={{ y: -20, duration: 500, start: 0.95 }}>
+  <div class="text-center mb-8 md:mb-12" in:flyAndScale={{ y: -40, duration: 450, start: 0.7 }}>
     <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-foreground flex items-center justify-center">
       <FolderGit2 class="w-8 h-8 md:w-10 md:h-10 mr-2 text-primary" />
       Mes projets
@@ -123,8 +123,8 @@
   <div class="max-w-7xl mx-auto space-y-6">
     {#each projects as project, i (project.id)}
       {@const statusConfig = getStatusConfig(project.status)}
-      <div in:flyAndScale|global={{ y: 20, duration: 300, start: 0.98, delay: i * 100 }}>
-        <Card class="overflow-hidden hover:shadow-lg hover:shadow-primary/10 transition-shadow duration-300">
+      <div in:flyAndScale|global={{ y: 50, duration: 400, start: 0.75, delay: i * 120 }}>
+        <Card class="overflow-hidden hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-1 hover:scale-[1.01]">
           <div class="flex flex-col md:flex-row">
             {#if project.imageUrl}
               <div class="md:w-48 md:flex-shrink-0">

src/routes/rack/+page.svelte

@@ -118,7 +118,7 @@
   </svelte:head>
 
   <div class="container mx-auto px-4 py-8 md:py-12">
-    <div class="text-center mb-10 md:mb-12" in:flyAndScale={{ y: -20, duration: 500 }}>
+    <div class="text-center mb-10 md:mb-12" in:flyAndScale={{ y: -40, duration: 450, start: 0.7 }}>
       <h1 class="text-4xl sm:text-5xl font-bold tracking-tight text-foreground">
         Mon installation rack
       </h1>
@@ -190,7 +190,7 @@
         {#if currentHoveredItem}
           <div
             class="p-1"
-            transition:flyAndScale={{ y: 8, duration: 200, start: 0.95 }}
+            transition:flyAndScale={{ y: 15, duration: 300, start: 0.8 }}
           >
             <Card class="shadow-2xl bg-card/95 backdrop-blur-sm">
               <CardHeader class="pb-3 pt-4">