From c3966df4d5f427c9da675ee6bef650ed0adfec45 Mon Sep 17 00:00:00 2001
From: Hayden Bleasel <hello@haydenbleasel.com>
Date: Fri, 19 Jul 2024 00:07:39 -0400
Subject: [PATCH] Ultracite unsafe fixes

---
 actions/subscribe.ts                          |  2 +-
 app/(pages)/(home)/cards/announcement.tsx     |  6 +++---
 app/(pages)/(home)/cards/github.tsx           |  2 +-
 app/(pages)/(home)/cards/spotify.tsx          |  6 +++---
 app/(pages)/(home)/cards/steam.tsx            |  6 +++---
 app/(pages)/(home)/components/avatar.tsx      |  2 +-
 app/(pages)/(home)/components/github.tsx      | 10 +++++-----
 app/(pages)/(home)/components/location.tsx    |  6 +++---
 app/(pages)/(home)/components/newsletter.tsx  | 10 +++++-----
 app/(pages)/(home)/page.tsx                   |  4 ++--
 app/(pages)/blog/[slug]/page.tsx              |  6 +++---
 app/(pages)/blog/page.tsx                     |  8 ++++----
 app/(pages)/contact/actions/contact.ts        | 14 ++-----------
 .../contact/components/contact-form.tsx       |  6 +++---
 app/(pages)/contact/page.tsx                  |  2 +-
 app/(pages)/features/page.tsx                 |  8 ++++----
 app/(pages)/layout.tsx                        |  2 +-
 app/(pages)/stack/page.tsx                    | 12 +++++------
 app/(pages)/work/page.tsx                     | 10 +++++-----
 app/about/inline-image.tsx                    |  4 ++--
 app/about/page.tsx                            | 14 ++++++-------
 app/api/cron/github/route.ts                  |  2 --
 app/api/cron/spotify/route.ts                 |  5 -----
 app/api/cron/steam/route.ts                   |  4 ----
 app/components/travel.tsx                     |  2 +-
 app/layout.tsx                                |  2 +-
 components/card.tsx                           |  8 ++++----
 components/form.tsx                           | 20 +++++++++----------
 components/header.tsx                         |  2 +-
 components/navbar.tsx                         | 10 +++++-----
 components/video.tsx                          |  2 +-
 contentlayer.config.ts                        |  2 +-
 32 files changed, 89 insertions(+), 110 deletions(-)

