import { AppProps } from "next/app";
import { useEffect } from "react";
import AOS from "aos";

import "../src/styles/main.scss";
import "aos/dist/aos.css";
import "@splidejs/splide/css/sea-green";

import Head from "next/head";

export default function MyApp({ Component, pageProps }: AppProps): JSX.Element {
	useEffect(() => {
		// here you can add your aos options
		AOS.init({
			offset: 100
		});
	}, []);

	return <>
		<Head>
			<title>Patryk Kuchta</title>
			<meta name = "description" content = {
				"Welcome to my Portfolio Website. My name is Patryk Kuchta." +
				"Explore a showcase of my projects, education and work experience." +
				"Discover the passion and expertise of a dedicated computer scientist," +
				"poised to make a lasting impact in the world of technology."
			} />
			<link rel="manifest" href="manifest.json" />

			<meta property="og:title" content="Patryk Kuchta's Portfolio"/>
			<meta property="og:description" content="Explore a showcase of my projects, education and work experience."/>
			<meta property="og:image" content="https://kuchta.uk/logo.svg"/>
			<meta property="og:url" content="https://kuchta.uk"/>
			<meta property="og:type" content="website"/>

			<meta name="twitter:card" content="summary"/>
			<meta name="twitter:title" content="Patryk Kuchta's Portfolio"/>
			<meta name="twitter:description" content="Explore a showcase of my projects, education and work experience."/>
			<meta name="twitter:image" content="https://kuchta.uk/logo.svg"/>

			<link rel="icon" type="image/x-icon" href="/portfolio/favicon.ico"/>
		</Head>
		<Component {...pageProps} />
	</>;
}
