Refactor body into multiple files

src/Body/Fetch/ColouredLine.tsx

@@ -0,0 +1,29 @@
+type ColouredBlockProps = {
+	colorNum: number;
+};
+
+const ColouredBlock = ({ colorNum }: ColouredBlockProps) => (
+	<span style={{ color: `var(--color${colorNum})` }}>███</span>
+);
+
+type ColouredLineProps = {
+	light: boolean;
+};
+
+const ColouredLine = ({ light }: ColouredLineProps) => {
+	const startIndex = light ? 8 : 0;
+	return (
+		<p className="blocks">
+			{Array.from({ length: 8 }).map(
+				(
+					_value,
+					index, // Apparently this is the best way to map a range in JavaScript
+				) => (
+					<ColouredBlock colorNum={startIndex + index} key={index} />
+				),
+			)}
+		</p>
+	);
+};
+
+export default ColouredLine;

src/Body/Fetch/Description.tsx

@@ -0,0 +1,42 @@
+import { Highlight } from "./utils";
+
+type HeaderProps = {
+	user: string;
+	hostname: string;
+};
+
+const Header = ({ user, hostname }: HeaderProps) => (
+	<>
+		<p>
+			<Highlight>{user}</Highlight>@<Highlight>{hostname}</Highlight>
+		</p>
+		<p>{"-".repeat(user.length + 1 + hostname.length)}</p>
+	</>
+);
+
+type InfoLineProps = {
+	label: string;
+	value: string;
+};
+
+const InfoLine = ({ label, value }: InfoLineProps) => (
+	<p>
+		<span className="text-highlight">{label}</span>: {value}
+	</p>
+);
+
+const Description = () => (
+	<div className="invisible-div">
+		<Header user="website" hostname="MichaelBradley" />
+		<InfoLine label="Degree" value="Bachelor of Computer Science" />
+		<InfoLine label="University" value="Carleton" />
+		<InfoLine label="Major CGPA" value="11.52/12 (A+)" />
+		<InfoLine label="Languages" value="C/C++, Python, TypeScript" />
+		<InfoLine label="Skills" value="Linux, Git, Testing" />
+		<InfoLine label="Work Experience" value="2 years" />
+		<InfoLine label="Applying for" value="Full-time job" />
+		<InfoLine label="Location" value="Toronto or Remote" />
+	</div>
+);
+
+export default Description;

src/Body/Fetch/ProfilePicture.tsx

@@ -0,0 +1,14 @@
+import hero from "../../assets/MichaelBradley.jpeg?format=avif;webp;jpeg&as=picture";
+
+const ProfilePicture = () => (
+	<div id="michael-photo-container">
+		<picture>
+			{Object.entries(hero.sources).map(([format, src]) => (
+				<source srcSet={src} type={`image/${format}`} key={format} />
+			))}
+			<img src={hero.img.src} alt="A picture of me in a suit smiling" id="michael-photo" />
+		</picture>
+	</div>
+);
+
+export default ProfilePicture;

src/Body/Fetch/index.tsx

@@ -0,0 +1,23 @@
+import ColouredLine from "./ColouredLine";
+import Description from "./Description";
+import ProfilePicture from "./ProfilePicture";
+import { BlankLine } from "./utils";
+
+// TODO: Automate screenshot of info for thumbnail?
+const Fetch = () => {
+	return (
+		<div id="fetch-container">
+			<div id="fetch">
+				<ProfilePicture />
+				<div id="basic-info">
+					<Description />
+					<BlankLine />
+					<ColouredLine light={false} />
+					<ColouredLine light={true} />
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Fetch;

src/Body/Fetch/utils.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from "react";
+
+export const Highlight = ({ children }: PropsWithChildren) => <span className="text-highlight">{children}</span>;
+
+export const BlankLine = () => (
+	<p>
+		<br />
+	</p>
+);

src/Body/Links.tsx

@@ -0,0 +1,32 @@
+import CV from "../assets/cv.svg?react";
+import Git from "../assets/git.svg?react";
+import LinkedIn from "../assets/linkedin.svg?react";
+import Mastodon from "../assets/mastodon.svg?react";
+import DarkModeToggleIcon from "../assets/darkmodetoggle.svg?react";
+
+type ImageLinkProps = {
+	href: string;
+	title: string;
+	Image: typeof Git; // Not ideal, but I can't figure out how to import the type directly from the declared wildcard module
+};
+
+const ImageLink = ({ href, title, Image }: ImageLinkProps) => (
+	<a rel="me" href={href} title={title}>
+		<Image width="100%" />
+	</a>
+);
+
+const Links = () => (
+	<div className="links">
+		<ImageLink href="https://git.mmbradley.ca/MichaelBradley/" title="Forgejo instance" Image={Git} />
+		<ImageLink href="https://www.linkedin.com/in/michaelmbradley/" title="LinkedIn account" Image={LinkedIn} />
+		<ImageLink href="https://mmbradley.ca/resume.pdf" title="My Résumé" Image={CV} />
+		<ImageLink href="https://mstdn.ca/@michaelbradley/" title="Mastodon account" Image={Mastodon} />
+		<input id="dark-mode-toggle" type="checkbox" aria-label="Toggle dark mode" />
+		<label htmlFor="dark-mode-toggle" id="dark-mode-toggle-label" title="Toggle dark mode">
+			<DarkModeToggleIcon width="100%" />
+		</label>
+	</div>
+);
+
+export default Links;

src/Body/index.tsx

@@ -0,0 +1,13 @@
+import Fetch from "./Fetch";
+import Links from "./Links";
+
+const Body = () => {
+	return (
+		<>
+			<Fetch />
+			<Links />
+		</>
+	);
+};
+
+export default Body;