Preload font, lazy load project images and fix accessibility

kosserin · Feb 4, 2025 · fac9098 · fac9098
1 parent 8c45256
commit fac9098
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 4 deletions.
diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,7 @@
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="preload">
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/src/components/ExperienceItem/ExperienceItem.jsx b/src/components/ExperienceItem/ExperienceItem.jsx
@@ -29,7 +29,7 @@ const StyledHeading = styled.div`
   }
 `;
 
-const StyledTime = styled.h6`
+const StyledTime = styled.h5`
   @media screen and (min-width: 680px) {
     min-width: 170px;
   }
@@ -61,7 +61,7 @@ const ExperienceItem = ({
             </h3>
             <LinkIcon />
           </StyledHeading>
-          <h3 className="style-h4 color-light mb-3">{experience.companyName}</h3>
+          <h4 className="style-h4 color-light mb-3">{experience.companyName}</h4>
           <p className="style-small color-light mb-3">
             {experience.description}
           </p>

diff --git a/src/components/Intro/GithubLogo.jsx b/src/components/Intro/GithubLogo.jsx
@@ -13,6 +13,7 @@ export default function Logo() {
       href="https://github.com/kosserin"
       target="_blank"
       rel="noreferrer"
+      aria-label="Link to GitHub profile"
     >
       <svg
         width="28"

diff --git a/src/components/Intro/LinkedinLogo.jsx b/src/components/Intro/LinkedinLogo.jsx
@@ -12,6 +12,7 @@ export default function Logo() {
       href="https://www.linkedin.com/in/kosserin/"
       target="_blank"
       rel="noreferrer"
+      aria-label="Link to LinkedIn profile"
     >
       <svg
         width="28"

diff --git a/src/components/ProjectItem/ProjectItem.jsx b/src/components/ProjectItem/ProjectItem.jsx
@@ -76,7 +76,7 @@ const ProjectItem = ({
           <p className="style-small color-light mb-3">{project.description}</p>
           <Technologies technologies={project.technologies} />
         </StyledProjectDetails>
-        <StyledProjectImage src={project.imageSource} alt="" />
+        <StyledProjectImage src={project.imageSource} alt="" loading="lazy" />
       </StyledContainer>
     </HoverWrapper>
   );