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:
BIN
public/images/ryan.jpg
Normal file
BIN
public/images/ryan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
@@ -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="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">
|
<div class="mt-8 flex flex-col p-12 text-left w-full justify-center">
|
||||||
<p class="text-4xl matrix-glow mb-4">> About</p>
|
<p class="text-4xl matrix-glow mb-4">> 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">
|
<p class="mt-2 text-green-400">
|
||||||
I'm Ryan Kazokas, a Senior Software Engineer at Shopify working on the Core Inventory Team,
|
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.
|
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-based social links */
|
||||||
.text-social-link {
|
.text-social-link {
|
||||||
color: #00ff41;
|
color: #00ff41;
|
||||||
|
|||||||
Reference in New Issue
Block a user