added accessibility and improved font performance

src/components/projects/Project.astro

@@ -55,12 +55,12 @@ const leftProject = position == "left";
 					class:list={leftProject
 						? "left"
 						: "right"}
-					width="700"
+					width={700}
 				/>
 				<Image
 					src={image}
 					alt={alt}
-					width="700"
+					width={700}
 					class={`absolute max-w-full
 							aspect-video
 							opacity-100

src/components/ui/NavigationBar.tsx

@@ -132,7 +132,12 @@ export const HoverNavigation = ({
 							</div>
 						</motion.div>
 					</div>
-					<motion.div
+					<nav
+						aria-label="Desktop Navigation"
+						className="flex items-center justify-center overflow-hidden"
+					>
+						<motion.ul
+							className="hidden w-0 flex-row items-center justify-center overflow-hidden lg:flex lg:w-auto"
 							animate={{
 								width: navVisible ? "auto" : "0px",
 								opacity: navVisible ? "100%" : "0%",
@@ -140,18 +145,18 @@ export const HoverNavigation = ({
 							transition={{
 								ease: "easeInOut",
 							}}
-						className={cn(
-							"hidden w-0 flex-row items-center justify-center overflow-hidden lg:flex lg:w-auto",
-							className,
-						)}
 						>
 							{items.map((item, idx) => (
+								<li key={item?.link}>
 									<a
 										href={item?.link}
-								key={item?.link}
 										className="group relative block h-fit px-5 py-2"
-								onMouseEnter={() => setHoveredIndex(idx)}
-								onMouseLeave={() => setHoveredIndex(null)}
+										onMouseEnter={() =>
+											setHoveredIndex(idx)
+										}
+										onMouseLeave={() =>
+											setHoveredIndex(null)
+										}
 									>
 										<AnimatePresence>
 											{hoveredIndex === idx && (
@@ -161,7 +166,9 @@ export const HoverNavigation = ({
 													initial={{ opacity: 0 }}
 													animate={{
 														opacity: 1,
-												transition: { duration: 0.15 },
+														transition: {
+															duration: 0.15,
+														},
 													}}
 													exit={{
 														opacity: 0,
@@ -175,11 +182,14 @@ export const HoverNavigation = ({
 										</AnimatePresence>
 										<NavBarLink>{item.label}</NavBarLink>
 									</a>
+								</li>
 							))}
-					</motion.div>
+						</motion.ul>
+					</nav>
 
 					<div className="hamburger-wrapper flex items-center justify-center lg:hidden">
 						<HamburgerCross
+							aria-label="Hamburger"
 							toggled={hamburgerOpen}
 							toggle={setHamburgerOpen}
 							size={20}
@@ -200,13 +210,14 @@ export const HoverNavigation = ({
 					className="h-0 overflow-hidden"
 				>
 					{items.map((item, idx) => (
+						<li key={item?.link}>
 							<a
 								href={item?.link}
-							key={item?.link}
 								className="group relative block px-5 py-2 text-center lg:hidden"
 							>
 								{item.label}
 							</a>
+						</li>
 					))}
 				</motion.ul>
 			</div>

src/layouts/Layout.astro

@@ -48,6 +48,7 @@ import { ClientRouter } from "astro:transitions";
 		src: url("/fonts/Fredoka-Regular.ttf") format("truetype");
 		font-weight: normal;
 		font-style: normal;
+		font-display: swap;
 	}
 
 	@font-face {
@@ -55,6 +56,7 @@ import { ClientRouter } from "astro:transitions";
 		src: url("/fonts/Antonio-Bold.ttf") format("truetype");
 		font-weight: bold;
 		font-style: normal;
+		font-display: swap;
 	}
 
 	/* Montserrat Fonts */
@@ -63,6 +65,7 @@ import { ClientRouter } from "astro:transitions";
 		src: url("/fonts/Montserrat-Bold.ttf") format("truetype");
 		font-weight: bold;
 		font-style: normal;
+		font-display: swap;
 	}
 
 	@font-face {
@@ -70,6 +73,7 @@ import { ClientRouter } from "astro:transitions";
 		src: url("/fonts/Montserrat-Regular.ttf") format("truetype");
 		font-weight: normal;
 		font-style: normal;
+		font-display: swap;
 	}
 
 	html {