ryan/ry.kazcloud.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ryan:71852ec99a92410f775393e2a1b59efc3b69deca
Branches Tags
ryan:main ryan:feature/add-profile-photo
...
compare: ryan:074b42c4c00df69080ea27ad9fd99cd6d8edf9e2
Branches Tags
ryan:main ryan:feature/add-profile-photo

2 Commits
71852ec99a ... 074b42c4c0

Author SHA1 Message Date
Ryan Kazokas
074b42c4c0 Revamping to matrix style
All checks were successful
Build and Push / build (push) Successful in 35s
Details
2026-02-16 16:39:39 -05:00
Ryan Kazokas
9d0e3938e4 Revamping to matrix style 2026-02-16 16:37:35 -05:00
8 changed files with 391 additions and 114 deletions
Expand all files Collapse all files

5
.astro/settings.json Normal file
View File

@@ -0,0 +1,5 @@
{
"_variables": {
"lastUpdateCheck": 1771276395072
}
}

1
.astro/types.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="astro/client" />

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
node_modules/
.astro/

12
src/components/Nav.astro
View File

@@ -1,7 +1,9 @@
<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 id="nav" class="flex justify-between p-5 bg-black border-b border-green-500 shadow-lg shadow-green-500/30">
<h1 class="text-xl font-bold">
<a href="/" class="matrix-glow hover:text-green-300 transition-colors">&gt; Ryan Kazokas</a>
</h1>
<div class="flex space-x-5 font-mono">
<a href="/resume" class="hover:text-green-300 transition-colors border border-green-500 px-3 py-1 rounded hover:shadow-lg hover:shadow-green-500/50">Resume</a>
<a href="/projects" class="hover:text-green-300 transition-colors border border-green-500 px-3 py-1 rounded hover:shadow-lg hover:shadow-green-500/50">Projects</a>
</div>
</div>

37
src/layouts/Layout.astro
View File

@@ -18,7 +18,7 @@ import SpeedInsights from "@vercel/speed-insights/astro";
<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"
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&family=Fira+Code:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<SpeedInsights />
@@ -31,8 +31,8 @@ import SpeedInsights from "@vercel/speed-insights/astro";
<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 class="bottom-0 w-full z-10 bg-black border-t border-green-500 text-green-500 p-4">
<p class="text-center font-mono">{new Date().getFullYear()} Ryan Kazokas</p>
</footer>
</body><style is:global>
h1,
@@ -41,11 +41,36 @@ import SpeedInsights from "@vercel/speed-insights/astro";
h4,
h5,
h6 {
font-family: "Sumana", sans-serif;
font-family: "JetBrains Mono", "Fira Code", monospace;
}
body {
color: #5f615f;
font-family: "Open Sans", sans-serif;
background: #0d0d0d;
color: #00ff41;
font-family: "JetBrains Mono", "Fira Code", monospace;
}
/* Matrix-style text glow */
.matrix-glow {
text-shadow: 0 0 5px rgba(0, 255, 65, 0.5), 0 0 10px rgba(0, 255, 65, 0.3);
}
/* Scanline effect */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
z-index: 1000;
}
</style>
</html>

266
src/pages/index.astro
View File

