[feat] add Contact page

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

src/App.js

@@ -3,6 +3,8 @@ import { Router } from "@reach/router";
 import Home from "./pages/Home";
 import Exp from "./pages/Exp";
 import Projects from "./pages/Projects";
+import Contact from "./pages/Contact";
+
 import NotFound from "./pages/404";
 
 function App() {
@@ -11,6 +13,7 @@ function App() {
 			<Home path="/" />
 			<Exp path="/experience" />
 			<Projects path="/projects" />
+			<Contact path="/contact" />
 
 			<NotFound path="*" />
 		</Router>

src/components/Container.js

@@ -18,7 +18,14 @@ const flash = css`
 
 const [timer, clear] = getTimeout();
 
-const Container = ({ children, hideNav = false, next, ...props }) => {
+const Container = ({
+	children,
+	hideNav = false,
+	arrowReversed = false,
+	next,
+	className,
+	...props
+}) => {
 	const logoContainer = useRef();
 	const logo = useRef();
 	const highlightCircle = useRef();
@@ -107,7 +114,8 @@ const Container = ({ children, hideNav = false, next, ...props }) => {
 						top: 8rem;
 						left: 5rem;
 
-						&:hover .logo-highlight {
+						&:hover .logo-highlight,
+						&:active .logo-highlight {
 							width: 5.2rem;
 							height: 5.2rem;
 							opacity: 100%;
@@ -163,6 +171,8 @@ const Container = ({ children, hideNav = false, next, ...props }) => {
 						transition: all 300ms;
 						overflow: hidden;
 
+						${arrowReversed ? "rotate: 180deg;" : ""}
+
 						&:hover * {
 							fill: var(--primary-color);
 						}
@@ -171,7 +181,8 @@ const Container = ({ children, hideNav = false, next, ...props }) => {
 				</button>
 			)}
 			<div
-				className={css`
+				className={cx(
+					css`
 						width: 100%;
 						max-width: 60rem;
 						min-height: 100%;
@@ -180,7 +191,9 @@ const Container = ({ children, hideNav = false, next, ...props }) => {
 						& > * {
 							margin-bottom: 2rem;
 						}
-				`}
+					`,
+					className,
+				)}
 				ref={containerChild}
 				{...props}>
 				{children}

src/index.css

@@ -49,7 +49,7 @@ h2 {
 }
 
 h1 {
-	font-size: 6rem;
+	font-size: min(15vw, 6rem);
 }
 
 h2 {

src/pages/Contact.js

@@ -0,0 +1,122 @@
+import { css } from "emotion";
+import { useEffect, useState } from "react";
+import Container from "../components/Container";
+
+const A = css`
+	text-decoration: none;
+`;
+
+function Home() {
+	const [contact, setContact] = useState({
+		Twitter: { value: "MKRhere", link: "https://twitter.com/MKRhere" },
+		GitHub: { value: "MKRhere", link: "https://github.com/MKRhere" },
+		Email: {
+			value: "mυthυkυmαr@thεfεαthεrs.in",
+			link: "mailto:mυthυkυmαr@thεfεαthεrs.in",
+			replacer: {
+				υ: "u",
+				ε: "e",
+				α: "a",
+			},
+		},
+		Phone: {
+			value: "+9Ι Γ8Δ5 Γ9 8Δ88",
+			link: "tel:+91Γ8Δ5Γ98Δ88",
+			replacer: {
+				Ι: "1",
+				Δ: "4",
+				Γ: "7",
+			},
+		},
+	});
+
+	useEffect(() => {
+		const deob = () => {
+			Object.keys(contact).forEach(key => {
+				const replacers = contact[key].replacer;
+				if (replacers) {
+					contact[key].value = contact[key].value.replace(
+						new RegExp(Object.keys(replacers).join("|"), "g"),
+						r => replacers[r] || r,
+					);
+					if (contact[key].link)
+						contact[key].link = contact[key].link.replace(
+							new RegExp(Object.keys(replacers).join("|"), "g"),
+							r => replacers[r] || r,
+						);
+				}
+			});
+
+			setContact({ ...contact });
+		};
+
+		document.addEventListener("mousemove", deob, { once: true });
+		document.addEventListener("scroll", deob, { once: true });
+		document.addEventListener("click", deob, { once: true });
+		document.addEventListener("touchstart", deob, { once: true });
+
+		return () => {
+			document.removeEventListener("mousemove", deob);
+			document.removeEventListener("scroll", deob);
+			document.removeEventListener("click", deob);
+			document.removeEventListener("touchstart", deob);
+		};
+	}, []);
+
+	return (
+		<Container
+			next="/"
+			arrowReversed={true}
+			className={css`
+				min-height: 50vh;
+				display: flex;
+				flex-direction: column;
+			`}>
+			<h1>MKRhere</h1>
+			<div
+				className={css`
+					margin-top: auto;
+					display: flex;
+
+					ul {
+						padding: 0;
+						margin-left: 1rem;
+
+						li {
+							list-style: none;
+						}
+					}
+				`}>
+				<ul
+					className={css`
+						text-align: right;
+					`}>
+					{Object.keys(contact).map(key => (
+						<li key={key}>
+							<b>{key}.</b>
+						</li>
+					))}
+				</ul>
+				<ul>
+					{Object.keys(contact).map(key => {
+						const value = contact[key];
+
+						return (
+							<li key={key}>
+								{value.link ? (
+									<a className={A} href={value.link} target="_blank" rel="noreferrer">
+										{value.value}
+									</a>
+								) : (
+									value.value
+								)}
+							</li>
+						);
+					})}
+				</ul>
+			</div>
+		</Container>
+	);
+}
+
+export default Home;

src/util/index.js

@@ -1,13 +1,13 @@
 export const getTimeout = () => {
-	const set = new Set();
+	const clearables = new Set();
 
 	const timeout = (f, t) => {
-		const self = set.add(setTimeout(() => (f(), set.delete(self)), t));
+		const self = clearables.add(setTimeout(() => (f(), clearables.delete(self)), t));
 	};
 
 	const clearTimers = () => {
-		set.forEach(timer => clearTimeout(timer));
-		set.clear();
+		clearables.forEach(timer => clearTimeout(timer));
+		clearables.clear();
 	};
 
 	return [timeout, clearTimers];