7cbbdf2f1a
Some checks failed
pettinato.eu/cv-site/pipeline/head There was a failure building this commit
86 lines
2.0 KiB
Svelte
86 lines
2.0 KiB
Svelte
<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' },
|
|
school: { it: 'Formazione', en: 'Training' },
|
|
contacts: { it: 'Contatti', en: 'Contacts' },
|
|
portfolio: { it: 'Portfolio', en: 'Portfolio' }
|
|
};
|
|
</script>
|
|
|
|
<div class="div-menu">
|
|
<div class="wrapper">
|
|
<a
|
|
use:scrollto={{ element: '#home', offset: -70 }}
|
|
href="#home"
|
|
alt={menu.home[currentLanguage]}
|
|
>
|
|
<span class="hide">{menu.home[currentLanguage]}</span><i class="fas fa-home" /></a
|
|
>
|
|
|
|
<a
|
|
use:scrollto={{ element: '#jobs', offset: -50 }}
|
|
class="menu-element"
|
|
href="#jobs"
|
|
alt={menu.job[currentLanguage]}
|
|
><span class="hide">{menu.job[currentLanguage]}</span><i class="fas fa-user-tie" /></a
|
|
>
|
|
|
|
<a
|
|
use:scrollto={{ element: '#training', offset: -50 }}
|
|
class="menu-element"
|
|
href="#training"
|
|
alt={menu.school[currentLanguage]}
|
|
><span class="hide">{menu.school[currentLanguage]}</span><i
|
|
class="fas fa-graduation-cap"
|
|
/></a
|
|
>
|
|
|
|
<a
|
|
use:scrollto={{ element: '#portfolio', offset: -50 }}
|
|
class="menu-element"
|
|
href="#portfolio"
|
|
alt={menu.portfolio[currentLanguage]}
|
|
><span class="hide">{menu.portfolio[currentLanguage]}</span><i class="fas fa-user-clock" /></a
|
|
>
|
|
|
|
<a
|
|
use:scrollto={{ element: '#contacts', offset: -50 }}
|
|
class="menu-element"
|
|
href="#contacts"
|
|
alt={menu.contacts[currentLanguage]}
|
|
><span class="hide">{menu.contacts[currentLanguage]}</span><i
|
|
class="fas fa-address-card"
|
|
/></a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import './static/elements.scss';
|
|
@import './static/breakpoints.scss';
|
|
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
|
.div-menu {
|
|
width: 90%;
|
|
max-width: 1024px;
|
|
}
|
|
.wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
a {
|
|
border: solid black;
|
|
width: 15%;
|
|
font-size: 20px;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
@media screen and (max-width: $min-tablet) {
|
|
.hide {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|