repo initialization

src/components/details-card/index.tsx

@@ -8,19 +8,24 @@ import {
   SanitizedSocial,
 } from '../../interfaces/sanitized-config';
 import { skeleton } from '../../utils';
-import { SocialIcon } from 'react-social-icons'
 
 type Props = {
   profile: Profile | null;
   loading: boolean;
   social: SanitizedSocial;
   github: SanitizedGithub;
 };
-
-const Scholar = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="60px" height="60px"><path fill="#1e88e5" d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z" /><path fill="#1565c0" d="M35,16.592v-3.878L37,11H27l0.917,1.833c-1.236,0-2.265,0-2.265,0S19.095,13,19.095,18.748	c0,5.752,5.732,5.088,5.732,5.088s0,0.865,0,1.453c0,0.594,0.77,0.391,0.864,1.583c-0.388,0-7.964-0.208-7.964,4.998	s6.679,4.959,6.679,4.959s7.722,0.365,7.722-6.104c0-3.871-4.405-5.121-4.405-6.686c0-1.563,3.319-2.012,3.319-5.684	c0-0.823-0.028-1.524-0.149-2.12L34,13.571v3.02c-0.581,0.207-1,0.756-1,1.408v4.5c0,0.829,0.672,1.5,1.5,1.5s1.5-0.671,1.5-1.5V18	C36,17.348,35.581,16.799,35,16.592z M30.047,31.169c0.131,2.024-1.929,3.811-4.603,3.998c-2.671,0.188-4.946-1.295-5.077-3.316	c-0.133-2.016,1.927-3.805,4.6-3.996C27.641,27.667,29.914,29.152,30.047,31.169z M26.109,22.453	c-1.592,0.451-3.375-1.062-3.982-3.367c-0.604-2.312,0.195-4.543,1.786-4.992c1.593-0.453,3.374,1.059,3.981,3.367	C28.499,19.77,27.702,22.004,26.109,22.453z" /><path fill="#e8eaf6" d="M34,16.592V12c0-0.051-0.015-0.097-0.029-0.143L35,11H21l-9,8h5.383	c0.174,5.466,5.715,4.836,5.715,4.836s0,0.865,0,1.453c0,0.594,0.771,0.391,0.865,1.583c-0.388,0-7.964-0.208-7.964,4.998	s6.679,4.959,6.679,4.959s7.721,0.365,7.721-6.104c0-3.871-4.404-5.121-4.404-6.686c0-1.563,3.318-2.012,3.318-5.684	c0-0.971-0.047-1.763-0.232-2.422L33,12.667v3.925c-0.581,0.207-1,0.756-1,1.408v4.5c0,0.829,0.672,1.5,1.5,1.5s1.5-0.671,1.5-1.5	V18C35,17.348,34.581,16.799,34,16.592z M28.319,31.169c0.131,2.024-1.928,3.811-4.602,3.998c-2.671,0.188-4.946-1.295-5.077-3.316	c-0.133-2.016,1.927-3.805,4.599-3.996C25.914,27.667,28.187,29.152,28.319,31.169z M24.38,22.453	c-1.591,0.451-3.373-1.062-3.981-3.367c-0.604-2.312,0.194-4.543,1.785-4.992c1.593-0.453,3.374,1.059,3.982,3.367	C26.77,19.77,25.973,22.004,24.38,22.453z" /></svg>)
-}
+import {
+  faLinkedinIn,
+  faGoogleScholar,
+  faGithub,
+  faXTwitter,
+  faInstagram,
+  faReadme,
+  faUpwork,
+  faWpbeginner
+} from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const Gmail = () => {
   return (
@@ -40,6 +45,7 @@ const getFormattedMastodonValue = (
   }
 };
 
+
 const ListItem: React.FC<{
   icon: React.ReactNode;
   title: React.ReactNode;
@@ -106,44 +112,44 @@ const DetailsCard = ({ profile, loading, social, github }: Props) => {
               <div className="grid grid-cols-1 lg:grid-cols-6 gap-0 rounded-box">
 
                 <ListItem
-                  icon={<SocialIcon iconSize={34} url="https://github.com" />}
+                  icon={<FontAwesomeIcon icon={faGithub} size="4x" style={{ color: 'black' }}/>}
                   title=""
                   value=""
                   link={`https://github.com/${github.username}`}
                 />
                 <ListItem
-                  icon={<Scholar />}
+                  icon={<FontAwesomeIcon icon={faGoogleScholar} size="4x" style={{ color: '#0a66c2' }}/>}
                   title=""
                   value=""
                   link={`https://scholar.google.com/citations?user=${social.scholar}&hl=en`}
                 />
                 {social?.twitter && (
                   <ListItem
-                    icon={<SocialIcon iconSize={34} url="https://x.com" />}
+                    icon={<FontAwesomeIcon icon={faXTwitter} size="4x" style={{ color: 'black' }} />}
                     title=""
                     value=""
                     link={`https://twitter.com/${social.twitter}`}
                   />
                 )}
                 {social?.linkedin && (
                   <ListItem
-                    icon={<SocialIcon iconSize={34} url="https://linkedin.com" />}
+                    icon={<FontAwesomeIcon icon={faLinkedinIn} size="4x" style={{ color: '#0a66c2' }} />}
                     title=""
                     value=""
                     link={`https://www.linkedin.com/in/${social.linkedin}`}
                   />
                 )}
                 {social?.instagram && (
                   <ListItem
-                    icon={<SocialIcon iconSize={34} url="https://instagram.com" />}
+                    icon={<FontAwesomeIcon icon={faInstagram} size="4x" style={{ color: '#e57b1d' }} />}
                     title=""
                     value=""
                     link={`https://www.instagram.com/${social.instagram}`}
                   />
                 )}
                 {social?.website && (
                   <ListItem
-                    icon={<FaGlobe iconSize={20} />}
+                    icon={<FontAwesomeIcon icon={faReadme} size="4x" style={{ color: '#e57b1d' }} />}
                     title="Website:"
                     value={social.website
                       .replace('https://', '')