Skip to content

Commit 08ac8bb

Browse files
ModelizedModelized
authored
Website Update
1 parent 7ae59a7 commit 08ac8bb

3 files changed

Lines changed: 76 additions & 39 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1472,6 +1472,29 @@ a {
14721472
touch-action: pan-y;
14731473
isolation: isolate;
14741474
z-index: 1;
1475+
outline: none;
1476+
-webkit-tap-highlight-color: transparent;
1477+
}
1478+
1479+
.discipline-stack-shell,
1480+
.discipline-stack-bleed,
1481+
.discipline-stack-stage,
1482+
.discipline-stack-viewport {
1483+
outline: none;
1484+
-webkit-user-select: none;
1485+
user-select: none;
1486+
}
1487+
1488+
.discipline-stack-shell:focus,
1489+
.discipline-stack-shell:focus-visible,
1490+
.discipline-stack-bleed:focus,
1491+
.discipline-stack-bleed:focus-visible,
1492+
.discipline-stack-stage:focus,
1493+
.discipline-stack-stage:focus-visible,
1494+
.discipline-stack-viewport:focus,
1495+
.discipline-stack-viewport:focus-visible {
1496+
outline: none;
1497+
box-shadow: none;
14751498
}
14761499

14771500
.js .discipline-stack-viewport:not([data-stack-ready="true"]) .discipline-stack-card {

‎docs/assets/js/shell.js‎

Lines changed: 51 additions & 37 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 = '20260410g';
6+
const assetVersion = '20260410i';
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`;
@@ -51,7 +51,7 @@
5151
"Diving into the core of operating systems and device environments. My work involves Custom ROM development and low-level system exploration, studying how device architectures function from the inside out to build highly optimized environments.",
5252
arsenalKind: "engineering",
5353
arsenal: [
54-
{ iconSvg: iconSvg('<path d="M6.1 7.2h7.8"/><path d="M7.3 5.1v2.1M12.7 5.1v2.1"/><path d="M6.8 7.2 5.7 12h8.6l-1.1-4.8"/><path d="M7.6 12v2.2M12.4 12v2.2"/><path d="M6.2 14.2h1.7M12.1 14.2h1.7"/>'), label: "Custom ROM Building" },
54+
{ iconSvg: iconSvg('<path d="M6.3 7.2h7.4a1.8 1.8 0 0 1 1.8 1.8v3a1.8 1.8 0 0 1-1.8 1.8H6.3A1.8 1.8 0 0 1 4.5 12V9a1.8 1.8 0 0 1 1.8-1.8Z"/><path d="m7.4 6.1-1-1.4"/><path d="m12.6 6.1 1-1.4"/><circle cx="8.8" cy="10" r=".44" fill="currentColor" stroke="none"/><circle cx="11.2" cy="10" r=".44" fill="currentColor" stroke="none"/><path d="M7.6 13.8v1.5M12.4 13.8v1.5"/><path d="M4.5 9.5H3.3M16.7 9.5h-1.2"/>'), label: "Custom ROM Building" },
5555
{ iconSvg: iconSvg('<path d="M10 4.2 14 5.7v3.8c0 2.6-1.6 4.8-4 5.9-2.4-1.1-4-3.3-4-5.9V5.7L10 4.2Z"/><path d="m12.7 12.7 2.6 2.6"/><circle cx="12.1" cy="12.1" r="2.3"/>'), label: "iOS Security Analysis" },
5656
{ iconSvg: iconSvg('<path d="m6.4 6.2-3.1 3.8 3.1 3.8"/><path d="m13.6 6.2 3.1 3.8-3.1 3.8"/><path d="m11 4.8-2 10.4"/>'), label: "Reverse Engineering" },
5757
{ iconSvg: iconSvg('<rect x="4.1" y="4.5" width="11.8" height="8.2" rx="1.8"/><path d="M6.5 15.5h7"/><path d="M8 12.7v2.8M12 12.7v2.8"/>'), label: "System Virtualization" }
@@ -1607,17 +1607,17 @@
16071607
const steps = portraitQuery.matches
16081608
? [
16091609
{ x: 0, scale: 1, rotate: 0 },
1610-
{ x: cardWidth * 0.21, scale: 0.892, rotate: 4.9 },
1611-
{ x: cardWidth * 0.334, scale: 0.786, rotate: 7.8 },
1612-
{ x: cardWidth * 0.418, scale: 0.692, rotate: 10.2 },
1613-
{ x: cardWidth * 0.474, scale: 0.614, rotate: 12.2 }
1610+
{ x: cardWidth * 0.228, scale: 0.872, rotate: 5.1 },
1611+
{ x: cardWidth * 0.366, scale: 0.744, rotate: 8.4 },
1612+
{ x: cardWidth * 0.462, scale: 0.63, rotate: 11.1 },
1613+
{ x: cardWidth * 0.528, scale: 0.538, rotate: 13.5 }
16141614
]
16151615
: [
16161616
{ x: 0, scale: 1, rotate: 0 },
1617-
{ x: cardWidth * 0.224, scale: 0.904, rotate: 4.4 },
1618-
{ x: cardWidth * 0.356, scale: 0.8, rotate: 6.8 },
1619-
{ x: cardWidth * 0.446, scale: 0.706, rotate: 8.9 },
1620-
{ x: cardWidth * 0.506, scale: 0.626, rotate: 10.5 }
1617+
{ x: cardWidth * 0.238, scale: 0.886, rotate: 4.6 },
1618+
{ x: cardWidth * 0.386, scale: 0.762, rotate: 7.2 },
1619+
{ x: cardWidth * 0.486, scale: 0.654, rotate: 9.8 },
1620+
{ x: cardWidth * 0.55, scale: 0.566, rotate: 11.8 }
16211621
];
16221622

16231623
return steps.reduce((layouts, step, depth) => {
@@ -1719,32 +1719,60 @@
17191719
const active = disciplines[activeIndex];
17201720
stack.setAttribute("aria-label", `Core disciplines cards. ${active.title} is in focus.`);
17211721
stack.dataset.swipeEnabled = portraitQuery.matches ? "true" : "false";
1722-
if (portraitQuery.matches) {
1723-
stack.removeAttribute("tabindex");
1724-
} else {
1725-
stack.tabIndex = 0;
1726-
}
1722+
stack.removeAttribute("tabindex");
17271723
};
17281724

17291725
const applyState = ({ dragProgress = 0 } = {}) => {
17301726
const isDragging = portraitQuery.matches && Math.abs(dragProgress) > 0.001;
17311727
const dragSign = dragProgress === 0 ? 0 : Math.sign(dragProgress);
17321728
const currentMetrics = getMetrics();
17331729
const dragMagnitude = Math.abs(dragProgress);
1730+
const inwardSide = dragSign === 0 ? 0 : -dragSign;
1731+
const hasTarget =
1732+
dragSign === 0 ||
1733+
(dragSign < 0 ? activeIndex < total - 1 : activeIndex > 0);
17341734

17351735
stack.classList.toggle("is-dragging", isDragging);
17361736

17371737
cards.forEach((card, index) => {
17381738
const offset = index - activeIndex;
17391739
let visual = getLayoutForOffset(offset);
1740+
let zIndex = getZIndex(offset);
17401741

1741-
if (isDragging && offset === 0 && dragSign !== 0) {
1742+
if (isDragging && hasTarget && offset === 0 && dragSign !== 0) {
17421743
visual = createLayout(
1743-
currentMetrics.cardWidth * 0.66 * dragMagnitude * dragSign,
1744+
currentMetrics.cardWidth * 0.58 * dragMagnitude * dragSign,
17441745
0,
1745-
1 - dragMagnitude * 0.028,
1746-
dragSign * 10.5 * dragMagnitude
1746+
1 - dragMagnitude * 0.024,
1747+
dragSign * 9.1 * dragMagnitude
17471748
);
1749+
} else if (isDragging && hasTarget && offset !== 0) {
1750+
const side = Math.sign(offset);
1751+
const depth = Math.min(Math.abs(offset), total - 1);
1752+
const inwardScaleLift = [0, 0.032, 0.026, 0.02, 0.016][depth] || 0.016;
1753+
const outwardScaleDrop = [0, 0.022, 0.028, 0.032, 0.036][depth] || 0.036;
1754+
const inwardXPull = [0, 0.18, 0.15, 0.13, 0.11][depth] || 0.11;
1755+
const outwardXPush = [0, 0.14, 0.18, 0.22, 0.26][depth] || 0.26;
1756+
const inwardRotateEase = [0, 0.18, 0.14, 0.12, 0.1][depth] || 0.1;
1757+
const outwardRotateBoost = [0, 0.08, 0.1, 0.12, 0.14][depth] || 0.14;
1758+
1759+
if (side === inwardSide) {
1760+
visual = createLayout(
1761+
visual.x * (1 - inwardXPull * dragMagnitude),
1762+
0,
1763+
visual.scale + inwardScaleLift * dragMagnitude,
1764+
visual.rotate * (1 - inwardRotateEase * dragMagnitude)
1765+
);
1766+
zIndex += 8 - depth;
1767+
} else if (side === dragSign) {
1768+
visual = createLayout(
1769+
visual.x * (1 + outwardXPush * dragMagnitude),
1770+
0,
1771+
visual.scale - outwardScaleDrop * dragMagnitude,
1772+
visual.rotate * (1 + outwardRotateBoost * dragMagnitude)
1773+
);
1774+
zIndex -= 5 + depth;
1775+
}
17481776
}
17491777

17501778
const appearance = getDepthAppearance(offset);
@@ -1756,7 +1784,7 @@
17561784
card.classList.toggle("is-active", offset === 0);
17571785
card.classList.toggle("is-neighbor", isNeighbor);
17581786
card.setAttribute("aria-hidden", offset === 0 ? "false" : "true");
1759-
card.style.zIndex = String(getZIndex(offset));
1787+
card.style.zIndex = String(zIndex);
17601788
card.style.transform = formatTransform(visual);
17611789
card.style.setProperty("--discipline-depth-dim", appearance.dim.toFixed(3));
17621790
card.style.setProperty("--discipline-surface-lift", appearance.lift.toFixed(3));
@@ -1895,11 +1923,11 @@
18951923

18961924
event.preventDefault();
18971925
const width = Math.max(stack.clientWidth, 1);
1898-
const raw = deltaX / (width * 0.2);
1926+
const raw = deltaX / (width * 0.46);
18991927
const direction = raw === 0 ? 0 : raw > 0 ? -1 : 1;
19001928
const outOfBounds = (direction < 0 && activeIndex === 0) || (direction > 0 && activeIndex === total - 1);
1901-
const limit = outOfBounds ? 0.2 : 0.92;
1902-
const resistance = outOfBounds ? 2.05 : 0.88;
1929+
const limit = outOfBounds ? 0.18 : 0.94;
1930+
const resistance = outOfBounds ? 1.8 : 0.84;
19031931
const progress = clamp(Math.sign(raw || 0) * limit * (1 - Math.exp(-Math.abs(raw) * resistance)), -limit, limit);
19041932
pointerState.progress = progress;
19051933
applyState({ dragProgress: progress });
@@ -1955,20 +1983,6 @@
19551983
stack.addEventListener("pointerup", onPointerUp);
19561984
stack.addEventListener("pointercancel", (event) => clearPointer(event, { snap: true }));
19571985
stack.addEventListener("pointerleave", (event) => clearPointer(event, { snap: true }));
1958-
stack.addEventListener("keydown", (event) => {
1959-
if (portraitQuery.matches) {
1960-
return;
1961-
}
1962-
1963-
if (event.key === "ArrowLeft") {
1964-
event.preventDefault();
1965-
rotate(-1);
1966-
} else if (event.key === "ArrowRight") {
1967-
event.preventDefault();
1968-
rotate(1);
1969-
}
1970-
});
1971-
19721986
metrics = measureMetrics();
19731987
stack.classList.add("discipline-stack-viewport--static");
19741988
applyState();

‎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=20260410g">
11+
<link rel="stylesheet" href="assets/css/style.css?v=20260410i">
1212

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

169169
<div id="footer-slot"></div>
170170

171-
<script src="assets/js/shell.js?v=20260410g" defer></script>
171+
<script src="assets/js/shell.js?v=20260410i" defer></script>
172172
</body>
173173
</html>

0 commit comments

Comments
 (0)