From 678a16b3fa67bacb7b227b9e979b38d5b6aa81c9 Mon Sep 17 00:00:00 2001
From: skidoodle <skidoodle>
Date: Mon, 15 Aug 2022 10:49:44 +0200
Subject: [PATCH] Lighthouse fixes

---
 components/data/socials.ts | 6 ++++++
 pages/index.tsx            | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/data/socials.ts b/components/data/socials.ts
index bf503ee..1ce4fc7 100644
--- a/components/data/socials.ts
+++ b/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,
diff --git a/pages/index.tsx b/pages/index.tsx
index fc9edf5..9fdab8e 100644
--- a/pages/index.tsx
+++ b/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>