feat: removed # refs

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>

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',
+    });
+  }
 }