Browse Source

[feat] Home, Exp, Project routes added

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
pull/1/head
Muthu Kumar 4 years ago
parent
commit
a24bc65e51
Signed by: mkrhere GPG Key ID: 3FD688398897097E
  1. 14
      src/App.js
  2. 28
      src/components/Container.js
  3. 1
      src/index.js
  4. 0
      src/pages/404.js
  5. 0
      src/pages/Contact.js
  6. 102
      src/pages/Exp.js
  7. 41
      src/pages/Home.js
  8. 0
      src/pages/Live.js
  9. 142
      src/pages/Projects.js

14
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() { function App() {
return <div className="App"></div>; return (
<Router>
<Home path="/" />
<Exp path="/experience" />
<Projects path="/projects" />
</Router>
);
} }
export default App; export default App;

28
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;

1
src/index.js

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

0
src/pages/404.js

0
src/pages/Contact.js

102
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>Im a 25 year old developer from Chennai, India.</h2>
<p>Here are some places Ive 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;

41
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;

0
src/pages/Live.js

142
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;
Loading…
Cancel
Save