<script lang="ts">
	import { MetaTags } from 'svelte-meta-tags';
	import type { CurrentLanguage } from '$lib/types';
	import Data_portfolio from '$lib/model/portfolio.json';
	import type { Job } from '$lib/model/job';
	import Menu from '$lib/elements/MenuBig.svelte';
	import Jobs from '$lib/elements/Jobs.svelte';
	import LanguageSelector from '$lib/elements/LanguageSelector.svelte';

	let currentLanguage: CurrentLanguage = 'it';
	let isBlogContainer = true;
	let jobs: Job[] = Data_portfolio as Job[];
	let title = { it: 'I miei articoli', en: 'my blog posts' };
</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: [],
		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 -->
	<LanguageSelector bind:currentLanguage />
	<Menu {currentLanguage} />

	<div id="portfolio" class="default">
		<h2>{title.it}</h2>
		<Jobs {jobs} {currentLanguage} {isBlogContainer} />
	</div>
</main>

<style lang="scss">
	@import '../../app.scss';
	@media (max-width: $min-tablet) {
		.custom-button {
			font-size: large;
		}
	}
</style>
