Lighthouse fixes

components/data/socials.ts

@@ -3,6 +3,7 @@ import { FaDiscord, FaEnvelope, FaGithub, FaInstagram, FaSteam } from 'react-ico
 
 type Socials = {
     id: number,
+    name: string
     ref: string
     icon: IconType,
     copyValue?: boolean,
@@ -11,27 +12,32 @@ type Socials = {
 export const socials: Array<Socials> = [
     {
         id: 1,
+        name: 'Github',
         ref: 'https://github.com/skidoodle',
         icon: FaGithub,
     },
     {
         id: 2,
+        name: 'Steam',
         ref: 'https://steamcommunity.com/id/_albert',
         icon: FaSteam,
     },
     {
         id: 3,
+        name: 'Email',
         ref: 'contact@albert.lol',
         icon: FaEnvelope,
         copyValue: true,
     },
     {
         id: 4,
+        name: 'Instagram',
         ref: 'https://www.instagram.com/albertadam_/',
         icon: FaInstagram,
     },
     {
         id: 5,
+        name: 'Discord',
         ref: 'albert#8838',
         icon: FaDiscord,
         copyValue: true,

pages/index.tsx

@@ -21,7 +21,7 @@ export default function() {
         <FadeIn>
             <div className='px-8 w-11/12 m-auto rounded-lg max-w-4xl'>
                 <div className='flex flex-col justify-center items-center mt-28 md:mt-36'>
-                    <Image src={profilePic} className="rounded-full text-center" height={150} width={150}/>
+                    <Image src={profilePic} alt='Profile Picture' className="rounded-full text-center" height={150} width={150}/>
 
                     <h1 className='text-4xl font-bold mt-1'>albert</h1>
 
@@ -50,7 +50,7 @@ export default function() {
 
                 <div className='flex justify-between items-center text-3xl mt-11 md:mt-16 max-w-sm m-auto'>
                     { socials.map(social => (
-                        <Icon key={ social.id } reference={ social.ref } copyValue={ social.copyValue }>{ React.createElement(social.icon) }</Icon>
+                        <Icon key={ social.id } aria-label={ social.name } reference={ social.ref } copyValue={ social.copyValue }>{ React.createElement(social.icon) }</Icon>
                     ))}
                 </div>
             </div>