disabled hover effects on mobile

src/app/app.ts

@@ -1,6 +1,7 @@
-import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {Component, computed, HostListener, OnInit, signal} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
 import {DotBackground} from './components/dot-background/dot-background';
+import {DeviceDetectionService} from './service/device-detection-service';
 
 @Component({
   selector: 'app-root',
@@ -8,6 +9,20 @@ import {DotBackground} from './components/dot-background/dot-background';
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
-export class App {
+export class App implements OnInit {
   protected readonly title = signal('Portfolio');
+  protected readonly isMobile = signal(false);
+  protected readonly isDesktop = computed(() => !this.isMobile());
+
+  constructor(private deviceDetectionService: DeviceDetectionService) {
+  }
+
+  ngOnInit(): void {
+    this.isMobile.set(this.deviceDetectionService.mobileCheck());
+  }
+
+  @HostListener('window:resize')
+  onResize() {
+    this.isMobile.set(this.deviceDetectionService.mobileCheck());
+  }
 }