feat: profile image on home

Author: FireIsGood

src/pages/about.astro

@@ -14,7 +14,7 @@ import graphicDesign from "@/images/graphic-design.png";
     <h1>About</h1>
     <section class="self-intro grid">
       <div class="image-container">
-        <Image src={profileImage} width={160} alt="" loading="lazy" />
+        <Image src={profileImage} width={160} alt="" loading="lazy" transition:name="profile-image" />
       </div>
       <ul>
         <li><strong>Name:</strong> Fire (is good)</li>
@@ -118,12 +118,11 @@ import graphicDesign from "@/images/graphic-design.png";
   }
 
   .image-container {
-    border-radius: var(--pico-border-radius);
-    box-shadow: var(--shadow-outset);
     width: fit-content;
     justify-self: center;
 
     & > img {
+      box-shadow: var(--shadow-outset);
       height: 100%;
     }
   }

src/pages/index.astro

@@ -6,14 +6,17 @@ import Ending from "@/components/Ending.astro";
 import WebsiteStructuredData from "@/components/WebsiteStructuredData.astro";
 import { Image } from "astro:assets";
 
-import heroImage from "@/images/fireimage.gif";
+import heroImage from "@/images/profile-bg-med.png";
 ---
 
 <Layout title="FireIsWebsite">
   <WebsiteStructuredData slot="structured-data" />
   <section class="hero">
     <div class="hero-content">
-      <Image src={heroImage} width={400} alt="" loading="eager" class="hero-image" />
+      <div class="hero-image-stack">
+        <Image src={heroImage} width={400} alt="" loading="eager" class="hero-image" transition:name="profile-image" />
+        <div class="hero-image-backer"></div>
+      </div>
       <div class="hero-text">
         <h1>FireIsGood</h1>
         <p>How did you get here?</p>
@@ -90,11 +93,24 @@ import heroImage from "@/images/fireimage.gif";
     justify-content: center;
   }
 
-  .hero-image {
+  .hero-image-stack {
     order: 1;
-    margin: 0;
     max-width: 35%;
+    display: grid;
+  }
+
+  .hero-image {
     box-shadow: var(--shadow-outset);
+    grid-area: 1/2;
+  }
+  .hero-image-backer {
+    background: var(--pico-secondary);
+    border-radius: var(--pico-border-radius);
+    grid-area: 1/2;
+    position: relative;
+    z-index: -1;
+    box-shadow: var(--shadow-outset);
+    animation: hero 60s linear infinite;
   }
 
   .buttons {
@@ -131,4 +147,13 @@ import heroImage from "@/images/fireimage.gif";
       margin-bottom: 1.5rem;
     }
   }
+
+  @keyframes hero {
+    0% {
+      rotate: 0.025turn;
+    }
+    100% {
+      rotate: 1.025turn;
+    }
+  }
 </style>