Improve performance and accessibility

src/Body/Fetch/Description.tsx

@@ -33,7 +33,7 @@ const Description = () => (
 		<InfoLine label="Hobbies" value="🖖 🎮 🧗 🏃 🧑‍💻" />
 		<BlankLine />
 		<InfoLine label="Degree" value="B.C.S. Honours" />
-		<InfoLine value="       ⤷ Carleton U" />
+		<InfoLine value="       @ Carleton U " />
 	</div>
 );
 

src/Body/Fetch/ProfilePicture.tsx

@@ -1,4 +1,5 @@
 // TODO: Generate JXL once it doesn't crash
+// TODO: Use multiple widths once that's working too
 import hero from "../../assets/MichaelBradley.avif?format=avif;webp;jpeg&as=picture";
 
 const ProfilePicture = () => (
@@ -7,7 +8,12 @@ const ProfilePicture = () => (
 			{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" />
+			<img
+				src={hero.img.src}
+				alt="A picture of me in winter jumping and smiling in front of a mountain"
+				id="michael-photo"
+				fetchPriority="high"
+			/>
 		</picture>
 	</div>
 );

src/Body/Fetch/index.tsx

@@ -7,12 +7,12 @@ const Fetch = () => {
 	return (
 		<div id="fetch">
 			<ProfilePicture />
-			<div id="basic-info">
+			<main id="basic-info">
 				<Description />
 				<BlankLine />
 				<ColouredLine light={false} />
 				<ColouredLine light={true} />
-			</div>
+			</main>
 		</div>
 	);
 };

src/Body/Links.tsx

@@ -16,7 +16,7 @@ const ImageLink = ({ href, title, Image }: ImageLinkProps) => (
 );
 
 const Links = () => (
-	<div className="links">
+	<footer className="links">
 		<ImageLink href="https://git.mmbradley.ca/MichaelBradley/" title="Forgejo instance" Image={Git} />
 		<ImageLink href="https://mstdn.ca/@michaelbradley/" title="Mastodon account" Image={Mastodon} />
 		<ImageLink href="https://www.linkedin.com/in/michaelmbradley/" title="LinkedIn account" Image={LinkedIn} />
@@ -24,7 +24,7 @@ const Links = () => (
 		<label htmlFor="dark-mode-toggle" id="dark-mode-toggle-label" title="Toggle dark mode" className="footerAction">
 			<DarkModeToggleIcon width="100%" />
 		</label>
-	</div>
+	</footer>
 );
 
 export default Links;

src/style.css

@@ -246,9 +246,11 @@ p {
 }
 
 #michael-photo-container {
-	max-height: 9lh;
-	aspect-ratio: 1;
+	height: 9lh;
+	width: 9lh;
 	align-self: center;
+	border-radius: 50%;
+	border: 0.2rem solid var(--highlight);
 
 	:active {
 		animation: spin 1s linear infinite forwards;
@@ -256,12 +258,10 @@ p {
 }
 
 #michael-photo {
-	width: 100%;
-	aspect-ratio: 1;
+	width: 9lh;
+	height: 9lh;
+	text-wrap: wrap;
 	border-radius: 50%;
-	object-fit: cover;
-	object-position: 62.5% 0;
-	border: 0.2rem solid var(--highlight);
 
 	@media (prefers-reduced-motion: no-preference) {
 		transition: border ease var(--anim-duration);