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

src/pages/index.astro

@@ -70,6 +70,13 @@ import Layout from "../layouts/Layout.astro";
     <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 matrix-glow mb-4">&gt; About</p>
+        <div class="flex justify-center mb-6">
+          <img
+            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.
@@ -224,6 +231,22 @@ import Layout from "../layouts/Layout.astro";
     }
   }
 
+  /* 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;