updated animation/navigation

This commit is contained in:
Gianmarco Pettinato 2021-10-19 16:33:21 +02:00
parent 0d1773a673
commit c87490038d
6 changed files with 30 additions and 7 deletions

19
package-lock.json generated
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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