From 869c9b999f9f61bdf1e02237a5daf3bbbec40741 Mon Sep 17 00:00:00 2001
From: Julian Lechner <fraujulian@lechner.top>
Date: Thu, 23 Apr 2026 17:50:23 +0200
Subject: [PATCH] feat: removed # refs

---
 src/app/home/home.component.html |  6 +++---
 src/app/home/home.component.ts   | 33 ++++++++++++++++++++++++++++++++
 src/styles.scss                  | 11 +++++++++++
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 2a6fd76..30894e7 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -36,8 +36,8 @@
         </div>
 
         <div class="hero-action-links">
-          <a class="action-link" href="#projects">View projects</a>
-          <a class="action-link" href="#about">About me</a>
+          <button class="action-link" type="button" (click)="scrollToProjectsSection()">View projects</button>
+          <button class="action-link" type="button" (click)="scrollToAboutSection()">About me</button>
         </div>
       </div>
 
@@ -116,7 +116,7 @@
               I currently work mainly for the Viennese company SobIT GmbH and also take on freelance projects for companies, associations,
               and private clients. The common thread is always the same: practical software, well delivered.
             </p>
-            <a class="inline-link" href="#contact-links">Get in touch</a>
+            <button class="inline-link inline-link-button" type="button" (click)="scrollToContactLinks()">Get in touch</button>
           </div>
         }
       </div>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 01f4ae9..611b7d0 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -169,6 +169,18 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     }, 250);
   }
 
+  protected scrollToAboutSection(): void {
+    this.scrollToElementById('about', 24);
+  }
+
+  protected scrollToProjectsSection(): void {
+    this.scrollToElementById('projects', 24);
+  }
+
+  protected scrollToContactLinks(): void {
+    this.scrollToElementById('contact-links');
+  }
+
   private preloadImageAssets(): void {
     if (typeof window === 'undefined') {
       return;
@@ -476,4 +488,25 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
 
     return age;
   }
+
+  private scrollToElementById(elementId: string, offsetPx: number = 0): void {
+    if (typeof document === 'undefined' || typeof window === 'undefined') {
+      return;
+    }
+
+    const element: HTMLElement | null = document.getElementById(elementId);
+    if (element === null) {
+      return;
+    }
+
+    const targetTop: number = Math.max(
+      element.getBoundingClientRect().top + window.scrollY - offsetPx,
+      0,
+    );
+
+    window.scrollTo({
+      top: targetTop,
+      behavior: 'smooth',
+    });
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
index e79c07a..fe035e9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -240,7 +240,10 @@ hr {
   padding: 0 1.25rem;
   border-radius: 999px;
   border: 1px solid var(--border-soft);
+  font: inherit;
+  color: inherit;
   background: rgba(255, 255, 255, 0.04);
+  cursor: pointer;
   transition:
     transform var(--transition-fast),
     border-color var(--transition-fast),
@@ -607,6 +610,14 @@ hr {
   font-weight: 600;
 }
 
+.inline-link-button {
+  padding: 0;
+  border: 0;
+  font: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
 .contact-strip {
   display: grid;
   gap: var(--space-4);