Merge pull request #599 from CalCorbin/a11y-home

Improve a11y on Landing component
CalCorbin · Nov 1, 2024 · ea16a12 · ea16a12
2 parents 84f6069 + bdf8938
commit ea16a12
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 39 deletions.
diff --git a/TASKS.MD b/TASKS.MD
@@ -9,3 +9,4 @@
 - Fix fetch-mock dependency weirdness
 - Figure out the following warning from Next.js:
   -  `⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload`
+- Convert `master` branch to `main`
diff --git a/src/components/Landing/Landing.module.css b/src/components/Landing/Landing.module.css
@@ -9,6 +9,57 @@
   text-align: center;
 }
 
+.landing h1 {
+  cursor: default;
+  position: relative;
+  padding: 1rem;
+  font-weight: normal;
+  font-size: 4rem;
+  margin: 0;
+  transition: all 1s;
+  &:after, &:before {
+    content: " ";
+    width: 2rem;
+    height: 0.5rem;
+    position: absolute;
+    border: 0px solid #fff;
+    transition: all 1.5s;
+  }
+  &:after {
+    top: -0.4rem;
+    left: -0.4rem;
+    border-top: .2rem solid black;
+    border-left: .2rem solid black;
+  }
+  &:before {
+    bottom: -0.4rem;
+    right: -0.4rem;
+    border-bottom: .8rem solid black;
+    border-right: .8rem solid black;
+  }
+  &:hover {
+    border-top-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    &:before, &:after{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.landing h2 {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+.landing hr {
+  border: none;
+  height: .1rem;
+  background-color: #000;
+  width: 5rem;
+}
+
 .header {
   display: flex;
   flex-direction: column;
@@ -17,46 +68,29 @@
   padding: 1rem;
 }
 
-.myName {
-  font-size: 4rem;
-}
-
 .jobTitle {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
-
 .social {
   display: grid;
   grid-template-columns: repeat(3, 2fr);
   align-items: center;
   justify-content: center;
 }
 
-.socialIcon {
+.social a {
   margin: .5rem .5rem 2rem;
   color: black;
   transition: transform 0.3s ease, color 0.3s ease;
 }
 
-.socialIcon:hover {
+.social a:hover {
   transform: scale(1.2);
   color: #1e90ff;
 }
 
-.landing hr {
-  border: none;
-  height: .1rem;
-  background-color: #000;
-  width: 5rem;
-}
-
-.projectHeader {
-  margin-bottom: 0;
-  font-weight: normal;
-}
-
 .projectsContainer {
   display: grid;
   grid-template-columns: 1fr;

diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx
@@ -8,47 +8,34 @@ import styles from './Landing.module.css';
 
 const Landing = () => (
   <div data-testid="landing-page" className={styles.landing}>
-    <div data-testid="header-title" className={styles.header}>
-      <div className={styles.myName}>cal corbin</div>
+    <header data-testid="header-title" className={styles.header}>
+      <h1>cal corbin</h1>
       <div data-testid="about-me" className={styles.jobTitle}>
         software engineer
       </div>
       <div className={styles.social}>
         <a data-testid="cal-email" href="mailto:[email protected]">
-          <FontAwesomeIcon
-            size="2x"
-            icon={faEnvelope}
-            className={styles.socialIcon}
-          />
+          <FontAwesomeIcon size="2x" icon={faEnvelope} />
         </a>
         <a
           data-testid="cal-linkedin"
           target="_self"
           rel="noopener noreferrer"
           href="https://www.linkedin.com/in/calcorbin/"
         >
-          <FontAwesomeIcon
-            size="2x"
-            icon={faLinkedin}
-            className={styles.socialIcon}
-          />
+          <FontAwesomeIcon size="2x" icon={faLinkedin} />
         </a>
         <a
           data-testid="cal-github"
           target="_self"
           rel="noopener noreferrer"
           href="https://github.com/CalCorbin"
         >
-          <FontAwesomeIcon
-            size="2x"
-            icon={faGithub}
-            className={styles.socialIcon}
-          />
+          <FontAwesomeIcon size="2x" icon={faGithub} />
         </a>
       </div>
-    </div>
-
-    <h2 className={styles.projectHeader}>projects</h2>
+    </header>
+    <h2>projects</h2>
     <div data-testid="projects-section" className={styles.projectsContainer}>
       {PROJECTS.map((project) => (
         <Card key={project.id} data={project} />