From a24bc65e517dbd25914391e8d89176217fc682e4 Mon Sep 17 00:00:00 2001 From: Muthu Kumar Date: Mon, 2 Nov 2020 12:09:55 +0530 Subject: [PATCH] [feat] Home, Exp, Project routes added Signed-off-by: Muthu Kumar --- src/App.js | 14 ++++- src/components/Container.js | 28 +++++++++ src/index.js | 1 - src/pages/404.js | 0 src/pages/Contact.js | 0 src/pages/Exp.js | 102 +++++++++++++++++++++++++++++++ src/pages/Home.js | 41 +++++++++++++ src/pages/Live.js | 0 src/pages/Projects.js | 142 ++++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 326 insertions(+), 2 deletions(-) create mode 100644 src/components/Container.js create mode 100644 src/pages/404.js create mode 100644 src/pages/Contact.js create mode 100644 src/pages/Exp.js create mode 100644 src/pages/Home.js create mode 100644 src/pages/Live.js create mode 100644 src/pages/Projects.js diff --git a/src/App.js b/src/App.js index 0028bf5..296a047 100644 --- a/src/App.js +++ b/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
; + return ( + + + + + + ); } export default App; diff --git a/src/components/Container.js b/src/components/Container.js new file mode 100644 index 0000000..c0efabd --- /dev/null +++ b/src/components/Container.js @@ -0,0 +1,28 @@ +import { css } from "emotion"; + +const Container = ({ children, ...props }) => ( +
+
* { + margin-bottom: 2rem; + } + `} + {...props}> + {children} +
+
+); + +export default Container; diff --git a/src/index.js b/src/index.js index 364149e..490999c 100644 --- a/src/index.js +++ b/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"; diff --git a/src/pages/404.js b/src/pages/404.js new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Contact.js b/src/pages/Contact.js new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Exp.js b/src/pages/Exp.js new file mode 100644 index 0000000..dbcaab7 --- /dev/null +++ b/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 = () => ( +
+
+
+
+); + +const ExpUnit = ({ title, location, position, year }) => { + return ( +
+ +

+ {title}, {location} +

+ + {position} + + {" . "} + + {year} + +
+ ); +}; + +function Exp() { + return ( + +

I’m a 25 year old developer from Chennai, India.

+

Here are some places I’ve worked at:

+
* { + flex-basis: 15rem; + flex-grow: 1; + margin-top: 4rem; + margin-right: 3%; + } + `}> + {exp.map(unit => ( + + ))} +
+ + ); +} + +export default Exp; diff --git a/src/pages/Home.js b/src/pages/Home.js new file mode 100644 index 0000000..4232b2d --- /dev/null +++ b/src/pages/Home.js @@ -0,0 +1,41 @@ +import { css } from "emotion"; +import Container from "../components/Container"; + +const Em = props => ( + + {props.children} + +); + +function Home() { + return ( + +

+ MKRhere +

+

+ Web home of designer, developer, and architect{" "} + + Muthu Kumar. + +

+ + ); +} + +export default Home; diff --git a/src/pages/Live.js b/src/pages/Live.js new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Projects.js b/src/pages/Projects.js new file mode 100644 index 0000000..c89b4fd --- /dev/null +++ b/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 ( +
+
+ +

{title}

+

+ {description} +

+

+ {tags.map(tag => ( + #{tag} + ))} +

+ + {cat} + + +
+ ); +}; + +function Exp() { + return ( + +

What else have I built?

+

Some tools, libraries, and apps over time:

+
* { + flex-basis: 15rem; + flex-grow: 1; + margin-top: 2rem; + margin-right: 3%; + } + `}> + {exp.map(unit => ( + + ))} +
+ + ); +} + +export default Exp;