fix: scroll issues in /experience

src/components/Container.tsx

@@ -89,8 +89,9 @@ const Container: React.FC<{
 	}
 
 	useEffect(() => {
-		// scroll back to top when new page is loaded
-		window.scrollTo({ top: 0 });
+		const depth = location.split("/").length;
+		// scroll back to top when new page is loaded, only for top-level pages
+		if (depth === 1) window.scrollTo({ top: 0 });
 
 		if (highlightCircle.current) {
 			highlightCircle.current.classList.add("highlight");

src/components/Exp/Story.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { css, cx } from "@emotion/css";
 import { ReactComponent as Close } from "../../assets/close.svg";
 import { Experience } from "./types";
@@ -138,66 +138,70 @@ const story = css`
 	}
 `;
 
+const story_logo = css`
+	height: 4rem;
+	width: 4rem;
+	margin-inline-start: var(--padding);
+
+	background: rgba(40, 40, 40);
+	border-radius: 100%;
+
+	& img {
+		height: 100%;
+		border-radius: 100%;
+	}
+`;
+
+const closer = css`
+	display: none;
+	appearance: none;
+	border: none;
+	background: var(--card-active);
+	color: var(--text-subdued);
+	width: 1.8rem;
+	height: 1.8rem;
+	padding: 0.2rem;
+	border-radius: 3rem;
+
+	& svg {
+		width: 0.8rem;
+		height: 0.8rem;
+	}
+
+	/* set in mobile mode */
+	/* display: flex; */
+	justify-content: center;
+	align-items: center;
+
+	position: absolute;
+	top: calc(1rem + var(--padding));
+	right: var(--padding);
+	cursor: pointer;
+
+	transform: rotate(90deg);
+`;
+
 export const Story = ({ title, description, logo, active }: Experience) => {
+	const ref = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (active) setTimeout(() => ref.current?.scrollIntoView(true), 300);
+	}, [active]);
+
 	return (
 		<div
+			ref={ref}
 			className={cx(story, "story")}
 			id={active ? "active-story" : undefined}>
 			<div aria-hidden className="story-handle" />
 			<div className="story-content">
-				<picture
-					className={cx(
-						"story-logo",
-						css`
-							height: 4rem;
-							width: 4rem;
-							margin-inline-start: var(--padding);
-
-							background: rgba(40, 40, 40);
-							border-radius: 100%;
-
-							& img {
-								height: 100%;
-								border-radius: 100%;
-							}
-						`,
-					)}>
+				<picture className={cx("story-logo", story_logo)}>
 					<source srcSet={`/assets/logos/` + logo + ".avif"} />
 					<img alt={title + " logo"} src={`/assets/logos/` + logo + ".png"} />
 				</picture>
 				<button
 					title="Close story"
-					className={cx(
-						"closer",
-						css`
-							display: none;
-							appearance: none;
-							border: none;
-							background: var(--card-active);
-							color: var(--text-subdued);
-							width: 1.8rem;
-							height: 1.8rem;
-							padding: 0.2rem;
-							border-radius: 3rem;
-
-							& svg {
-								width: 0.8rem;
-								height: 0.8rem;
-							}
-
-							/* set in mobile mode */
-							/* display: flex; */
-							justify-content: center;
-							align-items: center;
-
-							position: absolute;
-							top: calc(1rem + var(--padding));
-							right: var(--padding);
-							cursor: pointer;
-
-							transform: rotate(90deg);
-						`,
-					)}
+					className={cx("closer", closer)}
 					onClick={() => window.history.back()}>
 					<Close />
 				</button>

src/pages/main/Exp.tsx

@@ -8,6 +8,24 @@ import useSearchParams from "../../util/useSearchParams";
 import useLocation from "wouter/use-location";
 import { AnimateEntry } from "../../components/AnimateEntry";
 
+const units = css`
+	width: 100%;
+	--item-padding: 1.2rem;
+
+	display: grid;
+	grid-template-columns: repeat(auto-fit, 20rem);
+	row-gap: 0.5rem;
+	column-gap: 1rem;
+
+	@media screen and (min-width: ${offscreenWidth}) {
+		transform: translateX(0);
+	}
+
+	& > * {
+		padding-top: 2.4rem;
+	}
+`;
+
 const exp_route = /^\/experience\/?[^\/]*$/;
 const slug_replace = /^\/experience\/?/;
 
@@ -64,25 +82,7 @@ const Exp: React.FC = () => {
 			<AnimateEntry
 				as="section"
 				delay={entryDelay ? 150 : 0}
-				className={cx(
-					css`
-						width: 100%;
-						--item-padding: 1.2rem;
-
-						display: grid;
-						grid-template-columns: repeat(auto-fit, 20rem);
-						row-gap: 0.5rem;
-						column-gap: 1rem;
-
-						@media screen and (min-width: ${offscreenWidth}) {
-							transform: translateX(0);
-						}
-
-						& > * {
-							padding-top: 2.4rem;
-						}
-					`,
-				)}>
+				className={cx(units)}>
 				{experience
 					.filter(unit => !tags.size || unit.tags.some(tag => tags.has(tag)))
 					.map((unit, i) => (

src/pages/main/data/experience.tsx

@@ -258,11 +258,10 @@ export const experience = [
 					At Hugo's Way, I played a key role in stabilising their currency
 					exchange platform, ensuring smooth and reliable operations.
 					Recognising the imperative for scalability and adaptability, I
-					spearheaded the transition from a monolithic architecture to a more
-					agile and modular service-oriented one to achieve flexibility to
-					deploy as whitelabelled services. This structural overhaul not only
-					bolstered performance but also streamlined development cycles and
-					maintenance.
+					spearheaded the transition from a monolithic architecture to be more
+					agile and modular service-oriented to achieve flexibility to deploy
+					whitelabelled services. This structural overhaul not only improved
+					performance but also streamlined development cycles.
 				</p>
 
 				<p>