Button: Added 'action' variable. Added new section to the Hub and navbar 'About'.

src/lib/components/button.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
     import "$lib/css/button.css";
     import "$lib/css/base.css";
     import SvgIcon from "@jamescoyle/svelte-icon";
@@ -6,10 +6,13 @@
     import anime from "animejs";
 
     export let label = "Button";
+    export let action = () => {
+        console.log("Hello from button!");
+    };
 
-    let iconDiv: HTMLElement;
+    let iconDiv;
 
-    function button_animation(event: Event, enter: boolean) {
+    function button_animation(event, enter) {
         let opacity = [0, 1];
         let marginRight = ["0rem", "1rem"];
         let translateX = [-20, 0];
@@ -32,6 +35,7 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
     class="button flex center"
     on:mouseenter={(event) => {
@@ -40,6 +44,9 @@
     on:mouseleave={(event) => {
         button_animation(event, false);
     }}
+    on:click={(event) => {
+        action();
+    }}
 >
     <span>{label}</span>
     <div class="button-icon" bind:this={iconDiv}>

src/lib/components/navbar.svelte

@@ -101,6 +101,9 @@
 			<div>
 				<a class={isActive("/projects", pageUrl)} href="/projects">{mainjson.tab.projects}</a>
 			</div>
+			<div>
+				<a class={isActive("/about", pageUrl)} href="/about">{mainjson.tab.about}</a>
+			</div>
 			<div>
 				<a href="https://blog.etheryo.fr">{mainjson.tab.blog}</a>
 			</div>

src/lib/components/person.svelte

@@ -6,6 +6,7 @@
     export let name = "John Doe";
     export let pronouns = "";
     export let description = "Normal human being I swear";
+    export let url = "https://github.com"
 </script>
 
 <div class="flex center">
@@ -22,7 +23,7 @@
             </div>
             <p>{description}</p>
             <div class="flex-row flex-end">
-                <Button label="Me connaître" />
+                <Button label="Me connaître" action={() => {window.location.href = url;}} />
             </div>
         </div>
     </div>

src/lib/json/hub.json

@@ -6,5 +6,6 @@
         "name": "Yohan Boujon",
         "pronouns": "il/lui",
         "description": "Informatics and electronics engineer"
-    }
+    },
+    "projects":"Mes projets"
 }

src/lib/json/main.json

@@ -3,6 +3,7 @@
     {
         "hub": "Hub",
         "projects": "Projets",
+        "about": "À propos",
         "blog": "Blog",
         "lab": "Labo"
     },

src/routes/+page.svelte

@@ -28,5 +28,9 @@
 		name={hubjson.person.name}
 		pronouns={hubjson.person.pronouns}
 		description={hubjson.person.description}
+		url="/about"
 	/>
+	<div class="section">
+		<h1>{hubjson.projects}</h1>
+	</div>
 </div>

src/routes/about/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+	import "$lib/css/base.css";
+	import "$lib/css/main.css";
+</script>
+
+<div class="main-banner">
+	<div class="main-banner-gradient"></div>
+	<div class="main-banner-content">
+		<div
+			class="flex-row center"
+			style="padding-top: 15rem;padding-bottom: 15rem;"
+		>
+			<h1>About</h1>
+		</div>
+	</div>
+</div>