diff --git a/src/components/contact-form.tsx b/src/components/contact-form.tsx
deleted file mode 100644
index d8615df..0000000
--- a/src/components/contact-form.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import {Turnstile} from '@marsidev/react-turnstile';
-import {useState} from 'react';
-import toast from 'react-hot-toast';
-
-export function ContactForm() {
-	const [submitted, setSubmitted] = useState(false);
-	const [loading, setLoading] = useState(false);
-
-	if (submitted) {
-		return (
-			<div>
-				<h2 className="text-2xl">Message received</h2>
-				<p className="text-black/80">I'll get back to you as soon as possible</p>
-			</div>
-		);
-	}
-
-	return (
-		<>
-			<div className="space-y-1">
-				<h2 className="font-semibold">Let's talk 📬</h2>
-				<p className="text-black/75">
-					Drop me a message with the form below, I'll get back to the non-spam
-				</p>
-			</div>
-
-			<form
-				onSubmit={async event => {
-					event.preventDefault();
-
-					const values = Object.fromEntries(
-						new FormData(event.target as HTMLFormElement).entries(),
-					);
-
-					setLoading(true);
-
-					const promise = fetch('/api/contact', {
-						headers: {'Content-Type': 'application/json'},
-						body: JSON.stringify(values),
-						method: 'POST',
-					});
-
-					await toast
-						.promise(promise, {
-							success: 'Success!',
-							loading: 'Sending...',
-							error: (error: Error) => error?.message ?? 'Something went wrong...',
-						})
-						.then(async () => {
-							setSubmitted(true);
-						})
-						.catch(() => null)
-						.finally(() => {
-							setLoading(false);
-						});
-				}}
-				method="POST"
-				action="/api/contact"
-				className="space-y-2 [&>label]:block [&_input]:rounded-md [&_textarea]:rounded-md"
-			>
-				<label htmlFor="email">
-					<input
-						type="email"
-						name="email"
-						id="email"
-						required
-						placeholder="hi@alistair.sh"
-						className="w-full"
-					/>
-				</label>
-
-				<label htmlFor="body">
-					<textarea
-						id="body"
-						name="body"
-						rows={5}
-						minLength={10}
-						required
-						placeholder="Your message"
-						className="w-full resize-y"
-					/>
-				</label>
-
-				<Turnstile
-					options={{responseFieldName: 'turnstile'}}
-					style={{display: 'none'}}
-					siteKey="0x4AAAAAAABwxsgAijQAi5FS"
-				/>
-
-				<button
-					disabled={loading}
-					type="submit"
-					className="relative float-right w-1/2 overflow-hidden rounded-md bg-black p-2 text-white"
-				>
-					Send
-					{loading && (
-						<span className="absolute inset-0 flex items-center justify-center bg-black">
-							<span className="h-4 w-4 animate-spin rounded-[50%] border-2 border-white/0 border-l-white border-t-white" />
-						</span>
-					)}
-				</button>
-			</form>
-		</>
-	);
-}
diff --git a/src/components/hover-card.tsx b/src/components/hover-card.tsx
deleted file mode 100644
index 1f02868..0000000
--- a/src/components/hover-card.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import clsx from 'clsx';
-import type {PropsWithChildren} from 'react';
-
-export const hoverClassName =
-	'transform-gpu transition-all duration-500 will-change-[outline,_transform] group-hover:scale-95 active:scale-100';
-
-export function CardHoverEffect({children, ...props}: PropsWithChildren<{className?: string}>) {
-	return <div className={clsx('group', props.className)}>{children}</div>;
-}
diff --git a/src/components/spinquee.tsx b/src/components/spinquee.tsx
deleted file mode 100644
index d6f24ed..0000000
--- a/src/components/spinquee.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import {MotionValue, motion, useSpring, useTransform} from 'framer-motion';
-import {useCallback, useEffect, useState, type PropsWithChildren} from 'react';
-
-export interface SpinqueeProps {
-	children: React.ReactNode[];
-	size: number;
-}
-
-function duplicateChildren(children: React.ReactNode[], multiplier: number) {
-	return [...Array(multiplier)].flatMap(() => children);
-}
-
-function Item({
-	children,
-	index,
-	angle,
-	total,
-	size,
-	activeIndex,
-}: PropsWithChildren<{
-	index: number;
-	angle: MotionValue<number>;
-	total: number;
-	size: number;
-	activeIndex: number;
-}>) {
-	const isActive = index % total === activeIndex;
-
-	return (
-		<motion.div
-			className={`absolute top-1/2 ${isActive ? 'highlight-class' : ''}`} // Add your highlight class here
-			style={{
-				rotate: useTransform(angle, value => value + index * (360 / total)),
-			}}
-		>
-			<div
-				className="block -rotate-[180deg]"
-				style={{
-					marginLeft: -size,
-					paddingLeft: size,
-				}}
-			>
-				{children}
-			</div>
-		</motion.div>
-	);
-}
-
-export function Spinquee({children, size}: SpinqueeProps) {
-	const angle = useSpring(0, {
-		stiffness: 1200,
-		damping: 30,
-		mass: 0.05,
-	});
-	const [activeIndex, setActiveIndex] = useState(0);
-	const [container, setContainer] = useState<HTMLDivElement | null>(null);
-
-	const duplicatedChildren = duplicateChildren(children, 10);
-
-	const snapToNearest = useCallback(() => {
-		const currentAngle = angle.get();
-		const anglePerItem = 360 / duplicatedChildren.length;
-		const nearestIndex = Math.round(currentAngle / anglePerItem) % duplicatedChildren.length;
-		const nearestAngle = nearestIndex * anglePerItem;
-		angle.set(nearestAngle);
-		setActiveIndex(nearestIndex);
-	}, [angle, duplicatedChildren.length]);
-
-	useEffect(() => {
-		if (!container) return;
-
-		let timeout: NodeJS.Timeout;
-		const wheel = (e: WheelEvent) => {
-			angle.set(angle.get() + e.deltaY / 10);
-			clearTimeout(timeout);
-			timeout = setTimeout(snapToNearest, 150); // Adjust delay as needed
-		};
-
-		container.addEventListener('wheel', wheel);
-
-		return () => {
-			container.removeEventListener('wheel', wheel);
-		};
-	}, [container, angle, snapToNearest]);
-
-	return (
-		<div ref={setContainer} className="h-full w-full">
-			<div className="absolute inset-0 top-1/2 w-full -translate-y-1/2">
-				{duplicatedChildren.map((child, index) => (
-					<Item
-						key={index}
-						size={size}
-						index={index}
-						angle={angle}
-						total={duplicatedChildren.length}
-						activeIndex={activeIndex}
-					>
-						{child}
-					</Item>
-				))}
-			</div>
-		</div>
-	);
-}
diff --git a/src/components/time.tsx b/src/components/time.tsx
deleted file mode 100644
index 762246f..0000000
--- a/src/components/time.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import clsx from 'clsx';
-import {motion} from 'framer-motion';
-import {useEffect, useRef, useState} from 'react';
-import {UKTimeFormatter, daysUntilBirthday} from '../utils/constants';
-
-function Night({time}: {time: Date}) {
-	const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
-	useEffect(() => {
-		const canvas = canvasRef.current;
-
-		if (!canvas) {
-			return;
-		}
-
-		const ctx = canvas.getContext('2d');
-
-		if (!ctx) {
-			return;
-		}
-
-		// Thx Ana
-		// https://github.com/AnaArsonist/anahoward.me/blob/b41ec1a5112526c03f4e09bc4226506ce529523f/src/components/time-components/NightComponent.tsx#L35
-		for (let i = 0; i < 50; i++) {
-			ctx.fillStyle = 'white';
-			ctx.beginPath();
-			ctx.arc(
-				Math.random() * canvas.width,
-				Math.random() * canvas.height,
-				Math.random() * 2,
-				0,
-				Math.PI * 2,
-			);
-			ctx.fill();
-		}
-	}, [canvasRef]);
-
-	return (
-		<div
-			className={clsx(
-				'relative flex items-center justify-center overflow-hidden rounded-2xl',
-				'bg-sky-900 text-white',
-			)}
-		>
-			<canvas
-				ref={canvasRef}
-				aria-hidden
-				className="pointer-events-none absolute inset-0 h-full w-full overflow-hidden rounded-2xl"
-			/>
-
-			<div className="z-10 text-center">
-				<h2
-					className={clsx('text-2xl font-light text-glow-sky-900 dark:text-glow-sky-500')}
-					suppressHydrationWarning
-				>
-					{UKTimeFormatter.format(time)}
-				</h2>
-
-				<p className={clsx('text-xs font-light', 'text-glow-sky-900 dark:text-glow-sky-500')}>
-					in the uk
-				</p>
-			</div>
-		</div>
-	);
-}
-
-function Day({time}: {time: Date}) {
-	return (
-		<div className="relative flex overflow-hidden rounded-2xl bg-gradient-to-br from-[#0A8DFF] to-[#98CFFF] first-letter:w-full">
-			<div className="flex w-full items-center justify-center">
-				<div className="flex items-baseline space-x-1 opacity-85 md:space-x-2">
-					<div className="flex flex-col">
-						<h2 className="text-2xl font-light text-white">{UKTimeFormatter.format(time)}</h2>
-
-						<p
-							className={clsx(
-								'text-center text-xs font-light',
-								'text-white text-glow-sky-900 dark:text-glow-sky-500',
-							)}
-						>
-							in the uk
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				aria-hidden
-				animate={{
-					scale: [1, 1.1, 1.2, 1],
-				}}
-				transition={{
-					duration: 4,
-					ease: 'easeInOut',
-					repeat: Infinity,
-					repeatType: 'reverse',
-				}}
-				className="pointer-events-none absolute bottom-0 right-0 rounded-tl-full bg-white/10 pl-2 pt-2 md:pl-4 md:pt-4"
-			>
-				<motion.div>
-					<div className="bottom-0 right-0 rounded-tl-full bg-white/20 pl-2 pt-2 md:pl-4 md:pt-4">
-						<div className="bottom-0 right-0 rounded-tl-full bg-white/20 pl-2 pt-2 md:pl-4 md:pt-4">
-							<motion.div
-								initial={false}
-								animate={{scale: [1, 0.8, 1.1, 1, 1, 1, 2]}}
-								transition={{
-									duration: 4,
-									ease: 'easeInOut',
-									repeat: Infinity,
-									repeatType: 'reverse',
-								}}
-								className="relative h-5 w-5 rounded-tl-full bg-yellow-200"
-							/>
-						</div>
-					</div>
-				</motion.div>
-			</motion.div>
-		</div>
-	);
-}
-
-export function Time() {
-	const [time, setTime] = useState(() => new Date());
-
-	const isNight = time.getHours() >= 17 || time.getHours() < 6;
-
-	useEffect(() => {
-		const interval = setInterval(() => {
-			setTime(new Date());
-		}, 1000);
-
-		return () => clearInterval(interval);
-	}, []);
-
-	return (
-		<div className="col-span-3 grid shrink-0 grid-cols-1 gap-6 md:col-span-1 [&_>_div]:shrink-0">
-			{isNight ? <Night time={time} /> : <Day time={time} />}
-
-			<div className="flex items-center justify-center rounded-2xl bg-indigo-100 text-indigo-500 dark:bg-[#23224c] dark:text-indigo-400">
-				<div className="text-center">
-					<p className="text-xs">
-						<span className="text-xl">{daysUntilBirthday}</span> days
-						<br />
-						until birthday
-					</p>
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 978e548..1a96754 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -178,7 +178,7 @@ export default function Home(props: Props) {
 												realtime. In the meantime, you can check out
 												<Link
 													href="https://www.youtube.com/watch?v=BsPg7bjT1rM"
-													className="inline-block nice-underline-neutral-400 dark:nice-underline-neutral-200/50"
+													className="nice-underline-neutral-400 dark:nice-underline-neutral-200/50 inline-block"
 													target="_blank"
 												>
 													this Four Tet DJ set that I love