[refactor]

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

src/components/Dashed.js

@@ -0,0 +1,12 @@
+import { css } from "emotion";
+
+const Dashed = props => (
+	<span
+		className={css`
+			border-bottom: 1px dashed var(--text-color);
+		`}>
+		{props.children}
+	</span>
+);
+
+export default Dashed;

src/pages/Exp.js

@@ -75,7 +75,7 @@ const ExpUnit = ({ title, location, position, year }) => {
 
 function Exp() {
 	return (
-		<Container>
+		<Container next="/projects">
 			<h2>I’m a 25 year old developer from Chennai, India.</h2>
 			<p>Here are some places I’ve worked at:</p>
 			<div
@@ -92,7 +92,7 @@ function Exp() {
 					}
 				`}>
 				{exp.map(unit => (
-					<ExpUnit {...unit} />
+					<ExpUnit {...unit} key={unit.title} />
 				))}
 			</div>
 		</Container>

src/pages/Home.js

@@ -1,20 +1,10 @@
-import { css } from "emotion";
 import Container from "../components/Container";
-import Heading from "../components/Heading";
+import Dashed from "../components/Dashed";
-
-const Dashed = props => (
-	<span
-		className={css`
-			border-bottom: 1px dashed #fff;
-		`}>
-		{props.children}
-	</span>
-);
 
 function Home() {
 	return (
-		<Container>
+		<Container next="/experience">
-			<Heading>MKRhere</Heading>
+			<h1>MKRhere</h1>
 			<p>
 				Web home of <Dashed>designer</Dashed>, <Dashed>developer</Dashed>, and{" "}
 				<Dashed>architect</Dashed> <b>Muthu Kumar.</b>

src/pages/Projects.js

@@ -24,25 +24,25 @@ const exp = [
 		tags: ["minecraft", "node"],
 	},
 	{
-		title: window.location.hostname,
+		title: "mkr/bin",
-		description: "This website.",
+		description: "Frontend JavaScript-free code-sharing pastebin app.",
-		url: "https://github.com/mkrhere/pw2",
+		url: "https://github.com/mkrhere/bin",
 		cat: "web",
-		tags: ["react", "css-in-js"],
+		tags: ["mithril", "ssr", "pastebin"],
 	},
 	{
-		title: "runtype",
+		title: "The Guard",
-		description: "Runtime-safe library to bring untyped values into TypeScript.",
+		description: "Telegram bot to help administer networks with large number of groups.",
-		url: "https://codefeathers.github.io/runtype",
+		url: "https://github.com/thedevs-network/the-guard",
-		cat: "lib",
+		cat: "bot",
-		tags: ["typescript", "runtime"],
+		tags: ["telegram", "bot"],
 	},
 	{
-		title: "Telecraft",
+		title: "vy",
-		description: "Pluggable Minecraft server management utils.",
+		description: "(in dev) Stream-first functional utilities library.",
-		url: "https://github.com/telecraft",
+		url: "https://github.com/MKRhere/vy",
-		cat: "tool",
+		cat: "lib",
-		tags: ["minecraft", "node"],
+		tags: ["typescript", "stream", "functional-programming"],
 	},
 ];
 
@@ -103,7 +103,7 @@ const ProjectUnit = ({ title, url, description, cat, tags }) => {
 						right: 1rem;
 						bottom: 1rem;
 						font-weight: bold;
-						color: #bbb;
+						color: #bbbbbb;
 						font-size: 0.8rem;
 					`}>
 					{cat}
@@ -115,7 +115,7 @@ const ProjectUnit = ({ title, url, description, cat, tags }) => {
 
 function Exp() {
 	return (
-		<Container>
+		<Container next="/contact">
 			<h2>What else have I built?</h2>
 			<p>Some tools, libraries, and apps over time:</p>
 			<div
@@ -132,7 +132,7 @@ function Exp() {
 					}
 				`}>
 				{exp.map(unit => (
-					<ProjectUnit {...unit} />
+					<ProjectUnit {...unit} key={unit.title} />
 				))}
 			</div>
 		</Container>