From c87490038df99b110ef44e0bcb67ec9e91055eb1 Mon Sep 17 00:00:00 2001
From: Gianmarco Pettinato <gianmarco@pettinato.eu>
Date: Tue, 19 Oct 2021 16:33:21 +0200
Subject: [PATCH] updated animation/navigation

---
 package-lock.json        | 19 +++++++++++++++++++
 package.json             |  1 +
 src/elements/Jobs.svelte |  2 +-
 src/elements/Menu.svelte | 11 ++++++-----
 src/routes/index.svelte  |  1 +
 svelte.config.js         |  3 ++-
 6 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 468b483..358aaba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "svelte-jester": "^2.1.5",
         "svelte-preprocess": "^4.9.4",
         "svelte-preprocess-markdown": "^2.7.3",
+        "svelte-scrollto": "^0.2.0",
         "ts-jest": "^27.0.7",
         "tslib": "^2.3.1",
         "typescript": "^4.4.3"
@@ -7849,6 +7850,15 @@
         "marked": "^1.0.0"
       }
     },
+    "node_modules/svelte-scrollto": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/svelte-scrollto/-/svelte-scrollto-0.2.0.tgz",
+      "integrity": "sha512-l4K2E4jr6dXCODtZDCkpp/TzknVVoq8gecHM0UOOmihvLosczdyLuyDUhZ+U2HkhLWi7nnimuOstZSFKtXSpmA==",
+      "dev": true,
+      "dependencies": {
+        "svelte": "3.x"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -14287,6 +14297,15 @@
         "marked": "^1.0.0"
       }
     },
+    "svelte-scrollto": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/svelte-scrollto/-/svelte-scrollto-0.2.0.tgz",
+      "integrity": "sha512-l4K2E4jr6dXCODtZDCkpp/TzknVVoq8gecHM0UOOmihvLosczdyLuyDUhZ+U2HkhLWi7nnimuOstZSFKtXSpmA==",
+      "dev": true,
+      "requires": {
+        "svelte": "3.x"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index bf76789..e3b0668 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "svelte-jester": "^2.1.5",
     "svelte-preprocess": "^4.9.4",
     "svelte-preprocess-markdown": "^2.7.3",
+    "svelte-scrollto": "^0.2.0",
     "ts-jest": "^27.0.7",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
diff --git a/src/elements/Jobs.svelte b/src/elements/Jobs.svelte
index 74ca6b6..98f56b1 100644
--- a/src/elements/Jobs.svelte
+++ b/src/elements/Jobs.svelte
@@ -18,7 +18,7 @@
       <div class="job-content">
         <div class="images-container">
           {#each job.images as image }
-            <img src="{image}" alt="realtive to the article"/>
+            <img src="{image}" alt="{image}"/>
           {/each}
         </div>
         <div class="text-content">
diff --git a/src/elements/Menu.svelte b/src/elements/Menu.svelte
index d9c6d14..f7d47cb 100644
--- a/src/elements/Menu.svelte
+++ b/src/elements/Menu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { scrollto } from "svelte-scrollto";
   export let currentLanguage = 'it'
   export const menu = {home:{it:"Home",en:"Home"},
               job:{it:"Esperienze",en:"Experiences"},
@@ -9,11 +10,11 @@
 
 <div class="div-menu">
   <div class="wrapper">
-    <a class="menu-element" href="#home" alt="{menu.home[currentLanguage]}"><i class="fas fa-home"></i><span class="hide">{menu.home[currentLanguage]}</span></a>
-    <a class="menu-element" href="#jobs" alt="{menu.job[currentLanguage]}"><i class="fas fa-user-tie"></i><span class="hide">{menu.job[currentLanguage]}</span></a>
-    <a class="menu-element" href="#training" alt="{menu.school[currentLanguage]}"><i class="fas fa-graduation-cap"></i><span class="hide">{menu.school[currentLanguage]}</span></a>
-    <a class="menu-element" href="#portfolio" alt="{menu.portfolio[currentLanguage]}"><i class="fas fa-user-clock"></i><span class="hide">{menu.portfolio[currentLanguage]}</span></a>
-    <a class="menu-element" href="#contacts" alt="{menu.contacts[currentLanguage]}"><i class="fas fa-address-card"></i><span class="hide">{menu.contacts[currentLanguage]}</span></a>
+    <a use:scrollto={{element:'#home', offset:-70}} class="menu-element" href="#" alt="{menu.home[currentLanguage]}"><i class="fas fa-home"></i><span class="hide">{menu.home[currentLanguage]}</span></a>
+    <a use:scrollto={{element:'#jobs', offset:-50}} class="menu-element" href="#" alt="{menu.job[currentLanguage]}"><i class="fas fa-user-tie"></i><span class="hide">{menu.job[currentLanguage]}</span></a>
+    <a use:scrollto={{element:'#training', offset:-50}} class="menu-element" href="#" alt="{menu.school[currentLanguage]}"><i class="fas fa-graduation-cap"></i><span class="hide">{menu.school[currentLanguage]}</span></a>
+    <a use:scrollto={{element:'#portfolio', offset:-50}} class="menu-element" href="#" alt="{menu.portfolio[currentLanguage]}"><i class="fas fa-user-clock"></i><span class="hide">{menu.portfolio[currentLanguage]}</span></a>
+    <a use:scrollto={{element:'#contacts', offset:-50}} class="menu-element" href="#" alt="{menu.contacts[currentLanguage]}"><i class="fas fa-address-card"></i><span class="hide">{menu.contacts[currentLanguage]}</span></a>
   </div>
 </div>
 
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 6445e80..e6c77fb 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -19,6 +19,7 @@
 <main class="maindiv">
   <!-- svelte-ignore a11y-invalid-attribute -->
   <div class="language-selector" id="language-selector"> <a href="#" on:click={()=>{ currentLanguage = 'it'}}>IT</a>  <a href="#" on:click={()=>{currentLanguage = 'en'}}>EN</a> </div>
+
   <div class="menu">
     <Menu {currentLanguage}/>
   </div>
diff --git a/svelte.config.js b/svelte.config.js
index d6ab880..39e37c7 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -9,7 +9,8 @@ const config = {
 	// for more information about preprocessors
 	preprocess: [preprocess({
 		sass: true,
-    typescript: true
+    typescript: true,
+		
 	}), markdown()],
 
 	kit: {