feat: i18n user interface (#40306)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/helpers/AvatarRenderer.js

@@ -4,6 +4,7 @@ import { Image } from '@freecodecamp/react-bootstrap';
 import DefaultAvatar from '../../assets/icons/DefaultAvatar';
 import { defaultUserImage } from '../../../../config/misc';
 import { borderColorPicker } from '../helpers';
+import { useTranslation } from 'react-i18next';
 
 const propTypes = {
   isDonating: PropTypes.bool,
@@ -13,6 +14,7 @@ const propTypes = {
 };
 
 function AvatarRenderer({ picture, userName, isDonating, isTopContributor }) {
+  const { t } = useTranslation();
   let borderColor = borderColorPicker(isDonating, isTopContributor);
   let isPlaceHolderImage =
     /example.com|identicon.org/.test(picture) || picture === defaultUserImage;
@@ -23,7 +25,7 @@ function AvatarRenderer({ picture, userName, isDonating, isTopContributor }) {
         <DefaultAvatar className='avatar default-avatar' />
       ) : (
         <Image
-          alt={userName + "'s avatar"}
+          alt={t('profile.avatar', { username: userName })}
           className='avatar'
           responsive={true}
           src={picture}