Moving from github

README.md

@@ -0,0 +1,3 @@
+# Ryan Kazokas Personal Website
+
+## Built with astro

astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+
+import tailwind from "@astrojs/tailwind";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [tailwind()]
+});

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "web",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.5.6",
+    "@astrojs/tailwind": "^5.1.0",
+    "@vercel/speed-insights": "^1.0.10",
+    "astro": "^4.4.14",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.2"
+  }
+}

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

public/images/email.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<circle style="fill:#386895;" cx="256" cy="256" r="256"/>
+<path style="fill:#273B7A;" d="M511.902,249.006l-49.895-49.895l-149.118,28.444L84.471,357.047l154.367,154.367
+	C244.512,511.79,250.232,512,256,512c141.384,0,256-114.616,256-256C512,253.661,511.964,251.33,511.902,249.006z"/>
+<path style="fill:#FFFFFF;" d="M462.007,199.111l-102.815-89.967c-4.387-3.839-11.89-1.121-11.89,4.31v39.776h-171.48
+	c-6.654,0-12.05,4.72-12.05,10.545v70.677c0,5.823,5.396,10.545,12.05,10.545H347.3v39.776c0,5.43,7.502,8.149,11.89,4.31
+	L462.007,199.111z"/>
+<rect x="84.471" y="199.111" style="fill:#FEE187;" width="236.899" height="157.927"/>
+<rect x="202.852" y="199.111" style="fill:#FFC61B;" width="118.529" height="157.927"/>
+<polygon style="fill:#E59413;" points="321.376,199.111 202.924,278.08 84.471,199.111 "/>
+<polygon style="fill:#D48B07;" points="321.376,199.111 202.847,199.111 202.847,278.028 202.924,278.08 "/>
+</svg>

public/images/linkedin.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="72" viewBox="0 0 72 72" width="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z" fill="#007EBB"/><path d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z" fill="#FFF"/></g></svg>

src/components/Card.astro

@@ -0,0 +1,61 @@
+---
+interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 1px;
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 7px;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: calc(1.5rem - 1px);
+		border-radius: 8px;
+		color: white;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent-light));
+	}
+</style>

src/components/Nav.astro

@@ -0,0 +1,7 @@
+<div id="nav" class="flex justify-between p-5">
+  <h1 class="text-xl"><a href="/">Ryan Kazokas</a></h1>
+  <div class="flex space-x-5">
+    <a href="/resume">Resume</a>
+    <a href="/projects">Projects</a>
+  </div>
+</div>

src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -0,0 +1,51 @@
+---
+import Nav from "../components/Nav.astro";
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+import SpeedInsights from "@vercel/speed-insights/astro";
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Sumana:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <SpeedInsights />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <Nav />
+    <div class="flex flex-col min-h-screen">
+      <slot />
+    </div>
+
+    <footer class="bottom-0 w-full z-10 bg-gray-800 text-white p-4">
+      <p class="text-center">{new Date().getFullYear()} Ryan Kazokas</p>
+    </footer>
+  </body><style is:global>
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-family: "Sumana", sans-serif;
+    }
+    body {
+      color: #5f615f;
+      font-family: "Open Sans", sans-serif;
+    }
+  </style>
+</html>

src/pages/index.astro

@@ -0,0 +1,81 @@
+---
+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>

src/pages/projects.astro

