improved lighthouse score

src/components/BaseLayout.js

@@ -30,7 +30,7 @@ export default function BaseLayout() {
             </Grid>
             <Grid item>
                <Box component={'footer'} display={'flex'} flexDirection={'column'} alignItems={'center'}
-                    py={'1.5rem'} sx={{opacity: 0.4}} width={'100%'}>
+                    py={'1.5rem'} sx={{opacity: 0.7}} width={'100%'}>
                   <p>template created with &hearts; by <a href={'https://paytonpierce.dev'}>Payton Pierce</a></p>
                   <p>&copy; 2022</p>
                </Box>

src/components/Navbar.js

@@ -38,15 +38,18 @@ export default function Navbar({darkMode, handleClick}) {
             <Box component={'ul'} display={'flex'} justifyContent={'center'} alignItems={'center'}
                  gap={{xs: '2rem', md: '8rem'}}
                  textTransform={'lowercase'} fontSize={'1rem'}>
-                {links.map(link => (
-                    <Link to={link.to} onClick={() => setActive(link.active)}>
-                        <Box component={'li'} className={(link.active === active && !link.type) && Style.active} sx={{borderImageSource: info.gradient }}>
+                {links.map((link, index) => (
+                    <Box key={index} component={'li'} className={(link.active === active && !link.type) && Style.active}
+                         sx={{borderImageSource: info.gradient}}>
+                        <Link to={link.to} onClick={() => setActive(link.active)}>
                             {!link.type && <p style={{paddingBottom: '0.5rem'}}>{link.name}</p>}
                             {link.type && <h1>{link.name}</h1>}
-                        </Box>
-                    </Link>
+                        </Link>
+                    </Box>
                 ))}
-                <Toggler darkMode={darkMode} handleClick={handleClick}/>
+                <li>
+                    <Toggler darkMode={darkMode} handleClick={handleClick}/>
+                </li>
             </Box>
         </Box>
     )

src/components/about/About.js

@@ -27,11 +27,11 @@ export default function About() {
                 className={Style.green}>(main)</span> $</span> ls</p>
             <p style={{color: info.baseColor}}> Proficient With</p>
             <ul className={Style.skills}>
-                {info.skills.proficientWith.map(proficiency => <li>{proficiency}</li>)}
+                {info.skills.proficientWith.map((proficiency, index) => <li key={index}>{proficiency}</li>)}
             </ul>
             <p style={{color: info.baseColor}}> Exposed To</p>
             <ul className={Style.skills}>
-                {info.skills.exposedTo.map(skill => <li>{skill}</li>)}
+                {info.skills.exposedTo.map((skill, index) => <li key={index}>{skill}</li>)}
             </ul>
         </>;
     }
@@ -43,8 +43,8 @@ export default function About() {
             <p><span style={{color: info.baseColor}}>hobbies/interests <span
                 className={Style.green}>(main)</span> $</span> ls</p>
             <ul>
-                {info.hobbies.map(hobby => (
-                    <li><Box component={'span'} mr={'1rem'}>{hobby.emoji}</Box>{hobby.label}</li>
+                {info.hobbies.map((hobby, index) => (
+                    <li key={index}><Box component={'span'} mr={'1rem'}>{hobby.emoji}</Box>{hobby.label}</li>
                 ))}
             </ul>
         </>;

src/components/home/Home.js

@@ -12,21 +12,21 @@ export default function Home() {
    return (
       <Box component={'main'} display={'flex'} flexDirection={{xs: 'column', md: 'row'}} alignItems={'center'}
            justifyContent={'center'} minHeight={'calc(100vh - 175px)'}>
-         <Box className={classNames(Style.avatar, Style.shadowed)} style={{background: info.gradient}} component={'img'} src={me} width={{xs: '35vh', md: '40vh'}}
+         <Box className={classNames(Style.avatar, Style.shadowed)} alt={'image of developer'} style={{background: info.gradient}} component={'img'} src={me} width={{xs: '35vh', md: '40vh'}}
               height={{xs: '35vh', md: '40vh'}}
               borderRadius={'50%'} p={'0.75rem'} mb={{xs: '1rem', sm: 0}} mr={{xs: 0, md: '2rem'}}/>
          <Box>
-            <h1>Hi, I'm <span style={{background: info.gradient, webkitBackgroundClip: 'text', webkitTextFillColor: 'transparent'}}>{info.firstName}</span><span className={Style.hand}>🤚</span>
+            <h1>Hi, I'm <span style={{background: info.gradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'}}>{info.firstName}</span><span className={Style.hand}>🤚</span>
             </h1>
             <h2>I'm {info.position}.</h2>
             <Box component={'ul'} p={'0.8rem'}>
-               {info.miniBio.map(bio => (
-                  <EmojiBullet emoji={bio.emoji} text={bio.text}/>
+               {info.miniBio.map((bio, index) => (
+                  <EmojiBullet key={index} emoji={bio.emoji} text={bio.text}/>
                ))}
             </Box>
             <Box display={'flex'} gap={'1.5rem'} justifyContent={'center'} fontSize={{xs: '2rem', md: '2.5rem'}}>
-               {info.socials.map(social => (
-                  <SocialIcon link={social.link} icon={social.icon} />
+               {info.socials.map((social, index) => (
+                  <SocialIcon key={index} link={social.link} icon={social.icon} label={social.label} />
                ))}
             </Box>
          </Box>

src/components/home/SocialIcon.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
 function SocialIcon(props) {
-    const {link, icon} = props;
+    const {link, icon, label} = props;
     return (
-        <a target="_blank"
+        <a target="_blank" aria-label={label}
            rel="noopener noreferrer" href={link}>
             <i className={icon} aria-hidden="true"/>
         </a>

src/components/portfolio/Portfolio.js

@@ -7,8 +7,8 @@ export default function Portfolio() {
     return (
         <Box>
             <Grid container display={'flex'} justifyContent={'center'}>
-                {info.portfolio.map(project => (
-                   <Grid item xs={12} md={4}>
+                {info.portfolio.map((project, index) => (
+                   <Grid item xs={12} md={6} key={index}>
                        <PortfolioBlock image={project.image} live={project.live} source={project.source} title={project.title} />
                    </Grid>
                 ))}

src/info/Info.js

@@ -51,23 +51,28 @@ export const info = {
     socials: [
         {
             link: "https://facebook.com",
-            icon: 'fa fa-facebook'
+            icon: 'fa fa-facebook',
+            label: 'facebook'
         },
         {
             link: "https://instagram.com",
-            icon: 'fa fa-instagram'
+            icon: 'fa fa-instagram',
+            label: 'instagram'
         },
         {
             link: "https://github.com",
-            icon: "fa fa-github"
+            icon: "fa fa-github",
+            label: 'github'
         },
         {
             link: "https://linkedin.com",
-            icon: "fa fa-linkedin"
+            icon: "fa fa-linkedin",
+            label: 'linkedin'
         },
         {
             link: "https://twitter.com",
-            icon: "fa fa-twitter"
+            icon: "fa fa-twitter",
+            label: 'twitter'
         }
 // Feel free to remove any of these that you don't have. I'll write an FAQ on how to add new ones later, let me know if you have a request for an icon!
 // Just change the links so that they lead to your social profiles.