---
import Layout from "../layouts/Layout.astro";
---

<Layout title="Ryan Kazokas">
  <main>
    <div class="flex">
      <div class="flex justify-start items-center">
        <div class="flex-grow p-5 sm:text-right text-center z-50">
          <h1 class="text-6xl bold underline-offset-0">Software Engineer</h1>
          <p class="text-3xl mt-4">Senior Full Stack Developer</p>
        </div>
        <div class="w-1/2 lg:block hidden relative">
          <img class="w-full" src="/images/code.jpg" />
          <div class="fade"></div>
        </div>
      </div>
    </div>

    <div class="max-w-3xl mx-auto p-6 bg-white mt-10">
      <div class="mt-8 flex flex-col p-12 text-left w-full justify-center">
        <p class="text-4xl">About</p>
        <p class="mt-2">
          My name is Ryan Kazokas and I'm a software engineer. I currently work
          as a Senior Software Engineer at Shopify on the Core Inventory Team.
        </p>
        <p class="mt-2">
          In my spare time I do enjoy learning and trying new software
          technology to apply to things I am doing at work. Most importantly, I am a husband to my
          wife Sam, and a father to our kids, Auden, Cooper, Nolan, and Niko.
        </p>
      </div>
    </div>

    <div class="max-w-3xl mx-auto p-6 bg-white mt-10">
      <div class="flex flex-col p-12 text-center">
        <p class="text-4xl">My Socials</p>
      </div>
    </div>
    <div
      class="mt-2 flex sm:space-x-32 flex-col sm:flex-row justify-center items-center"
    >
      <div class="p-10 flex flex-col justify-center items-center">
        <h2 class="text-3xl">Github</h2>
        <a href="https://github.com/ryankazokas" target="_blank">
          <img src="images/github.png" alt="Github logo" class="h-48 w-48" />
        </a>
        <p class="mt-5">Check out my github contributions and work</p>
      </div>

      <div class="p-10 flex flex-col justify-center items-center">
        <h2 class="text-3xl">Linkedin</h2>
        <a href="https://www.linkedin.com/in/ryankazokas/" target="_blank">
          <img src="images/linkedin.svg" alt="Github logo" class="h-48 w-48" />
        </a>
        <p class="mt-5">View my work history and achievements</p>
      </div>
      <div class="p-10 flex flex-col justify-center items-center">
        <h2 class="text-3xl">Email</h2>
        <a href="mailto:ryan.kazokas@gmail.com" target="_blank">
          <img src="images/email.svg" alt="Github logo" class="h-48 w-48" />
        </a>
        <p class="mt-5">Contact me directly via email</p>
      </div>
    </div>
  </main>
</Layout>

<style>
  .flip-image {
    transform: scaleX(-1);
  }
  .fade {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 103%; /* Increase the width of the fade effect */
    background: linear-gradient(to right, white 20%, transparent 100%);
  }
</style>
