feat: Add profile photo to About section (#1)

Adds Ryan's profile photo to the About section on the homepage.

## Changes
- Added `public/images/ryan.jpg`
- Circular avatar display above the About text
- Matrix-themed green glow border + hover effect (scale + enhanced glow)

Keeps the existing terminal aesthetic consistent.

Co-authored-by: Wendell2.0 <wendell@openclaw.ai>
Reviewed-on: #1

.astro/settings.json

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

.astro/types.d.ts

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

.gitignore

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

src/components/Nav.astro

@@ -1,7 +1,9 @@
-<div id="nav" class="flex justify-between p-5">
+<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"><a href="/">Ryan Kazokas</a></h1>
+  <h1 class="text-xl font-bold">
-  <div class="flex space-x-5">
+    <a href="/" class="matrix-glow hover:text-green-300 transition-colors">&gt; Ryan Kazokas</a>
-    <a href="/resume">Resume</a>
+  </h1>
-    <a href="/projects">Projects</a>
+  <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>

src/layouts/Layout.astro

@@ -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">
+    <footer class="bottom-0 w-full z-10 bg-black border-t border-green-500 text-green-500 p-4">
-      <p class="text-center">{new Date().getFullYear()} Ryan Kazokas</p>
+      <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;
+      background: #0d0d0d;
-      font-family: "Open Sans", sans-serif;
+      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>

src/pages/index.astro

@@ -4,78 +4,273 @@ import Layout from "../layouts/Layout.astro";
 
 <Layout title="Ryan Kazokas">
   <main>
-    <div class="flex">
+    <!-- Hero Section -->
-      <div class="flex justify-start items-center">
+    <div class="flex flex-col items-center justify-center min-h-[70vh] px-4">
-        <div class="flex-grow p-5 sm:text-right text-center z-50">
+      <h1 class="text-5xl md:text-7xl font-bold text-center matrix-glow mb-8 typing-text">
-          <h1 class="text-6xl bold underline-offset-0">Software Engineer</h1>
+        Hi! I'm Ryan, a software engineer.
-          <p class="text-3xl mt-4">Senior Full Stack Developer</p>
+      </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 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">
+    <!-- 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="text-4xl matrix-glow mb-4">&gt; About</p>
-        <p class="mt-2">
+        <div class="flex justify-center mb-6">
-          My name is Ryan Kazokas and I'm a software engineer. I currently work
+          <img
-          as a Senior Software Engineer at Shopify on the Core Inventory Team.
+            src="/images/ryan.jpg"
+            alt="Ryan Kazokas"
+            class="profile-photo"
+          />
+        </div>
+        <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">
+        <p class="mt-2 text-green-400">
-          In my spare time I do enjoy learning and trying new software
+          Outside of work, I love tinkering with technology—I run my own Kubernetes cluster on my own
-          technology to apply to things I am doing at work. Most importantly, I am a husband to my
+          servers (KazCloud) where I host personal projects and experiment with new tech. I'm also an
-          wife Sam, and a father to our kids, Auden, Cooper, Nolan, and Niko.
+          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">
+    <!-- Socials Section -->
-      <div class="flex flex-col p-12 text-center">
+    <div class="mt-10 flex sm:space-x-16 flex-col sm:flex-row justify-center items-center pb-10">
-        <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" class="text-social-link">
-        <a href="https://github.com/ryankazokas" target="_blank">
+          <div class="text-4xl font-bold mb-4">[ GitHub ]</div>
-          <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>
+        <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" class="text-social-link">
-        <a href="https://www.linkedin.com/in/ryankazokas/" target="_blank">
+          <div class="text-4xl font-bold mb-4">[ LinkedIn ]</div>
-          <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>
+        <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" class="text-social-link">
-        <a href="mailto:ryan.kazokas@gmail.com" target="_blank">
+          <div class="text-4xl font-bold mb-4">[ Email ]</div>
-          <img src="images/email.svg" alt="Github logo" class="h-48 w-48" />
         </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 {
+  /* Terminal Styling */
-    transform: scaleX(-1);
+  .terminal-container {
+    padding: 0 20px;
   }
-  .fade {
+
-    position: absolute;
+  .terminal-window {
-    right: 0;
+    background: #000;
-    top: 0;
+    border: 2px solid #00ff41;
-    bottom: 0;
+    border-radius: 8px;
-    width: 103%; /* Increase the width of the fade effect */
+    box-shadow: 0 0 20px rgba(0, 255, 65, 0.4), inset 0 0 20px rgba(0, 255, 65, 0.05);
-    background: linear-gradient(to right, white 20%, transparent 100%);
+    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;
+    }
+  }
+
+  /* Profile Photo */
+  .profile-photo {
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    border: 2px solid #00ff41;
+    box-shadow: 0 0 20px rgba(0, 255, 65, 0.4), 0 0 40px rgba(0, 255, 65, 0.1);
+    object-fit: cover;
+    transition: all 0.3s ease;
+  }
+
+  .profile-photo:hover {
+    box-shadow: 0 0 30px rgba(0, 255, 65, 0.6), 0 0 60px rgba(0, 255, 65, 0.2);
+    transform: scale(1.05);
+  }
+
+  /* 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>

src/pages/projects.astro

@@ -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="max-w-4xl mx-auto p-8 mt-10 mb-10 projects-container">
-      <div class="p-6">
+      <div class="mb-8">
-        <h2 class="text-2xl font-semibold border-b pb-2">Projects</h2>
+        <h2 class="text-3xl font-semibold border-b border-green-500/30 pb-3 text-white">Projects</h2>
-        <p class="text-md mt-2">
+        <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>
+      <div class="project-card featured">
-        <p>
+        <h3 class="text-2xl font-semibold text-white mb-3">KazCloud</h3>
-          Project Link if applicable: <a
+        <p class="text-gray-400 mb-3">Project Link: <span class="text-gray-400">Self-Hosted Infrastructure</span></p>
-            class="underline"
+        <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>
+      <div class="project-card">
-        <p>Project Link if applicable: N/A</p>
+        <h3 class="text-2xl font-semibold text-white mb-3">Traverse TMS</h3>
-        <p>
+        <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
+          to build out the system. The service was used by and complimented by
-          drivers for Jimmy Buffett and Allen Touisant. Unfortunately, due to
+          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>
+      <div class="project-card">
-        <p>
+        <h3 class="text-2xl font-semibold text-white mb-3">TurboVault</h3>
-          Project Link if applicable: <a
+        <p class="text-gray-400 mb-3">
-            class="underline"
+          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>

src/pages/resume.astro

@@ -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">
+    <div class="max-w-4xl mx-auto p-8 mt-10 mb-10 resume-container">
-      <header class="text-center">
+      <header class="text-center mb-8">
-        <p class="text-lg text-gray-600">
+        <p class="text-lg text-gray-400">
           <i>Software Engineer | DevOps | Cloud Infrastructure</i>
         </p>
       </header>
 
-      <section class="mt-6">
+      <section class="mt-8">
-        <h2 class="text-2xl font-semibold border-b pb-2">About Me</h2>
+        <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-700">
+        <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">
+      <section class="mt-8">
-        <h2 class="text-2xl font-semibold border-b pb-2">Experience</h2>
+        <h2 class="text-2xl font-semibold border-b border-green-500/30 pb-2 text-white">Experience</h2>
-        <div class="mt-4">
+        <div class="mt-6">
-          <h3 class="text-xl font-medium">
+          <h3 class="text-xl font-medium text-white">
-            Principal Software Engineer - ChannelApe
+            Senior Software Engineer - Shopify
           </h3>
-          <p class="text-gray-600"><em>August 2017 - Present</em></p>
+          <p class="text-gray-400 mt-1"><em>July 2024 - Present</em></p>
-          <ul class="list-disc list-inside mt-2 text-gray-700">
+          <ul class="list-disc list-inside mt-3 text-gray-300 space-y-2">
-            <li>Develop and maintain core infrastructure and services.</li>
             <li>
-              Collaborate with the product team to design scalable and highly
+              Engineer solutions for Shopify's inventory management system on the Core Inventory Team.
-              available solutions.
+            </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">
+        <div class="mt-6">
-          <h3 class="text-xl font-medium">
+          <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>
+          <p class="text-gray-400 mt-1"><em>January 2015 - August 2017</em></p>
-          <ul class="list-disc list-inside mt-2 text-gray-700">
+          <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">
+      <section class="mt-8">
-        <h2 class="text-2xl font-semibold border-b pb-2">Skills</h2>
+        <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-700">
+        <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 class="text-white">Testing:</strong> BDD, JUnit, Jest, Cucumber</li>
-          <li><strong>Monitoring:</strong> Datadog, PagerDuty, Looker</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>