Enhance image upload and background management: Update Docker configuration to create a dedicated backgrounds directory for uploaded images, modify API routes to handle background images specifically, and improve README documentation to reflect these changes. Additionally, refactor components to utilize the new Avatar component for consistent avatar rendering across the application.

components/Leaderboard.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import Avatar from "./Avatar";
 
 interface LeaderboardEntry {
   rank: number;
@@ -160,21 +161,12 @@ export default function Leaderboard() {
 
               {/* Avatar and Class */}
               <div className="flex items-center gap-6 mb-6">
-                {selectedEntry.avatar ? (
-                  <div className="w-24 h-24 rounded-full border-4 border-pixel-gold/50 overflow-hidden">
-                    <img
-                      src={selectedEntry.avatar}
-                      alt={selectedEntry.username}
-                      className="w-full h-full object-cover"
-                    />
-                  </div>
-                ) : (
-                  <div className="w-24 h-24 rounded-full border-4 border-pixel-gold/50 bg-gray-900 flex items-center justify-center">
-                    <span className="text-pixel-gold text-4xl font-bold">
-                      {selectedEntry.username.charAt(0).toUpperCase()}
-                    </span>
-                  </div>
-                )}
+                <Avatar
+                  src={selectedEntry.avatar}
+                  username={selectedEntry.username}
+                  size="xl"
+                  borderClassName="border-4 border-pixel-gold/50"
+                />
                 <div>
                   <div className="text-xs text-gray-400 uppercase tracking-widest mb-2">
                     Rank #{selectedEntry.rank}