From 83af9dfb34ff5e2b21bcdf78bd783367665a3440 Mon Sep 17 00:00:00 2001
From: "Tianlang (Jackie) Chen" <305351710+jackiectl2@users.noreply.github.com>
Date: Mon, 21 Sep 2026 23:59:21 -0400
Subject: [PATCH 1/3] Revert "Revert "Add 2D entry choice and 3D car switch""
This reverts commit 37a2f1a273693af7472e02de7a7719ab87687849.
---
layouts/_partials/hooks/head-end/custom.html | 2 +
static/dimension-switch.css | 122 +++++++++++++++++++
static/dimension-switch.js | 48 ++++++++
3 files changed, 172 insertions(+)
create mode 100644 static/dimension-switch.css
create mode 100644 static/dimension-switch.js
diff --git a/layouts/_partials/hooks/head-end/custom.html b/layouts/_partials/hooks/head-end/custom.html
index 0bb2162..c9974f4 100644
--- a/layouts/_partials/hooks/head-end/custom.html
+++ b/layouts/_partials/hooks/head-end/custom.html
@@ -126,3 +126,5 @@
}
}
+
+
diff --git a/static/dimension-switch.css b/static/dimension-switch.css
new file mode 100644
index 0000000..70f1f91
--- /dev/null
+++ b/static/dimension-switch.css
@@ -0,0 +1,122 @@
+.dimension-corner-link {
+ position: fixed;
+ z-index: 1000;
+ top: 76px;
+ right: 20px;
+ display: inline-flex;
+ min-height: 38px;
+ align-items: center;
+ padding: 0 16px;
+ border: 1px solid rgba(99, 102, 241, 0.28);
+ border-radius: 999px;
+ color: #3730a3;
+ background: rgba(255, 255, 255, 0.93);
+ box-shadow: 0 8px 25px rgba(79, 70, 229, 0.14);
+ font-size: 12px;
+ font-weight: 700;
+ text-decoration: none;
+ backdrop-filter: blur(12px);
+}
+
+.dimension-corner-link:hover {
+ color: #fff;
+ background: #4f46e5;
+}
+
+.dimension-corner-link:focus-visible,
+.dimension-choice-action:focus-visible {
+ outline: 3px solid #4f46e5;
+ outline-offset: 3px;
+}
+
+.dimension-choice {
+ position: fixed;
+ inset: 0;
+ width: min(680px, calc(100% - 32px));
+ max-width: none;
+ max-height: calc(100% - 32px);
+ margin: auto;
+ padding: clamp(28px, 6vw, 54px);
+ overflow: auto;
+ border: 1px solid rgba(255, 255, 255, 0.95);
+ border-radius: 24px;
+ color: #252044;
+ background: linear-gradient(145deg, #fff, #f5f3ff 64%, #e8f5ff);
+ box-shadow: 0 30px 90px rgba(20, 20, 65, 0.33);
+}
+
+.dimension-choice::backdrop {
+ background: rgba(18, 20, 50, 0.7);
+ backdrop-filter: blur(8px);
+}
+
+.dimension-choice-kicker {
+ margin: 0 0 24px;
+ color: #5046bd;
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.16em;
+}
+
+.dimension-choice h1 {
+ margin: 0;
+ color: #251d59;
+ font-size: clamp(36px, 6vw, 56px);
+ font-weight: 750;
+ line-height: 1.08;
+}
+
+.dimension-choice-lead {
+ margin: 22px 0 0;
+ color: #514d70;
+ font-size: 17px;
+ line-height: 1.7;
+}
+
+.dimension-choice-actions {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px;
+ margin-top: 32px;
+}
+
+.dimension-choice-action {
+ display: flex;
+ min-height: 58px;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 12px 16px;
+ border-radius: 14px;
+ font: inherit;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 1.35;
+ text-align: center;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.dimension-choice-action.primary {
+ border: 1px solid #4f46e5;
+ color: #fff;
+ background: linear-gradient(135deg, #6366f1, #4338ca);
+}
+
+.dimension-choice-action.secondary {
+ border: 1px solid #b8b4df;
+ color: #3730a3;
+ background: #fff;
+}
+
+.dimension-choice-note {
+ margin: 22px 0 0;
+ color: #716c8a;
+ font-size: 12px;
+}
+
+@media (max-width: 600px) {
+ .dimension-corner-link { top: 68px; right: 12px; padding: 0 12px; }
+ .dimension-choice-actions { grid-template-columns: 1fr; }
+ .dimension-choice-lead { font-size: 15px; }
+}
diff --git a/static/dimension-switch.js b/static/dimension-switch.js
new file mode 100644
index 0000000..09edf24
--- /dev/null
+++ b/static/dimension-switch.js
@@ -0,0 +1,48 @@
+(() => {
+ const carUrl = "https://car.jackiectl.com/?view=3d";
+
+ function init() {
+ const switchLink = document.createElement("a");
+ switchLink.className = "dimension-corner-link";
+ switchLink.href = carUrl;
+ switchLink.textContent = "3D Car ↗";
+ switchLink.setAttribute("aria-label", "Switch to the 3D car website");
+ document.body.appendChild(switchLink);
+
+ const url = new URL(window.location.href);
+ const enter2d = url.searchParams.get("view") === "2d";
+ if (enter2d) {
+ url.searchParams.delete("view");
+ window.history.replaceState(window.history.state, "", url.pathname + url.search + url.hash);
+ }
+
+ const isHome = window.location.pathname === "/" || window.location.pathname === "/index.html";
+ if (!isHome || enter2d) return;
+
+ const dialog = document.createElement("dialog");
+ dialog.className = "dimension-choice";
+ dialog.setAttribute("aria-labelledby", "dimension-choice-title");
+ dialog.innerHTML = `
+ TIANLANG (JACKIE) CHEN · PERSONAL WEBSITE
+ Choose your dimension.
+ Explore the same personal journey in an interactive 3D car ride, or read it here as a 2D website.
+
+ The 3D car ride works best on a desktop browser.
+ `;
+ document.body.appendChild(dialog);
+ dialog.querySelector("[data-enter-2d]").addEventListener("click", () => {
+ dialog.close();
+ dialog.remove();
+ });
+ dialog.showModal();
+ }
+
+ if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", init, { once: true });
+ } else {
+ init();
+ }
+})();
From 6cfd225b5bd90243fd925011e4aca4dd87bde45e Mon Sep 17 00:00:00 2001
From: "Tianlang (Jackie) Chen" <305351710+jackiectl2@users.noreply.github.com>
Date: Tue, 22 Sep 2026 00:13:28 -0400
Subject: [PATCH 2/3] Add welcome step before dimension choice
---
static/dimension-switch.css | 11 ++++++++++-
static/dimension-switch.js | 34 +++++++++++++++++++++++++---------
2 files changed, 35 insertions(+), 10 deletions(-)
diff --git a/static/dimension-switch.css b/static/dimension-switch.css
index 70f1f91..4ca1bd1 100644
--- a/static/dimension-switch.css
+++ b/static/dimension-switch.css
@@ -50,6 +50,10 @@
backdrop-filter: blur(8px);
}
+.dimension-choice [hidden] {
+ display: none;
+}
+
.dimension-choice-kicker {
margin: 0 0 24px;
color: #5046bd;
@@ -80,6 +84,10 @@
margin-top: 32px;
}
+.dimension-choice-actions.welcome {
+ grid-template-columns: minmax(0, 270px);
+}
+
.dimension-choice-action {
display: flex;
min-height: 58px;
@@ -117,6 +125,7 @@
@media (max-width: 600px) {
.dimension-corner-link { top: 68px; right: 12px; padding: 0 12px; }
- .dimension-choice-actions { grid-template-columns: 1fr; }
+ .dimension-choice-actions,
+ .dimension-choice-actions.welcome { grid-template-columns: 1fr; }
.dimension-choice-lead { font-size: 15px; }
}
diff --git a/static/dimension-switch.js b/static/dimension-switch.js
index 09edf24..70aa74b 100644
--- a/static/dimension-switch.js
+++ b/static/dimension-switch.js
@@ -21,18 +21,34 @@
const dialog = document.createElement("dialog");
dialog.className = "dimension-choice";
- dialog.setAttribute("aria-labelledby", "dimension-choice-title");
+ dialog.setAttribute("aria-labelledby", "dimension-welcome-title");
dialog.innerHTML = `
- TIANLANG (JACKIE) CHEN · PERSONAL WEBSITE
- Choose your dimension.
- Explore the same personal journey in an interactive 3D car ride, or read it here as a 2D website.
-
- The 3D car ride works best on a desktop browser.
+
+ TIANLANG (JACKIE) CHEN · PERSONAL WEBSITE
+ Welcome to Jackie's Website.
+ This is my personal website. I share my education, research, and projects here in two different ways.
+
+
+
+
+
+ TIANLANG (JACKIE) CHEN · PERSONAL WEBSITE
+ Choose your dimension.
+ Explore the same personal journey in an interactive 3D car ride, or read it here as a 2D website.
+
+ The 3D car ride works best on a desktop browser.
+
`;
document.body.appendChild(dialog);
+ dialog.querySelector("[data-continue]").addEventListener("click", () => {
+ dialog.querySelector('[data-stage="welcome"]').hidden = true;
+ dialog.querySelector('[data-stage="choice"]').hidden = false;
+ dialog.setAttribute("aria-labelledby", "dimension-choice-title");
+ dialog.querySelector("#dimension-choice-title").focus();
+ });
dialog.querySelector("[data-enter-2d]").addEventListener("click", () => {
dialog.close();
dialog.remove();
From 756054947580d9c97b7f7b6ffc6dce04d809b73d Mon Sep 17 00:00:00 2001
From: "Tianlang (Jackie) Chen" <305351710+jackiectl2@users.noreply.github.com>
Date: Tue, 22 Sep 2026 00:16:03 -0400
Subject: [PATCH 3/3] Use English copy for dimension entry
---
content/projects/more/index.md | 2 +-
static/dimension-switch.js | 15 +++++++--------
2 files changed, 8 insertions(+), 9 deletions(-)
diff --git a/content/projects/more/index.md b/content/projects/more/index.md
index 70253c8..7b8db65 100644
--- a/content/projects/more/index.md
+++ b/content/projects/more/index.md
@@ -1,5 +1,5 @@
---
-title: "More steamers on the next cart · 敬請期待"
+title: "More work coming soon"
summary: More work is on the way — this slot exists so the room to grow is visible.
date: 2025-12-31
tags:
diff --git a/static/dimension-switch.js b/static/dimension-switch.js
index 70aa74b..082bdbe 100644
--- a/static/dimension-switch.js
+++ b/static/dimension-switch.js
@@ -5,8 +5,8 @@
const switchLink = document.createElement("a");
switchLink.className = "dimension-corner-link";
switchLink.href = carUrl;
- switchLink.textContent = "3D Car ↗";
- switchLink.setAttribute("aria-label", "Switch to the 3D car website");
+ switchLink.textContent = "3D Website ↗";
+ switchLink.setAttribute("aria-label", "Switch to the 3D website");
document.body.appendChild(switchLink);
const url = new URL(window.location.href);
@@ -26,20 +26,19 @@
TIANLANG (JACKIE) CHEN · PERSONAL WEBSITE
Welcome to Jackie's Website.
- This is my personal website. I share my education, research, and projects here in two different ways.
+ This is my personal website. You can explore it in 3D or 2D.
TIANLANG (JACKIE) CHEN · PERSONAL WEBSITE
- Choose your dimension.
- Explore the same personal journey in an interactive 3D car ride, or read it here as a 2D website.
+ Choose a version.
+ How would you like to explore my website?
- The 3D car ride works best on a desktop browser.
`;
document.body.appendChild(dialog);