---
import AppLayout from '@layouts/app.astro'
import SvgIcon from '@components/SvgIcon.astro'
import { Picture } from 'astro:assets'
import oleksiiPhoto from '@assets/about/oleksii@2x.webp'
---

<style>
  .authors-list {
    display: flex;
    flex-direction: column;
    padding: 3rem;
    justify-content: center;
    align-items: center;
    max-width: 1024px;
  }

  .authors-item {
    display: flex;
    flex-direction: row;
  }

  .author {
    display: flex;
    background: hsl(0deg 0% 100%);
  }

  .photo {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: bottom;
  }

  .bio {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 5px solid hsl(178deg 88% 26%);
    padding: 1.5rem;
    background-color: hsl(0deg 0% 100%);
  }

  .bio-title {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 1rem;
  }

  .bio-contacts {
    display: flex;
    gap: 1rem;
    padding-bottom: 0.5rem;
  }

  .bio-contact-link {
    color: hsl(13deg 61% 55%);
  }

  @media screen and (max-width: 900px) {
    .authors-list {
      padding: 0 1rem 1rem 1rem;
    }

    .author {
      max-width: 100%;
    }

    .photo {
      display: none;
    }
  }
</style>

<AppLayout title="Про нас">
  <div class="authors-list">
    <div class="authors-item">
      <div class="author">
        <div class="photo">
          <Picture
            src={oleksiiPhoto}
            densities={[1.5, 2]}
            priority={true}
            quality="max"
            formats={['avif', 'webp']}
            fallbackFormat="jpg"
            alt="Олексій Васильєв"
            title="Олексій Васильєв"
            width="200"
            height="350"
          />
        </div>
      </div>
      <div class="bio">
        <h1 class="bio-title">Олексій Васильєв</h1>
        <div class="bio-contacts">
          <a
            class="bio-contact-link"
            href="https://twitter.com/leopard_me"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Follow me at twitter"
          >
            <SvgIcon name="twitter" size="1.6rem" />
          </a>
          <a
            class="bio-contact-link"
            href="https://github.com/le0pard"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Check my github"
          >
            <SvgIcon name="github" size="1.6rem" />
          </a>
          <a
            class="bio-contact-link"
            href="http://www.linkedin.com/in/le0pard"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Check my linkedin"
          >
            <SvgIcon name="linkedin" size="1.6rem" />
          </a>
          <a
            class="bio-contact-link"
            href="http://www.facebook.com/leopard.not.a"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Follow me at facebook"
          >
            <SvgIcon name="facebook" size="1.6rem" />
          </a>
        </div>
        <p class="bio-description">Розробник програмного забезпечення</p>
        <p class="bio-description">
          Автор опен сорс проектів:
          <a href="https://pgtune.leopard.in.ua/" target="_blank" rel="noopener noreferrer">
            PGTune
          </a>,
          <a href="https://re2js.leopard.in.ua/" target="_blank" rel="noopener noreferrer">
            RE2JS
          </a>,
          <a href="https://mpw.leopard.in.ua/" target="_blank" rel="noopener noreferrer">
            Master password generator
          </a>,
          <a href="https://browserlist.leopard.in.ua/" target="_blank" rel="noopener noreferrer">
            Browserlist WASM
          </a>,
          <a href="https://vmail.leopard.in.ua/" target="_blank" rel="noopener noreferrer">
            VMail
          </a>,
          <a href="https://sql-joins.leopard.in.ua/" target="_blank" rel="noopener noreferrer">
            SQL Joins Visualizer
          </a>,
          <a
            href="https://github.com/le0pard/cable-shared-worker"
            target="_blank"
            rel="noopener noreferrer"
          >
            Cable-shared-worker (CableSW)
          </a>, та інші
        </p>
      </div>
    </div>
  </div>
</AppLayout>
