cv-site/src/routes/index.svelte

<script lang="ts">
	import { MetaTags } from 'svelte-meta-tags';
	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 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: 'Gianmarco Pettinato',
			en: 'Gianmarco Pettinato'
		},
		job: { it: 'Esperienze', en: 'Experiences' },
		school: { it: 'Formazione', en: 'Training' },
		contacts: { it: 'Contatti', en: 'Contacts' },
		portfolio: { it: 'Portfolio', en: 'Portfolio' }
	};
</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>
	<div id="home" class="default">
		<h1>{titles.home[currentLanguage]}</h1>
		<h2>Software developer</h2>
		<AboutMe {currentLanguage} />
	</div>
	<div id="jobs" class="default">
		<h2>{titles.job[currentLanguage]}</h2>
		<Jobs {jobs} {currentLanguage} />
	</div>
	<div id="training" class="default">
		<h2>{titles.school[currentLanguage]}</h2>
		<Training {currentLanguage} />
	</div>
	<div id="portfolio" class="default">
		<h2>{titles.portfolio[currentLanguage]}</h2>
		<Jobs jobs={portfolio} {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>