feat: add one-liner intro to home page

src/layouts/variables.css

@@ -2,7 +2,7 @@
   --content-width: 700px;
   --font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
   --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
-  --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
+  --font-size-lg: clamp(1.8rem, 0.7vw + 1.2rem, 1.5rem);
   --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
 
   --color-border: hsl(17, 24%, 90%);

src/pages/index.astro

@@ -20,7 +20,7 @@ import now from '../constants/now.json'
       />
       <div class="highlighted-section__content__text">
         <h1 title="Ayo Ayco | Software Engineer + Web Developer">
-          <span class="heavy-text">Ayo</span>Ayco
+          Hi, I'm <span class="heavy-text">Ayo</span>!
         </h1>
         <a href="/now" class="now-wrapper">
           <span class="now-label">Now</span>
@@ -30,6 +30,13 @@ import now from '../constants/now.json'
     </div>
   </section>
   <main>
+    <section class="introduction-section">
+      <p>
+        I care about the <em>Web</em>, and I love to <em>create</em> stuff to <em
+          >inspire</em
+        > and <em>serve</em> others.
+      </p>
+    </section>
     <section class="cards-section">
       <ul class="cards-section__grid">
         <Card
@@ -125,6 +132,17 @@ import now from '../constants/now.json'
     padding: 5px 0;
   }
 
+  .introduction-section {
+    p {
+      font-size: var(--font-size-lg);
+    }
+
+    em {
+      font-weight: bold;
+      color: var(--color-brand-complement);
+    }
+  }
+
   .cards-section {
     margin: auto;
     max-width: var(--content-width);