updated animation/navigation
This commit is contained in:
parent
0d1773a673
commit
c87490038d
19
package-lock.json
generated
19
package-lock.json
generated
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -9,7 +9,8 @@ const config = {
|
||||
// for more information about preprocessors
|
||||
preprocess: [preprocess({
|
||||
sass: true,
|
||||
typescript: true
|
||||
typescript: true,
|
||||
|
||||
}), markdown()],
|
||||
|
||||
kit: {
|
||||
|
Loading…
Reference in New Issue
Block a user