Style updates: gradient text and profile photo improvements

- Apply indigo-magenta gradient to "Principal Solutions Architect" text
  in hero section, about intro, and profile card
- Replace solid border on profile photo with soft gradient glow
- Adjust profile photo position to show more hair (object-position: 20%)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: shayons

src/components/AboutSection.astro

@@ -120,8 +120,11 @@ const expertise: ExpertiseItem[] = [
   }
 
   .about-intro strong {
-    color: var(--color-accent);
     font-weight: 600;
+    background: var(--gradient-text);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
   }
 
   .about-text p {
@@ -218,7 +221,8 @@ const expertise: ExpertiseItem[] = [
     height: 100px;
     border-radius: 50%;
     object-fit: cover;
-    border: 3px solid var(--color-accent);
+    object-position: center 20%;
+    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3), 0 0 40px rgba(192, 38, 211, 0.15);
   }
 
   .profile-info {
@@ -233,9 +237,12 @@ const expertise: ExpertiseItem[] = [
   }
 
   .profile-role {
-    color: var(--color-accent);
     font-weight: 500;
     font-size: 0.9375rem;
+    background: var(--gradient-text);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
   }
 
   .profile-company {

src/components/Hero.astro

@@ -98,7 +98,10 @@ const { name, title, tagline } = Astro.props;
   .hero-title {
     font-family: var(--font-mono);
     font-size: clamp(1rem, 2vw, 1.25rem);
-    color: var(--color-accent);
+    background: var(--gradient-text);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
     margin-bottom: var(--space-lg);
   }