feat: Emoji component and homepage changes

src/components/Emoji.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { css, cx } from "@emotion/css";
+
+const EmojiMap = {
+	"2x": "emoji/2x",
+	"nerd": "emoji/nerd",
+	"technologist": "emoji/technologist",
+	"wink": "emoji/wink",
+	"ind": "serenity/U+1F1EE_U+1F1F3",
+	"tada": "serenity/U+1F389",
+};
+
+export const Emoji = ({
+	emoji,
+	baseline,
+}: {
+	emoji: keyof typeof EmojiMap;
+	baseline?: boolean;
+}) => (
+	<img
+		className={cx(
+			"emoji",
+			css`
+				image-rendering: pixelated;
+				vertical-align: middle;
+
+				height: 1.2em;
+
+				&.baseline {
+					vertical-align: baseline;
+				}
+			`,
+			{ baseline },
+		)}
+		src={`/assets/${EmojiMap[emoji]}.png`}
+	/>
+);

src/components/FlickerList.tsx

@@ -148,30 +148,34 @@ export const Tooltip = forwardRef<
 const FlickerList: React.FC<{
 	list: { text: string; description: React.ReactNode }[];
 	style?: React.CSSProperties;
-}> = ({ list, style }) => {
+	className?: string;
+}> = ({ list, style, className }) => {
 	return (
 		<ul
 			style={style}
-			className={css`
+			className={cx(
-				display: flex;
+				className,
-				flex-wrap: wrap;
+				css`
-				gap: 0.8rem;
+					display: flex;
-				margin: 0;
+					flex-wrap: wrap;
-				padding: 0;
+					gap: 0.8rem;
-				list-style: none;
+					margin: 0;
-
+					padding: 0;
-				&:has(:focus) li button:not(:focus),
+					list-style: none;
-				&:has(:hover) li button:not(:hover) {
-					opacity: 0.5;
-				}
 
-				/* any button that has a subsequent button focused, hide its tooltip */
+					&:has(:focus) li button:not(:focus),
-				&&&& li:has(~ li button:focus) .tooltip,
+					&:has(:hover) li button:not(:hover) {
-				/* any button that has a previous button focused, hide its tooltip */
+						opacity: 0.5;
-				&&&& li:has(button:focus) ~ li .tooltip {
+					}
-					opacity: 0;
+
-				}
+					/* any button that has a subsequent button focused, hide its tooltip */
-			`}>
+					&&&& li:has(~ li button:focus) .tooltip,
+					/* any button that has a previous button focused, hide its tooltip */
+					&&&& li:has(button:focus) ~ li .tooltip {
+						opacity: 0;
+					}
+				`,
+			)}>
 			{[
 				...intersperse(
 					list.map((item, index) => (

src/index.css

@@ -83,7 +83,8 @@ h4 {
 	font-size: min(5vw, 1.2rem);
 }
 
-a {
+a,
+b {
 	color: var(--text-colour);
 	text-decoration: none;
 	font-weight: 800;

src/pages/main/Home.tsx

@@ -1,16 +1,10 @@
 import React from "react";
 import Container from "../../components/Container";
-import FlickerList from "../../components/FlickerList";
+import FlickerList, { Tooltip } from "../../components/FlickerList";
 import { ReactComponent as Arrow } from "../../assets/arrow-thin.svg";
-import { css, cx } from "@emotion/css";
+import { css } from "@emotion/css";
 import { setupCursorTracking } from "../../util";
-
+import { Emoji } from "../../components/Emoji";
-const section = css`
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	justify-content: center;
-`;
 
 const Home: React.FC = () => {
 	return (
@@ -18,32 +12,50 @@ const Home: React.FC = () => {
 			className={css`
 				--distance: 2rem;
 			`}>
-			<section
+			<section>
-				style={{
+				<h1
-					// fiddle
+					style={{
-					marginLeft: "-0.3rem",
+						// fiddle
-				}}>
+						marginLeft: "-0.31rem",
-				<h1>MKRhere</h1>
+					}}>
+					MKRhere
+				</h1>
 				<FlickerList
 					style={{
 						// fiddle
 						marginTop: "calc(-1.7rem - 2px + var(--distance))",
+						marginLeft: "-0.1rem",
+						fontSize: "0.9rem",
 					}}
 					list={[
 						{
 							text: "Designer",
-							description:
+							description: (
-								"Graphic design is my passion 🤓 I have plenty of experience with Figma and Adobe Suite tools (especially Photoshop and InDesign)",
+								<>
+									Graphic design is my passion <Emoji emoji="nerd" /> I have
+									plenty of experience with Figma and Adobe Suite tools
+									(especially Photoshop and InDesign)
+								</>
+							),
 						},
 						{
 							text: "Developer",
-							description:
+							description: (
-								"🧑🏻‍💻 I started developing websites in 2015, and in 2017 I joined The Devs Network, catapulting my growth as a full-time developer",
+								<>
+									<Emoji emoji="technologist" /> I started developing websites
+									in 2015, and in 2017 I joined The Devs Network, catapulting my
+									growth as a full-time developer
+								</>
+							),
 						},
 						{
 							text: "Architect",
-							description:
+							description: (
-								"I have a formal degree in architecture! I'm an architect in both construction and software 😉",
+								<>
+									I have a formal degree in architecture! I'm an architect in
+									both construction and software <Emoji emoji="2x" />
+								</>
+							),
 						},
 					]}
 				/>
@@ -51,74 +63,95 @@ const Home: React.FC = () => {
 			<main
 				className={css`
 					/* fiddle */
-					margin-top: calc(-2.2rem + var(--distance));
+					margin-top: calc(-2.4rem + var(--distance));
 
 					display: flex;
 					flex-wrap: wrap;
 					gap: var(--distance);
+
+					& img {
+						image-rendering: pixelated;
+						vertical-align: middle;
+
+						&.emoji {
+							margin-left: 0.4em;
+						}
+					}
 				`}>
 				<img
 					src="/assets/mkr-in-pixels.png"
 					alt="MKR in pixels"
 					style={{
-						imageRendering: "pixelated",
 						height: "8rem",
 						aspectRatio: "1",
 					}}
 				/>
 				<article
-					style={{
+					className={css`
-						// fiddle
+						/* fiddle */
-						marginTop: "-0.4rem",
+						margin-top: -0.4rem;
-					}}>
+						display: flex;
-					<section
+						flex-direction: column;
-						className={cx(
+					`}>
-							section,
+					<p>
-							css`
+						Welcome to the web home of{" "}
-								gap: 0.2rem;
+						<Tooltip
-							`,
+							description={
-						)}>
+								<>
-						<p>
+									For legal reasons, my name is <i>Anu Rahul Nandhan</i>, but I
-							Welcome to the web home of <b>Anu Rahul Nandhan.</b>
+									generally go by my{" "}
-						</p>
+									<a
-						<p>
+										href="https://en.wiktionary.org/wiki/nom_de_guerre"
-							I'm also commonly known as <b>Muthu Kumar</b>.
+										target="_blank"
-						</p>
+										rel="noreferrer">
-					</section>
+										nom-de-guerre
-					<section className={section}>
+									</a>{" "}
-						<p>I'm looking for work! 🎉</p>
+									Muthu Kumar.
-						<button
+								</>
-							className={css`
+							}>
-								background: var(--card-tags);
+							<b>Muthu Kumar</b>.
-								border: 0;
+						</Tooltip>
-								border-radius: 0.5rem;
+					</p>
-								width: fit-content;
+					<p>
-								color: var(--text-colour);
+						I'm from Chennai, South India
-								cursor: pointer;
+						<Emoji emoji="ind" />
-								font-size: 1rem;
+					</p>
+					<p>
+						I'm looking for work!
+						<Emoji emoji="tada" baseline />
+					</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;
+							margin-top: 0.4rem;
 
-								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>
 				</article>
 			</main>
 		</Container>