@@ -4,78 +4,250 @@ 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>
<!-- Hero Section -->
<div class="flex flex-col items-center justify-center min-h-[70vh] px-4">
<h1 class="text-5xl md:text-7xl font-bold text-center matrix-glow mb-8 typing-text">
Hi! I'm Ryan, a software engineer.
</h1>
<!-- Terminal Window -->
<div class="terminal-container mt-8 w-full max-w-3xl">
<div class="terminal-window">
<!-- Terminal Header -->
<div class="terminal-header">
<div class="terminal-buttons">
<span class="terminal-button close"></span>
<span class="terminal-button minimize"></span>
<span class="terminal-button maximize"></span>
</div>
<div class="terminal-title">ryan@localhost:~</div>
</div>
<!-- Terminal Body -->
<div class="terminal-body">
<div class="terminal-line">
<span class="prompt">$</span> whoami
</div>
<div class="terminal-output">Ryan Kazokas - Senior Software Engineer</div>
<div class="terminal-line">
<span class="prompt">$</span> pwd
</div>
<div class="terminal-output">/home/ryan/shopify/core-inventory</div>
<div class="terminal-line">
<span class="prompt">$</span> echo $ROLE
</div>
<div class="terminal-output">Senior Software Engineer @ Shopify</div>
<div class="terminal-line">
<span class="prompt">$</span> ls ~/skills/
</div>
<div class="terminal-output">typescript react node kubernetes docker ruby rails python graphql</div>
<div class="terminal-line">
<span class="prompt">$</span> ping family.local
</div>
<div class="terminal-output">PING family.local (192.168.1.1): 56 data bytes</div>
<div class="terminal-output">64 bytes from family: wife=Sam kids=[Auden, Cooper, Nolan, Niko]</div>
<div class="terminal-output">All systems operational! ✓</div>
<div class="terminal-line">
<span class="prompt">$</span> git status
</div>
<div class="terminal-output">On branch main</div>
<div class="terminal-output">Nothing to commit, working tree clean</div>
<div class="terminal-line">
<span class="prompt blinking-cursor">$</span>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-3xl mx-auto p-6 bg-white mt-10">
<!-- About Section -->
<div class="max-w-3xl mx-auto p-6 bg-black border border-green-500 mt-10 shadow-lg shadow-green-500/50">
<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 class="text-4xl matrix-glow mb-4">&gt; About</p>
<p class="mt-2 text-green-400">
I'm Ryan Kazokas, a Senior Software Engineer at Shopify working on the Core Inventory Team,
where I build solutions to help merchants manage their inventory at scale.
</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 class="mt-2 text-green-400">
Outside of work, I love tinkering with technology—I run my own Kubernetes cluster on my own
servers (KazCloud) where I host personal projects and experiment with new tech. I'm also an
avid video game collector, which led me to build TurboVault, a cataloging app for my collection.
</p>
<p class="mt-2 text-green-400">
Most importantly, I'm a husband to my wife Sam and a father to our four 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"
>
<!-- Socials Section -->
<div class="mt-10 flex sm:space-x-16 flex-col sm:flex-row justify-center items-center pb-10">
<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 href="https://github.com/ryankazokas" target="_blank" class="text-social-link">
<div class="text-4xl font-bold mb-4">[ GitHub ]</div>
</a>
<p class="mt-5">Check out my github contributions and work</p>
<p class="mt-5 text-green-400 text-center max-w-xs">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 href="https://www.linkedin.com/in/ryankazokas/" target="_blank" class="text-social-link">
<div class="text-4xl font-bold mb-4">[ LinkedIn ]</div>
</a>
<p class="mt-5">View my work history and achievements</p>
<p class="mt-5 text-green-400 text-center max-w-xs">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 href="mailto:ryan.kazokas@gmail.com" target="_blank" class="text-social-link">
<div class="text-4xl font-bold mb-4">[ Email ]</div>
</a>
<p class="mt-5">Contact me directly via email</p>
<p class="mt-5 text-green-400 text-center max-w-xs">Contact me directly via email</p>
</div>
</div>
</main>
</Layout>
<style>
.flip-image {
transform: scaleX(-1);
/* Terminal Styling */
.terminal-container {
padding: 0 20px;
}
.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%);
.terminal-window {
background: #000;
border: 2px solid #00ff41;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 255, 65, 0.4), inset 0 0 20px rgba(0, 255, 65, 0.05);
overflow: hidden;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.terminal-header {
background: linear-gradient(180deg, #001a00 0%, #000 100%);
border-bottom: 1px solid #00ff41;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 15px;
}
.terminal-buttons {
display: flex;
gap: 8px;
}
.terminal-button {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #00ff41;
}
.terminal-button.close {
background: #ff0000;
box-shadow: 0 0 5px #ff0000;
}
.terminal-button.minimize {
background: #ffff00;
box-shadow: 0 0 5px #ffff00;
}
.terminal-button.maximize {
background: #00ff00;
box-shadow: 0 0 5px #00ff00;
}
.terminal-title {
color: #00ff41;
font-size: 0.9rem;
font-weight: bold;
}
.terminal-body {
padding: 20px;
color: #00ff41;
font-size: 0.9rem;
line-height: 1.6;
min-height: 400px;
}
.terminal-line {
margin-top: 15px;
}
.terminal-line:first-child {
margin-top: 0;
}
.prompt {
color: #00ff41;
font-weight: bold;
margin-right: 8px;
}
.terminal-output {
color: #00cc33;
margin-left: 20px;
margin-top: 4px;
}
.blinking-cursor::after {
content: '▋';
animation: blink 1s step-end infinite;
margin-left: 4px;
}
@keyframes blink {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
/* Responsive terminal */
@media (max-width: 768px) {
.terminal-body {
font-size: 0.75rem;
padding: 15px;
min-height: 350px;
}
.terminal-output {
margin-left: 10px;
}
}
/* Text-based social links */
.text-social-link {
color: #00ff41;
text-decoration: none;
transition: all 0.3s ease;
display: block;
}
.text-social-link div {
transition: all 0.3s ease;
border: 2px solid #00ff41;
padding: 20px 30px;
border-radius: 8px;
background: rgba(0, 255, 65, 0.05);
}
.text-social-link:hover div {
background: rgba(0, 255, 65, 0.15);
box-shadow: 0 0 20px rgba(0, 255, 65, 0.5), inset 0 0 10px rgba(0, 255, 65, 0.1);
transform: translateY(-5px);
text-shadow: 0 0 10px rgba(0, 255, 65, 0.8);
}
.text-social-link:active div {
transform: translateY(-2px);
}
</style>

91
src/pages/projects.astro
View File

@@ -4,59 +4,102 @@ 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">
<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="p-6">
<h1 class="text-2xl">Shopify SDK</h1>
<p>
Project Link if applicable: <a
class="underline"
<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>
<p class="text-gray-300 leading-relaxed">
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
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="p-6">
<h1 class="text-2xl">Traverse TMS</h1>
<p>Project Link if applicable: N/A</p>
<p>
<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 services was used by and compliment from
drivers for Jimmy Buffett and Allen Touisant. Unfortunately, due to
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="p-6">
<h1 class="text-2xl">TurboVault</h1>
<p>
Project Link if applicable: <a
class="underline"
<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>
<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 oppurtunity to use my skills to solve my own problems.
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>

91
src/pages/resume.astro
View File

@@ -4,16 +4,16 @@ 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">
<div class="max-w-4xl mx-auto p-8 mt-10 mb-10 resume-container">
<header class="text-center mb-8">
<p class="text-lg text-gray-400">
<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">
<section class="mt-8">
<h2 class="text-2xl font-semibold border-b border-green-500/30 pb-2 text-white">About Me</h2>
<p class="mt-4 text-gray-300 leading-relaxed">
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,
@@ -21,29 +21,47 @@ import Layout from "../layouts/Layout.astro";
</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
<section class="mt-8">
<h2 class="text-2xl font-semibold border-b border-green-500/30 pb-2 text-white">Experience</h2>
<div class="mt-6">
<h3 class="text-xl font-medium text-white">
Senior Software Engineer - Shopify
</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>
<p class="text-gray-400 mt-1"><em>July 2024 - Present</em></p>
<ul class="list-disc list-inside mt-3 text-gray-300 space-y-2">
<li>
Collaborate with the product team to design scalable and highly
available solutions.
Engineer solutions for Shopify's inventory management system on the Core Inventory Team.
</li>
<li>
Design and build scalable features to enhance inventory tracking and management capabilities.
</li>
<li>
Collaborate across teams to integrate inventory systems with related platform services.
</li>
<li>Manage DevOps and SRE tasks.</li>
</ul>
</div>
<div class="mt-4">
<h3 class="text-xl font-medium">
<div class="mt-6">
<h3 class="text-xl font-medium text-white">
Principal Software Engineer - ChannelApe
</h3>
<p class="text-gray-400 mt-1"><em>August 2017 - July 2024</em></p>
<ul class="list-disc list-inside mt-3 text-gray-300 space-y-2">
<li>Developed and maintained core infrastructure and services.</li>
<li>
Collaborated with product teams to design scalable and highly
available solutions.
</li>
<li>Managed DevOps and SRE responsibilities.</li>
</ul>
</div>
<div class="mt-6">
<h3 class="text-xl font-medium text-white">
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">
<p class="text-gray-400 mt-1"><em>January 2015 - August 2017</em></p>
<ul class="list-disc list-inside mt-3 text-gray-300 space-y-2">
<li>
Built and maintained automated applications for Medicare
enrollment services.
@@ -53,29 +71,29 @@ import Layout from "../layouts/Layout.astro";
</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">
<section class="mt-8">
<h2 class="text-2xl font-semibold border-b border-green-500/30 pb-2 text-white">Skills</h2>
<ul class="list-disc list-inside mt-4 text-gray-300 space-y-2">
<li>
<strong>Programming:</strong> Node.js, TypeScript, Java, SQL, C#
<strong class="text-white">Programming:</strong> Node.js, TypeScript, Java, SQL, C#
</li>
<li>
<strong>Databases:</strong> PostgreSQL, MySQL, DynamoDB, MongoDB
<strong class="text-white">Databases:</strong> PostgreSQL, MySQL, DynamoDB, MongoDB
</li>
<li>
<strong>Cloud & Infrastructure:</strong> AWS Lambda, API Gateway, Docker,
<strong class="text-white">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>
<li><strong class="text-white">Testing:</strong> BDD, JUnit, Jest, Cucumber</li>
<li><strong class="text-white">Monitoring:</strong> Datadog, PagerDuty, Looker</li>
</ul>
</section>
<footer class="mt-6 text-center text-gray-600">
<footer class="mt-8 text-center text-gray-400">
<p>
Contact: <a href="mailto:ryan.kazokas@gmail.com" class="text-blue-500"
Contact: <a href="mailto:ryan.kazokas@gmail.com" class="text-green-400 hover:text-green-300 transition-colors"
>ryan.kazokas@gmail.com</a
> | <a href="https://ryankazokas.com" class="text-blue-500"
> | <a href="https://ryankazokas.com" class="text-green-400 hover:text-green-300 transition-colors"
>ryankazokas.com</a
>
</p>
@@ -83,3 +101,12 @@ import Layout from "../layouts/Layout.astro";
</div>
</main>
</Layout>
<style>
.resume-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);
}
</style>