feat: add profile image

src/pages/main/Home.tsx

@@ -37,54 +37,72 @@ const Home: React.FC = () => {
 					]}
 				/>
 			</section>
-			<section
+			<main
-				className={cx(
+				className={css`
-					section,
+					display: flex;
-					css`
+					flex-wrap: wrap;
-						gap: 0.2rem;
+					gap: var(--distance);
-					`,
+				`}>
-				)}>
+				<img
-				<p>
+					src="/assets/mkr-in-pixels.png"
-					Welcome to the web home of <b>Anu Rahul Nandhan.</b>
+					alt="MKR in pixels"
-				</p>
+					style={{
-				<p>
+						imageRendering: "pixelated",
-					I'm also commonly known as <b>Muthu Kumar</b>.
+						height: "8rem",
-				</p>
+						aspectRatio: "1",
-			</section>
+					}}
-			<section className={section}>
+				/>
-				<p>I'm looking for work! 🎉</p>
+				<article style={{ marginTop: "-0.4rem" }}>
-				<button
+					<section
-					className={css`
+						className={cx(
-						background: var(--card-tags);
+							section,
-						border: 0;
+							css`
-						border-radius: 0.5rem;
+								gap: 0.2rem;
-						width: fit-content;
+							`,
-						color: var(--text-colour);
+						)}>
-						cursor: pointer;
+						<p>
-						font-size: 1rem;
+							Welcome to the web home of <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;
+								position: relative;
-						z-index: 0;
+								z-index: 0;
 
-						& a {
+								& a {
-							display: flex;
+									display: flex;
-							align-items: center;
+									align-items: center;
-							gap: 1rem;
+									gap: 1rem;
-							padding: 1rem 2rem;
+									padding: 1rem 2rem;
-						}
+								}
 
-						& a:hover {
+								& a:hover {
-							color: inherit;
+									color: inherit;
-						}
+								}
-					`}
+							`}
-					ref={setupCursorTracking}>
+							ref={setupCursorTracking}>
-					<div className="dynamic-gradient" />
+							<div className="dynamic-gradient" />
-					<a href="https://mkr.pw/resume" target="_blank">
+							<a href="https://mkr.pw/resume" target="_blank">
-						Download Resume
+								Download Resume
-						<Arrow />
+								<Arrow />
-					</a>
+							</a>
-				</button>
+						</button>
-			</section>
+					</section>
+				</article>
+			</main>
 		</Container>
 	);
 };