---
import { Image } from 'astro:assets';
import logoImage from '../assets/img/yht_logo.png';
---
<div>
  <Image src={logoImage} alt="Logo displaying a stylized character with brown hair wearing purple hoodie on a light blue circle background" width="150" height="150"/>
  <p>
    Hi, I'm <strong>Paweł</strong>, also known by <strong>YouHaveTrouble</strong> on the internet.
    I'm a full-stack web developer and minecraft plugin developer.
  </p>
</div>

<style>
  div {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    display: block;
    margin-right: 20px;
  }

  p {
    font-size: 1.125rem;
  }

  @media screen and (max-width: 520px) {
    div {
      flex-direction: column;
    }
    img {
      margin-right: unset;
      width: 150px;
      height: 150px;
    }
  }
</style>
