125 lines
2.7 KiB
Svelte
125 lines
2.7 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { MetaTags } from 'svelte-meta-tags';
|
||
|
|
import Menu from '$elem/Menu.svelte';
|
||
|
|
let currentLanguage: string = 'it';
|
||
|
|
import { page } from '$app/stores';
|
||
|
|
console.log($page)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<MetaTags
|
||
|
|
title="Gianmarco Pettinato"
|
||
|
|
description="This is the Gianmarco's portfolio site"
|
||
|
|
canonical="https://pettinato.eu/"
|
||
|
|
openGraph={{
|
||
|
|
url: 'https://pettinato.eu/',
|
||
|
|
title: 'Gianmarco Pettinato',
|
||
|
|
description: "This is the Gianmarco's portfolio site",
|
||
|
|
images: [
|
||
|
|
{
|
||
|
|
url: 'https://www.example.ie/og-image-01.jpg',
|
||
|
|
width: 800,
|
||
|
|
height: 600,
|
||
|
|
alt: 'Og Image Alt'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: 'https://www.example.ie/og-image-02.jpg',
|
||
|
|
width: 900,
|
||
|
|
height: 800,
|
||
|
|
alt: 'Og Image Alt Second'
|
||
|
|
},
|
||
|
|
{ url: 'https://www.example.ie/og-image-03.jpg' },
|
||
|
|
{ url: 'https://www.example.ie/og-image-04.jpg' }
|
||
|
|
],
|
||
|
|
site_name: 'Gianmarco Pettinato Portfolio'
|
||
|
|
}}
|
||
|
|
twitter={{
|
||
|
|
handle: '@jatus_93',
|
||
|
|
site: '@jatus_93',
|
||
|
|
cardType: 'summary',
|
||
|
|
title: 'Gianmarco Pettinato Portfolio',
|
||
|
|
description: "This is the Gianmarco's portfolio site",
|
||
|
|
image: 'https://pettinato.eu/profile_pic.webp',
|
||
|
|
imageAlt: 'Gianmarco Photo'
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<!-- svelte-ignore a11y-invalid-attribute -->
|
||
|
|
<div class="language-selector" id="language-selector">
|
||
|
|
<button
|
||
|
|
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
|
||
|
|
on:click={() => {
|
||
|
|
currentLanguage = 'it';
|
||
|
|
}}>it</button
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
|
||
|
|
on:click={() => {
|
||
|
|
currentLanguage = 'en';
|
||
|
|
}}>en</button
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="menu">
|
||
|
|
<Menu {currentLanguage} />
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import '../../app.scss';
|
||
|
|
.language-selector {
|
||
|
|
right: 0;
|
||
|
|
height: 30px;
|
||
|
|
text-align: center;
|
||
|
|
text-transform: uppercase;
|
||
|
|
padding-top: 10px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: end;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 999;
|
||
|
|
@media (max-width: $min-desktop) {
|
||
|
|
width: 100%;
|
||
|
|
position: unset;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
background-color: $basecolor2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.menu {
|
||
|
|
background-color: $basecolor2;
|
||
|
|
position: sticky;
|
||
|
|
position: -webkit-sticky;
|
||
|
|
top: 0px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10px;
|
||
|
|
border-bottom: solid #999 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-button {
|
||
|
|
border: 0;
|
||
|
|
background: none;
|
||
|
|
box-shadow: none;
|
||
|
|
border-radius: $default-border-radius;
|
||
|
|
border: solid $button-border-color 1px;
|
||
|
|
width: 40px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
.custom-button:hover {
|
||
|
|
background-color: $text-color;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.custom-button-active {
|
||
|
|
cursor: unset;
|
||
|
|
background-color: $text-color;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
@media (max-width: $min-tablet) {
|
||
|
|
.custom-button {
|
||
|
|
font-size: large;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|