diff --git a/actions/subscribe.ts b/actions/subscribe.ts
index 6a48e382..b6692a48 100644
--- a/actions/subscribe.ts
+++ b/actions/subscribe.ts
@@ -11,7 +11,7 @@ if (!audienceId) {
 }
 
 export const subscribe = async (
-  prevState: never,
+  _prevState: never,
   formData: FormData
 ): Promise<{
   message: string;
diff --git a/app/(pages)/(home)/cards/announcement.tsx b/app/(pages)/(home)/cards/announcement.tsx
index d3402cc8..5b1949dd 100644
--- a/app/(pages)/(home)/cards/announcement.tsx
+++ b/app/(pages)/(home)/cards/announcement.tsx
@@ -19,14 +19,14 @@ export const AnnouncementCard = async (): Promise<ReactElement> => {
       title="Latest Update"
       className="flex flex-col items-start justify-between gap-4 p-4"
     >
-      <p className="text-neutral-500 dark:text-neutral-400 text-sm">
+      <p className="text-neutral-500 text-sm dark:text-neutral-400">
         {announcement.text}
       </p>
       <Link
         href={announcement.link}
         className={cn(
-          'rounded-full text-sm py-2.5 px-4 font-medium no-underline',
-          'bg-neutral-100 text-neutral-950 placeholder:text-neutral-500 outline-orange-500',
+          'rounded-full px-4 py-2.5 font-medium text-sm no-underline',
+          'bg-neutral-100 text-neutral-950 outline-orange-500 placeholder:text-neutral-500',
           'dark:bg-neutral-900 dark:text-white dark:placeholder-text-neutral-600'
         )}
       >
diff --git a/app/(pages)/(home)/cards/github.tsx b/app/(pages)/(home)/cards/github.tsx
index 17bcd7d9..72cf1254 100644
--- a/app/(pages)/(home)/cards/github.tsx
+++ b/app/(pages)/(home)/cards/github.tsx
@@ -50,7 +50,7 @@ const GitHubCard: FC = () => {
   return (
     <Card title="GitHub Activity" className="p-4">
       <div className="flex flex-col gap-4">
-        <p className="text-neutral-500 dark:text-neutral-400 text-sm">
+        <p className="text-neutral-500 text-sm dark:text-neutral-400">
           {total} contributions in the last year
         </p>
         <div className="flex flex-col gap-[3px]">
diff --git a/app/(pages)/(home)/cards/spotify.tsx b/app/(pages)/(home)/cards/spotify.tsx
index 0d86ad05..fb35fc3f 100644
--- a/app/(pages)/(home)/cards/spotify.tsx
+++ b/app/(pages)/(home)/cards/spotify.tsx
@@ -15,17 +15,17 @@ const SpotifyCard = async (): Promise<ReactElement> => {
   return (
     <Card
       title="Now Listening"
-      className="p-4 flex flex-row md:flex-col md:justify-between gap-4"
+      className="flex flex-row gap-4 p-4 md:flex-col md:justify-between"
     >
       <Image
         src={song.image}
         alt=""
         width={300}
         height={300}
-        className="w-12 h-12 shrink-0 rounded"
+        className="h-12 w-12 shrink-0 rounded"
         unoptimized
       />
-      <p className="text-neutral-500 dark:text-neutral-400 text-sm">
+      <p className="text-neutral-500 text-sm dark:text-neutral-400">
         <Link href={song.href}>{song.name}</Link> by {song.artist}
       </p>
     </Card>
diff --git a/app/(pages)/(home)/cards/steam.tsx b/app/(pages)/(home)/cards/steam.tsx
index 0e7ea014..bb7395cb 100644
--- a/app/(pages)/(home)/cards/steam.tsx
+++ b/app/(pages)/(home)/cards/steam.tsx
@@ -15,9 +15,9 @@ const SteamCard = async (): Promise<ReactElement> => {
   return (
     <Card
       title="Recently Played"
-      className="p-4 flex flex-col sm:flex-row justify-between gap-4"
+      className="flex flex-col justify-between gap-4 p-4 sm:flex-row"
     >
-      <div className="text-sm flex flex-col justify-between gap-4">
+      <div className="flex flex-col justify-between gap-4 text-sm">
         <p>
           <Link href={`https://store.steampowered.com/app/${game.id}`}>
             {game.name}
@@ -36,7 +36,7 @@ const SteamCard = async (): Promise<ReactElement> => {
         width={300}
         height={300}
         unoptimized
-        className="rounded m-0 shrink-0"
+        className="m-0 shrink-0 rounded"
       />
     </Card>
   );
diff --git a/app/(pages)/(home)/components/avatar.tsx b/app/(pages)/(home)/components/avatar.tsx
index 2161a651..d7677d6a 100644
--- a/app/(pages)/(home)/components/avatar.tsx
+++ b/app/(pages)/(home)/components/avatar.tsx
@@ -7,7 +7,7 @@ export const Avatar: FC = () => (
   <Image
     alt=""
     className={cn(
-      'm-0 inline w-8 aspect-square overflow-hidden object-cover rounded-md border rotate-6 -translate-y-0.5',
+      '-translate-y-0.5 m-0 inline aspect-square w-8 rotate-6 overflow-hidden rounded-md border object-cover',
       'border-neutral-200',
       'dark:border-neutral-700'
     )}
diff --git a/app/(pages)/(home)/components/github.tsx b/app/(pages)/(home)/components/github.tsx
index 40e201c0..2b919cca 100644
--- a/app/(pages)/(home)/components/github.tsx
+++ b/app/(pages)/(home)/components/github.tsx
@@ -12,16 +12,16 @@ export const GitHub = async (): Promise<ReactElement> => {
   return (
     <div
       className={cn(
-        'not-prose align-text-bottom inline-flex overflow-hidden border rounded-md shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] scale-[0.8] md:scale-100',
+        'not-prose inline-flex scale-[0.8] overflow-hidden rounded-md border align-text-bottom shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] md:scale-100',
         'border-neutral-200',
         'dark:border-neutral-700'
       )}
     >
       <Link
         className={cn(
-          'px-2 py-1.5 border-r shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)] flex items-center justify-center',
-          'bg-neutral-100 border-neutral-200',
-          'dark:bg-neutral-800 dark:border-neutral-700'
+          'flex items-center justify-center border-r px-2 py-1.5 shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
+          'border-neutral-200 bg-neutral-100',
+          'dark:border-neutral-700 dark:bg-neutral-800'
         )}
         href="https://github.com/haydenbleasel"
         aria-label="GitHub"
@@ -34,7 +34,7 @@ export const GitHub = async (): Promise<ReactElement> => {
       </Link>{' '}
       <span
         className={cn(
-          'px-2 py-1.5 text-sm font-medium shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
+          'px-2 py-1.5 font-medium text-sm shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
           'bg-white',
           'dark:bg-neutral-800'
         )}
diff --git a/app/(pages)/(home)/components/location.tsx b/app/(pages)/(home)/components/location.tsx
index 5af1363b..21a5c877 100644
--- a/app/(pages)/(home)/components/location.tsx
+++ b/app/(pages)/(home)/components/location.tsx
@@ -15,14 +15,14 @@ export const Location = async (): Promise<ReactElement> => {
       {location}{' '}
       <div
         className={cn(
-          'not-prose align-text-bottom inline-flex overflow-hidden border rounded-md shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] scale-[0.8] md:scale-100',
+          'not-prose inline-flex scale-[0.8] overflow-hidden rounded-md border align-text-bottom shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] md:scale-100',
           'border-neutral-200',
           'dark:border-neutral-700'
         )}
       >
         <span
           className={cn(
-            'px-2 py-1.5 text-sm font-medium shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
+            'px-2 py-1.5 font-medium text-sm shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
             'bg-neutral-100',
             'dark:bg-neutral-800'
           )}
@@ -31,7 +31,7 @@ export const Location = async (): Promise<ReactElement> => {
         </span>{' '}
         <span
           className={cn(
-            'px-2 py-1.5 text-sm font-medium shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
+            'px-2 py-1.5 font-medium text-sm shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
             'bg-white',
             'dark:bg-neutral-800'
           )}
diff --git a/app/(pages)/(home)/components/newsletter.tsx b/app/(pages)/(home)/components/newsletter.tsx
index 8b325039..9ab7cd1f 100644
--- a/app/(pages)/(home)/components/newsletter.tsx
+++ b/app/(pages)/(home)/components/newsletter.tsx
@@ -11,8 +11,8 @@ const SubmitButton: FC = () => {
   return (
     <button
       className={cn(
-        'absolute right-0.5 top-0.5 rounded-full bg-orange-500 text-white text-sm font-medium py-2 px-6 select-none',
-        'disabled:opacity-50 disabled:cursor-not-allowed'
+        'absolute top-0.5 right-0.5 select-none rounded-full bg-orange-500 px-6 py-2 font-medium text-sm text-white',
+        'disabled:cursor-not-allowed disabled:opacity-50'
       )}
       type="submit"
       disabled={pending}
@@ -45,15 +45,15 @@ export const Newsletter: FC = () => {
           pattern=".+@.+\..+"
           required
           className={cn(
-            'rounded-full text-sm py-2.5 pl-4 pr-[94px] w-full',
-            'bg-neutral-100 text-neutral-950 placeholder:text-neutral-500 outline-orange-500',
+            'w-full rounded-full py-2.5 pr-[94px] pl-4 text-sm',
+            'bg-neutral-100 text-neutral-950 outline-orange-500 placeholder:text-neutral-500',
             'dark:bg-neutral-900 dark:text-white dark:placeholder-text-neutral-600'
           )}
         />
         <SubmitButton />
       </form>
       {state.message ? (
-        <p aria-live="polite" className="mt-4 text-sm block m-0">
+        <p aria-live="polite" className="m-0 mt-4 block text-sm">
           {state.message}
         </p>
       ) : undefined}
diff --git a/app/(pages)/(home)/page.tsx b/app/(pages)/(home)/page.tsx
index 2699d636..5e87d248 100644
--- a/app/(pages)/(home)/page.tsx
+++ b/app/(pages)/(home)/page.tsx
@@ -18,13 +18,13 @@ export const metadata: Metadata = {
 
 const Home: FC = () => (
   <>
-    <h1 className="tracking-tight leading-tight text-3xl sm:text-4xl">
+    <h1 className="text-3xl leading-tight tracking-tight sm:text-4xl">
       Hello <Wave /> I’m Hayden Bleasel <Avatar />. I’m an Australian 🦘 Product
       Designer 🖼️ and Software Engineer <GitHub /> currently based in{' '}
       <Location />.
     </h1>
     <Newsletter />
-    <div className="grid md:grid-cols-3 gap-3 prose-p:m-0 prose-img:m-0">
+    <div className="prose-img:m-0 prose-p:m-0 grid gap-3 md:grid-cols-3">
       <div className="md:col-span-2">
         <GitHubCard />
       </div>
diff --git a/app/(pages)/blog/[slug]/page.tsx b/app/(pages)/blog/[slug]/page.tsx
index e88a5ae5..51fa132a 100644
--- a/app/(pages)/blog/[slug]/page.tsx
+++ b/app/(pages)/blog/[slug]/page.tsx
@@ -62,8 +62,8 @@ const Page: FC<PageProperties> = ({ params }) => {
 
   return (
     <>
-      <div className="flex items-center gap-2 text-neutral-500 dark:text-neutral-400 hover:text-orange-500 dark:hover:text-orange-400">
-        <ArrowLeftToLineIcon className="w-4 h-4 text-inherit" />
+      <div className="flex items-center gap-2 text-neutral-500 hover:text-orange-500 dark:text-neutral-400 dark:hover:text-orange-400">
+        <ArrowLeftToLineIcon className="h-4 w-4 text-inherit" />
         <Link
           className="text-inherit text-sm no-underline hover:text-inherit"
           href="/blog"
@@ -78,7 +78,7 @@ const Page: FC<PageProperties> = ({ params }) => {
           width={1920}
           height={1080}
           alt=""
-          className="m-0 h-full w-full object-cover rounded overflow-hidden"
+          className="m-0 h-full w-full overflow-hidden rounded object-cover"
           priority
           blurDataURL={`data:image/jpg;base64,${page.imageBlur}`}
           placeholder="blur"
diff --git a/app/(pages)/blog/page.tsx b/app/(pages)/blog/page.tsx
index 18b67bb1..19ab3933 100644
--- a/app/(pages)/blog/page.tsx
+++ b/app/(pages)/blog/page.tsx
@@ -24,15 +24,15 @@ const Post: FC<{
   readonly slug: string;
 }> = ({ title: postTitle, date, slug }) => (
   <Link
-    className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 no-underline text-inherit font-normal group transition-colors sm:truncate"
+    className="group flex flex-col gap-1 font-normal text-inherit no-underline transition-colors sm:flex-row sm:items-center sm:gap-4 sm:truncate"
     key={slug}
     href={slug}
   >
-    <p className="m-0 sm:truncate text-neutral-950 dark:text-white font-medium group-hover:text-orange-500 transition-colors">
+    <p className="m-0 font-medium text-neutral-950 transition-colors group-hover:text-orange-500 sm:truncate dark:text-white">
       {postTitle}
     </p>
-    <hr className="hidden sm:block min-w-7 flex-1 m-0 group-hover:border-orange-400 transition-colors" />
-    <p className="shrink-0 m-0 text-sm group-hover:text-orange-400 transition-colors">
+    <hr className="m-0 hidden min-w-7 flex-1 transition-colors group-hover:border-orange-400 sm:block" />
+    <p className="m-0 shrink-0 text-sm transition-colors group-hover:text-orange-400">
       {formatBlogDate(date)}
     </p>
   </Link>
diff --git a/app/(pages)/contact/actions/contact.ts b/app/(pages)/contact/actions/contact.ts
index 835b0a46..28b20a05 100644
--- a/app/(pages)/contact/actions/contact.ts
+++ b/app/(pages)/contact/actions/contact.ts
@@ -21,21 +21,19 @@ const kvRestApiUrl = process.env.KV_REST_API_URL;
 const kvRestApiToken = process.env.KV_REST_API_TOKEN;
 
 if (!kvRestApiUrl || !kvRestApiToken) {
-  console.warn(
+  throw new Error(
     'KV_REST_API_URL and KV_REST_API_TOKEN environment variables are not set'
   );
 }
 
 export const contact = async (
-  previousState: never,
+  _previousState: never,
   formData: FormData
 ): Promise<{
   message: string;
 }> => {
   const data = formSchema.parse(Object.fromEntries(formData));
 
-  console.log('📧 Contact form submission', data);
-
   try {
     const ip = headers().get('x-forwarded-for');
     const ratelimit = new Ratelimit({
@@ -52,8 +50,6 @@ export const contact = async (
       );
     }
 
-    console.log('📧 Sending email...');
-
     const response = await resend.emails.send({
       from,
       to,
@@ -62,22 +58,16 @@ export const contact = async (
       text: data.message,
     });
 
-    console.log('📧 Email sent', { response });
-
     if (response.error) {
       throw new Error(response.error.message);
     }
 
-    console.log('📧 Contact form submission successful');
-
     revalidatePath('/contact');
 
     return { message: 'Thanks! Your message has been sent.' };
   } catch (error) {
     const errorMessage = parseError(error);
 
-    console.error('📧 Contact form submission failed', { error: errorMessage });
-
     return { message: errorMessage };
   }
 };
diff --git a/app/(pages)/contact/components/contact-form.tsx b/app/(pages)/contact/components/contact-form.tsx
index 3938c29a..d3d7ec51 100644
--- a/app/(pages)/contact/components/contact-form.tsx
+++ b/app/(pages)/contact/components/contact-form.tsx
@@ -15,8 +15,8 @@ const SubmitButton: FC = () => {
       disabled={pending}
       type="submit"
       className={cn(
-        'bg-orange-500 text-white rounded-lg px-6 py-2.5 text-sm font-medium',
-        'disabled:opacity-50 disabled:cursor-not-allowed'
+        'rounded-lg bg-orange-500 px-6 py-2.5 font-medium text-sm text-white',
+        'disabled:cursor-not-allowed disabled:opacity-50'
       )}
     >
       Send message
@@ -79,7 +79,7 @@ export const ContactForm: FC = () => {
         />
         <Select label="Type" name="type" data={typeOptions} />
         <SubmitButton />
-        <output aria-live="polite" className="text-sm block">
+        <output aria-live="polite" className="block text-sm">
           {state.message}
         </output>
       </form>
diff --git a/app/(pages)/contact/page.tsx b/app/(pages)/contact/page.tsx
index fa13555a..8855d691 100644
--- a/app/(pages)/contact/page.tsx
+++ b/app/(pages)/contact/page.tsx
@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 const Contact: FC = () => (
   <>
     <Header title={title} description={description} />
-    <div className="mt-8 grid gap-8 not-prose">
+    <div className="not-prose mt-8 grid gap-8">
       <ContactForm />
     </div>
   </>
diff --git a/app/(pages)/features/page.tsx b/app/(pages)/features/page.tsx
index 68b65b34..11312e9e 100644
--- a/app/(pages)/features/page.tsx
+++ b/app/(pages)/features/page.tsx
@@ -24,15 +24,15 @@ const FeatureInner: FC<{
 }> = ({ name, year, location }) => (
   <>
     <p className="m-0 sm:truncate">
-      <span className="text-neutral-950 dark:text-white font-medium group-hover:text-orange-500 transition-colors">
+      <span className="font-medium text-neutral-950 transition-colors group-hover:text-orange-500 dark:text-white">
         {name}
       </span>
-      <span className="text-neutral-500 dark:text-neutral-400 group-hover:text-orange-400 transition-colors">
+      <span className="text-neutral-500 transition-colors group-hover:text-orange-400 dark:text-neutral-400">
         , {location}
       </span>
     </p>
-    <hr className="hidden sm:block min-w-7 flex-1 m-0 group-hover:border-orange-400 transition-colors" />
-    <p className="shrink-0 m-0 text-sm group-hover:text-orange-400 transition-colors">
+    <hr className="m-0 hidden min-w-7 flex-1 transition-colors group-hover:border-orange-400 sm:block" />
+    <p className="m-0 shrink-0 text-sm transition-colors group-hover:text-orange-400">
       {year}
     </p>
   </>
diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx
index bc579ee4..c5fbd78b 100644
--- a/app/(pages)/layout.tsx
+++ b/app/(pages)/layout.tsx
@@ -6,7 +6,7 @@ type PageLayoutProperties = {
 
 const PageLayout: FC<PageLayoutProperties> = ({ children }) => (
   <main className="px-4 pt-16 pb-32 sm:pt-32">
-    <div className="space-y-12 prose prose-neutral prose-orange mx-auto dark:prose-invert">
+    <div className="prose prose-neutral prose-orange dark:prose-invert mx-auto space-y-12">
       {children}
     </div>
   </main>
diff --git a/app/(pages)/stack/page.tsx b/app/(pages)/stack/page.tsx
index 52a682c0..750c1f78 100644
--- a/app/(pages)/stack/page.tsx
+++ b/app/(pages)/stack/page.tsx
@@ -30,7 +30,7 @@ const Tool: FC<{
       href={data.href}
       key={data.href}
       className={cn(
-        'no-underline items-center flex gap-4 p-4 rounded-lg transition-colors',
+        'flex items-center gap-4 rounded-lg p-4 no-underline transition-colors',
         'hover:bg-neutral-100',
         'dark:hover:bg-neutral-800'
       )}
@@ -47,7 +47,7 @@ const Tool: FC<{
         <div className="flex items-center gap-2">
           <p
             className={cn(
-              'text-sm font-medium',
+              'font-medium text-sm',
               'text-neutral-900',
               'dark:text-neutral-100'
             )}
@@ -57,7 +57,7 @@ const Tool: FC<{
           {data.featured ? (
             <span
               className={cn(
-                'text-xs px-2 rounded-full font-medium',
+                'rounded-full px-2 font-medium text-xs',
                 'bg-neutral-100 text-neutral-700',
                 'dark:bg-neutral-800 dark:text-neutral-300'
               )}
@@ -66,7 +66,7 @@ const Tool: FC<{
             </span>
           ) : undefined}
         </div>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+        <p className="text-neutral-500 text-sm dark:text-neutral-400">
           {data.description}
         </p>
       </div>
@@ -77,12 +77,12 @@ const Tool: FC<{
 const Stack: FC = () => (
   <>
     <Header title={title} description={description} />
-    <div className="mt-8 grid gap-8 not-prose">
+    <div className="not-prose mt-8 grid gap-8">
       {Object.values(stack).map(({ items, type }) => (
         <Card
           key={type}
           title={type}
-          className="p-2 grid sm:grid-cols-2 gap-x-2"
+          className="grid gap-x-2 p-2 sm:grid-cols-2"
         >
           {items.map((item) => (
             <Tool data={item} key={item.name} />
diff --git a/app/(pages)/work/page.tsx b/app/(pages)/work/page.tsx
index 174f3059..831213d1 100644
--- a/app/(pages)/work/page.tsx
+++ b/app/(pages)/work/page.tsx
@@ -26,20 +26,20 @@ const Role: FC<{
   readonly url: string;
 }> = ({ role, company, startYear, endYear, url }) => (
   <Link
-    className="sm:truncate flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 no-underline text-inherit font-normal group transition-colors"
+    className="group flex flex-col gap-1 font-normal text-inherit no-underline transition-colors sm:flex-row sm:items-center sm:gap-4 sm:truncate"
     key={company}
     href={url}
   >
     <p className="m-0 sm:truncate">
-      <span className="text-neutral-950 dark:text-white font-medium group-hover:text-orange-500 transition-colors">
+      <span className="font-medium text-neutral-950 transition-colors group-hover:text-orange-500 dark:text-white">
         {role}
       </span>
-      <span className="text-neutral-500 dark:text-neutral-400 group-hover:text-orange-400 transition-colors">
+      <span className="text-neutral-500 transition-colors group-hover:text-orange-400 dark:text-neutral-400">
         , {company}
       </span>
     </p>
-    <hr className="hidden sm:block min-w-7 flex-1 m-0 group-hover:border-orange-400 transition-colors" />
-    <p className="m-0 text-sm group-hover:text-orange-400 transition-colors">
+    <hr className="m-0 hidden min-w-7 flex-1 transition-colors group-hover:border-orange-400 sm:block" />
+    <p className="m-0 text-sm transition-colors group-hover:text-orange-400">
       {startYear} &mdash; {endYear ?? 'Present'}
     </p>
   </Link>
diff --git a/app/about/inline-image.tsx b/app/about/inline-image.tsx
index 701535ca..c58ca125 100644
--- a/app/about/inline-image.tsx
+++ b/app/about/inline-image.tsx
@@ -12,14 +12,14 @@ type InlineImageProperties = {
 export const InlineImage: FC<InlineImageProperties> = ({ src, text, url }) => (
   <Link
     href={url}
-    className="ml-0.5 dark:ml-0 inline-flex gap-1 items-center align-bottom"
+    className="ml-0.5 inline-flex items-center gap-1 align-bottom dark:ml-0"
   >
     <Image
       src={src}
       alt=""
       width={16}
       height={16}
-      className="dark:hidden m-0 w-4 h-4 rounded-sm object-contain select-none"
+      className="m-0 h-4 w-4 select-none rounded-sm object-contain dark:hidden"
       quality={100}
     />
     <span>{text}</span>
diff --git a/app/about/page.tsx b/app/about/page.tsx
index a036cb81..ac2f2260 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -81,7 +81,7 @@ const visited: COBEOptions['markers'] = [
 const About: FC = () => (
   <div className="flex items-start">
     <div className="flex-1">
-      <div className="max-w-[38rem] mx-auto">
+      <div className="mx-auto max-w-[38rem]">
         <PageLayout>
           <Image
             src={Avatar}
@@ -89,8 +89,8 @@ const About: FC = () => (
             width={96}
             height={96}
             className={cn(
-              'block xl:hidden m-0',
-              'object-cover w-12 h-12 rounded-full'
+              'm-0 block xl:hidden',
+              'h-12 w-12 rounded-full object-cover'
             )}
             quality={100}
             loading="eager"
@@ -156,9 +156,9 @@ const About: FC = () => (
             </p>
             <div
               className={cn(
-                'aspect-[4/3] rounded-xl border overflow-hidden',
-                'bg-neutral-100 border-neutral-200',
-                'dark:bg-neutral-800 dark:border-neutral-700'
+                'aspect-[4/3] overflow-hidden rounded-xl border',
+                'border-neutral-200 bg-neutral-100',
+                'dark:border-neutral-700 dark:bg-neutral-800'
               )}
             >
               <Travel
@@ -199,7 +199,7 @@ const About: FC = () => (
       height={4608}
       className={cn(
         'hidden xl:block',
-        'object-cover flex-0 h-screen sticky top-0 bottom-0 aspect-[3584/4608] w-auto max-w-[50vw] select-none'
+        'sticky top-0 bottom-0 aspect-[3584/4608] h-screen w-auto max-w-[50vw] flex-0 select-none object-cover'
       )}
       quality={100}
       loading="eager"
diff --git a/app/api/cron/github/route.ts b/app/api/cron/github/route.ts
index 8c3b20a0..6d903209 100644
--- a/app/api/cron/github/route.ts
+++ b/app/api/cron/github/route.ts
@@ -18,8 +18,6 @@ export const GET = async (): Promise<Response> => {
   } catch (error) {
     const message = parseError(error);
 
-    console.error(message);
-
     return new Response(message, { status: 500 });
   }
 };
diff --git a/app/api/cron/spotify/route.ts b/app/api/cron/spotify/route.ts
index 8bf6b1f7..dadf3dbe 100644
--- a/app/api/cron/spotify/route.ts
+++ b/app/api/cron/spotify/route.ts
@@ -1,6 +1,5 @@
 import { parseError } from '@/lib/utils';
 import { updateEdgeConfig } from '@/lib/vercel';
-import { get } from '@vercel/edge-config';
 
 export type SpotifyProperties = {
   lastUpdated: number;
@@ -46,8 +45,6 @@ const getAccessToken = async (refreshToken: string): Promise<string> => {
 export const GET = async (): Promise<Response> => {
   try {
     const token = await getAccessToken(spotifyRefreshToken);
-    const currentTrack = await get<SpotifyProperties>('spotify');
-
     const response = await fetch(
       'https://api.spotify.com/v1/me/player/currently-playing',
       {
@@ -104,8 +101,6 @@ export const GET = async (): Promise<Response> => {
   } catch (error) {
     const message = parseError(error);
 
-    console.error(message);
-
     return new Response(message, { status: 500 });
   }
 };
diff --git a/app/api/cron/steam/route.ts b/app/api/cron/steam/route.ts
index 6c955b31..f5ccc68e 100644
--- a/app/api/cron/steam/route.ts
+++ b/app/api/cron/steam/route.ts
@@ -217,8 +217,6 @@ const getAppDetails = async (appId: number) => {
     }
   );
 
-  console.log(response);
-
   if (!response.ok) {
     throw new Error('Invalid response format from Steam API: getAppDetails');
   }
@@ -292,8 +290,6 @@ export const GET = async (): Promise<Response> => {
   } catch (error) {
     const message = parseError(error);
 
-    console.error(message);
-
     return new Response(message, { status: 500 });
   }
 };
diff --git a/app/components/travel.tsx b/app/components/travel.tsx
index f045a268..b1c6d3e9 100644
--- a/app/components/travel.tsx
+++ b/app/components/travel.tsx
@@ -57,7 +57,7 @@ export const Travel: FC<TravelProperties> = ({ width, height, markers }) => {
     <canvas
       aria-label="Globe"
       ref={canvasReference}
-      className="w-full aspect-[4/3] max-w-full"
+      className="aspect-[4/3] w-full max-w-full"
     />
   );
 };
diff --git a/app/layout.tsx b/app/layout.tsx
index 90ae8f8b..8fb4f579 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -52,7 +52,7 @@ const RootLayout: FC<RootLayoutProperties> = ({ children }) => (
       className={cn(
         GeistSans.variable,
         GeistMono.variable,
-        'bg-white dark:bg-neutral-950 font-sans'
+        'bg-white font-sans dark:bg-neutral-950'
       )}
     >
       {children}
diff --git a/components/card.tsx b/components/card.tsx
index 0cd4ca33..d0180c43 100644
--- a/components/card.tsx
+++ b/components/card.tsx
@@ -17,7 +17,7 @@ export const Card: FC<CardProperties> = ({ title, children, className }) => (
   >
     <p
       className={cn(
-        'm-0 shrink-0 block text-sm font-medium py-2 px-4',
+        'm-0 block shrink-0 px-4 py-2 font-medium text-sm',
         'text-neutral-900',
         'dark:text-neutral-100'
       )}
@@ -26,9 +26,9 @@ export const Card: FC<CardProperties> = ({ title, children, className }) => (
     </p>
     <div
       className={cn(
-        'relative border flex-1 rounded-xl overflow-hidden shadow-sm',
-        'bg-white border-neutral-200',
-        'dark:bg-neutral-950 dark:border-neutral-800',
+        'relative flex-1 overflow-hidden rounded-xl border shadow-sm',
+        'border-neutral-200 bg-white',
+        'dark:border-neutral-800 dark:bg-neutral-950',
         className
       )}
     >
diff --git a/components/form.tsx b/components/form.tsx
index f2580a1f..03552b9a 100644
--- a/components/form.tsx
+++ b/components/form.tsx
@@ -19,7 +19,7 @@ const baseClassName = cn(
 );
 
 const Label: FC<LabelProps> = ({ children, ...properties }) => (
-  <RadixLabel.Root className="text-sm font-medium" {...properties}>
+  <RadixLabel.Root className="font-medium text-sm" {...properties}>
     {children}
   </RadixLabel.Root>
 );
@@ -28,7 +28,7 @@ const Counter: FC<{ readonly count: number; readonly maxLength: number }> = ({
   count,
   maxLength,
 }) => (
-  <p className="text-xs text-neutral-500 dark:text-neutral-400 text-right">
+  <p className="text-right text-neutral-500 text-xs dark:text-neutral-400">
     {count}/{maxLength}
   </p>
 );
@@ -49,7 +49,7 @@ export const Input: FC<InputProperties> = ({
 
   return (
     <fieldset className="space-y-1">
-      <div className="flex justify-between gap-4 items-center">
+      <div className="flex items-center justify-between gap-4">
         <Label htmlFor={id}>{label}</Label>
         {maxLength ? (
           <Counter count={count} maxLength={maxLength} />
@@ -86,7 +86,7 @@ export const Textarea: FC<TextareaProperties> = ({
 
   return (
     <fieldset className="space-y-1">
-      <div className="flex justify-between gap-4 items-center">
+      <div className="flex items-center justify-between gap-4">
         <Label htmlFor={id}>{label}</Label>
         {maxLength ? (
           <Counter count={count} maxLength={maxLength} />
@@ -95,7 +95,7 @@ export const Textarea: FC<TextareaProperties> = ({
       <textarea
         id={id}
         placeholder="Jane Doe"
-        className={cn(baseClassName, 'resize-y min-h-[5rem] max-h-[15rem]')}
+        className={cn(baseClassName, 'max-h-[15rem] min-h-[5rem] resize-y')}
         maxLength={maxLength}
         onChange={handleChange}
         {...properties}
@@ -122,7 +122,7 @@ export const Select: FC<SelectProperties> = ({ label, data, name }) => {
       <RadixSelect.Root name={name} defaultValue={data[0].value}>
         <RadixSelect.Trigger
           id={id}
-          className="flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-neutral-800 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-300 text-neutral-950 dark:text-white"
+          className="flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-neutral-950 text-sm shadow-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:text-white dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:placeholder:text-neutral-400 [&>span]:line-clamp-1"
           aria-label="Select a type"
         >
           <RadixSelect.Value placeholder="Select a type" />
@@ -133,8 +133,8 @@ export const Select: FC<SelectProperties> = ({ label, data, name }) => {
         <RadixSelect.Portal>
           <RadixSelect.Content
             className={cn(
-              'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
-              'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1'
+              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white text-neutral-950 shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
+              'data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1'
             )}
             position="popper"
           >
@@ -151,7 +151,7 @@ export const Select: FC<SelectProperties> = ({ label, data, name }) => {
                 <RadixSelect.Item
                   key={item.value}
                   value={item.value}
-                  className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50"
+                  className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50"
                 >
                   <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
                     <RadixSelect.ItemIndicator>
@@ -159,7 +159,7 @@ export const Select: FC<SelectProperties> = ({ label, data, name }) => {
                     </RadixSelect.ItemIndicator>
                   </span>
                   <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>
-                  <span className="hidden sm:block ml-2 text-gray-500 dark:text-gray-400">
+                  <span className="ml-2 hidden text-gray-500 sm:block dark:text-gray-400">
                     {item.subtitle}
                   </span>
                 </RadixSelect.Item>
diff --git a/components/header.tsx b/components/header.tsx
index 4ddaff87..d0e88ac7 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -7,7 +7,7 @@ type HeaderProperties = {
 
 export const Header: FC<HeaderProperties> = ({ title, description }) => (
   <header className="space-y-2">
-    <h1 className="text-3xl m-0">{title}</h1>
+    <h1 className="m-0 text-3xl">{title}</h1>
     <p className="m-0 text-lg">{description}</p>
   </header>
 );
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 7c88179e..bda9aa00 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -32,9 +32,9 @@ export const Navbar: FC = () => {
   return (
     <nav
       className={cn(
-        'isolate z-50 rounded-full px-6 flex items-center gap-6 fixed bottom-6 left-1/2 -translate-x-1/2 backdrop-blur-sm backdrop-filter bg-opacity-50 shadow-lg border text-sm',
-        'bg-white/80 border-neutral-950/10',
-        'dark:bg-neutral-950/80 dark:border-neutral-100/10'
+        '-translate-x-1/2 fixed bottom-6 left-1/2 isolate z-50 flex items-center gap-6 rounded-full border bg-opacity-50 px-6 text-sm shadow-lg backdrop-blur-sm backdrop-filter',
+        'border-neutral-950/10 bg-white/80',
+        'dark:border-neutral-100/10 dark:bg-neutral-950/80'
       )}
     >
       {pages.map((link) => (
@@ -50,11 +50,11 @@ export const Navbar: FC = () => {
           )}
         >
           <span className="block sm:hidden">
-            <link.icon className="w-5 h-5" />
+            <link.icon className="h-5 w-5" />
           </span>
           <span className="hidden sm:block">{link.name}</span>
           {isActive(link.path) && (
-            <span className="w-full h-px bg-current absolute left-0 top-full" />
+            <span className="absolute top-full left-0 h-px w-full bg-current" />
           )}
         </Link>
       ))}
diff --git a/components/video.tsx b/components/video.tsx
index 9cdeb7f1..c1af3994 100644
--- a/components/video.tsx
+++ b/components/video.tsx
@@ -20,7 +20,7 @@ type VideoProperties = ReactPlayerProps & {
 
 export const Video: FC<VideoProperties> = ({ className, ...properties }) => (
   <div
-    className={cn('relative aspect-video rounded overflow-hidden', className)}
+    className={cn('relative aspect-video overflow-hidden rounded', className)}
   >
     <ReactPlayer
       {...properties}
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
index 01c2d2d2..c0593711 100644
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -118,7 +118,7 @@ const rehypeAutolinkHeadingsOptions: RehypeAutoLinkHeadingsOptions = {
 
 export const Blog = defineDocumentType(() => ({
   name: 'Blog',
-  filePathPattern: `blog/*.mdx`,
+  filePathPattern: 'blog/*.mdx',
   contentType: 'mdx',
   fields: {
     title: {