Moving from github
This commit is contained in:
61
src/components/Card.astro
Normal file
61
src/components/Card.astro
Normal file
@@ -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>→</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>
|
||||
7
src/components/Nav.astro
Normal file
7
src/components/Nav.astro
Normal file
@@ -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>
|
||||
2
src/env.d.ts
vendored
Normal file
2
src/env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
51
src/layouts/Layout.astro
Normal file
51
src/layouts/Layout.astro
Normal file
@@ -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>
|
||||
81
src/pages/index.astro
Normal file
81
src/pages/index.astro
Normal file
@@ -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>
|
||||
62
src/pages/projects.astro
Normal file
62
src/pages/projects.astro
Normal file
@@ -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>
|
||||
85
src/pages/resume.astro
Normal file
85
src/pages/resume.astro
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user