Skip to content

Commit d64b58b

Browse files
ModelizedModelized
authored
Website Update
1 parent 0c11309 commit d64b58b

3 files changed

Lines changed: 42 additions & 24 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
--home-next-layer-opacity: 0;
5454
--home-next-layer-shift: 18px;
5555
--home-next-layer-overlap: clamp(34rem, 68vh, 46rem);
56-
--site-atmosphere-opacity: 0;
56+
--site-atmosphere-opacity: 1;
5757
}
5858

5959
* {
@@ -63,13 +63,7 @@
6363
html {
6464
scroll-behavior: smooth;
6565
-webkit-text-size-adjust: 100%;
66-
background-color: var(--bg);
67-
background-image:
68-
radial-gradient(78% 62% at 22% 24%, rgba(228, 129, 57, calc(0.18 * var(--site-atmosphere-opacity))) 0%, rgba(228, 129, 57, 0) 74%),
69-
radial-gradient(70% 56% at 79% 34%, rgba(72, 93, 212, calc(0.17 * var(--site-atmosphere-opacity))) 0%, rgba(72, 93, 212, 0) 76%),
70-
radial-gradient(86% 72% at 56% 100%, rgba(255, 255, 255, calc(0.01 * var(--site-atmosphere-opacity))) 0%, rgba(255, 255, 255, 0) 74%),
71-
linear-gradient(180deg, rgba(8, 8, 10, calc(0.13 * var(--site-atmosphere-opacity))) 0%, rgba(8, 8, 10, calc(0.05 * var(--site-atmosphere-opacity))) 42%, rgba(7, 7, 10, calc(0.2 * var(--site-atmosphere-opacity))) 100%),
72-
linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
66+
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
7367
color-scheme: dark;
7468
}
7569

@@ -81,9 +75,33 @@ body {
8175
position: relative;
8276
font-family: var(--body-font);
8377
color: var(--text);
84-
background: transparent;
78+
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
8579
overflow-x: hidden;
86-
background-color: transparent;
80+
background-color: var(--bg);
81+
}
82+
83+
body::before {
84+
content: "";
85+
position: absolute;
86+
top: -20svh;
87+
right: 0;
88+
bottom: -20svh;
89+
left: 0;
90+
z-index: 0;
91+
pointer-events: none;
92+
background:
93+
radial-gradient(80% 64% at 21% 24%, rgba(218, 126, 59, 0.25), rgba(218, 126, 59, 0) 74%),
94+
radial-gradient(72% 58% at 79% 34%, rgba(84, 100, 212, 0.23), rgba(84, 100, 212, 0) 76%),
95+
radial-gradient(86% 72% at 56% 100%, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0) 74%),
96+
linear-gradient(180deg, rgba(7, 7, 10, 0.16) 0%, rgba(8, 8, 10, 0.08) 44%, rgba(7, 7, 10, 0.24) 100%);
97+
opacity: var(--site-atmosphere-opacity);
98+
will-change: opacity;
99+
transform: translateZ(0);
100+
backface-visibility: hidden;
101+
}
102+
103+
body.page-home {
104+
--site-atmosphere-opacity: 0;
87105
}
88106

89107
body.no-scroll {
@@ -1978,8 +1996,8 @@ body.page-home #about {
19781996
transition:
19791997
transform 720ms cubic-bezier(0.16, 0.96, 0.22, 1),
19801998
box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
1981-
opacity 520ms cubic-bezier(0.18, 0.94, 0.24, 1);
1982-
transition-delay: calc(var(--stack-reveal-order, 0) * 88ms);
1999+
opacity 320ms cubic-bezier(0.18, 0.94, 0.24, 1);
2000+
transition-delay: calc(var(--stack-reveal-order, 0) * 420ms);
19832001
}
19842002

