chore: minor changes

src/pages/main/Exp.tsx

@@ -66,7 +66,8 @@ const Exp: React.FC = () => {
 
 						display: grid;
 						grid-template-columns: repeat(auto-fit, 20rem);
-						gap: 1rem;
+						row-gap: 0.5rem;
+						column-gap: 1rem;
 
 						@media screen and (min-width: ${offscreenWidth}) {
 							transform: translateX(0);

src/pages/main/Projects.tsx

@@ -1,61 +1,7 @@
 import React from "react";
 import { css } from "@emotion/css";
 import Container from "../../components/Container";
-
+import { projects } from "./data/project";
-const exp = [
-	{
-		title: window.location.hostname,
-		description: "This website.",
-		url: "https://github.com/MKRhere/pw2",
-		cat: "web",
-		tags: ["react", "vite"],
-	},
-	{
-		title: "hyperactive",
-		description: "Suite of web-app development libraries.",
-		url: "https://github.com/codefeathers/hyperactive",
-		cat: "lib",
-		tags: ["reactive", "ui-framework"],
-	},
-	{
-		title: "denoland/node_shims",
-		description:
-			"Node shims for Deno’s runtime API. Contributed repo into official denoland.",
-		url: "https://github.com/denoland/node_shims",
-		cat: "lib",
-		tags: ["deno", "shims"],
-	},
-	{
-		title: "Telegraf",
-		description:
-			"Active maintainer of one of the most popular Telegram Bot API libraries for Node.",
-		url: "https://github.com/telegraf/telegraf",
-		cat: "lib",
-		tags: ["typescript", "telegram", "bot-api"],
-	},
-	{
-		title: "runtype",
-		description: "Safely bring runtime values into TypeScript.",
-		url: "https://codefeathers.github.io/runtype",
-		cat: "lib",
-		tags: ["typescript", "runtime"],
-	},
-	{
-		title: "Telecraft",
-		description: "Pluggable Minecraft server administration toolkit.",
-		url: "https://github.com/MadrasMC/telecraft",
-		cat: "tool",
-		tags: ["minecraft", "node"],
-	},
-	{
-		title: "Storymap",
-		description:
-			"Reverse-engineered thirdparty map renderer for Vintage Story in Zig ⚡️",
-		// url: "https://github.com/MadrasMC/storymap",
-		cat: "tool",
-		tags: ["vintage-story", "zig"],
-	},
-];
 
 type Project = {
 	title: string;
@@ -104,6 +50,7 @@ const ProjectUnit: React.FC<Project> = ({
 					className={css`
 						color: #bdbdbd;
 						margin-bottom: 0.8rem;
+						font-size: 0.9rem;
 					`}>
 					{description}
 				</p>
@@ -159,17 +106,12 @@ const Exp: React.FC = () => {
 			<p>Some tools, libraries, and apps over time:</p>
 			<div
 				className={css`
-					display: flex;
+					display: grid;
+					grid-template-columns: repeat(auto-fit, 20rem);
+					gap: 1rem;
 					width: 100%;
-					flex-wrap: wrap;
-					gap: 2rem;
-
-					& > * {
-						flex-basis: 15rem;
-						flex-grow: 1;
-					}
 				`}>
-				{exp.map(unit => (
+				{projects.map(unit => (
 					<ProjectUnit {...unit} key={unit.title} />
 				))}
 			</div>

src/pages/main/data/project.ts

@@ -0,0 +1,54 @@
+export const projects = [
+	{
+		title: window.location.hostname,
+		description: "This website.",
+		url: "https://github.com/MKRhere/pw2",
+		cat: "web",
+		tags: ["react", "vite"],
+	},
+	{
+		title: "hyperactive",
+		description: "Suite of web-app development libraries.",
+		url: "https://github.com/codefeathers/hyperactive",
+		cat: "lib",
+		tags: ["reactive", "ui-framework"],
+	},
+	{
+		title: "denoland/node_shims",
+		description:
+			"Node shims for Deno’s runtime API. Contributed repo into official denoland.",
+		url: "https://github.com/denoland/node_shims",
+		cat: "lib",
+		tags: ["deno", "shims"],
+	},
+	{
+		title: "Telegraf",
+		description:
+			"Active maintainer of one of the most popular Telegram Bot API libraries for Node.",
+		url: "https://github.com/telegraf/telegraf",
+		cat: "lib",
+		tags: ["typescript", "telegram", "bot-api"],
+	},
+	{
+		title: "runtype",
+		description: "Safely bring runtime values into TypeScript.",
+		url: "https://codefeathers.github.io/runtype",
+		cat: "lib",
+		tags: ["typescript", "runtime"],
+	},
+	{
+		title: "Telecraft",
+		description: "Pluggable Minecraft server administration toolkit.",
+		url: "https://github.com/MadrasMC/telecraft",
+		cat: "tool",
+		tags: ["minecraft", "node"],
+	},
+	{
+		title: "Storymap (WIP)",
+		description:
+			"Reverse-engineered thirdparty map renderer for Vintage Story in Zig ⚡️",
+		// url: "https://github.com/MadrasMC/storymap",
+		cat: "tool",
+		tags: ["vintage-story", "zig", "wip"],
+	},
+];