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,11 +148,14 @@ 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(
+				className,
+				css`
 					display: flex;
 					flex-wrap: wrap;
 					gap: 0.8rem;
@@ -171,7 +174,8 @@ const FlickerList: React.FC<{
 					&&&& 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>
+				<h1
 					style={{
 						// fiddle
-					marginLeft: "-0.3rem",
+						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,42 +63,63 @@ 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,
-							css`
-								gap: 0.2rem;
-							`,
-						)}>
 					<p>
-							Welcome to the web home of <b>Anu Rahul Nandhan.</b>
+						Welcome to the web home of{" "}
+						<Tooltip
+							description={
+								<>
+									For legal reasons, my name is <i>Anu Rahul Nandhan</i>, but I
+									generally go by my{" "}
+									<a
+										href="https://en.wiktionary.org/wiki/nom_de_guerre"
+										target="_blank"
+										rel="noreferrer">
+										nom-de-guerre
+									</a>{" "}
+									Muthu Kumar.
+								</>
+							}>
+							<b>Muthu Kumar</b>.
+						</Tooltip>
 					</p>
 					<p>
-							I'm also commonly known as <b>Muthu Kumar</b>.
+						I'm from Chennai, South India
+						<Emoji emoji="ind" />
+					</p>
+					<p>
+						I'm looking for work!
+						<Emoji emoji="tada" baseline />
 					</p>
-					</section>
-					<section className={section}>
-						<p>I'm looking for work! 🎉</p>
 					<button
 						className={css`
 							background: var(--card-tags);
@@ -96,6 +129,7 @@ const Home: React.FC = () => {
 							color: var(--text-colour);
 							cursor: pointer;
 							font-size: 1rem;
+							margin-top: 0.4rem;
 
 							position: relative;
 							z-index: 0;
@@ -118,7 +152,6 @@ const Home: React.FC = () => {
 							<Arrow />
 						</a>
 					</button>
-					</section>
 				</article>
 			</main>
 		</Container>