From f4b3ad810254304f0ff8ed81d02854698c877153 Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Sun, 9 Jun 2024 14:42:16 +0530
Subject: [PATCH] feat: add job search

---
 src/pages/main/Contact.tsx    |  6 ++++
 src/pages/main/Home.tsx       | 64 ++++++++++++++++++++++++++++++++++++++++---
 src/util/dynamic-gradient.css |  1 -
 3 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/src/pages/main/Contact.tsx b/src/pages/main/Contact.tsx
index 116fae1..0222643 100644
--- a/src/pages/main/Contact.tsx
+++ b/src/pages/main/Contact.tsx
@@ -36,6 +36,7 @@ const CONTACT: Contact = {
 			Γ: "7",
 		},
 	},
+	"Blog": { value: "→", link: "https://MKRhere.com" },
 };
 
 const Home: React.FC = () => {
@@ -110,6 +111,11 @@ const Home: React.FC = () => {
 							text-overflow: ellipsis;
 							overflow: hidden;
 						}
+
+						/* Blog entry */
+						li:last-child {
+							margin-block-start: 1rem;
+						}
 					}
 				`}>
 				<ul
diff --git a/src/pages/main/Home.tsx b/src/pages/main/Home.tsx
index 0764506..53d5e26 100644
--- a/src/pages/main/Home.tsx
+++ b/src/pages/main/Home.tsx
@@ -1,15 +1,71 @@
 import React from "react";
 import Container from "../../components/Container";
 import Dashed from "../../components/Dashed";
+import { ReactComponent as Arrow } from "../../assets/arrow-thin.svg";
+import { css, cx } from "@emotion/css";
+import { setupCursorTracking } from "../../util";
+
+const section = css`
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	justify-content: center;
+`;
 
 const Home: React.FC = () => {
 	return (
 		<Container>
 			<h1>MKRhere</h1>
-			<p>
-				Web home of <Dashed>designer</Dashed>, <Dashed>developer</Dashed>, and{" "}
-				<Dashed>architect</Dashed> <b>Muthu Kumar.</b>
-			</p>
+			<section
+				className={cx(
+					section,
+					css`
+						gap: 0.2rem;
+					`,
+				)}>
+				<p>
+					Welcome to the web home of <Dashed>designer</Dashed>,{" "}
+					<Dashed>developer</Dashed>, and <Dashed>architect</Dashed>{" "}
+					<b>Anu Rahul Nandhan.</b>
+				</p>
+				<p>
+					I'm also commonly known as <b>Muthu Kumar</b>.
+				</p>
+			</section>
+			<section className={section}>
+				<p>I'm looking for work! 🎉</p>
+				<button
+					className={css`
+						background: var(--card-tags);
+						border: 0;
+						border-radius: 0.5rem;
+						width: fit-content;
+						color: var(--text-colour);
+						cursor: pointer;
+						font-size: 1rem;
+
+						position: relative;
+						z-index: 0;
+
+						& a {
+							display: flex;
+							align-items: center;
+							gap: 1rem;
+							padding: 1rem 2rem;
+						}
+
+						& a:hover {
+							color: inherit;
+						}
+					`}
+					ref={setupCursorTracking}>
+					<div className="dynamic-gradient" />
+					<a href="https://mkr.pw/resume" target="_blank">
+						Download Resume
+						<Arrow />
+					</a>
+				</button>
+			</section>
 		</Container>
 	);
 };
diff --git a/src/util/dynamic-gradient.css b/src/util/dynamic-gradient.css
index f38a6d8..9e9e4db 100644
--- a/src/util/dynamic-gradient.css
+++ b/src/util/dynamic-gradient.css
@@ -22,7 +22,6 @@
 	z-index: -1;
 	width: var(--size);
 	height: var(--size);
-	transform-origin: --size, --size;
 	scale: 0;
 	opacity: 0;
 	background: radial-gradient(