feat: add profile photo to about section

- Added Ryan's photo to public/images/ryan.jpg
- Displayed as circular avatar in the About section with Matrix-themed green glow border
- Hover effect with scale and enhanced glow
This commit is contained in:
Wendell2.0
2026-03-22 17:30:14 +00:00
parent 074b42c4c0
commit 0c89c5e40a
2 changed files with 23 additions and 0 deletions

BIN
public/images/ryan.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

View File

@@ -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;