---
import PostList from '../components/PostList.astro';
import { SITE_DESCRIPTION } from '../consts';
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="home" description={SITE_DESCRIPTION}>
  <section>
    <h2>Welcome to my website</h2>
    <p>
      My name is <strong>Maciej</strong>, but if you're not sure how to
      pronounce it, then you can call me <strong>Mac</strong>. I'm an
      eighteen-year-old frontend developer from <strong>Poland</strong>.
      Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for my
      projects, I'm also familiar with <strong>Alpine</strong> and <strong
        >Astro</strong
      >.
    </p>
  </section>
  <section>
    <h3>My blog</h3>
    <p>
      It serves as a means of documenting the development process and inner
      workings of <a href="/projects">my applications</a>. Check out the latest
      posts below:
    </p>
    <PostList limit={3} />
  </section>
  <section>
    <h3>Like my work?</h3>
    <p>
      If so, make sure to follow me on <a
        href="https://github.com/maciejpedzich"
        target="_blank"
        rel="noopener noreferrer">GitHub</a
      >, <a
        href="https://twitter.com/MaciejPedzich"
        target="_blank"
        rel="noopener noreferrer">Twitter</a
      >, or <a rel="me" href="https://notacult.social/@macindahaus">Mastodon</a
      >.
    </p>
  </section>
</BaseLayout>

<style>
  section {
    text-align: center;
    margin-bottom: 1.25rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  p {
    margin: 0 0 1rem 0;
  }
</style>