90 lines
2.5 KiB
Svelte
90 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import AboutMe from "$elem/AboutMe.svelte";
|
|
import Jobs from "$elem/Jobs.svelte";
|
|
import Menu from "$elem/Menu.svelte";
|
|
import Training from '$elem/Training.svelte'
|
|
import Contacts from '$elem/Contacts.svelte'
|
|
import Data_jobs from '../model/jobs.json';
|
|
import Data_portfolio from '../model/portfolio.json';
|
|
import type { Schema } from "src/model/job";
|
|
let jobs:Schema[] = Data_jobs as Schema[];
|
|
let portfolio:Schema[] = Data_portfolio as Schema[];
|
|
let currentLanguage: string ='it';
|
|
let titles = {home:{it:"Home",en:"Home"},
|
|
job:{it:"Esperienze",en:"Experiences"},
|
|
school:{it:"Formazione",en:"Training"},
|
|
contacts:{it:"Contatti",en:"Contacts"},
|
|
portfolio:{it:"Portfolio",en:"Portfolio"}}
|
|
</script>
|
|
<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>
|
|
<div class="about" id="home">
|
|
<AboutMe {currentLanguage}/>
|
|
</div>
|
|
<div class="content" id="jobs">
|
|
<h2>{titles.job[currentLanguage]}</h2>
|
|
<Jobs jobs={jobs} {currentLanguage}/>
|
|
</div>
|
|
<div class="content" id="training">
|
|
<h2>{titles.school[currentLanguage]}</h2>
|
|
<Training {currentLanguage} />
|
|
</div>
|
|
<div class="content" id="portfolio">
|
|
<h2>{titles.portfolio[currentLanguage]}</h2>
|
|
<Jobs jobs={portfolio} {currentLanguage}/>
|
|
</div>
|
|
<div class="content" id="contacts">
|
|
<h2>{titles.contacts[currentLanguage]}</h2>
|
|
<Contacts/>
|
|
</div>
|
|
</main>
|
|
<style lang="scss">
|
|
@import "./static/colors.scss";
|
|
.maindiv {
|
|
color: $rich-black-fogra-29;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
}
|
|
|
|
.language-selector {
|
|
width: 100%;
|
|
color: $rich-black-fogra-29;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
background-color: $steel-blue;
|
|
}
|
|
|
|
.language-selector > a, .language-selector > a:visited {
|
|
text-decoration: none;
|
|
color: $rich-black-fogra-29;
|
|
font-size: 16px;
|
|
margin-right: 20px ;
|
|
}
|
|
|
|
.about{
|
|
margin-top: 4vh;
|
|
margin-bottom: 4vh;
|
|
}
|
|
.content{
|
|
|
|
margin-bottom: 4vh;
|
|
}
|
|
|
|
h2{
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.menu {
|
|
width: 100%;
|
|
position: -webkit-sticky; /* Safari */
|
|
position: sticky;
|
|
bottom: 0;
|
|
top: 0;
|
|
}
|
|
|
|
</style> |