chore: move Container to index and relieve each page of the responsibility

src/index.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import useLocation from "wouter/use-location";
 
 import { normalise } from "./util";
+import Container from "./components/Container";
 
 const Home = lazy(() => import("./pages/main/Home"));
 const Exp = lazy(() => import("./pages/main/Exp"));
@@ -34,8 +35,10 @@ function App() {
 
 createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
+		<Container>
 			<Suspense>
 				<App />
 			</Suspense>
+		</Container>
 	</React.StrictMode>,
 );

src/pages/main/Contact.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { css } from "@emotion/css";
 import { useEffect, useState } from "react";
-import Container from "../../components/Container";
 import { setupCursorTracking } from "../../util/index.ts";
 import { ReactComponent as Logo } from "../../assets/logo.svg";
 import { Flippable } from "../../components/Flippable.tsx";
@@ -96,11 +95,11 @@ const Contact: React.FC = () => {
 	}, []);
 
 	return (
-		<Container>
+		<>
 			<h1>MKRhere</h1>
 			{visible < 1 && (
 				<AnimateEntry as="article" delay={500}>
-					<p>Great, You've distributed all the cards!</p>
+					<p>Great. You've distributed all the cards!</p>
 					<p>What now?</p>
 					<br />
 					<a href="/">Start over?</a>
@@ -246,7 +245,7 @@ const Contact: React.FC = () => {
 					</Draggable>
 				))}
 			</AnimateEntry>
-		</Container>
+		</>
 	);
 };
 

src/pages/main/Exp.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { css, cx } from "@emotion/css";
-import Container from "../../components/Container";
 import { ExpUnit } from "../../components/Exp/Unit";
 import { age, experience } from "./data/experience";
 import { offscreenWidth } from "../../components/constants";
@@ -36,7 +35,7 @@ const Exp: React.FC = () => {
 	}, []);
 
 	return (
-		<Container>
+		<>
 			<h2>
 				I’m a {age} year old developer from
 				<br />
@@ -94,7 +93,7 @@ const Exp: React.FC = () => {
 						/>
 					))}
 			</div>
-		</Container>
+		</>
 	);
 };
 

src/pages/main/Home.tsx

@@ -1,16 +1,21 @@
 import React from "react";
-import Container from "../../components/Container";
 import FlickerList, { Tooltip } from "../../components/FlickerList";
 import { ReactComponent as Arrow } from "../../assets/arrow-thin.svg";
 import { css } from "@emotion/css";
 import { setupCursorTracking } from "../../util";
 import { Emoji } from "../../components/Emoji";
+import { AnimateEntry } from "../../components/AnimateEntry";
 
 const Home: React.FC = () => {
 	return (
-		<Container
+		<AnimateEntry
+			as="main"
+			delay={200}
 			className={css`
 				--gap: 2.2rem;
+				display: flex;
+				flex-direction: column;
+				gap: var(--gap);
 			`}>
 			<section>
 				<h1
@@ -155,7 +160,7 @@ const Home: React.FC = () => {
 					</button>
 				</article>
 			</main>
-		</Container>
+		</AnimateEntry>
 	);
 };
 

src/pages/main/Work.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { css, cx } from "@emotion/css";
-import Container from "../../components/Container";
 import { otherProjects, projects, type Project } from "./data/project";
 
 const styles = {
@@ -138,7 +137,7 @@ const otherProjectsStyle = css`
 
 const Exp: React.FC = () => {
 	return (
-		<Container>
+		<>
 			<h2>Things I've built</h2>
 			<p>A few projects I'm proud of:</p>
 			<div
@@ -203,7 +202,7 @@ const Exp: React.FC = () => {
 					))}
 				</tbody>
 			</table>
-		</Container>
+		</>
 	);
 };