feat: added title

src/app/home/home.component.html

@@ -13,6 +13,9 @@
       </div>
 
       <div class="hero-actions">
+        <div class="hero-contact-block">
+          <p class="hero-contact-title">Contact me</p>
+
           <div id="contact-links" class="contact-area hero-contact-area">
             <a [href]="contactSafeMail" aria-label="Send mail">
               <fa-icon class="fab" [icon]="faEnvelope" size="lg"></fa-icon>
@@ -34,6 +37,7 @@
               <fa-icon class="fab" [icon]="faLinkedin" size="lg"></fa-icon>
             </a>
           </div>
+        </div>
 
         <div class="hero-action-links">
           <button class="action-link" type="button" (click)="scrollToProjectsSection()">View projects</button>

src/app/home/home.component.ts

@@ -178,7 +178,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   protected scrollToContactLinks(): void {
-    this.scrollToElementById('contact-links');
+    this.scrollToElementById('contact-links', 48);
   }
 
   private preloadImageAssets(): void {

src/styles.scss

@@ -219,6 +219,22 @@ hr {
   gap: var(--space-3);
 }
 
+.hero-contact-block {
+  display: grid;
+  justify-items: center;
+  gap: 0.45rem;
+}
+
+.hero-contact-title {
+  margin: 0;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  text-align: center;
+}
+
 .hero-contact-area {
   gap: 0.6rem;
 }