From 17847dfdb645e515b0fc4edc81b615dd6ffac10e Mon Sep 17 00:00:00 2001
From: SowinskiBraeden <braeden@sowinski.dev>
Date: Fri, 8 May 2026 17:47:04 -0700
Subject: [PATCH] Fix homepage hero heading markup

---
 index.html           | 13 +++++++------
 public/css/style.css | 42 ++++++++++++++++++++++++++++--------------
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index adca271..6fd4d4d 100755
--- a/index.html
+++ b/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
diff --git a/public/css/style.css b/public/css/style.css
index c2d9b5c..c4be7d7 100755
--- a/public/css/style.css
+++ b/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;
   }