(feat) update projects

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

src/components/Container.tsx

@@ -114,7 +114,7 @@ const Container: React.FunctionComponent<{
 	return (
 		<div
 			className={css`
-				background: var(--background-color);
+				background: var(--background-colour);
 				padding: 15rem calc(100vw / 8) 8rem calc(100vw / 8);
 				overflow-x: hidden;
 				min-height: 100vh;
@@ -146,7 +146,7 @@ const Container: React.FunctionComponent<{
 								width: 5rem;
 								height: 5rem;
 								border-radius: 100%;
-								background: var(--primary-color);
+								background: var(--primary-colour);
 								z-index: 0;
 								opacity: 0%;
 
@@ -190,7 +190,7 @@ const Container: React.FunctionComponent<{
 						${arrowReversed ? "rotate: 180deg;" : ""}
 
 						&:hover * {
-							fill: var(--primary-color);
+							fill: var(--primary-colour);
 						}
 					`}>
 					<Right />

src/components/Dashed.tsx

@@ -4,7 +4,7 @@ import { css } from "emotion";
 const Dashed: React.FunctionComponent = ({ children }) => (
 	<span
 		className={css`
-			border-bottom: 1px dashed var(--text-color);
+			border-bottom: 1px dashed var(--text-colour);
 		`}>
 		{children}
 	</span>

src/index.css

@@ -1,7 +1,9 @@
 :root {
-	--background-color: #000000;
-	--primary-color: #ff5555;
-	--text-color: #d3cfc9;
+	--background-colour: rgb(0, 0, 0);
+	--card-bg: rgb(18, 18, 18);
+	--card-tags: rgb(34, 34, 34);
+	--primary-colour: rgb(255, 85, 85);
+	--text-colour: rgb(211, 207, 201);
 	font-weight: 500;
 	font-size: 16px;
 }
@@ -16,7 +18,7 @@ body {
 		"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	color: var(--text-color);
+	color: var(--text-colour);
 }
 
 code {
@@ -40,7 +42,7 @@ h3,
 h4,
 h5,
 h6 {
-	color: var(--primary-color);
+	color: var(--primary-colour);
 }
 
 h1,
@@ -57,9 +59,9 @@ h2 {
 }
 
 a {
-	color: var(--text-color);
+	color: var(--text-colour);
 }
 
 a:hover {
-	color: var(--primary-color);
+	color: var(--primary-colour);
 }

src/pages/Projects.tsx

@@ -8,7 +8,14 @@ const exp = [
 		description: "This website.",
 		url: "https://github.com/mkrhere/pw2",
 		cat: "web",
-		tags: ["react", "css-in-js"],
+		tags: ["react", "vite"],
+	},
+	{
+		title: "hyperactive",
+		description: "(in dev) Fully reactive UI framework.",
+		url: "https://github.com/codefeathers/hyperactive",
+		cat: "lib",
+		tags: ["reactive", "ui-framework"],
 	},
 	{
 		title: "runtype",
@@ -38,13 +45,6 @@ const exp = [
 		cat: "bot",
 		tags: ["telegram", "bot"],
 	},
-	{
-		title: "vy",
-		description: "(in dev) Stream-first functional utilities library.",
-		url: "https://github.com/MKRhere/vy",
-		cat: "lib",
-		tags: ["typescript", "stream", "functional-programming"],
-	},
 ];
 
 type Project = {
@@ -60,25 +60,20 @@ const ProjectUnit: React.FunctionComponent<Project> = ({ title, url, description
 		<div
 			className={css`
 				position: relative;
-				border: 0.2rem solid var(--primary-color);
-				padding: 1rem;
+				background: var(--card-bg);
+				padding: 1.5rem;
 				cursor: default;
+				border-radius: 0.5rem;
 
 				display: flex;
 				flex-direction: column;
-				transition: filter;
+				transition: all 200ms;
 
 				:hover {
-					filter: hue-rotate(30deg);
+					filter: hue-rotate(30deg) invert(0.05);
+					transform: translateY(-0.2rem);
 				}
 			`}>
-			<div
-				className={css`
-					position: absolute;
-					border-top: 0.5rem solid var(--primary-color);
-					top: 0;
-					left: 0;
-				`}></div>
 			<a
 				className={css`
 					display: block;
@@ -97,13 +92,32 @@ const ProjectUnit: React.FunctionComponent<Project> = ({ title, url, description
 				</p>
 				<p
 					className={css`
-						font-weight: 800;
+						font-weight: 500;
 						color: #9f9f9f;
 						font-size: 0.8rem;
 						margin-top: auto;
 					`}>
 					{tags.map(tag => (
-						<span key={tag}>#{tag} </span>
+						<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 {
+									transform: translateY(-0.1rem);
+								}
+
+								& + & {
+									margin-left: 0.6rem;
+								}
+							`}>
+							{tag}
+						</span>
 					))}
 				</p>
 				<span