---
import * as utils from '@utils/index';
import PageLayout from '@layouts/default.astro';
import RecentArticles from '@components/RecentArticles';
import { Splash, SplashHeading, SplashLinks, Link } from '@components/Splash';

const data = await Astro.glob<ArticleType>('../../content/articles/**/*.mdx');
const articles = utils.transformArticles(data);
---

<PageLayout showPageHeading={false}>
	<Splash>
		<SplashHeading>
			<hgroup>
				<h1>Hello, I'am Sergey</h1>
				<h2>Fullstack <b>web-developer</b> & <b>freelancer</b></h2>
			</hgroup>
			<p>Я занимаюсь разработкой веб-сайтов и веб-приложений разной сложности, а также публикую различные статьи и туториалы на разные IT темы.</p>
		</SplashHeading>
		<SplashLinks>
			<Link icon="information" href="/about">обо мне</Link>
			<Link icon="email_filled" href="/contacts">написать мне</Link>
		</SplashLinks>
	</Splash>
	<RecentArticles articles={articles} length={4} />
</PageLayout>