add last element utility class

src/css/index.scss

@@ -70,6 +70,10 @@ h3 {
     flex-direction: column;
 }
 
+.last-element {
+    margin-bottom: 6rem;
+}
+
 .emoji {
     font-size: 48px;
 }

src/views/AboutMe.vue

@@ -2,14 +2,12 @@
     <div class="page">
         <h2 class="heading handshake">About Me <span class="emoji">🤝</span></h2>
         <div id="about-me">
-            <div id="about-me-content">
+            <div id="about-me-content" class="last-element">
                 <img src="/logo.png" alt="Picture of Lester" width="300" height="300"/>
                 <p>Hi, I'm glad you stopped by!</p>
                 <p>Let me introduce myself. My name is Lester and I am currently a rising senior at Lehigh University pursuing a B.S. in Computer Science, along with a Data Science Minor. I've always been interested in computing technologies, how they work, and their applications. However, I really only started delving into the nitty-gritty details in 11th grade. Stop by my <router-link to="/work">SWE Journey</router-link> to learn more!</p>
                 <p>In terms of my personal life, I'm constantly looking for ways to seek discomfort, ways to push myself out of my comfort zone and expand my worldview. As a kid, I was always very picky and scared to try new things, so to recoup those lost experiences and never lose out on another one, I strive to say <a href="https://yestheory.com/" target="_blank">"Yes"</a> to everything! Still interested? Learn more about my other <router-link to="/interests">interests</router-link>.</p>
             </div>
-            <!-- <div id="about-me-img">
-            </div> -->
         </div>
     </div>
 </template>
@@ -23,7 +21,6 @@
 
     &-content {
         font-size: 1.15rem;
-        margin-bottom: 6rem;
     }
 
     img {

src/views/SplashPage.vue

@@ -6,7 +6,7 @@
             <h1>I'm Lester Huang</h1>
             <h3>A lifelong learner 📖 with a desire for adventure 🗺️</h3>
         </div>
-        <div id="contact">
+        <div id="contact" class="last-element">
             <q-btn round icon="far fa-envelope-open" type="a" href="mailto:[email protected]" target="_blank" size="1.1rem" unelevated />
             <q-btn round icon="fab fa-linkedin-in" type="a" href="https://www.linkedin.com/in/lesterhuang/" target="_blank" size="1.1rem" unelevated />
             <q-btn round icon="fab fa-github" type="a" href="https://github.com/L23de" target="_blank" size="1.1rem" unelevated />
@@ -29,7 +29,6 @@
     color: black;
     display: flex;
     flex-direction: row;
-    margin-bottom: 8rem;
 }
 
 @keyframes wave-animation {