From 93d12797ea3c92264d3df2a20c8feb2d0bdb2a04 Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Mon, 2 Nov 2020 13:42:38 +0530
Subject: [PATCH] [refactor]

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
---
 src/components/Heading.js | 13 +++++++++++++
 src/pages/Home.js         | 25 +++++--------------------
 src/pages/Projects.js     |  4 ++--
 3 files changed, 20 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Heading.js

diff --git a/src/components/Heading.js b/src/components/Heading.js
new file mode 100644
index 0000000..a575b6d
--- /dev/null
+++ b/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;
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 4232b2d..877ccef 100644
--- a/src/pages/Home.js
+++ b/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
-				className={css`
-					line-height: 1em;
-					margin-bottom: 0;
-
-					h1& {
-						margin-bottom: 0;
-					}
-				`}>
-				MKRhere
-			</h1>
+			<Heading>MKRhere</Heading>
 			<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>
+				Web home of <Dashed>designer</Dashed>, <Dashed>developer</Dashed>, and{" "}
+				<Dashed>architect</Dashed> <b>Muthu Kumar.</b>
 			</p>
 		</Container>
 	);
diff --git a/src/pages/Projects.js b/src/pages/Projects.js
index c89b4fd..3494635 100644
--- a/src/pages/Projects.js
+++ b/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>