---
import { SITE_METADATA } from "@root/config";
import PageLayout from "@layouts/default.astro";
import SkillsList from "@components/SkillsList";
import SkillsBlock from "@components/SkillsBlock";

import ArticleContent from "@components/ArticleContent";
import { getLanguageFromURL } from "@root/utils";
import { useTranslation } from "@i18n/utils";

const lang = getLanguageFromURL(Astro.url.pathname);
const t = useTranslation(Astro);
const { Content } = await import(`../../content/about/${lang}/index.mdx`);
const { skills } = SITE_METADATA;
---

<PageLayout lang={lang} title={t("pageTitle.about")}>
	<section>
		<ArticleContent>
			<Content />
		</ArticleContent>
		<SkillsList>
			{skills.map((block) => <SkillsBlock data={block} />)}
		</SkillsList>
	</section>
</PageLayout>