19852003
.js .discipline-stack-viewport[data-stack-ready="false"] .discipline-stack-card__surface {

‎docs/assets/js/shell.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
const body = document.body;
55
const base = (body?.getAttribute('data-base') || '.').trim();
6-
const assetVersion = '20260418c';
6+
const assetVersion = '20260419c';
77
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
88
const SETTLE_PASS_DELAYS = [0, 140, 320, 560];
99
const simpleIcon = (name) => `https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/${name}.svg`;
@@ -1292,17 +1292,17 @@
12921292
stageReference * 1.78,
12931293
viewportHeight * 1.42
12941294
);
1295-
lowerLayerStartShift = Math.min(Math.max(viewportHeight * 0.015, 8), 14);
1295+
lowerLayerStartShift = Math.min(Math.max(viewportHeight * 0.024, 14), 24);
12961296
const lowerLayerOverlap = Math.max(
1297-
Math.min(transitionDistance + viewportHeight * 0.18, viewportHeight * 1.58),
1298-
viewportHeight * 1.36
1297+
Math.min(transitionDistance + viewportHeight * 0.28, viewportHeight * 1.74),
1298+
viewportHeight * 1.5
12991299
);
13001300
hero.style.setProperty("--home-transition-distance", `${transitionDistance.toFixed(2)}px`);
13011301
root.style.setProperty("--home-next-layer-overlap", `${lowerLayerOverlap.toFixed(2)}px`);
13021302
};
13031303

13041304
const setAtmosphere = (amount) => {
1305-
root.style.setProperty("--site-atmosphere-opacity", amount.toFixed(4));
1305+
body.style.setProperty("--site-atmosphere-opacity", amount.toFixed(4));
13061306
};
13071307

13081308
const setLowerLayer = (opacityAmount, motionAmount) => {
@@ -1324,9 +1324,9 @@
13241324
const silhouetteFade = 1 - range(progress, 0.34, 0.58, easeInOutCubic);
13251325
const silhouetteOpacity = 0.74 * silhouetteAppear * silhouetteFade;
13261326
const heroUnitOpacity = Math.max(baseFade, silhouetteOpacity);
1327-
const nextLayerMotionProgress = range(progress, 0.38, 0.88, easeInOutCubic);
1328-
const nextLayerOpacityProgress = range(progress, 0.63, 0.94, easeInOutSine);
1329-
const atmosphereProgress = range(progress, 0.63, 0.985, easeInOutSine);
1327+
const nextLayerMotionProgress = range(progress, 0.24, 0.84, easeInOutCubic);
1328+
const nextLayerOpacityProgress = range(progress, 0.64, 0.94, easeInOutSine);
1329+
const atmosphereProgress = range(progress, 0.64, 0.985, easeInOutSine);
13301330
const backdropSuppression = progress < 0.88 ? "1" : "0";
13311331

13321332
root.style.setProperty("--home-ui-opacity", Math.max(0, uiOpacity).toFixed(4));
@@ -1812,7 +1812,7 @@
18121812
window.clearTimeout(revealTimer);
18131813
revealTimer = window.setTimeout(() => {
18141814
stack.dataset.stackReady = "true";
1815-
}, 760 + Math.max(0, total - 1) * 88);
1815+
}, 900 + Math.max(0, total - 1) * 420);
18161816
}, 280);
18171817
};
18181818

@@ -1947,7 +1947,7 @@
19471947
stack.classList.toggle("is-dragging", isDragging);
19481948

19491949
cards.forEach((card, index) => {
1950-
card.style.setProperty("--stack-reveal-order", String(index));
1950+
card.style.setProperty("--stack-reveal-order", String(Math.max(0, index - activeIndex)));
19511951
const offset = index - activeIndex;
19521952
let visual = getLayoutForOffset(offset);
19531953
let zIndex = getZIndex(offset);

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Rock+Salt&family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
11-
<link rel="stylesheet" href="assets/css/style.css?v=20260419a">
11+
<link rel="stylesheet" href="assets/css/style.css?v=20260419c">
1212

1313
<link rel="icon" type="image/svg+xml" href="favicon.svg">
1414
<link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -228,6 +228,6 @@ <h2>A <span class="tagline-script">Closer Look</span> At The Path</h2>
228228

229229
<div id="footer-slot"></div>
230230

231-
<script src="assets/js/shell.js?v=20260419a" defer></script>
231+
<script src="assets/js/shell.js?v=20260419c" defer></script>
232232
</body>
233233
</html>

0 commit comments

Comments
 (0)