feat: fiddle with margins to achieve perfect spacing

src/components/Container.tsx

@@ -41,7 +41,9 @@ const Container: React.FC<{
 			!child || typeof child === "string"
 				? child
 				: React.cloneElement(child, {
+						...child.props,
 						style: {
+							...child.props.style,
 							opacity: 0,
 							transform: "translateY(3rem)",
 							transition: "all 300ms",

src/components/FlickerList.tsx

@@ -23,9 +23,11 @@ const Flicker: React.FC<{
 	children: React.ReactNode;
 	index: number;
 	description: string;
-}> = ({ children, index, description }) => {
+	style?: React.CSSProperties;
+}> = ({ children, index, description, style }) => {
 	return (
 		<span
+			style={style}
 			className={css`
 				position: relative;
 
@@ -89,6 +91,7 @@ const Flicker: React.FC<{
 						transition: opacity 0.2s;
 						user-select: none;
 						text-align: left;
+						pointer-events: none;
 
 						@media screen and (max-width: 65rem) {
 							position: fixed;
@@ -106,9 +109,11 @@ const Flicker: React.FC<{
 
 const FlickerList: React.FC<{
 	list: { text: string; description: string }[];
-}> = ({ list }) => {
+	style?: React.CSSProperties;
+}> = ({ list, style }) => {
 	return (
 		<ul
+			style={style}
 			className={css`
 				display: flex;
 				flex-wrap: wrap;

src/pages/main/Home.tsx

@@ -14,10 +14,21 @@ const section = css`
 
 const Home: React.FC = () => {
 	return (
-		<Container>
+		<Container
-			<section>
+			className={css`
+				--distance: 2rem;
+			`}>
+			<section
+				style={{
+					// fiddle
+					marginLeft: "-0.3rem",
+				}}>
 				<h1>MKRhere</h1>
 				<FlickerList
+					style={{
+						// fiddle
+						marginTop: "calc(-1.7rem - 2px + var(--distance))",
+					}}
 					list={[
 						{
 							text: "Designer",
@@ -37,54 +48,79 @@ const Home: React.FC = () => {
 					]}
 				/>
 			</section>
-			<section
+			<main
-				className={cx(
+				className={css`
-					section,
+					/* fiddle */
-					css`
+					margin-top: calc(-2.2rem + var(--distance));
-						gap: 0.2rem;
-					`,
-				)}>
-				<p>
-					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;
+					display: flex;
-						z-index: 0;
+					flex-wrap: wrap;
+					gap: var(--distance);
+				`}>
+				<img
+					src="/assets/mkr-in-pixels.png"
+					alt="MKR in pixels"
+					style={{
+						imageRendering: "pixelated",
+						height: "8rem",
+						aspectRatio: "1",
+					}}
+				/>
+				<article
+					style={{
+						// fiddle
+						marginTop: "-0.4rem",
+					}}>
+					<section
+						className={cx(
+							section,
+							css`
+								gap: 0.2rem;
+							`,
+						)}>
+						<p>
+							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;
 
-						& a {
+								position: relative;
-							display: flex;
+								z-index: 0;
-							align-items: center;
-							gap: 1rem;
-							padding: 1rem 2rem;
-						}
 
-						& a:hover {
+								& a {
-							color: inherit;
+									display: flex;
-						}
+									align-items: center;
-					`}
+									gap: 1rem;
-					ref={setupCursorTracking}>
+									padding: 1rem 2rem;
-					<div className="dynamic-gradient" />
+								}
-					<a href="https://mkr.pw/resume" target="_blank">
+
-						Download Resume
+								& a:hover {
-						<Arrow />
+									color: inherit;
-					</a>
+								}
-				</button>
+							`}
-			</section>
+							ref={setupCursorTracking}>
+							<div className="dynamic-gradient" />
+							<a href="https://mkr.pw/resume" target="_blank">
+								Download Resume
+								<Arrow />
+							</a>
+						</button>
+					</section>
+				</article>
+			</main>
 		</Container>
 	);
 };