[feat] Home, Exp, Project routes added

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

src/App.js

@@ -1,5 +1,17 @@
+import { Router } from "@reach/router";
+
+import Home from "./pages/Home";
+import Exp from "./pages/Exp";
+import Projects from "./pages/Projects";
+
 function App() {
-	return <div className="App"></div>;
+	return (
+		<Router>
+			<Home path="/" />
+			<Exp path="/experience" />
+			<Projects path="/projects" />
+		</Router>
+	);
 }
 
 export default App;

src/components/Container.js

@@ -0,0 +1,28 @@
+import { css } from "emotion";
+
+const Container = ({ children, ...props }) => (
+	<div
+		className={css`
+			background: #000;
+			padding: calc(100vw / 8);
+			overflow-x: hidden;
+			min-height: 100vh;
+		`}>
+		<div
+			className={css`
+				width: 100%;
+				max-width: 60rem;
+				min-height: 100%;
+				margin: auto;
+
+				& > * {
+					margin-bottom: 2rem;
+				}
+			`}
+			{...props}>
+			{children}
+		</div>
+	</div>
+);
+
+export default Container;

src/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./fonts.css";
 import "./index.css";
 import App from "./App";
 

src/pages/Exp.js

@@ -0,0 +1,102 @@
+import { css } from "emotion";
+import Container from "../components/Container";
+
+const exp = [
+	{ title: "BlueCube", location: "Chennai", position: "Architectural Intern", year: "2015" },
+	{ title: "Zoho", location: "Chennai", position: "Technical Content Writer", year: "2017" },
+	{
+		title: "Manoj Exports",
+		location: "Chennai",
+		position: "Designer & web developer",
+		year: "2017",
+	},
+	{ title: "Klenty", location: "Chennai", position: "Full stack developer", year: "2018" },
+	{
+		title: "Hugo's Way",
+		location: "Ireland (remote)",
+		position: "Full stack developer",
+		year: "2018-19",
+	},
+	{ title: "Feathers Studio", location: "Chennai", position: "Founder", year: "2019-present" },
+];
+
+const Circle = () => (
+	<div>
+		<div
+			className={css`
+				width: 200vw;
+				height: 1px;
+				background: #333333;
+				left: -50vw;
+				position: absolute;
+				top: calc(-2rem + 0.25rem / 2 - 0.5px);
+				z-index: 0;
+			`}></div>
+		<div
+			className={css`
+				width: 0.25rem;
+				height: 0.25rem;
+				background: #ffffff;
+				border-radius: 100%;
+				position: absolute;
+				top: -2rem;
+				left: 0;
+				z-index: 100;
+			`}></div>
+	</div>
+);
+
+const ExpUnit = ({ title, location, position, year }) => {
+	return (
+		<div
+			className={css`
+				position: relative;
+			`}>
+			<Circle />
+			<h3>
+				{title}, {location}
+			</h3>
+			<span
+				className={css`
+					color: #bdbdbd;
+				`}>
+				{position}
+			</span>
+			{" . "}
+			<span
+				className={css`
+					font-weight: 100;
+				`}>
+				{year}
+			</span>
+		</div>
+	);
+};
+
+function Exp() {
+	return (
+		<Container>
+			<h2>I’m a 25 year old developer from Chennai, India.</h2>
+			<p>Here are some places I’ve worked at:</p>
+			<div
+				className={css`
+					display: flex;
+					width: 100%;
+					flex-wrap: wrap;
+
+					& > * {
+						flex-basis: 15rem;
+						flex-grow: 1;
+						margin-top: 4rem;
+						margin-right: 3%;
+					}
+				`}>
+				{exp.map(unit => (
+					<ExpUnit {...unit} />
+				))}
+			</div>
+		</Container>
+	);
+}
+
+export default Exp;

src/pages/Home.js

