Added Button and its underlying animation.

package-lock.json

@@ -10,7 +10,8 @@
 			"dependencies": {
 				"@jamescoyle/svelte-icon": "^0.1.1",
 				"@mdi/js": "^7.4.47",
-				"animejs": "^3.2.2"
+				"animejs": "^3.2.2",
+				"svelte2tsx": "^0.7.35"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-static": "^3.0.8",
@@ -26,7 +27,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -471,7 +471,6 @@
 			"version": "0.3.8",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
 			"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/set-array": "^1.2.1",
@@ -486,7 +485,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -496,7 +494,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
 			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -506,14 +503,12 @@
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
 			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.25",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
 			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
@@ -817,7 +812,6 @@
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
 			"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
-			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^8.9.0"
@@ -834,9 +828,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.20.2",
+			"version": "2.20.3",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.2.tgz",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.3.tgz",
-			"integrity": "sha512-Dv8TOAZC9vyfcAB9TMsvUEJsRbklRTeNfcYBPaeH6KnABJ99i3CvCB2eNx8fiiliIqe+9GIchBg4RodRH5p1BQ==",
+			"integrity": "sha512-z1SQ8qra/kGY3DzarG7xc6XsbKm8UY3SnI82XLI3PqMYWbYj/LpjPWuAz9WA5EyLjFNLD7sOAOEW8Gt4yjr5Vg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -915,14 +909,12 @@
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
 			"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/acorn": {
 			"version": "8.14.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
 			"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
-			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"acorn": "bin/acorn"
@@ -941,7 +933,6 @@
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
 			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -951,7 +942,6 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -977,7 +967,6 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
 			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -1011,6 +1000,12 @@
 				}
 			}
 		},
+		"node_modules/dedent-js": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
+			"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==",
+			"license": "MIT"
+		},
 		"node_modules/deepmerge": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -1073,14 +1068,12 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
 			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/esrap": {
 			"version": "1.4.5",
 			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.5.tgz",
 			"integrity": "sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
@@ -1131,7 +1124,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
 			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "^1.0.6"
@@ -1151,14 +1143,21 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
 			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/lower-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
 		"node_modules/magic-string": {
 			"version": "0.30.17",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
 			"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0"
@@ -1210,6 +1209,26 @@
 				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 			}
 		},
+		"node_modules/no-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+			"license": "MIT",
+			"dependencies": {
+				"lower-case": "^2.0.2",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/pascal-case": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+			"license": "MIT",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
 		"node_modules/picocolors": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1356,7 +1375,6 @@
 			"version": "5.25.3",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.25.3.tgz",
 			"integrity": "sha512-J9rcZ/xVJonAoESqVGHHZhrNdVbrCfkdB41BP6eiwHMoFShD9it3yZXApVYMHdGfCshBsZCKsajwJeBbS/M1zg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@ampproject/remapping": "^2.3.0",
@@ -1402,6 +1420,20 @@
 				"typescript": ">=5.0.0"
 			}
 		},
+		"node_modules/svelte2tsx": {
+			"version": "0.7.35",
+			"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.7.35.tgz",
+			"integrity": "sha512-z2lnOnrfb5nrlRfFQI8Qdz03xQqMHUfPj0j8l/fQuydrH89cCeN+v9jgDwK9GyMtdTRUkE7Neu9Gh+vfXJAfuQ==",
+			"license": "MIT",
+			"dependencies": {
+				"dedent-js": "^1.0.1",
+				"pascal-case": "^3.1.1"
+			},
+			"peerDependencies": {
+				"svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
+				"typescript": "^4.9.4 || ^5.0.0"
+			}
+		},
 		"node_modules/totalist": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -1412,11 +1444,16 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"license": "0BSD"
+		},
 		"node_modules/typescript": {
 			"version": "5.8.2",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
 			"integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"bin": {
 				"tsc": "bin/tsc",
@@ -1427,9 +1464,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "6.2.3",
+			"version": "6.2.4",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.3.tgz",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.4.tgz",
-			"integrity": "sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg==",
+			"integrity": "sha512-veHMSew8CcRzhL5o8ONjy8gkfmFJAd5Ac16oxBUjlwgX3Gq2Wqr+qNC3TjPIpy7TPV/KporLga5GT9HqdrCizw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1521,7 +1558,6 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
 			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
-			"dev": true,
 			"license": "MIT"
 		}
 	}

