Apply Biome lints and sort tailwind classes

.prettierrc.json

@@ -6,5 +6,6 @@
 	"singleQuote": false,
 	"trailingComma": "es5",
 	"singleAttributePerLine": false,
-	"endOfLine": "lf"
+	"endOfLine": "lf",
+	"plugins": ["prettier-plugin-tailwindcss"]
 }

src/components/Footer.tsx

@@ -5,7 +5,7 @@ export type FooterProps = React.ComponentProps<"div">;
 
 export default function Footer({ className, ...rest }: FooterProps) {
 	return (
-		<div className={twMerge("not-prose p-6 flex w-full justify-center", className)} {...rest}>
+		<div className={twMerge("not-prose flex w-full justify-center p-6", className)} {...rest}>
 			<HashLink to="/privacy#" className="focus rounded-sm px-2 text-neutral-500 no-underline">
 				Privacy Policy
 			</HashLink>

src/components/Hero.tsx

@@ -7,7 +7,7 @@ export default function Hero({ className, ...rest }: HeroProps) {
 	return (
 		<div
 			className={twMerge(
-				"select-none text-[7vw] text-neutral-50 leading-normal md:text-[4rem] lg:text-[5rem]",
+				"select-none text-[7vw] leading-normal text-neutral-50 md:text-[4rem] lg:text-[5rem]",
 				className
 			)}
 			{...rest}
@@ -30,7 +30,7 @@ export default function Hero({ className, ...rest }: HeroProps) {
 					]}
 					wrapper="span"
 					cursor={true}
-					repeat={Infinity}
+					repeat={Number.POSITIVE_INFINITY}
 					speed={1}
 					deletionSpeed={20}
 					className="inline-block bg-accent-violet bg-gradient-to-bl from-accent-pink bg-cover bg-clip-text text-transparent after:text-neutral-50"

src/components/LinkButton.tsx

@@ -11,7 +11,7 @@ export default function LinkButton({ text, to, className, ...rest }: LinkButtonP
 		<HashLink
 			to={to}
 			className={twMerge(
-				"not-prose focus inline-block rounded-lg bg-neutral-300 p-1 hover:bg-neutral-100 text-neutral-900 font-medium px-5 no-underline outline-none",
+				"not-prose focus inline-block rounded-lg bg-neutral-300 p-1 px-5 font-medium text-neutral-900 no-underline outline-none hover:bg-neutral-100",
 				className
 			)}
 			{...rest}

src/components/LinkIcon.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { IconContext } from "react-icons";
 import { twMerge } from "tailwind-merge";
 

src/components/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { IconContext } from "react-icons";
 import { twMerge } from "tailwind-merge";
 
@@ -21,17 +21,11 @@ export default function Navbar({ links, socials, className, ...rest }: NavbarPro
 	const [navbarOpen, setNavbarOpen] = useState(false);
 	const closeNavbar = () => setNavbarOpen(false);
 
-	useEffect(() => {
-		window.addEventListener("resize", closeNavbar);
-		window.addEventListener("scroll", closeNavbar);
-		return () => {
-			window.removeEventListener("resize", closeNavbar);
-			window.removeEventListener("scroll", closeNavbar);
-		};
-	}, []);
+	window.addEventListener("resize", closeNavbar);
+	window.addEventListener("scroll", closeNavbar);
 
 	return (
-		<div className={twMerge("not-prose p-6 w-full", className)} {...rest}>
+		<div className={twMerge("not-prose w-full p-6", className)} {...rest}>
 			<div className="flex h-8 items-center justify-between">
 				{/* Hamburger Menu */}
 				<div className="h-full md:hidden">
@@ -49,15 +43,15 @@ export default function Navbar({ links, socials, className, ...rest }: NavbarPro
 				{/* Site Links */}
 				<div className="hidden md:block">
 					<div className="flex flex-wrap gap-x-4">
-						{links.map((link, index) => (
-							<NavbarLink key={index} text={link.text} to={link.to} slashes />
+						{links.map((link) => (
+							<NavbarLink key={link.to} text={link.text} to={link.to} slashes />
 						))}
 					</div>
 				</div>
 				{/* Social Links */}
 				<div className="flex flex-wrap gap-x-4">
-					{socials.map((social, index) => (
-						<NavbarLink key={index} text={social.text} to={social.to} newtab />
+					{socials.map((social) => (
+						<NavbarLink key={social.to} text={social.text} to={social.to} newtab />
 					))}
 				</div>
 			</div>
@@ -84,9 +78,9 @@ export default function Navbar({ links, socials, className, ...rest }: NavbarPro
 								},
 							}}
 						>
-							{links.map((link, index) => (
+							{links.map((link) => (
 								<motion.div
-									key={index}
+									key={link.to}
 									variants={{
 										open: { opacity: 1, x: 0 },
 										closed: { opacity: 0, x: -10 },

src/components/Navbar/NavbarLink.tsx

@@ -15,7 +15,7 @@ export default function NavbarLink({ text, to, slashes, newtab, className, ...re
 			smooth
 			target={newtab ? "_blank" : "_self"}
 			rel="noreferrer"
-			className={twMerge("focus rounded-sm no-underline outline-none px-2", className)}
+			className={twMerge("focus rounded-sm px-2 no-underline outline-none", className)}
 			{...rest}
 		>
 			<span className="font-mono font-semibold hover:bg-accent-violet hover:bg-gradient-to-bl hover:from-accent-pink hover:bg-cover hover:bg-clip-text hover:text-transparent">{`${

src/components/ScrollIndicator.tsx

@@ -3,7 +3,7 @@ import { HashLink } from "react-router-hash-link";
 
 import useMousePosition from "@/hooks/useMousePosition";
 import { getRelativeMousePos } from "@/utils/utils";
-import { ElementRef, useRef } from "react";
+import { useRef, type ElementRef } from "react";
 import { BsArrowDownShort } from "react-icons/bs";
 
 export type ScrollIndicatorProps = React.ComponentProps<"div"> & {

src/components/Skill.tsx

@@ -22,7 +22,7 @@ export default function Skill({ children, title, icon, className, ...rest }: Ski
 			scale={0.95}
 			glareColor="#f472b6"
 			className={twMerge(
-				"pointer-events-none w-full rounded-lg bg-secondary p-5 transform-style-3d backface-hidden md:pointer-events-auto flex flex-col",
+				"pointer-events-none flex w-full flex-col rounded-lg bg-secondary p-5 transform-style-3d backface-hidden md:pointer-events-auto",
 				className
 			)}
 			{...rest}

src/components/Timeline/Timeline.tsx

@@ -1,7 +1,7 @@
-import { ElementRef, useRef } from "react";
+import { useRef, type ElementRef } from "react";
 import { twMerge } from "tailwind-merge";
 
-import TimelineProject, { TimelineProjectProps } from "@/components/Timeline/TimelineProject";
+import TimelineProject, { type TimelineProjectProps } from "@/components/Timeline/TimelineProject";
 import useOffset from "@/hooks/useOffset";
 import { clamp, lerp, negativeValues } from "@/utils/math";
 
@@ -37,7 +37,7 @@ export default function Timeline({ projects, className, ...rest }: TimelineProps
 					projectOffsets[index] = useOffset(scrollbarRef, projectRef);
 					projectTimes[index] = props.time;
 
-					return <TimelineProject key={index} {...props} ref={projectRef} />;
+					return <TimelineProject key={props.title} {...props} ref={projectRef} />;
 				})}
 			</div>
 			<div className="relative hidden sm:flex">

src/components/Timeline/TimelineProject.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import Markdown from "react-markdown";
 import { twMerge } from "tailwind-merge";
 
-import LinkIcon, { LinkIconProps } from "@/components/LinkIcon";
+import LinkIcon, { type LinkIconProps } from "@/components/LinkIcon";
 import TimelineLabel from "@/components/Timeline/TimelineLabel";
 
 export type TimelineProjectProps = React.ComponentProps<typeof motion.div> & {
@@ -31,15 +31,15 @@ export default forwardRef<HTMLDivElement, TimelineProjectProps>(function Timelin
 				<div className="flex items-start justify-between">
 					<h3 className="m-0 leading-none">{title}</h3>
 					<div className="-m-1 flex gap-3">
-						{links.map((link, index) => (
-							<LinkIcon key={index} icon={link.icon} to={link.to} label={link.label} className="p-1" />
+						{links.map((link) => (
+							<LinkIcon key={link.to} icon={link.icon} to={link.to} label={link.label} className="p-1" />
 						))}
 					</div>
 				</div>
 				<Markdown>{description}</Markdown>
 				<div className="flex flex-wrap gap-2">
-					{stack.map((tech, index) => (
-						<TimelineLabel key={index} text={tech} />
+					{stack.map((tech) => (
+						<TimelineLabel key={tech} text={tech} />
 					))}
 				</div>
 			</div>

src/hooks/useOffset.ts

@@ -1,4 +1,4 @@
-import { ElementRef, RefObject, useEffect, useState } from "react";
+import { useEffect, useState, type ElementRef, type RefObject } from "react";
 
 export default function useOffset(selfRef: RefObject<ElementRef<"div">>, otherRef: RefObject<ElementRef<"div">>) {
 	const [scrollPosition, setScrollPosition] = useState(0);
@@ -11,7 +11,7 @@ export default function useOffset(selfRef: RefObject<ElementRef<"div">>, otherRe
 			if (self && other) {
 				const top = self.getBoundingClientRect().top - other.getBoundingClientRect().top;
 				const height = other.getBoundingClientRect().height - self.getBoundingClientRect().height;
-				if (height != 0) setScrollPosition(top / height);
+				if (height !== 0) setScrollPosition(top / height);
 			}
 		};
 		window.addEventListener("resize", updatePosition);
@@ -21,7 +21,7 @@ export default function useOffset(selfRef: RefObject<ElementRef<"div">>, otherRe
 			window.removeEventListener("resize", updatePosition);
 			window.removeEventListener("scroll", updatePosition);
 		};
-	}, []);
+	}, [selfRef.current, otherRef.current]);
 
 	return scrollPosition;
 }

src/layouts/RootLayout.tsx

@@ -1,7 +1,7 @@
 import { Outlet } from "react-router-dom";
 
 import Footer from "@/components/Footer";
-import Navbar, { TextLink } from "@/components/Navbar/Navbar";
+import Navbar, { type TextLink } from "@/components/Navbar/Navbar";
 
 export default function Layout() {
 	const links: TextLink[] = [

src/main.tsx

@@ -33,7 +33,7 @@ const router = createBrowserRouter([
 	},
 ]);
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
 		<RouterProvider router={router} />
 	</React.StrictMode>

src/utils/utils.ts

@@ -1,4 +1,4 @@
-import { ElementRef, RefObject } from "react";
+import type { ElementRef, RefObject } from "react";
 
 type Pos = { x: number; y: number };
 

tailwind.config.js

@@ -54,7 +54,7 @@ export default {
 		require("@tailwindcss/typography"),
 		require("@tailwindcss/forms"),
 		require("tailwindcss-3d"),
-		function ({ addComponents, matchUtilities, theme }) {
+		({ addComponents, matchUtilities, theme }) => {
 			addComponents({
 				// Utility component to fill an svg with a gradient.
 				// See: https://fvsch.com/svg-gradient-fill