[refactor]

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

src/components/Heading.js

@@ -0,0 +1,13 @@
+import { css } from "emotion";
+
+const Heading = ({ children, ...props }) => (
+	<h1
+		className={css`
+			line-height: 1em;
+		`}
+		{...props}>
+		{children}
+	</h1>
+);
+
+export default Heading;

src/pages/Home.js

@@ -1,7 +1,8 @@
 import { css } from "emotion";
 import Container from "../components/Container";
+import Heading from "../components/Heading";
 
-const Em = props => (
+const Dashed = props => (
 	<span
 		className={css`
 			border-bottom: 1px dashed #fff;
@@ -13,26 +14,10 @@ const Em = props => (
 function Home() {
 	return (
 		<Container>
-			<h1
+			<Heading>MKRhere</Heading>
-				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>{" "}
+				Web home of <Dashed>designer</Dashed>, <Dashed>developer</Dashed>, and{" "}
-				<span
+				<Dashed>architect</Dashed> <b>Muthu Kumar.</b>
-					className={css`
-						font-weight: 800;
-						/* color: var(--primary-color); */
-					`}>
-					Muthu Kumar.
-				</span>
 			</p>
 		</Container>
 	);

src/pages/Projects.js

@@ -46,7 +46,7 @@ const exp = [
 	},
 ];
 
-const ExpUnit = ({ title, url, description, cat, tags }) => {
+const ProjectUnit = ({ title, url, description, cat, tags }) => {
 	return (
 		<div
 			className={css`
@@ -132,7 +132,7 @@ function Exp() {
 					}
 				`}>
 				{exp.map(unit => (
-					<ExpUnit {...unit} />
+					<ProjectUnit {...unit} />
 				))}
 			</div>
 		</Container>