From 688dadf96de2b5f2dbafe64c2648e921b550f2a3 Mon Sep 17 00:00:00 2001
From: Julian Lechner <fraujulian@lechner.top>
Date: Thu, 23 Apr 2026 17:55:45 +0200
Subject: [PATCH] feat: added title

---
 src/app/home/home.component.html | 36 ++++++++++++++++++--------------
 src/app/home/home.component.ts   |  2 +-
 src/styles.scss                  | 16 ++++++++++++++
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 30894e7..91dd19e 100644
--- a/src/app/home/home.component.html
+++ b/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">
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 611b7d0..7111a82 100644
--- a/src/app/home/home.component.ts
+++ b/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 {
diff --git a/src/styles.scss b/src/styles.scss
index fe035e9..7c69f2f 100644
--- a/src/styles.scss
+++ b/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;
 }