Fix homepage hero heading markup

index.html

@@ -115,13 +115,14 @@
     <div class="hero-shell">
       <div class="hero-shell__shine"></div>
       <img src="https://avatars.githubusercontent.com/u/48144618" class="profile" alt="Braeden Sowinski profile photo">
-      <div id="main-wrapper" class="svg-wrapper">
-        <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
-          <rect x="0" y="0" class="shape" height="60" width="320" />
-          <h2 style="margin-top: 16pt;" class="name">Braeden Sowinski</h2>
-        </svg>
+      <div class="hero-nameplate">
+        <div id="main-wrapper" class="svg-wrapper" aria-hidden="true">
+          <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
+            <rect x="0" y="0" class="shape" height="60" width="320" />
+          </svg>
+        </div>
+        <h1 class="name">Braeden Sowinski</h1>
       </div>
-      <h2 style="margin-top: 2pt;" class="mobile-name">Braeden Sowinski</h2>
 
       <p class="des hero-description">
         Software Engineer & Systems Admin | CST Student @ BCIT

public/css/style.css

@@ -249,10 +249,18 @@ ul {
   position: absolute;
 }
 
+.hero-nameplate {
+  position: relative;
+  width: 320pt;
+  height: 64pt;
+  margin: 0 auto;
+}
+
 .svg-wrapper {
   margin: 0 auto;
   width: 320pt;
-  position: relative;
+  position: absolute;
+  inset: 0;
   height: 64pt;
   overflow-y: hidden;
 }
@@ -277,13 +285,16 @@ ul {
   transition: 0.8s;
   font-size: 30px;
   font-weight: 900;
-  margin-bottom: 10pt;
-  transform: translate(0, -64pt);
+  margin: 0;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .name:hover,
-.des:hover,
-.mobile-name:hover {
+.des:hover {
   color: var(--secondary);
   cursor: default;
 }
@@ -519,13 +530,6 @@ body:not(.light) #sun {
   appearance: none;
 }
 
-.mobile-name {
-  display: none;
-  transition: 0.8s;
-  font-size: 30px;
-  font-weight: 900;
-}
-
 body.menu-open {
   overflow: hidden;
 }
@@ -581,8 +585,18 @@ body.menu-open .overlay * {
     display: none;
   }
 
-  .menu,
-  .mobile-name {
+  .menu {
+    display: block;
+  }
+
+  .hero-nameplate {
+    width: auto;
+    height: auto;
+    margin-top: 2pt;
+  }
+
+  .name {
+    position: static;
     display: block;
   }