Update Avatar component in StyleGuidePage: Modify Avatar usage to handle null image source, ensuring fallback functionality works correctly. Clean up ProfileForm by removing unused health and experience percentage calculations for improved code clarity.

app/admin/style-guide/page.tsx

@@ -377,7 +377,7 @@ export default function StyleGuidePage() {
                 <h3 className="text-lg text-gray-300 mb-3">
                   Sans image (fallback)
                 </h3>
-                <Avatar username="John Doe" size="lg" />
+                <Avatar src={null} username="John Doe" size="lg" />
               </div>
             </div>
           </Card>

components/ProfileForm.tsx

@@ -159,16 +159,6 @@ export default function ProfileForm({
     });
   };
 
-  const hpPercentage = (profile.hp / profile.maxHp) * 100;
-  const xpPercentage = (profile.xp / profile.maxXp) * 100;
-
-  const hpColor =
-    hpPercentage > 60
-      ? "from-green-600 to-green-700"
-      : hpPercentage > 30
-        ? "from-yellow-600 to-orange-700"
-        : "from-red-700 to-red-900";
-
   return (
     <BackgroundSection backgroundImage={backgroundImage}>
       <div className="w-full max-w-4xl mx-auto px-8">