@@ -0,0 +1,41 @@
+import { css } from "emotion";
+import Container from "../components/Container";
+
+const Em = props => (
+	<span
+		className={css`
+			border-bottom: 1px dashed #fff;
+		`}>
+		{props.children}
+	</span>
+);
+
+function Home() {
+	return (
+		<Container>
+			<h1
+				className={css`
+					line-height: 1em;
+					margin-bottom: 0;
+
+					h1& {
+						margin-bottom: 0;
+					}
+				`}>
+				MKRhere
+			</h1>
+			<p>
+				Web home of <Em>designer</Em>, <Em>developer</Em>, and <Em>architect</Em>{" "}
+				<span
+					className={css`
+						font-weight: 800;
+						/* color: var(--primary-color); */
+					`}>
+					Muthu Kumar.
+				</span>
+			</p>
+		</Container>
+	);
+}
+
+export default Home;

src/pages/Projects.js

@@ -0,0 +1,142 @@
+import { css } from "emotion";
+import Container from "../components/Container";
+
+const exp = [
+	{
+		title: window.location.hostname,
+		description: "This website.",
+		url: "https://github.com/mkrhere/pw2",
+		cat: "web",
+		tags: ["react", "css-in-js"],
+	},
+	{
+		title: "runtype",
+		description: "Runtime-safe library to bring untyped values into TypeScript.",
+		url: "https://codefeathers.github.io/runtype",
+		cat: "lib",
+		tags: ["typescript", "runtime"],
+	},
+	{
+		title: "Telecraft",
+		description: "Pluggable Minecraft server management utils.",
+		url: "https://github.com/telecraft",
+		cat: "tool",
+		tags: ["minecraft", "node"],
+	},
+	{
+		title: window.location.hostname,
+		description: "This website.",
+		url: "https://github.com/mkrhere/pw2",
+		cat: "web",
+		tags: ["react", "css-in-js"],
+	},
+	{
+		title: "runtype",
+		description: "Runtime-safe library to bring untyped values into TypeScript.",
+		url: "https://codefeathers.github.io/runtype",
+		cat: "lib",
+		tags: ["typescript", "runtime"],
+	},
+	{
+		title: "Telecraft",
+		description: "Pluggable Minecraft server management utils.",
+		url: "https://github.com/telecraft",
+		cat: "tool",
+		tags: ["minecraft", "node"],
+	},
+];
+
+const ExpUnit = ({ title, url, description, cat, tags }) => {
+	return (
+		<div
+			className={css`
+				position: relative;
+				border: 0.2rem solid var(--primary-color);
+				padding: 1rem;
+				cursor: default;
+
+				display: flex;
+				flex-direction: column;
+				transition: filter;
+
+				:hover {
+					filter: hue-rotate(30deg);
+				}
+			`}>
+			<div
+				className={css`
+					position: absolute;
+					border-top: 0.5rem solid var(--primary-color);
+					top: 0;
+					left: 0;
+				`}></div>
+			<a
+				className={css`
+					display: block;
+					text-decoration: none;
+				`}
+				href={url}
+				target="_blank"
+				rel="noreferrer">
+				<h3>{title}</h3>
+				<p
+					className={css`
+						color: #bdbdbd;
+						margin-bottom: 0.8rem;
+					`}>
+					{description}
+				</p>
+				<p
+					className={css`
+						font-weight: 800;
+						color: #9f9f9f;
+						font-size: 0.8rem;
+						margin-top: auto;
+					`}>
+					{tags.map(tag => (
+						<span key={tag}>#{tag} </span>
+					))}
+				</p>
+				<span
+					className={css`
+						position: absolute;
+						right: 1rem;
+						bottom: 1rem;
+						font-weight: bold;
+						color: #bbb;
+						font-size: 0.8rem;
+					`}>
+					{cat}
+				</span>
+			</a>
+		</div>
+	);
+};
+
+function Exp() {
+	return (
+		<Container>
+			<h2>What else have I built?</h2>
+			<p>Some tools, libraries, and apps over time:</p>
+			<div
+				className={css`
+					display: flex;
+					width: 100%;
+					flex-wrap: wrap;
+
+					& > * {
+						flex-basis: 15rem;
+						flex-grow: 1;
+						margin-top: 2rem;
+						margin-right: 3%;
+					}
+				`}>
+				{exp.map(unit => (
+					<ExpUnit {...unit} />
+				))}
+			</div>
+		</Container>
+	);
+}
+
+export default Exp;