From 55e03e845b90c2cd1f83c13a52d72dcf0cd82830 Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Sat, 8 Jun 2024 03:47:13 +0530
Subject: [PATCH] feat: space everything tighter, refine animations

---
 src/components/Container.tsx   |  8 +++-----
 src/components/Exp/Content.tsx | 35 +++++++++++++++++++----------------
 src/components/constants.ts    |  2 +-
 src/index.css                  |  2 +-
 src/pages/main/Exp.tsx         |  2 +-
 5 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 20460cc..c084be1 100644
--- a/src/components/Container.tsx
+++ b/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;
-
-						& > * {
-							margin-bottom: 2rem;
-						}
+						display: flex;
+						flex-direction: column;
+						gap: 2rem;
 					`,
 					className,
 				)}
diff --git a/src/components/Exp/Content.tsx b/src/components/Exp/Content.tsx
index d26451f..d8f8ca2 100644
--- a/src/components/Exp/Content.tsx
+++ b/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`
-				width: 0.25rem;
-				height: 0.25rem;
-				background: #333333;
-				background: #ffffff;
-				border-radius: 100%;
-				position: absolute;
-				top: -3rem;
-				left: 0;
-				z-index: 100;
-			`}></div>
+			className={cx(
+				"timeline-circle",
+				css`
+					width: 0.3rem;
+					height: 0.3rem;
+					background: #333333;
+					border-radius: 100%;
+					position: absolute;
+					top: -3rem;
+					left: 0;
+					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>
diff --git a/src/components/constants.ts b/src/components/constants.ts
index a4a9d3c..ebc745e 100644
--- a/src/components/constants.ts
+++ b/src/components/constants.ts
@@ -1 +1 @@
-export const offscreenWidth = "85rem";
+export const offscreenWidth = "82rem";
diff --git a/src/index.css b/src/index.css
index 248a923..f46b338 100644
--- a/src/index.css
+++ b/src/index.css
@@ -64,7 +64,7 @@ h1 {
 }
 
 h2 {
-	font-size: min(10vw, 3rem);
+	font-size: min(8vw, 3rem);
 }
 
 h3 {
diff --git a/src/pages/main/Exp.tsx b/src/pages/main/Exp.tsx
index c9611ee..670ebe7 100644
--- a/src/pages/main/Exp.tsx
+++ b/src/pages/main/Exp.tsx
@@ -59,7 +59,7 @@ const Exp: React.FC = () => {
 						}
 
 						& > * {
-							padding-top: 3rem;
+							padding-top: 2.4rem;
 						}
 					`,
 				)}>