diff --git a/README.md b/README.md index 2623491..bcee630 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ ## 👂 Languages/Framework/Packages: -- Angular v19 +- Angular v21 - TypeScript - SCSS diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index aab5313..08edd56 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -390,12 +390,17 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { portfolioEyebrow === null ? Number.POSITIVE_INFINITY : portfolioEyebrow.getBoundingClientRect().top + window.scrollY; - - const triggerDistance: number = Math.max(portfolioTriggerY, 1); + const isMobileViewport: boolean = window.innerWidth <= 700; + const mobileRevealDistance: number = Math.max(window.innerHeight * 0.38, 180); + const triggerDistance: number = isMobileViewport + ? mobileRevealDistance + : Math.max(portfolioTriggerY, 1); const rawProgress: number = Math.min(window.scrollY / triggerDistance, 1); - const acceleratedProgress: number = Math.pow(rawProgress, 0.66); + const acceleratedProgress: number = Math.pow(rawProgress, isMobileViewport ? 0.62 : 0.66); const progress: number = - window.scrollY > 0 ? Math.max(acceleratedProgress, 0.05) : acceleratedProgress; + window.scrollY > 0 + ? Math.max(acceleratedProgress, isMobileViewport ? 0.06 : 0.05) + : acceleratedProgress; root.style.setProperty('--name-pride-progress', progress.toFixed(4)); } diff --git a/src/index.html b/src/index.html index 54d5a22..19fa158 100644 --- a/src/index.html +++ b/src/index.html @@ -10,5 +10,15 @@ + + + diff --git a/src/styles.scss b/src/styles.scss index aed467d..36aa2c7 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -151,20 +151,21 @@ hr { color: transparent; background-size: 100% 100%; background: linear-gradient( - to right, - #e40303 0%, - #e40303 16.66%, - #ff8c00 16.66%, - #ff8c00 33.33%, - #ffed00 33.33%, - #ffed00 50%, - #008026 50%, - #008026 66.66%, - #004dff 66.66%, - #004dff 83.33%, - #750787 83.33%, - #750787 100% - ) no-repeat 0 50%; + to right, + #e40303 0%, + #e40303 16.66%, + #ff8c00 16.66%, + #ff8c00 33.33%, + #ffed00 33.33%, + #ffed00 50%, + #008026 50%, + #008026 66.66%, + #004dff 66.66%, + #004dff 83.33%, + #750787 83.33%, + #750787 100% + ) + no-repeat 0 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; @@ -296,20 +297,21 @@ hr { filter: blur(1.6px) saturate(0.88); background-size: 100% 100%; background: linear-gradient( - to right, - #e40303 0%, - #e40303 16.66%, - #ff8c00 16.66%, - #ff8c00 33.33%, - #ffed00 33.33%, - #ffed00 50%, - #008026 50%, - #008026 66.66%, - #004dff 66.66%, - #004dff 83.33%, - #750787 83.33%, - #750787 100% - ) 0 50%; + to right, + #e40303 0%, + #e40303 16.66%, + #ff8c00 16.66%, + #ff8c00 33.33%, + #ffed00 33.33%, + #ffed00 50%, + #008026 50%, + #008026 66.66%, + #004dff 66.66%, + #004dff 83.33%, + #750787 83.33%, + #750787 100% + ) + 0 50%; transform: translate(2px, 2px); } @@ -972,6 +974,11 @@ hr { max-width: none; } + .hero-copy h1 { + font-size: clamp(3.35rem, 13vw, 4.75rem); + line-height: 0.96; + } + .hero-copy { display: contents; }