feat: added title

src/app/home/home.component.html

@@ -13,26 +13,30 @@
       </div>
 
       <div class="hero-actions">
-        <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>
-          </a>
+        <div class="hero-contact-block">
+          <p class="hero-contact-title">Contact me</p>
 
-          <a href="tel:{{ global.hrefContactPhone }}" aria-label="Call phone number">
-            <fa-icon class="fab" [icon]="faPhone" size="lg"></fa-icon>
-          </a>
+          <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>
+            </a>
 
-          <a href="https://discord.com/users/860206216893693973" aria-label="Discord profile">
-            <fa-icon class="fab" [icon]="faDiscord" size="lg"></fa-icon>
-          </a>
+            <a href="tel:{{ global.hrefContactPhone }}" aria-label="Call phone number">
+              <fa-icon class="fab" [icon]="faPhone" size="lg"></fa-icon>
+            </a>
 
-          <a href="https://github.com/fraujulian" aria-label="GitHub profile">
-            <fa-icon class="fab" [icon]="faGithub" size="lg"></fa-icon>
-          </a>
+            <a href="https://discord.com/users/860206216893693973" aria-label="Discord profile">
+              <fa-icon class="fab" [icon]="faDiscord" size="lg"></fa-icon>
+            </a>
 
-          <a href="https://www.linkedin.com/in/julian-lechner-98b377356/" aria-label="LinkedIn profile">
-            <fa-icon class="fab" [icon]="faLinkedin" size="lg"></fa-icon>
-          </a>
+            <a href="https://github.com/fraujulian" aria-label="GitHub profile">
+              <fa-icon class="fab" [icon]="faGithub" size="lg"></fa-icon>
+            </a>
+
+            <a href="https://www.linkedin.com/in/julian-lechner-98b377356/" aria-label="LinkedIn profile">
+              <fa-icon class="fab" [icon]="faLinkedin" size="lg"></fa-icon>
+            </a>
+          </div>
         </div>
 
         <div class="hero-action-links">

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;
 }