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

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