@@ -0,0 +1,62 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Ryan Kazokas Projects">
+  <main>
+    <div class="max-w-3xl mx-auto p-6 bg-white mt-10">
+      <div class="p-6">
+        <h2 class="text-2xl font-semibold border-b pb-2">Projects</h2>
+        <p class="text-md mt-2">
+          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="p-6">
+        <h1 class="text-2xl">Shopify SDK</h1>
+        <p>
+          Project Link if applicable: <a
+            class="underline"
+            href="https://github.com/ChannelApe/shopify-sdk"
+            target="_blank">Github Repo</a
+          >
+        </p>
+        <p>
+          A java sdk for the shopify admin API. I am currently the main person
+          resposible 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="p-6">
+        <h1 class="text-2xl">Traverse TMS</h1>
+        <p>Project Link if applicable: N/A</p>
+        <p>
+          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 services was used by and compliment from
+          drivers for Jimmy Buffett and Allen Touisant. 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="p-6">
+        <h1 class="text-2xl">TurboVault</h1>
+        <p>
+          Project Link if applicable: <a
+            class="underline"
+            href="https://turbovault.kazcloud.dev"
+            target="_blank">Webapp</a
+          >
+        </p>
+        <p>
+          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 oppurtunity to use my skills to solve my own problems. 
+        </p>
+      </div>
+    </div>
+  </main>
+</Layout>

src/pages/resume.astro

@@ -0,0 +1,85 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Ryan Kazokas Resume">
+  <main>
+    <div class="max-w-3xl mx-auto p-6 bg-white mt-10">
+      <header class="text-center">
+        <p class="text-lg text-gray-600">
+          <i>Software Engineer | DevOps | Cloud Infrastructure</i>
+        </p>
+      </header>
+
+      <section class="mt-6">
+        <h2 class="text-2xl font-semibold border-b pb-2">About Me</h2>
+        <p class="mt-4 text-gray-700">
+          I'm Ryan Kazokas, a software engineer with expertise in backend
+          development, cloud infrastructure, and DevOps. With a strong
+          foundation in scalable system design and site reliability engineering,
+          I have spent years building and maintaining robust software solutions.
+        </p>
+      </section>
+
+      <section class="mt-6">
+        <h2 class="text-2xl font-semibold border-b pb-2">Experience</h2>
+        <div class="mt-4">
+          <h3 class="text-xl font-medium">
+            Principal Software Engineer - ChannelApe
+          </h3>
+          <p class="text-gray-600"><em>August 2017 - Present</em></p>
+          <ul class="list-disc list-inside mt-2 text-gray-700">
+            <li>Develop and maintain core infrastructure and services.</li>
+            <li>
+              Collaborate with the product team to design scalable and highly
+              available solutions.
+            </li>
+            <li>Manage DevOps and SRE tasks.</li>
+          </ul>
+        </div>
+
+        <div class="mt-4">
+          <h3 class="text-xl font-medium">
+            Application Developer Specialist - TMG Health
+          </h3>
+          <p class="text-gray-600"><em>January 2015 - August 2017</em></p>
+          <ul class="list-disc list-inside mt-2 text-gray-700">
+            <li>
+              Built and maintained automated applications for Medicare
+              enrollment services.
+            </li>
+            <li>Managed and created reporting services for clients.</li>
+          </ul>
+        </div>
+      </section>
+
+      <section class="mt-6">
+        <h2 class="text-2xl font-semibold border-b pb-2">Skills</h2>
+        <ul class="list-disc list-inside mt-4 text-gray-700">
+          <li>
+            <strong>Programming:</strong> Node.js, TypeScript, Java, SQL, C#
+          </li>
+          <li>
+            <strong>Databases:</strong> PostgreSQL, MySQL, DynamoDB, MongoDB
+          </li>
+          <li>
+            <strong>Cloud & Infrastructure:</strong> AWS Lambda, API Gateway, Docker,
+            ECS
+          </li>
+          <li><strong>Testing:</strong> BDD, JUnit, Jest, Cucumber</li>
+          <li><strong>Monitoring:</strong> Datadog, PagerDuty, Looker</li>
+        </ul>
+      </section>
+
+      <footer class="mt-6 text-center text-gray-600">
+        <p>
+          Contact: <a href="mailto:ryan.kazokas@gmail.com" class="text-blue-500"
+            >ryan.kazokas@gmail.com</a
+          > | <a href="https://ryankazokas.com" class="text-blue-500"
+            >ryankazokas.com</a
+          >
+        </p>
+      </footer>
+    </div>
+  </main>
+</Layout>

tailwind.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}