feat: space everything tighter, refine animations

src/components/Container.tsx

@@ -211,7 +211,6 @@ const Container: React.FC<{
 								border-radius: 100%;
 								border: 0;
 								background: none;
-								box-shadow: 0 0 1rem 0 rgba(100, 100, 100, 0.5);
 								cursor: pointer;
 
 								& > svg {
@@ -308,10 +307,9 @@ const Container: React.FC<{
 						max-width: 62rem;
 						min-height: 100%;
 						margin: auto;
-
+						display: flex;
-						& > * {
+						flex-direction: column;
-							margin-bottom: 2rem;
+						gap: 2rem;
-						}
 					`,
 					className,
 				)}

src/components/Exp/Content.tsx

@@ -1,9 +1,9 @@
-import { css } from "@emotion/css";
+import { css, cx } from "@emotion/css";
 import React from "react";
 import { setupCursorTracking } from "../../util";
 import { Experience } from "./types";
 
-const Circle: React.FC = () => (
+const TimelineSegment: React.FC = () => (
 	<div className="timeline-segment" aria-hidden>
 		<div
 			className={css`
@@ -12,21 +12,25 @@ const Circle: React.FC = () => (
 				background: #333333;
 				left: -50vw;
 				position: absolute;
-				top: calc(-3rem + 0.2rem / 2);
+				top: calc(-3rem + 0.3rem / 2);
+				transform: translateY(-50%);
 				z-index: 0;
 			`}></div>
 		<div
-			className={css`
+			className={cx(
-				width: 0.25rem;
+				"timeline-circle",
-				height: 0.25rem;
+				css`
-				background: #333333;
+					width: 0.3rem;
-				background: #ffffff;
+					height: 0.3rem;
-				border-radius: 100%;
+					background: #333333;
-				position: absolute;
+					border-radius: 100%;
-				top: -3rem;
+					position: absolute;
-				left: 0;
+					top: -3rem;
-				z-index: 100;
+					left: 0;
-			`}></div>
+					z-index: 100;
+					transition: background var(--transition-time) ease-in-out;
+				`,
+			)}></div>
 	</div>
 );
 
@@ -56,7 +60,6 @@ const btn = css`
 	@media (pointer: fine) {
 		&:hover {
 			background-color: var(--card-hover);
-			z-index: 1000;
 			box-shadow: 0 0 25rem 2rem rgba(190, 190, 190, 0.1);
 		}
 	}
@@ -92,7 +95,7 @@ export const Content = ({
 	return (
 		<button className={btn} onClick={onClick} ref={setupCursorTracking}>
 			<div className="dynamic-gradient" />
-			<Circle />
+			<TimelineSegment />
 			<h4>
 				{title}
 				<span className="year"> · ({year})</span>

src/components/constants.ts

@@ -1 +1 @@
-export const offscreenWidth = "85rem";
+export const offscreenWidth = "82rem";

src/index.css

@@ -64,7 +64,7 @@ h1 {
 }
 
 h2 {
-	font-size: min(10vw, 3rem);
+	font-size: min(8vw, 3rem);
 }
 
 h3 {

src/pages/main/Exp.tsx

@@ -59,7 +59,7 @@ const Exp: React.FC = () => {
 						}
 
 						& > * {
-							padding-top: 3rem;
+							padding-top: 2.4rem;
 						}
 					`,
 				)}>