updated animation/navigation

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",

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"

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">

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 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 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 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 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 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 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 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 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:'#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>
 

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>

svelte.config.js

@@ -9,7 +9,8 @@ const config = {
 	// for more information about preprocessors
 	preprocess: [preprocess({
 		sass: true,
-    typescript: true
+    typescript: true,
+		
 	}), markdown()],
 
 	kit: {