From 1e1679df79a4736debcf44eb579174ce48c999d0 Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Wed, 4 Sep 2024 12:38:43 +0530
Subject: [PATCH] chore: rename Projects -> Work

---
 src/components/Menu.tsx     |   2 +-
 src/index.tsx               |   4 +-
 src/pages/main/Projects.tsx | 122 --------------------------------------------
 src/pages/main/Work.tsx     | 122 ++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 125 insertions(+), 125 deletions(-)
 delete mode 100644 src/pages/main/Projects.tsx
 create mode 100644 src/pages/main/Work.tsx

diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index b06b381..59a48b7 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -7,7 +7,7 @@ import { useNav } from "../util";
 export const MENU = {
 	Home: "/",
 	Experience: "/experience",
-	Projects: "/projects",
+	Work: "/work",
 	Contact: "/contact",
 } as const;
 
diff --git a/src/index.tsx b/src/index.tsx
index 92fa0b2..9c0f5af 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,7 +6,7 @@ import { normalise } from "./util";
 
 const Home = lazy(() => import("./pages/main/Home"));
 const Exp = lazy(() => import("./pages/main/Exp"));
-const Projects = lazy(() => import("./pages/main/Projects"));
+const Work = lazy(() => import("./pages/main/Work"));
 const Contact = lazy(() => import("./pages/main/Contact"));
 
 const NotFound = lazy(() => import("./pages/main/404"));
@@ -24,7 +24,7 @@ function App() {
 	if (normalised === "/") return <Home />;
 	if (normalised === "/experience") return <Exp />;
 	if (normalised.startsWith("/experience/")) return <Exp />;
-	if (normalised === "/projects") return <Projects />;
+	if (normalised === "/work") return <Work />;
 	if (normalised === "/contact") return <Contact />;
 	// if (normalised === "/live") return <Live />;
 	// if (normalised === "/blog") return <BlogHome />;
diff --git a/src/pages/main/Projects.tsx b/src/pages/main/Projects.tsx
deleted file mode 100644
index ccdc6df..0000000
--- a/src/pages/main/Projects.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from "react";
-import { css } from "@emotion/css";
-import Container from "../../components/Container";
-import { projects } from "./data/project";
-
-type Project = {
-	title: string;
-	url?: string;
-	description: string;
-	cat: string;
-	tags: string[];
-};
-
-const ProjectUnit: React.FC<Project> = ({
-	title,
-	url,
-	description,
-	cat,
-	tags,
-}) => {
-	return (
-		<div
-			className={css`
-				position: relative;
-				background: var(--card-bg);
-				padding: 1.5rem;
-				cursor: default;
-				border-radius: 0.5rem;
-
-				display: flex;
-				flex-direction: column;
-				transition: all 200ms;
-
-				:hover {
-					filter: hue-rotate(30deg) invert(0.04);
-					transform: translateY(-0.2rem);
-				}
-			`}>
-			<a
-				className={css`
-					display: block;
-					text-decoration: none;
-					font-weight: 500;
-				`}
-				href={url}
-				target="_blank"
-				rel="noreferrer">
-				<h4>{title}</h4>
-				<p
-					className={css`
-						color: #bdbdbd;
-						margin-bottom: 0.8rem;
-						font-size: 0.9rem;
-					`}>
-					{description}
-				</p>
-				<p
-					className={css`
-						font-weight: 500;
-						color: #9f9f9f;
-						font-size: 0.8rem;
-						margin-top: auto;
-					`}>
-					{tags.map(tag => (
-						<span
-							key={tag}
-							className={css`
-								display: inline-block;
-								padding: 0.2rem 0.4rem;
-								background: var(--card-tags);
-								color: white;
-								border-radius: 0.2rem;
-								transition: all 200ms;
-
-								:hover {
-									background: var(--card-tags-hover);
-								}
-
-								& + & {
-									margin-left: 0.6rem;
-								}
-							`}>
-							{tag}
-						</span>
-					))}
-				</p>
-				<span
-					className={css`
-						position: absolute;
-						right: 1rem;
-						bottom: 1rem;
-						color: #bbbbbb;
-						font-size: 0.8rem;
-					`}>
-					{cat}
-				</span>
-			</a>
-		</div>
-	);
-};
-
-const Exp: React.FC = () => {
-	return (
-		<Container>
-			<h2>Things I've built</h2>
-			<p>Some tools, libraries, and apps over time:</p>
-			<div
-				className={css`
-					display: grid;
-					grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-					gap: 1rem;
-					width: 100%;
-				`}>
-				{projects.map(unit => (
-					<ProjectUnit {...unit} key={unit.title} />
-				))}
-			</div>
-		</Container>
-	);
-};
-
-export default Exp;
diff --git a/src/pages/main/Work.tsx b/src/pages/main/Work.tsx
new file mode 100644
index 0000000..ccdc6df
--- /dev/null
+++ b/src/pages/main/Work.tsx
@@ -0,0 +1,122 @@
+import React from "react";
+import { css } from "@emotion/css";
+import Container from "../../components/Container";
+import { projects } from "./data/project";
+
+type Project = {
+	title: string;
+	url?: string;
+	description: string;
+	cat: string;
+	tags: string[];
+};
+
+const ProjectUnit: React.FC<Project> = ({
+	title,
+	url,
+	description,
+	cat,
+	tags,
+}) => {
+	return (
+		<div
+			className={css`
+				position: relative;
+				background: var(--card-bg);
+				padding: 1.5rem;
+				cursor: default;
+				border-radius: 0.5rem;
+
+				display: flex;
+				flex-direction: column;
+				transition: all 200ms;
+
+				:hover {
+					filter: hue-rotate(30deg) invert(0.04);
+					transform: translateY(-0.2rem);
+				}
+			`}>
+			<a
+				className={css`
+					display: block;
+					text-decoration: none;
+					font-weight: 500;
+				`}
+				href={url}
+				target="_blank"
+				rel="noreferrer">
+				<h4>{title}</h4>
+				<p
+					className={css`
+						color: #bdbdbd;
+						margin-bottom: 0.8rem;
+						font-size: 0.9rem;
+					`}>
+					{description}
+				</p>
+				<p
+					className={css`
+						font-weight: 500;
+						color: #9f9f9f;
+						font-size: 0.8rem;
+						margin-top: auto;
+					`}>
+					{tags.map(tag => (
+						<span
+							key={tag}
+							className={css`
+								display: inline-block;
+								padding: 0.2rem 0.4rem;
+								background: var(--card-tags);
+								color: white;
+								border-radius: 0.2rem;
+								transition: all 200ms;
+
+								:hover {
+									background: var(--card-tags-hover);
+								}
+
+								& + & {
+									margin-left: 0.6rem;
+								}
+							`}>
+							{tag}
+						</span>
+					))}
+				</p>
+				<span
+					className={css`
+						position: absolute;
+						right: 1rem;
+						bottom: 1rem;
+						color: #bbbbbb;
+						font-size: 0.8rem;
+					`}>
+					{cat}
+				</span>
+			</a>
+		</div>
+	);
+};
+
+const Exp: React.FC = () => {
+	return (
+		<Container>
+			<h2>Things I've built</h2>
+			<p>Some tools, libraries, and apps over time:</p>
+			<div
+				className={css`
+					display: grid;
+					grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+					gap: 1rem;
+					width: 100%;
+				`}>
+				{projects.map(unit => (
+					<ProjectUnit {...unit} key={unit.title} />
+				))}
+			</div>
+		</Container>
+	);
+};
+
+export default Exp;