package.json

@@ -23,6 +23,7 @@
 	"dependencies": {
 		"@jamescoyle/svelte-icon": "^0.1.1",
 		"@mdi/js": "^7.4.47",
-		"animejs": "^3.2.2"
+		"animejs": "^3.2.2",
+		"svelte2tsx": "^0.7.35"
 	}
 }

src/lib/components/button.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import "$lib/css/button.css";
+    import "$lib/css/base.css";
+    import SvgIcon from "@jamescoyle/svelte-icon";
+    import { mdiChevronRight } from "@mdi/js";
+    import anime from "animejs";
+
+    export let label = "Button";
+
+    let iconDiv: HTMLElement;
+
+    function button_animation(event: Event, enter: boolean) {
+        let opacity = [0, 1];
+        let marginRight = ["0rem", "1rem"];
+        let translateX = [-20, 0];
+
+        if (!enter) {
+            opacity.reverse();
+            marginRight.reverse();
+            translateX.reverse();
+        }
+
+        anime({
+            targets: iconDiv,
+            opacity: opacity,
+            marginRight: marginRight,
+            translateX: translateX,
+            duration: 300,
+            easing: "easeOutQuad",
+        });
+    }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+    class="button flex center"
+    on:mouseenter={(event) => {
+        button_animation(event, true);
+    }}
+    on:mouseleave={(event) => {
+        button_animation(event, false);
+    }}
+>
+    <span>{label}</span>
+    <div class="button-icon" bind:this={iconDiv}>
+        <SvgIcon type="mdi" path={mdiChevronRight} size="35" />
+    </div>
+</div>

src/lib/components/person.svelte

@@ -1,5 +1,6 @@
 <script>
     import "$lib/css/person.css";
+    import Button from "$lib/components/button.svelte";
 
     export let picture;
     export let name = "John Doe";
@@ -13,7 +14,7 @@
             <img alt="person" src={picture} />
         </div>
         <div class="person-content flex-col">
-            <div class="flex-row">
+            <div class="person-span flex-row">
                 <h1>{name}</h1>
                 {#if pronouns != ""}
                     <span>{pronouns}</span>
@@ -21,11 +22,7 @@
             </div>
             <p>{description}</p>
             <div class="flex-row flex-end">
-                <div class="person-button">
+                <Button label="Me connaître" />
-                    <button>
-                        <p>Me connaître</p>
-                    </button>
-                </div>
             </div>
         </div>
     </div>

src/lib/css/button.css

@@ -0,0 +1,33 @@
+.button {
+    border-radius: 3rem;
+    border: none;
+    cursor: pointer;
+    background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
+    box-shadow: 0px 8px 18px -1px #33283760;
+    padding: 0.2rem;
+    transition: var(--transition);
+}
+
+.button:active {
+    box-shadow: 0px 4px 10px 0px #2c1235b0;
+    transform: translateY(3px);
+}
+
+.button span {
+    color: var(--color-background);
+    font-family: 'JetBrains Mono';
+    margin: 1rem;
+    margin-left: 2rem;
+    margin-right: 0;
+    user-select: none;
+}
+
+.button svg {
+    color: var(--color-background);
+    margin-right: 0rem;
+}
+
+.button-icon {
+    opacity: 0;
+    display: flex;
+}

src/lib/css/person.css

@@ -24,7 +24,7 @@
     width: 100%;
 }
 
-.person-content span {
+.person-span > span {
     background-color: var(--color-pill);
     margin-left: 1rem;
     margin-right: 1rem;
@@ -40,17 +40,3 @@
     margin-left: 0;
     font-size: var(--2-rem);
 }
-
-.person-button button {
-    border-radius: 3rem;
-    border: none;
-    cursor: pointer;
-    background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
-    box-shadow: 0px 8px 18px -1px #33283760;
-}
-
-.person-button p {
-    color: var(--color-background);
-    font-family: 'JetBrains Mono';
-    margin: 1rem;
-}