diff --git a/npm-zoey.conf b/npm-zoey.conf new file mode 100644 index 0000000..31baeb8 --- /dev/null +++ b/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; diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts index 4dccc5b..af82b49 100644 --- a/src/app/home/home.component.spec.ts +++ b/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 => { diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index f345f35..c6a0124 100644 --- a/src/app/home/home.component.ts +++ b/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; diff --git a/src/styles.scss b/src/styles.scss index 051e6a8..962cdf7 100644 --- a/src/styles.scss +++ b/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,