fix: add identicon natively (#36633)

client/src/components/profile/components/Camper.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Col, Row, Image } from '@freecodecamp/react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAward } from '@fortawesome/free-solid-svg-icons';
+import Identicon from 'react-identicons';
 
 import SocialIcons from './SocialIcons';
 
@@ -61,16 +62,29 @@ function Camper({
   twitter,
   website
 }) {
+  // A lot of the user-profiles are still using the defunct service.
+  const avatar = /example.com/.test(picture) ? (
+    <Identicon
+      bg={'#006400'}
+      count={5}
+      fg={'#FCB900'}
+      padding={5}
+      size={256}
+      string={username}
+    />
+  ) : (
+    <Image
+      alt={username + "'s avatar"}
+      className='avatar'
+      responsive={true}
+      src={picture}
+    />
+  );
   return (
     <div>
       <Row>
         <Col className='avatar-container' xs={12}>
-          <Image
-            alt={username + "'s avatar"}
-            className='avatar'
-            responsive={true}
-            src={picture}
-          />
+          {avatar}
         </Col>
       </Row>
       <SocialIcons