fix: performance and style

npm-zoey.conf

@@ -0,0 +1,77 @@
+Create a new custom location:
+
+Location: ~*
+Path: \.(?:js|css|mjs|webp|avif|png|jpg|jpeg|gif|svg|ico|woff2?)$
+Scheme/Hostname/Port: same as Origin
+Extra Options:
+
+---
+
+proxy_http_version 1.1;
+proxy_set_header Connection "";
+proxy_set_header Host $host;
+proxy_set_header X-Real-IP $remote_addr;
+proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+proxy_set_header X-Forwarded-Proto $scheme;
+proxy_buffering on;
+expires 1y;
+add_header Cache-Control "public, max-age=31536000, immutable" always;
+add_header Vary "Accept-Encoding" always;
+
+---
+
+General Configuration:
+
+---
+
+proxy_http_version 1.1;
+proxy_set_header Connection "";
+proxy_set_header Host $host;
+proxy_set_header X-Real-IP $remote_addr;
+proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+proxy_set_header X-Forwarded-Proto $scheme;
+
+proxy_buffering on;
+proxy_buffer_size 16k;
+proxy_buffers 32 16k;
+proxy_busy_buffers_size 64k;
+
+gzip on;
+gzip_vary on;
+gzip_proxied any;
+gzip_comp_level 6;
+gzip_min_length 1024;
+gzip_types
+  application/javascript
+  application/json
+  application/manifest+json
+  application/rss+xml
+  application/vnd.ms-fontobject
+  application/wasm
+  application/xml
+  font/otf
+  font/ttf
+  image/svg+xml
+  text/css
+  text/javascript
+  text/plain
+  text/xml;
+
+# Nur aktiv lassen, wenn dein NPMplus-Image brotli unterstützt.
+brotli on;
+brotli_comp_level 5;
+brotli_min_length 1024;
+brotli_types
+  application/javascript
+  application/json
+  application/manifest+json
+  application/wasm
+  application/xml
+  image/svg+xml
+  text/css
+  text/javascript
+  text/plain
+  text/xml;
+
+add_header Cache-Control "no-cache, must-revalidate" always;
+add_header Vary "Accept-Encoding" always;

src/app/home/home.component.spec.ts

@@ -442,7 +442,7 @@ describe('HomeComponent', (): void => {
       expect(comp.shouldEnableScrollEffects()).toBeTrue();
     });
 
-    it('should disable scroll effects on coarse touch pointers', (): void => {
+    it('should keep scroll effects enabled on coarse touch pointers when motion is allowed', (): void => {
       spyOn(window, 'matchMedia').and.callFake(
         (query: string): MediaQueryList =>
           ({
@@ -450,7 +450,7 @@ describe('HomeComponent', (): void => {
           }) as MediaQueryList,
       );
 
-      expect(comp.shouldEnableScrollEffects()).toBeFalse();
+      expect(comp.shouldEnableScrollEffects()).toBeTrue();
     });
 
     it('should disable scroll effects when reduced motion is requested', (): void => {

src/app/home/home.component.ts

@@ -233,22 +233,21 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     const prefersReducedMotion: boolean = window.matchMedia(
       '(prefers-reduced-motion: reduce)',
     ).matches;
-    const usesTouchScrolling: boolean = window.matchMedia(
-      '(hover: none) and (pointer: coarse)',
-    ).matches;
 
-    return !prefersReducedMotion && !usesTouchScrolling;
+    return !prefersReducedMotion;
   }
 
   private initNameGradientScrollAnimation(): void {
     if (!this.shouldEnableScrollEffects()) return;
     window.addEventListener('scroll', this.scheduleNameGradientUpdate, { passive: true });
     window.addEventListener('resize', this.scheduleNameGradientUpdate, { passive: true });
+    this.scheduleNameGradientUpdate();
   }
   private initProjectEntryRevealObserver(): void {
     if (!this.shouldEnableScrollEffects()) return;
     window.addEventListener('scroll', this.scheduleProjectEntryRevealUpdate, { passive: true });
     window.addEventListener('resize', this.scheduleProjectEntryRevealUpdate, { passive: true });
+    this.scheduleProjectEntryRevealUpdate();
   }
   private destroyProjectEntryRevealObserver(): void {
     if (typeof window === 'undefined' || typeof document === 'undefined') return;
@@ -270,6 +269,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     window.addEventListener('resize', this.scheduleAboutSectionScrollAnimationUpdate, {
       passive: true,
     });
+    this.scheduleAboutSectionScrollAnimationUpdate();
   }
   private destroyAboutSectionScrollAnimation(): void {
     if (typeof window === 'undefined' || typeof document === 'undefined') return;

src/styles.scss

@@ -1229,25 +1229,26 @@ hr {
 
 @media (hover: none) and (pointer: coarse) {
   body {
+    position: relative;
+    isolation: isolate;
+    background: transparent;
+  }
+
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
     background:
       radial-gradient(circle at top left, rgba(217, 162, 140, 0.18), transparent 28%),
       radial-gradient(circle at bottom right, rgba(127, 78, 63, 0.24), transparent 32%),
       linear-gradient(180deg, rgba(9, 9, 12, 0.72), rgba(8, 8, 11, 0.96)),
-      url('assets/optimized/background.webp') center top / cover no-repeat;
+      url('assets/optimized/background.webp') center / cover fixed no-repeat;
   }
 }
 
 @media (hover: none) and (pointer: coarse) {
-  .about-scroll-anim-enabled .story-copy,
-  .about-scroll-anim-enabled .story-detail,
-  .project-entry,
-  .project-entry.project-entry-from-right,
-  .project-entry.project-entry-from-left {
-    opacity: 1;
-    transform: none;
-    will-change: auto;
-  }
-
   .action-link:hover,
   .detail-toggle:hover,
   .back-link:hover,