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

<Layout title="Ryan Kazokas Projects">
  <main>
    <div class="max-w-4xl mx-auto p-8 mt-10 mb-10 projects-container">
      <div class="mb-8">
        <h2 class="text-3xl font-semibold border-b border-green-500/30 pb-3 text-white">Projects</h2>
        <p class="text-md mt-4 text-gray-300 leading-relaxed">
          This is not an exhaustive list of all projects I have worked on but
          just a list of projects I have worked on that have/had some kind of
          meaningful impact to myself or others. I can get some others upon
          request.
        </p>
      </div>

      <div class="project-card featured">
        <h3 class="text-2xl font-semibold text-white mb-3">KazCloud</h3>
        <p class="text-gray-400 mb-3">Project Link: <span class="text-gray-400">Self-Hosted Infrastructure</span></p>
        <p class="text-gray-300 leading-relaxed">
          My personal cloud infrastructure running on bare-metal servers. Built with Kubernetes,
          this self-hosted platform powers all my personal projects and services. It's a hands-on
          playground for experimenting with container orchestration, networking, storage solutions,
          and DevOps practices in a production-like environment.
        </p>
      </div>

      <div class="project-card">
        <h3 class="text-2xl font-semibold text-white mb-3">Shopify SDK</h3>
        <p class="text-gray-400 mb-3">
          Project Link: <a
            class="text-green-400 hover:text-green-300 transition-colors underline"
            href="https://github.com/ChannelApe/shopify-sdk"
            target="_blank">Github Repo</a
          >
        </p>
        <p class="text-gray-300 leading-relaxed">
          A java sdk for the shopify admin API. I am currently the main person
          responsible for maintaining and adding new features to the sdk. I also
          work on interacting with other contributors and merging/releasing
          code.
        </p>
      </div>

      <div class="project-card">
        <h3 class="text-2xl font-semibold text-white mb-3">Traverse TMS</h3>
        <p class="text-gray-400 mb-3">Project Link: N/A</p>
        <p class="text-gray-300 leading-relaxed">
          The system that helped organize and manage the route and schedules for
          talent and staff drivers during the 2014-2019 New Orleans Jazz
          Festivals. I was the main Developer and worked with a product manager
          to build out the system. The service was used by and complimented by
          drivers for Jimmy Buffett and Allen Toussaint. Unfortunately, due to
          some circumstances and the pandemic I resigned from the project and do
          not have access to show the code for it.
        </p>
      </div>

      <div class="project-card">
        <h3 class="text-2xl font-semibold text-white mb-3">TurboVault</h3>
        <p class="text-gray-400 mb-3">
          Project Link: <a
            class="text-green-400 hover:text-green-300 transition-colors underline"
            href="https://turbovault.kazcloud.dev"
            target="_blank">Webapp</a
          >
        </p>
        <p class="text-gray-300 leading-relaxed">
          A cataloging app for physical video game collectors. I built this
          because I play and collect games. So I use it for personal use and saw good opportunity to use my skills to solve my own problems.
        </p>
      </div>
    </div>
  </main>
</Layout>

<style>
  .projects-container {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border: 1px solid rgba(0, 255, 65, 0.2);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  }

  .project-card {
    padding: 24px;
    margin-bottom: 24px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 65, 0.15);
    border-radius: 6px;
    transition: all 0.3s ease;
  }

  .project-card:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 255, 65, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }

  .project-card:last-child {
    margin-bottom: 0;
  }
</style>
