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.

app/register/page.tsx

@@ -4,6 +4,7 @@ import { useState, useRef, type ChangeEvent, type FormEvent } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import Navigation from "@/components/Navigation";
+import Avatar from "@/components/Avatar";
 
 export default function RegisterPage() {
   const router = useRouter();
@@ -321,23 +322,13 @@ export default function RegisterPage() {
                   <div className="flex flex-col items-center gap-4">
                     {/* Preview */}
                     <div className="relative">
-                      <div className="w-24 h-24 rounded-full border-4 border-pixel-gold/50 overflow-hidden bg-gray-900 flex items-center justify-center">
-                        {formData.avatar ? (
-                          <img
-                            src={formData.avatar}
-                            alt="Avatar"
-                            className="w-full h-full object-cover"
-                          />
-                        ) : formData.username ? (
-                          <span className="text-pixel-gold text-3xl font-bold">
-                            {formData.username.charAt(0).toUpperCase()}
-                          </span>
-                        ) : (
-                          <span className="text-pixel-gold text-3xl font-bold">
-                            ?
-                          </span>
-                        )}
-                      </div>
+                      <Avatar
+                        src={formData.avatar}
+                        username={formData.username || "User"}
+                        size="xl"
+                        borderClassName="border-4 border-pixel-gold/50"
+                        fallbackText={formData.username ? undefined : "?"}
+                      />
                       {uploadingAvatar && (
                         <div className="absolute inset-0 bg-black/60 flex items-center justify-center rounded-full">
                           <div className="text-pixel-gold text-xs">