From 61dfb27d52a845392a6716ec088fc141ff358f52 Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Thu, 3 Apr 2025 22:23:20 -0400
Subject: [PATCH 01/11] lint: define rules in eslintrc

---
 .eslintrc.json | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 6b10a5b..725320f 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -2,5 +2,18 @@
   "extends": [
     "next/core-web-vitals",
     "next/typescript"
-  ]
+  ],
+  "rules": {
+    // Code quality
+    "no-console": "warn",
+    "no-debugger": "error",
+    // "no-unused-vars": "off", // Handled by TS version above
+
+     // Style
+     "semi": ["error", "always"],
+     "quotes": ["error", "single", { "avoidEscape": true }],
+     "indent": ["error", 2],
+     "object-curly-spacing": ["error", "always"],
+     "comma-dangle": ["error", "always-multiline"]
+  }
 }

From e8774317b64d7bff8716ece64118a166f2509040 Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Thu, 3 Apr 2025 22:24:55 -0400
Subject: [PATCH 02/11] lint: apply linting rules defined in previous commit

---
 src/app/(home)/layout.tsx               |  14 +-
 src/app/(home)/page.tsx                 |  14 +-
 src/app/layout.tsx                      |  44 ++---
 src/app/not-found.tsx                   |  38 ++--
 src/app/providers.tsx                   |   6 +-
 src/components/About.tsx                |  74 ++++----
 src/components/Education.tsx            | 108 +++++------
 src/components/Experiences.tsx          |  56 +++---
 src/components/Footer.tsx               |  48 ++---
 src/components/Header.tsx               | 230 ++++++++++++------------
 src/components/Miscellaneous.tsx        |  24 +--
 src/components/Navbar.tsx               |  44 ++---
 src/components/Projects.tsx             |  66 +++----
 src/components/Skills.tsx               | 108 +++++------
 src/components/SmoothScrollProvider.tsx |   8 +-
 src/components/ThemeSwitch.tsx          |  28 +--
 src/components/Tiles/ExperienceTile.tsx |  76 ++++----
 src/components/Tiles/ProjectTile.tsx    |  56 +++---
 src/components/ui/BackButton.tsx        |  14 +-
 src/components/ui/Badge.tsx             |  22 +--
 src/components/ui/BlurFade.tsx          |  16 +-
 src/components/ui/Highlighter.tsx       |  44 ++---
 src/components/ui/HoverHighlighter.tsx  |  72 ++++----
 src/components/ui/LinkWithArrow.tsx     |  20 +--
 src/components/ui/Loader.tsx            |  16 +-
 src/data/resume.ts                      | 210 +++++++++++-----------
 src/hooks/useMediaQuery.tsx             |  20 +--
 src/hooks/useReadingProgress.tsx        |  40 ++---
 src/hooks/useSmoothScroll.tsx           |  52 +++---
 src/lib/posts.ts                        |  50 +++---
 src/lib/techIcons.ts                    |  90 +++++-----
 src/lib/utils.ts                        |   6 +-
 32 files changed, 857 insertions(+), 857 deletions(-)

diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
index aa92a9b..647ac86 100644
--- a/src/app/(home)/layout.tsx
+++ b/src/app/(home)/layout.tsx
@@ -1,5 +1,5 @@
-import Footer from "@/components/Footer";
-import Navbar from "@/components/Navbar";
+import Footer from '@/components/Footer';
+import Navbar from '@/components/Navbar';
 
 export default async function HomeLayout({
   children,
@@ -7,10 +7,10 @@ export default async function HomeLayout({
   children: React.ReactNode;
 }>) {
   return (
-  <>
-    <Navbar />
-    <div className="flex-grow w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl">{children}</div>
-    <Footer />
-  </>
+    <>
+      <Navbar />
+      <div className="flex-grow w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl">{children}</div>
+      <Footer />
+    </>
   );
 }
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index ba03a66..0704e94 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import Header from '@/components/Header'
-import About from '@/components/About'
-import { Experiences } from '@/components/Experiences'
-import { Projects } from '@/components/Projects'
-import { Education } from '@/components/Education'
+import Header from '@/components/Header';
+import About from '@/components/About';
+import { Experiences } from '@/components/Experiences';
+import { Projects } from '@/components/Projects';
+import { Education } from '@/components/Education';
 import { Skills } from '@/components/Skills';
 import { personalDetails, experiences, projects, skills } from '@/data/resume';
 
@@ -18,5 +18,5 @@ export default function Portfolio() {
       <Skills arr={skills}/>
       <Projects arr={projects} />
     </main>
-  )
+  );
 }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0855a5c..6b3482d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,17 +1,17 @@
-import type { Metadata } from "next";
-import { Inter, Space_Mono } from 'next/font/google'
-import { Providers } from './providers'
-import "./globals.css";
-import { detailsForMetadata } from "@/data/resume";
-import { cn } from "@/lib/utils";
-import { SmoothScrollProvider } from "@/components/SmoothScrollProvider";
+import type { Metadata } from 'next';
+import { Inter, Space_Mono } from 'next/font/google';
+import { Providers } from './providers';
+import './globals.css';
+import { detailsForMetadata } from '@/data/resume';
+import { cn } from '@/lib/utils';
+import { SmoothScrollProvider } from '@/components/SmoothScrollProvider';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 const spaceMono = Space_Mono({ 
   weight: ['400', '700'],
   subsets: ['latin'],
-  variable: '--font-spaceMono'
-})
+  variable: '--font-spaceMono',
+});
 
 export const metadata: Metadata = {
   metadataBase: new URL(detailsForMetadata.baseUrl),
@@ -26,8 +26,8 @@ export const metadata: Metadata = {
     description: detailsForMetadata.description,
     url: detailsForMetadata.baseUrl,
     siteName: detailsForMetadata.name,
-    locale: "en_US",
-    type: "website",
+    locale: 'en_US',
+    type: 'website',
   },
   robots: {
     index: true,
@@ -35,31 +35,31 @@ export const metadata: Metadata = {
     googleBot: {
       index: true,
       follow: true,
-      "max-video-preview": -1,
-      "max-image-preview": "large",
-      "max-snippet": -1,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
     },
   },
   twitter: {
     title: detailsForMetadata.name,
-    card: "summary_large_image",
+    card: 'summary_large_image',
   },
   icons: {
-    icon: "/icon.ico",
+    icon: '/icon.ico',
   },
-  verification: { google: "Wwciyzq9ANfCqyfI9hjLic5BhSc30awKaJPxbWCm5mc" }
+  verification: { google: 'Wwciyzq9ANfCqyfI9hjLic5BhSc30awKaJPxbWCm5mc' },
 };
 
-export default function RootLayout({ children, }: { children: React.ReactNode; }) {
+export default function RootLayout({ children }: { children: React.ReactNode; }) {
   // ${inter.className} 
   return (
     <html lang="en" className={`${inter.className} ${spaceMono.variable}`} suppressHydrationWarning>
       <body className={
         cn(
-          "bg-neutral-100 dark:bg-neutral-950 text-gray-800 dark:text-gray-200",
-          "transition-colors duration-300"
+          'bg-neutral-100 dark:bg-neutral-950 text-gray-800 dark:text-gray-200',
+          'transition-colors duration-300'
         )} 
-        suppressHydrationWarning
+      suppressHydrationWarning
       >
         <SmoothScrollProvider offset={90}>
           <div className="flex flex-col min-h-screen">
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index b4d9e20..9a1c34e 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,28 +1,28 @@
-import BackButton from "@/components/ui/BackButton";
-import Link from 'next/link'
-import { cn } from "@/lib/utils";
+import BackButton from '@/components/ui/BackButton';
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
 
 export default function NotFound() {
-    return (
+  return (
     <main className="flex flex-col items-center justify-center container mx-auto mt-[28vh] z-1">
-        <h1 className={
-            cn(
-                "font-typewriter text-6xl md:text-7xl lg:text-8xl font-bold",
-                "text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-500 dark:to-gray-300 from-gray-500 to-gray-700"
-            )
-        }>
+      <h1 className={
+        cn(
+          'font-typewriter text-6xl md:text-7xl lg:text-8xl font-bold',
+          'text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-500 dark:to-gray-300 from-gray-500 to-gray-700'
+        )
+      }>
             404
-        </h1>
-        <div className="mt-4 text-center">
+      </h1>
+      <div className="mt-4 text-center">
             The page you&apos;re looking for, is either not there or has been moved.
-        </div>
-        <ul className="mt-4 flex gap-4 sm:gap-8">
-            <li>{<BackButton>go back</BackButton>}</li>
-            <li>|</li>
-            <li><Link href="/" className="text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white hover:underline hover:underline-offset-4">home</Link></li>
-        </ul>
+      </div>
+      <ul className="mt-4 flex gap-4 sm:gap-8">
+        <li>{<BackButton>go back</BackButton>}</li>
+        <li>|</li>
+        <li><Link href="/" className="text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white hover:underline hover:underline-offset-4">home</Link></li>
+      </ul>
     </main>
-    )
+  );
 }
 
 
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index f58a7fc..52c6395 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -1,7 +1,7 @@
-'use client'
+'use client';
 
-import { ThemeProvider } from 'next-themes'
+import { ThemeProvider } from 'next-themes';
 
 export function Providers({ children }: { children: React.ReactNode }) {
-    return <ThemeProvider attribute="class" defaultTheme='system' enableSystem>{children}</ThemeProvider>
+  return <ThemeProvider attribute="class" defaultTheme='system' enableSystem>{children}</ThemeProvider>;
 }
diff --git a/src/components/About.tsx b/src/components/About.tsx
index 8d347bb..35efa74 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -1,32 +1,32 @@
-import BlurFade, { BLUR_FADE_DELAY } from "@/components/ui/BlurFade";
-import Highlight from "@/components/ui/Highlighter";
-import { cn } from "@/lib/utils";
-import LinkWithArrow from "@/components/ui/LinkWithArrow";
+import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
+import Highlight from '@/components/ui/Highlighter';
+import { cn } from '@/lib/utils';
+import LinkWithArrow from '@/components/ui/LinkWithArrow';
 
 const About = () => {
   return (
     <section id="about" className="mb-12">
-        <BlurFade delay={BLUR_FADE_DELAY * 3}>
-          <h2 className={cn(
-            "text-2xl md:text-3xl lg:text-4xl font-section mb-4",
-            "inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]"
-          )}>About</h2>
-        </BlurFade>
-        <BlurFade delay={BLUR_FADE_DELAY * 4}>
-          <div className="text-gray-700 dark:text-gray-300">
-            <p className="mb-2">
+      <BlurFade delay={BLUR_FADE_DELAY * 3}>
+        <h2 className={cn(
+          'text-2xl md:text-3xl lg:text-4xl font-section mb-4',
+          'inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]'
+        )}>About</h2>
+      </BlurFade>
+      <BlurFade delay={BLUR_FADE_DELAY * 4}>
+        <div className="text-gray-700 dark:text-gray-300">
+          <p className="mb-2">
             I am a <Highlight text="software developer" color="red"/> based in <Highlight text="Toronto" color="red"/> and currently a <Highlight text="junior" /> pursuing a 
             <Highlight text="Computational Mathematics" /> major at the <Highlight text="University of Waterloo" />.
             I am passionate about tech and innovation, always exploring the <span className="underline underline-offset-4">
               intersection of software
               development and AI.
             </span>
-            </p>
-            {/* <p className="mb-2">
+          </p>
+          {/* <p className="mb-2">
               Outside of academics and professional career, I enjoy contributing to open-source projects, working on side projects, participating in hackathons and playing
               table tennis, football, cricket and badminton. I also like to travel & explore new places, cuisines & restaurants.
             </p> */}
-            {/* <div className="inline-flex flex-wrap gap-x-0.5 gap-y-1 mb-2 ">
+          {/* <div className="inline-flex flex-wrap gap-x-0.5 gap-y-1 mb-2 ">
               <span>You can find me</span> <Highlight text="re-watching" color="pink"/> <span>any one of these TV series:</span>
               <Highlight text="Silicon Valley" color="pink"/>,
               <Highlight text="South Park" color="pink"/>,
@@ -37,36 +37,36 @@ const About = () => {
               <Highlight text="How I Met Your Mother" color="pink"/>,
               <Highlight text="Impractical Jokers" color="pink"/>.
             </div> */}
-            <p className="mb-2">
+          <p className="mb-2">
             You can find me <Highlight text="re-watching" color="pink"/> any one of these series:&nbsp;
             <Highlight text="Breaking Bad" color="pink"/>,&nbsp;
             <Highlight text="Silicon Valley" color="pink"/>,&nbsp;
             <Highlight text="South Park" color="pink"/> and <Highlight text="The Office" color="pink"/>.
-            </p>
-            <p className="mb-2">
+          </p>
+          <p className="mb-2">
               For those of you curious, the favicon is a <Highlight text="4-hypercube graph" color="cyan" /> made via Python, using NetworkX and Matplotlib.
               Check the <LinkWithArrow
-                href="/icon.ico" target="_blank"
-                className="mr-1 hover:underline hover:underline-offset-2 text-orange-500"
-              >
+              href="/icon.ico" target="_blank"
+              className="mr-1 hover:underline hover:underline-offset-2 text-orange-500"
+            >
                 image
-              </LinkWithArrow>
+            </LinkWithArrow>
               out, learn <LinkWithArrow
-                href="https://en.wikipedia.org/wiki/Hypercube_graph" target="_blank"
-                className="mr-1 hover:underline hover:underline-offset-2 text-blue-violet-500"
-              >
+              href="https://en.wikipedia.org/wiki/Hypercube_graph" target="_blank"
+              className="mr-1 hover:underline hover:underline-offset-2 text-blue-violet-500"
+            >
                 more
-              </LinkWithArrow> about hypercube graphs & here is the <LinkWithArrow
-                href="https://github.com/steadyfall/steadyfall.github.io/blob/main/hypercube/generate.py" target="_blank"
-                className="mr-1 hover:underline hover:underline-offset-2 dark:text-firefly-500 text-firefly-600"
-              >
+            </LinkWithArrow> about hypercube graphs & here is the <LinkWithArrow
+              href="https://github.com/steadyfall/steadyfall.github.io/blob/main/hypercube/generate.py" target="_blank"
+              className="mr-1 hover:underline hover:underline-offset-2 dark:text-firefly-500 text-firefly-600"
+            >
                 code
-              </LinkWithArrow> to generate it yourself.
-            </p>
-          </div>
-        </BlurFade>
+            </LinkWithArrow> to generate it yourself.
+          </p>
+        </div>
+      </BlurFade>
     </section>
-  )
-}
+  );
+};
 
-export default About
+export default About;
diff --git a/src/components/Education.tsx b/src/components/Education.tsx
index 72fde60..38b9727 100644
--- a/src/components/Education.tsx
+++ b/src/components/Education.tsx
@@ -1,60 +1,60 @@
-import { useMediaQuery } from '@/hooks/useMediaQuery'
-import LinkWithArrow from "@/components/ui/LinkWithArrow";
-import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade'
-import { cn } from '@/lib/utils'
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import LinkWithArrow from '@/components/ui/LinkWithArrow';
+import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
+import { cn } from '@/lib/utils';
 
 export function Education() {
-    const isDesktop = useMediaQuery('(min-width: 768px)')
-    return (
-        <section id="education" className="mb-12">
-            <BlurFade delay={BLUR_FADE_DELAY * 7}>
-                <h2 className={cn(
-                    "text-2xl md:text-3xl lg:text-4xl font-section mb-4",
-                    "inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]"
-                )}>Education</h2>
-            </BlurFade>
-            <BlurFade delay={BLUR_FADE_DELAY * 8}>
-                <div className="flex items-center">
-                    <div className="relative flex-grow md:pl-12">
-                        <div className={"bg-white aspect-square absolute left-[5px] rounded-lg"}>
-                            {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
-                            <img
-                                src="/images/uwaterlooLogo.png"
-                                alt={`University of Waterloo logo`}
-                                width={isDesktop ? 80 : 45}
-                                height={isDesktop ? 80 : 45}
-                                className="rounded-md"
-                            />
-                        </div>
-                        <div className={"pl-16 " + (isDesktop && "py-3")}>
-                            <div className="flex flex-col md:items-start justify-between sm:flex-row mb-2">
-                                <div>
-                                    <LinkWithArrow
-                                        href="https://uwaterloo.ca/" target="_blank"
-                                        rel="noopener noreferrer" aria-label={`Link to University of Waterloo`}
-                                    >
-                                        <h2 className="text-xl font-bold inline-flex items-center">
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+  return (
+    <section id="education" className="mb-12">
+      <BlurFade delay={BLUR_FADE_DELAY * 7}>
+        <h2 className={cn(
+          'text-2xl md:text-3xl lg:text-4xl font-section mb-4',
+          'inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]'
+        )}>Education</h2>
+      </BlurFade>
+      <BlurFade delay={BLUR_FADE_DELAY * 8}>
+        <div className="flex items-center">
+          <div className="relative flex-grow md:pl-12">
+            <div className={'bg-white aspect-square absolute left-[5px] rounded-lg'}>
+              {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
+              <img
+                src="/images/uwaterlooLogo.png"
+                alt={'University of Waterloo logo'}
+                width={isDesktop ? 80 : 45}
+                height={isDesktop ? 80 : 45}
+                className="rounded-md"
+              />
+            </div>
+            <div className={'pl-16 ' + (isDesktop && 'py-3')}>
+              <div className="flex flex-col md:items-start justify-between sm:flex-row mb-2">
+                <div>
+                  <LinkWithArrow
+                    href="https://uwaterloo.ca/" target="_blank"
+                    rel="noopener noreferrer" aria-label={'Link to University of Waterloo'}
+                  >
+                    <h2 className="text-xl font-bold inline-flex items-center">
                                             University of Waterloo
-                                        </h2>
-                                    </LinkWithArrow>
-                                    <h3 className="text-lg font-semibold">Bachelor of Mathematics, Computational Mathematics Major</h3>
-                                    {(!isDesktop) && <h3 className="text-gray-600 font-typewriter dark:text-gray-400">Sept 2022 - Present</h3>}
-                                </div>
-                                {isDesktop && (<h3 className="text-gray-600 font-typewriter dark:text-gray-400">Sept 2022 - Present</h3>)}
-                            </div>
-                        </div>
-                    </div>
+                    </h2>
+                  </LinkWithArrow>
+                  <h3 className="text-lg font-semibold">Bachelor of Mathematics, Computational Mathematics Major</h3>
+                  {(!isDesktop) && <h3 className="text-gray-600 font-typewriter dark:text-gray-400">Sept 2022 - Present</h3>}
                 </div>
-                <p className="text-gray-700 dark:text-gray-300 mt-1 py-0">
-                    <LinkWithArrow
-                        href="https://uwaterloo.ca/computational-mathematics/" target="_blank"
-                        rel="noopener noreferrer" className="mr-0.5"
-                    >
+                {isDesktop && (<h3 className="text-gray-600 font-typewriter dark:text-gray-400">Sept 2022 - Present</h3>)}
+              </div>
+            </div>
+          </div>
+        </div>
+        <p className="text-gray-700 dark:text-gray-300 mt-1 py-0">
+          <LinkWithArrow
+            href="https://uwaterloo.ca/computational-mathematics/" target="_blank"
+            rel="noopener noreferrer" className="mr-0.5"
+          >
                         Computational Mathematics
-                    </LinkWithArrow> is a interdisplinary major that combines Mathematics, Statistics, Optimization and Computer Science, offered by the Faculty of Mathematics.
-                    {/* TODO: Insert all courses using a recursive React component */}
-                </p>
-            </BlurFade>
-        </section>
-    )
+          </LinkWithArrow> is a interdisplinary major that combines Mathematics, Statistics, Optimization and Computer Science, offered by the Faculty of Mathematics.
+          {/* TODO: Insert all courses using a recursive React component */}
+        </p>
+      </BlurFade>
+    </section>
+  );
 }
diff --git a/src/components/Experiences.tsx b/src/components/Experiences.tsx
index 4461091..8b84e2f 100644
--- a/src/components/Experiences.tsx
+++ b/src/components/Experiences.tsx
@@ -1,7 +1,7 @@
-'use client'
+'use client';
 
-import { useState } from 'react'
-import { ExperienceTileProps, ExperienceTile } from './Tiles/ExperienceTile'
+import { useState } from 'react';
+import { ExperienceTileProps, ExperienceTile } from './Tiles/ExperienceTile';
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
 import { cn } from '@/lib/utils';
 
@@ -10,30 +10,30 @@ interface ExperiencesProps {
 }
 
 export function Experiences({ arr }: ExperiencesProps) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [experiences, setExperiences] = useState(arr)
-    return (
-        <section id="experience" className="mb-12">
-            <BlurFade delay={BLUR_FADE_DELAY * 5}>
-                <h2 className={cn(
-                    "text-2xl md:text-3xl lg:text-4xl font-section mb-4",
-                    "inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]"
-                )}>Experience</h2>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [experiences, setExperiences] = useState(arr);
+  return (
+    <section id="experience" className="mb-12">
+      <BlurFade delay={BLUR_FADE_DELAY * 5}>
+        <h2 className={cn(
+          'text-2xl md:text-3xl lg:text-4xl font-section mb-4',
+          'inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]'
+        )}>Experience</h2>
+      </BlurFade>
+      {experiences && experiences.length > 0 ? (
+        <div className="space-y-6">
+          {experiences.map((experience, index) => (
+            <BlurFade
+              key={index}
+              delay={BLUR_FADE_DELAY * 6 + index * 0.2}
+            >
+              <ExperienceTile key={index} {...experience} />
             </BlurFade>
-            {experiences && experiences.length > 0 ? (
-            <div className="space-y-6">
-                {experiences.map((experience, index) => (
-                    <BlurFade
-                    key={index}
-                    delay={BLUR_FADE_DELAY * 6 + index * 0.2}
-                    >
-                        <ExperienceTile key={index} {...experience} />
-                    </BlurFade>
-                ))}
-            </div>
-            ) : (
-            <p>No experiences to display.</p>
-            )}
-        </section>
-    )
+          ))}
+        </div>
+      ) : (
+        <p>No experiences to display.</p>
+      )}
+    </section>
+  );
 }
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index ecbc325..4aff6f2 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,42 +1,42 @@
-import LinkWithArrow from "@/components/ui/LinkWithArrow";
-import { detailsForMetadata, personalDetails } from "@/data/resume"
-import { cn } from "@/lib/utils"
+import LinkWithArrow from '@/components/ui/LinkWithArrow';
+import { detailsForMetadata, personalDetails } from '@/data/resume';
+import { cn } from '@/lib/utils';
 
 const Footer = () => {
   return (
     <footer className={cn(
-      "py-12 text-gray-500 dark:text-gray-400"
+      'py-12 text-gray-500 dark:text-gray-400'
     )}>
       <div className={cn(
-        "flex flex-col items-center justify-center sm:flex-row-reverse sm:justify-between",
-        "max-w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl"
+        'flex flex-col items-center justify-center sm:flex-row-reverse sm:justify-between',
+        'max-w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl'
       )}>
         <div className="flex justify-center md:justify-start space-x-4">
-            <LinkWithArrow 
-              href={personalDetails.githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
-              className="hover:underline hover:underline-offset-2 text-pink-500"
-            >
+          <LinkWithArrow 
+            href={personalDetails.githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
+            className="hover:underline hover:underline-offset-2 text-pink-500"
+          >
               github
-            </LinkWithArrow>
-            <LinkWithArrow 
-              href={personalDetails.linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
-              className="hover:underline hover:underline-offset-2 text-thunderbird-600"
-            >
+          </LinkWithArrow>
+          <LinkWithArrow 
+            href={personalDetails.linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
+            className="hover:underline hover:underline-offset-2 text-thunderbird-600"
+          >
               linkedin
-            </LinkWithArrow>
-            <LinkWithArrow 
-              href={`mailto:` + personalDetails.email} aria-label="Email"
-              className="hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
-            >
+          </LinkWithArrow>
+          <LinkWithArrow 
+            href={'mailto:' + personalDetails.email} aria-label="Email"
+            className="hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
+          >
               email
-            </LinkWithArrow>
+          </LinkWithArrow>
         </div>
         <div className="mt-6 sm:mt-0">
           &copy; 2024 {new URL(detailsForMetadata.baseUrl).hostname}
         </div>
       </div>
     </footer>
-  )
-}
+  );
+};
 
-export default Footer
+export default Footer;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6f1de8a..99850d6 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,7 +1,7 @@
-import { Copy, CopyCheck } from 'lucide-react'
-import { useMediaQuery } from '@/hooks/useMediaQuery'
-import LinkWithArrow from "@/components/ui/LinkWithArrow";
-import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade'
+import { Copy, CopyCheck } from 'lucide-react';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import LinkWithArrow from '@/components/ui/LinkWithArrow';
+import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
 // import Image from 'next/image'
 
 import { useEffect, useState } from 'react';
@@ -19,119 +19,119 @@ export type HeaderProps = {
     resumeFile: string,
 }
 
-const Header = ({name, pronouns, currentEducation, currentJob, basedFrom, githubLink, linkedinLink, email, resumeFile}: HeaderProps) => {
-    const isDesktop = useMediaQuery('(min-width: 768px)')
-    const [copied, setCopiedId] = useState<string>();
-    useEffect(() => { setTimeout(() => { setCopiedId(undefined); }, 3000) }, [copied]);
+const Header = ({ name, pronouns, currentEducation, currentJob, basedFrom, githubLink, linkedinLink, email, resumeFile }: HeaderProps) => {
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const [copied, setCopiedId] = useState<string>();
+  useEffect(() => { setTimeout(() => { setCopiedId(undefined); }, 3000); }, [copied]);
 
-    return (
-        <div className="container mx-auto mb-10">
-            <div className="flex flex-col md:flex-row items-center justify-between">
-                <BlurFade delay={BLUR_FADE_DELAY}>
-                    {(!isDesktop) && (
-                        <div className="flex-shrink-0 mb-4 md:mb-0 md:mr-8">
-                            <img
-                                src="/images/headshot.jpg"
-                                alt="Profile"
-                                width={200}
-                                height={200}
-                                className="rounded-lg size-36 md:size-48 lg:size-56 object-cover"
-                            />
-                        </div>
-                    )}
-                </BlurFade>
-                <div className="flex-grow text-center md:text-left">
-                    <BlurFade delay={BLUR_FADE_DELAY}>
-                        <div className="flex items-center justify-center md:justify-start">
-                            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mr-4">{name}</h1>
-                        </div>
-                    </BlurFade>
-                    <div className="flex justify-center md:justify-start mt-4 space-x-4">
-                        <BlurFade delay={BLUR_FADE_DELAY}>
-                            <LinkWithArrow 
-                                href={githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
-                                className="hover:underline hover:underline-offset-2 text-pink-500"
-                            >
+  return (
+    <div className="container mx-auto mb-10">
+      <div className="flex flex-col md:flex-row items-center justify-between">
+        <BlurFade delay={BLUR_FADE_DELAY}>
+          {(!isDesktop) && (
+            <div className="flex-shrink-0 mb-4 md:mb-0 md:mr-8">
+              <img
+                src="/images/headshot.jpg"
+                alt="Profile"
+                width={200}
+                height={200}
+                className="rounded-lg size-36 md:size-48 lg:size-56 object-cover"
+              />
+            </div>
+          )}
+        </BlurFade>
+        <div className="flex-grow text-center md:text-left">
+          <BlurFade delay={BLUR_FADE_DELAY}>
+            <div className="flex items-center justify-center md:justify-start">
+              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mr-4">{name}</h1>
+            </div>
+          </BlurFade>
+          <div className="flex justify-center md:justify-start mt-4 space-x-4">
+            <BlurFade delay={BLUR_FADE_DELAY}>
+              <LinkWithArrow 
+                href={githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
+                className="hover:underline hover:underline-offset-2 text-pink-500"
+              >
                                 github
-                            </LinkWithArrow>
-                        </BlurFade>
-                        <BlurFade delay={BLUR_FADE_DELAY}>
-                            <LinkWithArrow 
-                                href={linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
-                                className="hover:underline hover:underline-offset-2 text-thunderbird-600"
-                            >
+              </LinkWithArrow>
+            </BlurFade>
+            <BlurFade delay={BLUR_FADE_DELAY}>
+              <LinkWithArrow 
+                href={linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
+                className="hover:underline hover:underline-offset-2 text-thunderbird-600"
+              >
                                 linkedin
-                            </LinkWithArrow>
-                        </BlurFade>
-                        <BlurFade delay={BLUR_FADE_DELAY}>
-                            <LinkWithArrow 
-                                href={`mailto:` + email} aria-label="Email"
-                                className="hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
-                            >
+              </LinkWithArrow>
+            </BlurFade>
+            <BlurFade delay={BLUR_FADE_DELAY}>
+              <LinkWithArrow 
+                href={'mailto:' + email} aria-label="Email"
+                className="hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
+              >
                                 email
-                            </LinkWithArrow>
-                        </BlurFade>
-                        <BlurFade delay={BLUR_FADE_DELAY}>
-                            <LinkWithArrow 
-                                href={`/` + resumeFile} target="_blank" aria-label="Resume"
-                                className="hover:underline hover:underline-offset-2 text-neon-green-500 dark:text-neon-green-400"
-                            >
+              </LinkWithArrow>
+            </BlurFade>
+            <BlurFade delay={BLUR_FADE_DELAY}>
+              <LinkWithArrow 
+                href={'/' + resumeFile} target="_blank" aria-label="Resume"
+                className="hover:underline hover:underline-offset-2 text-neon-green-500 dark:text-neon-green-400"
+              >
                                 resume
-                            </LinkWithArrow>
-                        </BlurFade>
-                    </div>
-                    <div className="mt-4 text-sm md:text-base lg:text-lg">
-                        {pronouns && (<BlurFade delay={BLUR_FADE_DELAY}>
-                            <p className="italic text-xs md:text-sm lg:text-base">{pronouns}</p>
-                        </BlurFade>)}
-                        {currentEducation && (<BlurFade delay={BLUR_FADE_DELAY}>
-                            <p>{currentEducation}</p>
-                        </BlurFade>)}
-                        <BlurFade delay={BLUR_FADE_DELAY}>
-                            <div className="inline-flex">
-                                <p className="font-typewriter">
-                                    {email.split('').map(
-                                        (char) => {
-                                            return (char === '@') ? "[at]" : char;
-                                        }
-                                    )}
-                                </p>
-                                <button
-                                    className="ml-3 text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white cursor-pointer"
-                                    onClick={async () => {
-                                        if ('clipboard' in navigator) {
-                                            await navigator.clipboard.writeText(email);
-                                        } else {
-                                            copy(email);
-                                        }
-                                        setCopiedId('copied-email');
-                                    }}
-                                    >
-                                    {
-                                        copied === 'copied-email' 
-                                        ? <CopyCheck className="w-4 h-4 md:w-5 md:h-5"/> 
-                                        : <Copy className="w-4 h-4 md:w-5 md:h-5"/>
-                                    }
-                                </button>
-                            </div>
-                        </BlurFade>
-                    </div>
-                </div>
-                <BlurFade delay={BLUR_FADE_DELAY} inView={true}>
-                    {(isDesktop) && (
-                        <div className="flex-shrink-0">
-                            <img
-                                src="/images/headshot.jpg"
-                                alt="Profile"
-                                width={200}
-                                height={200}
-                                className="rounded-lg size-36 md:size-48 lg:size-56 object-cover"
-                            />
-                        </div>
-                    )}
-                </BlurFade>
+              </LinkWithArrow>
+            </BlurFade>
+          </div>
+          <div className="mt-4 text-sm md:text-base lg:text-lg">
+            {pronouns && (<BlurFade delay={BLUR_FADE_DELAY}>
+              <p className="italic text-xs md:text-sm lg:text-base">{pronouns}</p>
+            </BlurFade>)}
+            {currentEducation && (<BlurFade delay={BLUR_FADE_DELAY}>
+              <p>{currentEducation}</p>
+            </BlurFade>)}
+            <BlurFade delay={BLUR_FADE_DELAY}>
+              <div className="inline-flex">
+                <p className="font-typewriter">
+                  {email.split('').map(
+                    (char) => {
+                      return (char === '@') ? '[at]' : char;
+                    }
+                  )}
+                </p>
+                <button
+                  className="ml-3 text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white cursor-pointer"
+                  onClick={async () => {
+                    if ('clipboard' in navigator) {
+                      await navigator.clipboard.writeText(email);
+                    } else {
+                      copy(email);
+                    }
+                    setCopiedId('copied-email');
+                  }}
+                >
+                  {
+                    copied === 'copied-email' 
+                      ? <CopyCheck className="w-4 h-4 md:w-5 md:h-5"/> 
+                      : <Copy className="w-4 h-4 md:w-5 md:h-5"/>
+                  }
+                </button>
+              </div>
+            </BlurFade>
+          </div>
+        </div>
+        <BlurFade delay={BLUR_FADE_DELAY} inView={true}>
+          {(isDesktop) && (
+            <div className="flex-shrink-0">
+              <img
+                src="/images/headshot.jpg"
+                alt="Profile"
+                width={200}
+                height={200}
+                className="rounded-lg size-36 md:size-48 lg:size-56 object-cover"
+              />
             </div>
-            {/* <BlurFade delay={BLUR_FADE_DELAY * 2}>
+          )}
+        </BlurFade>
+      </div>
+      {/* <BlurFade delay={BLUR_FADE_DELAY * 2}>
                 <nav className="mt-8">
                     <ul className="flex justify-center md:justify-start space-x-6 text-sm md:text-base">
                     <li><a href="#about" className="hover:underline hover:underline-offset-4">About</a></li>
@@ -142,8 +142,8 @@ const Header = ({name, pronouns, currentEducation, currentJob, basedFrom, github
                     </ul>
                 </nav>
             </BlurFade> */}
-        </div>
-  )
-}
+    </div>
+  );
+};
 
-export default Header
+export default Header;
diff --git a/src/components/Miscellaneous.tsx b/src/components/Miscellaneous.tsx
index 2e48a9e..4ccb2b3 100644
--- a/src/components/Miscellaneous.tsx
+++ b/src/components/Miscellaneous.tsx
@@ -1,14 +1,14 @@
 const misc = () => {
-    return (
-        <section id="misc" className="mb-12">
-            <h2 className="text-2xl font-bold mb-4">Misc.</h2>
-            <ul className="list-disc list-inside text-gray-700 dark:text-gray-300">
-                <li>Winner of MSU Hackathon 2023</li>
-                <li>Volunteer coding instructor for local high school students</li>
-                <li>Avid rock climber and nature photographer</li>
-            </ul>
-        </section>
-    )
-}
+  return (
+    <section id="misc" className="mb-12">
+      <h2 className="text-2xl font-bold mb-4">Misc.</h2>
+      <ul className="list-disc list-inside text-gray-700 dark:text-gray-300">
+        <li>Winner of MSU Hackathon 2023</li>
+        <li>Volunteer coding instructor for local high school students</li>
+        <li>Avid rock climber and nature photographer</li>
+      </ul>
+    </section>
+  );
+};
 
-export default misc
+export default misc;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index b8a56bc..c29e6be 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import { cn } from '@/lib/utils';
 import ThemeSwitch from './ThemeSwitch';
@@ -6,26 +6,26 @@ import HoverHighlight from '@/components/ui/HoverHighlighter';
 import Link from 'next/link';
 
 const Navbar = () => {
-    // const completion = useReadingProgress();
+  // const completion = useReadingProgress();
 
-    return (
-        <header className="sticky top-0 z-50 py-6 backdrop-blur-xl">
-            <nav className={cn(
-                "flex items-center justify-between",
-                "max-w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl"
-            )}>
-                <ul className="flex gap-4 sm:gap-8">
-                    <li><Link href="/"><HoverHighlight text="home" /></Link></li>
-                    <li><Link href="/#experience"><HoverHighlight text="experience"/></Link></li>
-                    <li><Link href="/#projects"><HoverHighlight text="projects"/></Link></li>
-                    <li><Link href="/posts"><HoverHighlight text="blog"/></Link></li>
-                </ul>
-                <div className="flex gap-0 sm:gap-4">
-                    <ThemeSwitch />
-                </div>
-            </nav>
-        </header>
-    )
-}
+  return (
+    <header className="sticky top-0 z-50 py-6 backdrop-blur-xl">
+      <nav className={cn(
+        'flex items-center justify-between',
+        'max-w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl'
+      )}>
+        <ul className="flex gap-4 sm:gap-8">
+          <li><Link href="/"><HoverHighlight text="home" /></Link></li>
+          <li><Link href="/#experience"><HoverHighlight text="experience"/></Link></li>
+          <li><Link href="/#projects"><HoverHighlight text="projects"/></Link></li>
+          <li><Link href="/posts"><HoverHighlight text="blog"/></Link></li>
+        </ul>
+        <div className="flex gap-0 sm:gap-4">
+          <ThemeSwitch />
+        </div>
+      </nav>
+    </header>
+  );
+};
 
-export default Navbar
\ No newline at end of file
+export default Navbar;
\ No newline at end of file
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index 84f211b..da8b56e 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { ProjectTile, ProjectTileProps } from './Tiles/ProjectTile'
+import { useState } from 'react';
+import { ProjectTile, ProjectTileProps } from './Tiles/ProjectTile';
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
 import { cn } from '@/lib/utils';
 
@@ -8,35 +8,35 @@ interface ProjectProps {
 }
 
 export function Projects({ arr }: ProjectProps) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [projects, setProjects] = useState(arr)
-    return (
-        <section id="projects" className="mb-12">
-            <BlurFade delay={BLUR_FADE_DELAY * 11}>
-                <h2 className={cn(
-                    "text-2xl md:text-3xl lg:text-4xl font-section mb-4",
-                    "inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]"
-                )}>Projects</h2>
-            </BlurFade>
-            {projects && projects.length > 0 ? (
-                <div className="space-y-5">
-                    {
-                    projects.map((project, index) => {
-                        project.delayTime = BLUR_FADE_DELAY * 12 + index * 0.2;
-                        return (
-                            <BlurFade
-                            key={index}
-                            delay={BLUR_FADE_DELAY * 12 + index * 0.2}
-                            >
-                                <ProjectTile key={index} {...project} />
-                            </BlurFade>
-                        )
-                    })
-                    }
-                </div>
-            ) : (
-                <p>No projects to display.</p>
-            )}
-        </section>
-    )
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [projects, setProjects] = useState(arr);
+  return (
+    <section id="projects" className="mb-12">
+      <BlurFade delay={BLUR_FADE_DELAY * 11}>
+        <h2 className={cn(
+          'text-2xl md:text-3xl lg:text-4xl font-section mb-4',
+          'inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]'
+        )}>Projects</h2>
+      </BlurFade>
+      {projects && projects.length > 0 ? (
+        <div className="space-y-5">
+          {
+            projects.map((project, index) => {
+              project.delayTime = BLUR_FADE_DELAY * 12 + index * 0.2;
+              return (
+                <BlurFade
+                  key={index}
+                  delay={BLUR_FADE_DELAY * 12 + index * 0.2}
+                >
+                  <ProjectTile key={index} {...project} />
+                </BlurFade>
+              );
+            })
+          }
+        </div>
+      ) : (
+        <p>No projects to display.</p>
+      )}
+    </section>
+  );
 }
\ No newline at end of file
diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx
index 8632d1b..00142da 100644
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -15,61 +15,61 @@ interface SkillsProps {
 }
 
 export function Skills({ arr }: SkillsProps) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [skills, setSkills] = useState(arr)
-    const result = Object.entries(skills).map(([key, value], idx) => {
-        return (
-            <div className="mb-4" key={idx} suppressHydrationWarning>
-                <div className="text-xl mb-2 font-bold">
-                    {
-                        <BlurFade
-                        delay={BLUR_FADE_DELAY * 10}
-                        >
-                        {(key === "frameworksAndLibraries") 
-                        ? (
-                            ('databases' in skills) 
-                            ? `Frameworks & Libraries` 
-                            : `Frameworks, Libraries & Databases`
-                        )
-                        : key.charAt(0).toUpperCase() + key.slice(1)}:
-                        </BlurFade>
-                    }
-                </div>
-                <div className="flex flex-wrap gap-1">
-                    {
-                        value.map((skillText, index) => (
-                            <BlurFade
-                            key={index}
-                            delay={BLUR_FADE_DELAY * 10 + index * 0.05}
-                            >
-                                <Badge key={index}>
-                                    {
-                                        techIcons?.[skillText] &&
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [skills, setSkills] = useState(arr);
+  const result = Object.entries(skills).map(([key, value], idx) => {
+    return (
+      <div className="mb-4" key={idx} suppressHydrationWarning>
+        <div className="text-xl mb-2 font-bold">
+          {
+            <BlurFade
+              delay={BLUR_FADE_DELAY * 10}
+            >
+              {(key === 'frameworksAndLibraries') 
+                ? (
+                  ('databases' in skills) 
+                    ? 'Frameworks & Libraries' 
+                    : 'Frameworks, Libraries & Databases'
+                )
+                : key.charAt(0).toUpperCase() + key.slice(1)}:
+            </BlurFade>
+          }
+        </div>
+        <div className="flex flex-wrap gap-1">
+          {
+            value.map((skillText, index) => (
+              <BlurFade
+                key={index}
+                delay={BLUR_FADE_DELAY * 10 + index * 0.05}
+              >
+                <Badge key={index}>
+                  {
+                    techIcons?.[skillText] &&
                                         <span className="mr-2">{
-                                            <Icon icon={techIcons[skillText]} 
+                                          <Icon icon={techIcons[skillText]} 
                                             inline={true} width={18} height={18}/>
                                         }</span>
-                                    }
-                                    <span>{skillText}</span>
-                                </Badge>
-                            </BlurFade>
-                        ))
-                    }
-                </div>
-            </div>
-        );
-    });
-    return (
-        <section id="skills" className="mb-12">
-            <BlurFade delay={BLUR_FADE_DELAY * 9}>
-                <h2 className={cn(
-                    "text-2xl md:text-3xl lg:text-4xl font-section mb-4",
-                    "inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]"
-                )}>Skills</h2>
-            </BlurFade>
-            {skills ? result : (
-                <p>No skills to display.</p>
-            )}
-        </section>
-    )
+                  }
+                  <span>{skillText}</span>
+                </Badge>
+              </BlurFade>
+            ))
+          }
+        </div>
+      </div>
+    );
+  });
+  return (
+    <section id="skills" className="mb-12">
+      <BlurFade delay={BLUR_FADE_DELAY * 9}>
+        <h2 className={cn(
+          'text-2xl md:text-3xl lg:text-4xl font-section mb-4',
+          'inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]'
+        )}>Skills</h2>
+      </BlurFade>
+      {skills ? result : (
+        <p>No skills to display.</p>
+      )}
+    </section>
+  );
 }
diff --git a/src/components/SmoothScrollProvider.tsx b/src/components/SmoothScrollProvider.tsx
index dab74ed..8fb043c 100644
--- a/src/components/SmoothScrollProvider.tsx
+++ b/src/components/SmoothScrollProvider.tsx
@@ -1,8 +1,8 @@
-'use client'
+'use client';
 
-import { useSmoothScroll } from '@/hooks/useSmoothScroll'
+import { useSmoothScroll } from '@/hooks/useSmoothScroll';
 
 export function SmoothScrollProvider({ children, offset = 0 }: { children: React.ReactNode, offset?: number }) {
-  useSmoothScroll(offset)
-  return <>{children}</>
+  useSmoothScroll(offset);
+  return <>{children}</>;
 }
diff --git a/src/components/ThemeSwitch.tsx b/src/components/ThemeSwitch.tsx
index ddb4557..84eb48a 100644
--- a/src/components/ThemeSwitch.tsx
+++ b/src/components/ThemeSwitch.tsx
@@ -1,29 +1,29 @@
-"use client";
+'use client';
 
-import { Moon, Sun } from 'lucide-react'
-import { useState, useEffect } from 'react'
-import { useTheme } from 'next-themes'
+import { Moon, Sun } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
 // import Image from "next/image";
 
 export default function ThemeSwitch() {
-  const [mounted, setMounted] = useState(false)
-  const { setTheme, resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false);
+  const { setTheme, resolvedTheme } = useTheme();
 
-  useEffect(() =>  setMounted(true), [])
+  useEffect(() =>  setMounted(true), []);
 
   if (!mounted) return null;
 
   return (
     <button
-    className="cursor-pointer"
-    onClick={() => {
-      setTheme(resolvedTheme === "dark" ? "light" : "dark");
-    }}>
+      className="cursor-pointer"
+      onClick={() => {
+        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+      }}>
       {
         resolvedTheme === 'dark' 
-        ? <Sun className="w-4 h-4 md:w-5 md:h-5 text-orange-300"/> 
-        : <Moon className="w-4 h-4 md:w-5 md:h-5 text-indigo-500"/>
+          ? <Sun className="w-4 h-4 md:w-5 md:h-5 text-orange-300"/> 
+          : <Moon className="w-4 h-4 md:w-5 md:h-5 text-indigo-500"/>
       }
     </button>
-  )
+  );
 }
diff --git a/src/components/Tiles/ExperienceTile.tsx b/src/components/Tiles/ExperienceTile.tsx
index 3545c80..af344c1 100644
--- a/src/components/Tiles/ExperienceTile.tsx
+++ b/src/components/Tiles/ExperienceTile.tsx
@@ -1,5 +1,5 @@
-import LinkWithArrow from "@/components/ui/LinkWithArrow";
-import { useMediaQuery } from '@/hooks/useMediaQuery'
+import LinkWithArrow from '@/components/ui/LinkWithArrow';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 // import Image from 'next/image';
 
 export type ExperienceTileProps = {
@@ -14,51 +14,51 @@ export type ExperienceTileProps = {
 
 
 export function ExperienceTile({ companyLogo, companyName, companyLink, position, period, responsibilities }: ExperienceTileProps) {
-  const isDesktop = useMediaQuery('(min-width: 768px)')
+  const isDesktop = useMediaQuery('(min-width: 768px)');
   return (
     <div className={
       (
-        !(responsibilities && responsibilities.length > 0) && !isDesktop ? "-mb-6" : "mb-6"
-      ) + " " + "flex items-center"
+        !(responsibilities && responsibilities.length > 0) && !isDesktop ? '-mb-6' : 'mb-6'
+      ) + ' ' + 'flex items-center'
     }>
-        <div className="relative flex-grow md:pl-12">
-              <div className="bg-white aspect-square absolute left-[5px] top-3 rounded-lg">
-                  {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
-                  <img
-                      src={companyLogo}
-                      alt={`${companyName} logo`}
-                      width={isDesktop ? 80 : 45}
-                      height={isDesktop ? 80 : 45}
-                      className="rounded-md"
-                  />
-              </div>
-            <div className="pl-16 py-3"> 
-                <div className="flex flex-col md:items-start justify-between sm:flex-row mb-4">
-                    <div>
-                        <h2 className="text-xl font-bold">{position}</h2>
-                        <LinkWithArrow 
-                          href={companyLink} target="_blank"
-                          rel="noopener noreferrer" aria-label={`Link to ${companyName}`}
-                        >
-                          <h3 className="text-lg font-semibold">
-                            {companyName}
-                          </h3>
-                        </LinkWithArrow>
-                        {(!isDesktop) && <h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>}
-                    </div>
-                    {isDesktop && (<h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>)}
-                </div>
-                {responsibilities && responsibilities.length > 0 &&
+      <div className="relative flex-grow md:pl-12">
+        <div className="bg-white aspect-square absolute left-[5px] top-3 rounded-lg">
+          {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
+          <img
+            src={companyLogo}
+            alt={`${companyName} logo`}
+            width={isDesktop ? 80 : 45}
+            height={isDesktop ? 80 : 45}
+            className="rounded-md"
+          />
+        </div>
+        <div className="pl-16 py-3"> 
+          <div className="flex flex-col md:items-start justify-between sm:flex-row mb-4">
+            <div>
+              <h2 className="text-xl font-bold">{position}</h2>
+              <LinkWithArrow 
+                href={companyLink} target="_blank"
+                rel="noopener noreferrer" aria-label={`Link to ${companyName}`}
+              >
+                <h3 className="text-lg font-semibold">
+                  {companyName}
+                </h3>
+              </LinkWithArrow>
+              {(!isDesktop) && <h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>}
+            </div>
+            {isDesktop && (<h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>)}
+          </div>
+          {responsibilities && responsibilities.length > 0 &&
                   <div className="mt-4">
                     <ul className="list-inside text-gray-700 dark:text-gray-300 space-y-1">
-                    {responsibilities.map((responsibility, index) => (
+                      {responsibilities.map((responsibility, index) => (
                         <li key={index}>- {responsibility}</li>
-                    ))}
+                      ))}
                     </ul>
                   </div>
-                }
-            </div>
+          }
         </div>
+      </div>
     </div>
-  )
+  );
 }
\ No newline at end of file
diff --git a/src/components/Tiles/ProjectTile.tsx b/src/components/Tiles/ProjectTile.tsx
index 093e009..f99e76f 100644
--- a/src/components/Tiles/ProjectTile.tsx
+++ b/src/components/Tiles/ProjectTile.tsx
@@ -2,7 +2,7 @@ import { Icon } from '@iconify/react';
 import { techIcons } from '@/lib/techIcons';
 import { Badge } from '@/components/ui/Badge';
 import BlurFade from '@/components/ui/BlurFade';
-import LinkWithArrow from "@/components/ui/LinkWithArrow";
+import LinkWithArrow from '@/components/ui/LinkWithArrow';
 
 type ProjectTileDetailProps = {
   title: string
@@ -47,37 +47,37 @@ export function ProjectTile({ delayTime, title, description, repo, repoUrl, live
       </div>
       <p className="text-gray-700 dark:text-gray-300">{description}</p>
       {techStack && techStack.length > 0 && (
-          <div className="mt-3 flex flex-wrap gap-1">
-              {techStack.map((skillText, index) => (
-                  delayTime ? (
-                  <BlurFade
-                  key={index}
-                  delay={delayTime + index * 0.05}
-                  >
-                    <Badge key={index} variant={`secondary`}>
-                      {
-                        techIcons?.[skillText] &&
+        <div className="mt-3 flex flex-wrap gap-1">
+          {techStack.map((skillText, index) => (
+            delayTime ? (
+              <BlurFade
+                key={index}
+                delay={delayTime + index * 0.05}
+              >
+                <Badge key={index} variant={'secondary'}>
+                  {
+                    techIcons?.[skillText] &&
                         <span className="mr-2">{
-                            <Icon icon={techIcons[skillText]} inline={true} width={18} height={18}/>
+                          <Icon icon={techIcons[skillText]} inline={true} width={18} height={18}/>
                         }</span>
-                      }
-                      <span>{skillText}</span>
-                    </Badge>
-                  </BlurFade>
-                  ) : (
-                    <Badge key={index} variant={`secondary`}>
-                      {
-                        techIcons?.[skillText] &&
+                  }
+                  <span>{skillText}</span>
+                </Badge>
+              </BlurFade>
+            ) : (
+              <Badge key={index} variant={'secondary'}>
+                {
+                  techIcons?.[skillText] &&
                         <span className="mr-2">{
-                            <Icon icon={techIcons[skillText]} inline={true} width={18} height={18}/>
+                          <Icon icon={techIcons[skillText]} inline={true} width={18} height={18}/>
                         }</span>
-                      }
-                      <span>{skillText}</span>
-                    </Badge>
-                  )
-              ))}
-          </div>
+                }
+                <span>{skillText}</span>
+              </Badge>
+            )
+          ))}
+        </div>
       )}
     </div>
-  )
+  );
 }
\ No newline at end of file
diff --git a/src/components/ui/BackButton.tsx b/src/components/ui/BackButton.tsx
index 61d6313..a91e77e 100644
--- a/src/components/ui/BackButton.tsx
+++ b/src/components/ui/BackButton.tsx
@@ -1,17 +1,17 @@
-"use client";
+'use client';
 
-import { cn } from "@/lib/utils";
-import { useRouter } from "next/navigation";
+import { cn } from '@/lib/utils';
+import { useRouter } from 'next/navigation';
 
 
 export default function BackButton({ className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   const router = useRouter();
 
   const hasHistory =
-    (typeof window !== "undefined" &&
+    (typeof window !== 'undefined' &&
       window.history?.length &&
       window.history.length > 1) ||
-    typeof window === "undefined";
+    typeof window === 'undefined';
 
   if (!hasHistory) {
     return null;
@@ -21,8 +21,8 @@ export default function BackButton({ className, ...props }: React.ButtonHTMLAttr
     <button
       className={
         cn(
-          "text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white",
-          "cursor-pointer hover:underline hover:underline-offset-4",
+          'text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white',
+          'cursor-pointer hover:underline hover:underline-offset-4',
           className
         )
       }
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
index ebb79c2..e1ae16f 100644
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -1,25 +1,25 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  "flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  'flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
         default:
-          "border-transparent shadow bg-neutral-950 text-gray-200 hover:bg-neutral-950/80 dark:bg-neutral-100 dark:text-gray-800 dark:hover:bg-neutral-100/80 focus:bg-neutral-900 dark:focus:bg-neutral-200",
+          'border-transparent shadow bg-neutral-950 text-gray-200 hover:bg-neutral-950/80 dark:bg-neutral-100 dark:text-gray-800 dark:hover:bg-neutral-100/80 focus:bg-neutral-900 dark:focus:bg-neutral-200',
         secondary:
-          "border-transparent shadow bg-neutral-200 text-gray-800 hover:bg-neutral-200/80 dark:bg-neutral-700 dark:text-gray-200 dark:hover:bg-neutral-700/80",
-        outline: "text-foreground focus:bg-accent focus:text-accent-foreground",
+          'border-transparent shadow bg-neutral-200 text-gray-800 hover:bg-neutral-200/80 dark:bg-neutral-700 dark:text-gray-200 dark:hover:bg-neutral-700/80',
+        outline: 'text-foreground focus:bg-accent focus:text-accent-foreground',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   }
-)
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -28,7 +28,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
\ No newline at end of file
+export { Badge, badgeVariants };
\ No newline at end of file
diff --git a/src/components/ui/BlurFade.tsx b/src/components/ui/BlurFade.tsx
index 6312238..0ab0fef 100644
--- a/src/components/ui/BlurFade.tsx
+++ b/src/components/ui/BlurFade.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { AnimatePresence, motion, useInView, Variants } from "framer-motion";
-import { useRef } from "react";
+import { AnimatePresence, motion, useInView, Variants } from 'framer-motion';
+import { useRef } from 'react';
 
 type MarginValue = `${number}${'px' | '%'}`;
 type MarginType = MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;
@@ -28,15 +28,15 @@ const BlurFade = ({
   delay = 0,
   yOffset = 6,
   inView = false,
-  inViewMargin = "-50px",
-  blur = "6px",
+  inViewMargin = '-50px',
+  blur = '6px',
 }: BlurFadeProps) => {
   const ref = useRef(null);
   const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
   const isInView = !inView || inViewResult;
   const defaultVariants: Variants = {
     hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
-    visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
+    visible: { y: -yOffset, opacity: 1, filter: 'blur(0px)' },
   };
   const combinedVariants = variant || defaultVariants;
   return (
@@ -44,13 +44,13 @@ const BlurFade = ({
       <motion.div
         ref={ref}
         initial="hidden"
-        animate={isInView ? "visible" : "hidden"}
+        animate={isInView ? 'visible' : 'hidden'}
         exit="hidden"
         variants={combinedVariants}
         transition={{
           delay: 0.04 + delay,
           duration,
-          ease: "easeOut",
+          ease: 'easeOut',
         }}
         className={className}
       >
diff --git a/src/components/ui/Highlighter.tsx b/src/components/ui/Highlighter.tsx
index 2aa2bfc..f4513f8 100644
--- a/src/components/ui/Highlighter.tsx
+++ b/src/components/ui/Highlighter.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 interface HighlightProps {
     text: string
@@ -13,27 +13,27 @@ interface HighlightProps {
  * @returns Returns a `span` element with the highlighted text of specified color.
  *
  */
-export default function Highlight({ text, color = "yellow" }: HighlightProps) {
-    let colorClass: string;
+export default function Highlight({ text, color = 'yellow' }: HighlightProps) {
+  let colorClass: string;
 
-    if (color === "cyan") {
-        colorClass = "bg-cyan-200 dark:bg-cyan-500/30";
-    }
-    else if (color === "pink" || color === "violet-web") {
-        colorClass = "bg-[#ffa7ee] dark:bg-[#f73ed2]/30";
-    }
-    else if (color === "slate-blue") {
-        colorClass = "bg-[#a0a8ff] dark:bg-[#675bf9]/50";
-    }
-    else if (color === "red") {
-        colorClass = "bg-[#ffa0a0] dark:bg-[#f83b3b]/50";
-    }
-    else {
-        // This covers "yellow", "lemon", "laser-lemon", and the default case
-        colorClass = "bg-[#ffff77] dark:bg-[#fce913]/30";
-    }
+  if (color === 'cyan') {
+    colorClass = 'bg-cyan-200 dark:bg-cyan-500/30';
+  }
+  else if (color === 'pink' || color === 'violet-web') {
+    colorClass = 'bg-[#ffa7ee] dark:bg-[#f73ed2]/30';
+  }
+  else if (color === 'slate-blue') {
+    colorClass = 'bg-[#a0a8ff] dark:bg-[#675bf9]/50';
+  }
+  else if (color === 'red') {
+    colorClass = 'bg-[#ffa0a0] dark:bg-[#f83b3b]/50';
+  }
+  else {
+    // This covers "yellow", "lemon", "laser-lemon", and the default case
+    colorClass = 'bg-[#ffff77] dark:bg-[#fce913]/30';
+  }
 
-    return (
-      <span className={cn("px-1 rounded", colorClass)}>{text}</span>
-    )
+  return (
+    <span className={cn('px-1 rounded', colorClass)}>{text}</span>
+  );
 }
diff --git a/src/components/ui/HoverHighlighter.tsx b/src/components/ui/HoverHighlighter.tsx
index ebc09f7..dc1b2b2 100644
--- a/src/components/ui/HoverHighlighter.tsx
+++ b/src/components/ui/HoverHighlighter.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 interface HoverHighlightProps {
     text: string
@@ -12,41 +12,41 @@ interface HoverHighlightProps {
  * @param color - the color of the highlighter [cyan,pink,violet-web,slate-blue,red,yellow,lemon,laser-lemon,background]
  *
  */
-export default function HoverHighlight({ text, color = "background" }: HoverHighlightProps) {
-    let colorClass: string;
+export default function HoverHighlight({ text, color = 'background' }: HoverHighlightProps) {
+  let colorClass: string;
 
-    if (color === "cyan") {
-        colorClass = "bg-cyan-200 dark:bg-cyan-500/30";
-    }
-    else if (color === "pink" || color === "violet-web") {
-        colorClass = "bg-[#ffa7ee] dark:bg-[#f73ed2]/30";
-    }
-    else if (color === "slate-blue") {
-        colorClass = "bg-[#a0a8ff] dark:bg-[#675bf9]/50";
-    }
-    else if (color === "red") {
-        colorClass = "bg-[#ffa0a0] dark:bg-[#f83b3b]/50";
-    }
-    else if (color === "background") {
-        colorClass = "dark:bg-neutral-100 bg-neutral-950";
-    }
-    else {
-        // This covers "yellow", "lemon", "laser-lemon", and the default case
-        colorClass = "bg-[#ffff77] dark:bg-[#fce913]/30";
-    }
+  if (color === 'cyan') {
+    colorClass = 'bg-cyan-200 dark:bg-cyan-500/30';
+  }
+  else if (color === 'pink' || color === 'violet-web') {
+    colorClass = 'bg-[#ffa7ee] dark:bg-[#f73ed2]/30';
+  }
+  else if (color === 'slate-blue') {
+    colorClass = 'bg-[#a0a8ff] dark:bg-[#675bf9]/50';
+  }
+  else if (color === 'red') {
+    colorClass = 'bg-[#ffa0a0] dark:bg-[#f83b3b]/50';
+  }
+  else if (color === 'background') {
+    colorClass = 'dark:bg-neutral-100 bg-neutral-950';
+  }
+  else {
+    // This covers "yellow", "lemon", "laser-lemon", and the default case
+    colorClass = 'bg-[#ffff77] dark:bg-[#fce913]/30';
+  }
 
-    return (
-        <span className="relative inline-block group">
-            <span 
-            className={cn(
-                colorClass,
-                "absolute inset-0 transform scale-x-0 origin-left group-hover:scale-x-100 transition-transform duration-300 ease-in-out"
-            )}
-            ></span>
-            <span className={cn(
-                "relative z-1",
-                color === "background" ? "group-hover:dark:text-gray-800 group-hover:text-gray-200" : ""
-            )}>{text}</span>
-        </span>
-    )
+  return (
+    <span className="relative inline-block group">
+      <span 
+        className={cn(
+          colorClass,
+          'absolute inset-0 transform scale-x-0 origin-left group-hover:scale-x-100 transition-transform duration-300 ease-in-out'
+        )}
+      ></span>
+      <span className={cn(
+        'relative z-1',
+        color === 'background' ? 'group-hover:dark:text-gray-800 group-hover:text-gray-200' : ''
+      )}>{text}</span>
+    </span>
+  );
 }
diff --git a/src/components/ui/LinkWithArrow.tsx b/src/components/ui/LinkWithArrow.tsx
index 85e9f46..5cb3cd6 100644
--- a/src/components/ui/LinkWithArrow.tsx
+++ b/src/components/ui/LinkWithArrow.tsx
@@ -1,24 +1,24 @@
-"use client";
+'use client';
 
-import { cn } from "@/lib/utils";
-import { ArrowUpRight } from 'lucide-react'
+import { cn } from '@/lib/utils';
+import { ArrowUpRight } from 'lucide-react';
 
 
 export default function LinkWithArrow({ className, href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
   return (
     <a
       className={
-        cn("group inline-flex items-center", className)
+        cn('group inline-flex items-center', className)
       }
       href={href}
       {...props}
     >
-        {children}
-        <ArrowUpRight className={cn(
-          "w-4 h-4 md:w-5 md:h-5",
-          "transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1",
-          "flex-shrink-0"
-        )}/>
+      {children}
+      <ArrowUpRight className={cn(
+        'w-4 h-4 md:w-5 md:h-5',
+        'transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1',
+        'flex-shrink-0'
+      )}/>
     </a>
   );
 }
\ No newline at end of file
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
index 1f74822..5c7abff 100644
--- a/src/components/ui/Loader.tsx
+++ b/src/components/ui/Loader.tsx
@@ -1,16 +1,16 @@
 export default function Loading() {
-    return (
+  return (
     <main className="flex flex-col items-center container mt-[28vh] z-1">
-        <svg className="size-7 sm:size-8 md:size-9 lg:size-10 text-gray-300 animate-spin" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"
+      <svg className="size-7 sm:size-8 md:size-9 lg:size-10 text-gray-300 animate-spin" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"
         width="24" height="24">
         <path
-            d="M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z"
-            stroke="currentColor" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"></path>
+          d="M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z"
+          stroke="currentColor" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"></path>
         <path
-            d="M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762"
-            stroke="currentColor" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" className="text-gray-900">
+          d="M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762"
+          stroke="currentColor" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" className="text-gray-900">
         </path>
-        </svg>
+      </svg>
     </main>
-    )
+  );
 }
diff --git a/src/data/resume.ts b/src/data/resume.ts
index f71cfee..17846bf 100644
--- a/src/data/resume.ts
+++ b/src/data/resume.ts
@@ -1,117 +1,117 @@
 export const detailsForMetadata = {
-    baseUrl: "https://steadyfall.github.io/",
-    title: "Himank Dave",
-    name: "Himank Dave",
-    ogImage: "/icon.ico",
-    description: "A sleek, minimalistic and dynamic personal website built with React, TailwindCSS, Next.js and Framer Motion."
+  baseUrl: 'https://steadyfall.github.io/',
+  title: 'Himank Dave',
+  name: 'Himank Dave',
+  ogImage: '/icon.ico',
+  description: 'A sleek, minimalistic and dynamic personal website built with React, TailwindCSS, Next.js and Framer Motion.',
 };
 
 export const personalDetails = {
-    name: "Himank Dave",
-    pronouns: "he/him/his",
-    currentEducation: "Computational Mathematics [at] UWaterloo",
-    currentJob: ["Software Developer in Test Intern", "Geotab"],
-    basedFrom: "Toronto",
-    githubLink: "https://github.com/steadyfall",
-    linkedinLink: "https://www.linkedin.com/in/himank-dave/",
-    email: "hddave@uwaterloo.ca",
-    resumeFile: "resume.pdf",
-}
+  name: 'Himank Dave',
+  pronouns: 'he/him/his',
+  currentEducation: 'Computational Mathematics [at] UWaterloo',
+  currentJob: ['Software Developer in Test Intern', 'Geotab'],
+  basedFrom: 'Toronto',
+  githubLink: 'https://github.com/steadyfall',
+  linkedinLink: 'https://www.linkedin.com/in/himank-dave/',
+  email: 'hddave@uwaterloo.ca',
+  resumeFile: 'resume.pdf',
+};
 
 export const experiences = [
-    {
-        companyLogo: "/images/geotab.jpeg",
-        companyName: "Geotab",
-        companyLink: "https://geotab.com/",
-        position: "Test Automation Developer Intern",
-        period: "Jan 2025 - Present",
-    },
-    {
-        companyLogo: "/images/cactuscreatives.png",
-        companyName: "Cactus Creatives",
-        companyLink: "https://cactuscreatives.com/",
-        position: "Software Developer Intern, Core",
-        period: "May 2024 - August 2024",
-        responsibilities: [
-        `Developed an ETL pipeline for unstructured hierarchical data with Flask, supporting interactive visualizations via React and D3.js.`,
-        `Built a self-hosted uptime monitoring tool using Node.js, Axios for web & database monitoring, Redis for data storage, and Socket.IO for real-time websocket communication, with VPS deployment via Docker.`,
-        `Designed multiple CI/CD pipelines using Github Actions to automate unit and integration testing with Jest and Cypress, deployment, and monitoring processes for the uptime monitoring tool.`,
-        `Engineered a domain-specific chatbot with 85% accuracy, leveraging a PDF-trained algorithm, custom model trainer, and OpenAI's NLP API for multilingual responses.`
-        ]
-    },
-    {
-        companyLogo: "/images/cactuscreatives.png",
-        companyName: "Cactus Creatives",
-        companyLink: "https://cactuscreatives.com/",
-        position: "Python Developer Intern",
-        period: "May 2023 - August 2023",
-        responsibilities: [
-        "Developed and maintained full-stack content management system in HTMX and Django, handling real-time metrics.",
-        "Designed REST APIs with Flask and REST Framework in production with 1000+ requests/day.",
-        "Implemented a Python script to parse and migrate over 25,000+ records from MySQL to PostgreSQL databases.",
-        "Optimized SQL queries in the client codebase to align with updated database schema and improve performance post-migration.",
-        "Analyzed large product usage datasets through linear/logistic regression and outlier detection, leading to over 25% client savings.",
-        ]
-    }
-]
+  {
+    companyLogo: '/images/geotab.jpeg',
+    companyName: 'Geotab',
+    companyLink: 'https://geotab.com/',
+    position: 'Test Automation Developer Intern',
+    period: 'Jan 2025 - Present',
+  },
+  {
+    companyLogo: '/images/cactuscreatives.png',
+    companyName: 'Cactus Creatives',
+    companyLink: 'https://cactuscreatives.com/',
+    position: 'Software Developer Intern, Core',
+    period: 'May 2024 - August 2024',
+    responsibilities: [
+      'Developed an ETL pipeline for unstructured hierarchical data with Flask, supporting interactive visualizations via React and D3.js.',
+      'Built a self-hosted uptime monitoring tool using Node.js, Axios for web & database monitoring, Redis for data storage, and Socket.IO for real-time websocket communication, with VPS deployment via Docker.',
+      'Designed multiple CI/CD pipelines using Github Actions to automate unit and integration testing with Jest and Cypress, deployment, and monitoring processes for the uptime monitoring tool.',
+      'Engineered a domain-specific chatbot with 85% accuracy, leveraging a PDF-trained algorithm, custom model trainer, and OpenAI\'s NLP API for multilingual responses.',
+    ],
+  },
+  {
+    companyLogo: '/images/cactuscreatives.png',
+    companyName: 'Cactus Creatives',
+    companyLink: 'https://cactuscreatives.com/',
+    position: 'Python Developer Intern',
+    period: 'May 2023 - August 2023',
+    responsibilities: [
+      'Developed and maintained full-stack content management system in HTMX and Django, handling real-time metrics.',
+      'Designed REST APIs with Flask and REST Framework in production with 1000+ requests/day.',
+      'Implemented a Python script to parse and migrate over 25,000+ records from MySQL to PostgreSQL databases.',
+      'Optimized SQL queries in the client codebase to align with updated database schema and improve performance post-migration.',
+      'Analyzed large product usage datasets through linear/logistic regression and outlier detection, leading to over 25% client savings.',
+    ],
+  },
+];
 
 export const projects = [
-    {
-        title: "Trivivo",
-        description: "Crafted a feature-rich, dynamic quiz game platform with progressive difficulty levels, real-time analytics, and comprehensive admin tools, complemented by a secure API for question management and user engagement tracking.",
-        repo: true,
-        repoUrl: "https://github.com/steadyfall/wwbm-webapp",
-        live: false,
-        techStack: [`Django`, `MySQL`, `HTML5`, `TailwindCSS`, `jQuery`, `Docker`, `AWS EC2`]
-    },
-    {
-        title: "SpectraSVD",
-        description: "Designed and deployed an advanced image compression algorithm achieving 25%+ size reduction, complemented by a real-time interactive web application for demonstrating compression quality and efficiency.",
-        repo: true,
-        repoUrl: "https://github.com/steadyfall/svd-compression",
-        live: true,
-        liveUrl: "https://spectrasvd.streamlit.app/",
-        techStack: [`NumPy`, `OpenCV`, `Pillow`, `Streamlit`]
-    },
-    {
-        title: "Personal Website",
-        description: "Built a modern, responsive portfolio website with fluid animations, architected as a customizable template.",
-        repo: true,
-        repoUrl: "https://github.com/steadyfall/steadyfall.github.io.git",
-        live: true,
-        liveUrl: "https://steadyfall.github.io",
-        techStack: [`TypeScript`, `React`, `TailwindCSS`, `Next.js`, `Framer Motion`,`Node.js`]
-    },
-    {
-        title: "Chess (CS246 Final Project)",
-        description: "Developed a C++ chess engine with innovative multi-player variants and AI capabilities, employing advanced software design patterns and rigorous testing methodologies in a Linux environment.",
-        repo: false,
-        live: false,
-        techStack: [`C++`, `CMake`, `XQuartz`]
-    },
-    {
-        title: "EcoWiz",
-        description: "Engineered a full-stack application featuring a multimodal image classification system for garbage sorting, achieving 80% accuracy through advanced deep learning techniques.",
-        repo: true,
-        repoUrl: "https://github.com/karman103/DeltaHacksX",
-        live: false,
-        techStack: [`React`, `Flask`, `ResNet-50 CNN`, `YOLOv8`]
-    },
-    {
-        title: "RedWish",
-        description: "Developed a comprehensive full-stack health application to streamline blood donation and transfusion processes, incorporating an AI-powered chatbot to enhance user engagement and accessibility.",
-        repo: true,
-        repoUrl: "https://github.com/steadyfall/RedWish",
-        live: true,
-        liveUrl: "https://steadyfall.github.io/RedWish/",
-        techStack: [`HTML5`, `CSS3`, `JavaScript`, `Firebase`, `DialogFlow API`]
-    },
-]
+  {
+    title: 'Trivivo',
+    description: 'Crafted a feature-rich, dynamic quiz game platform with progressive difficulty levels, real-time analytics, and comprehensive admin tools, complemented by a secure API for question management and user engagement tracking.',
+    repo: true,
+    repoUrl: 'https://github.com/steadyfall/wwbm-webapp',
+    live: false,
+    techStack: ['Django', 'MySQL', 'HTML5', 'TailwindCSS', 'jQuery', 'Docker', 'AWS EC2'],
+  },
+  {
+    title: 'SpectraSVD',
+    description: 'Designed and deployed an advanced image compression algorithm achieving 25%+ size reduction, complemented by a real-time interactive web application for demonstrating compression quality and efficiency.',
+    repo: true,
+    repoUrl: 'https://github.com/steadyfall/svd-compression',
+    live: true,
+    liveUrl: 'https://spectrasvd.streamlit.app/',
+    techStack: ['NumPy', 'OpenCV', 'Pillow', 'Streamlit'],
+  },
+  {
+    title: 'Personal Website',
+    description: 'Built a modern, responsive portfolio website with fluid animations, architected as a customizable template.',
+    repo: true,
+    repoUrl: 'https://github.com/steadyfall/steadyfall.github.io.git',
+    live: true,
+    liveUrl: 'https://steadyfall.github.io',
+    techStack: ['TypeScript', 'React', 'TailwindCSS', 'Next.js', 'Framer Motion','Node.js'],
+  },
+  {
+    title: 'Chess (CS246 Final Project)',
+    description: 'Developed a C++ chess engine with innovative multi-player variants and AI capabilities, employing advanced software design patterns and rigorous testing methodologies in a Linux environment.',
+    repo: false,
+    live: false,
+    techStack: ['C++', 'CMake', 'XQuartz'],
+  },
+  {
+    title: 'EcoWiz',
+    description: 'Engineered a full-stack application featuring a multimodal image classification system for garbage sorting, achieving 80% accuracy through advanced deep learning techniques.',
+    repo: true,
+    repoUrl: 'https://github.com/karman103/DeltaHacksX',
+    live: false,
+    techStack: ['React', 'Flask', 'ResNet-50 CNN', 'YOLOv8'],
+  },
+  {
+    title: 'RedWish',
+    description: 'Developed a comprehensive full-stack health application to streamline blood donation and transfusion processes, incorporating an AI-powered chatbot to enhance user engagement and accessibility.',
+    repo: true,
+    repoUrl: 'https://github.com/steadyfall/RedWish',
+    live: true,
+    liveUrl: 'https://steadyfall.github.io/RedWish/',
+    techStack: ['HTML5', 'CSS3', 'JavaScript', 'Firebase', 'DialogFlow API'],
+  },
+];
 
 export const skills = {
-    languages: ["Python", "JavaScript (ES6)", "TypeScript", "Go", "C", "C++20", "SQL"],
-    frameworksAndLibraries: ["Django", "Flask", "React", "TailwindCSS", "Next.js", "Node.js", "Postgres", "MySQL"],
-    tools: ["Bash", "Powershell", "Docker", "Postman"],
-}
+  languages: ['Python', 'JavaScript (ES6)', 'TypeScript', 'Go', 'C', 'C++20', 'SQL'],
+  frameworksAndLibraries: ['Django', 'Flask', 'React', 'TailwindCSS', 'Next.js', 'Node.js', 'Postgres', 'MySQL'],
+  tools: ['Bash', 'Powershell', 'Docker', 'Postman'],
+};
 // "Axios", "Socket.IO"
 // databases: ["Postgres", "MySQL", "Redis"]
diff --git a/src/hooks/useMediaQuery.tsx b/src/hooks/useMediaQuery.tsx
index 64ce845..7f5509b 100644
--- a/src/hooks/useMediaQuery.tsx
+++ b/src/hooks/useMediaQuery.tsx
@@ -1,19 +1,19 @@
-'use client'
+'use client';
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
 
 export function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = useState(false)
+  const [matches, setMatches] = useState(false);
 
   useEffect(() => {
-    const media = window.matchMedia(query)
+    const media = window.matchMedia(query);
     if (media.matches !== matches) {
-      setMatches(media.matches)
+      setMatches(media.matches);
     }
-    const listener = () => setMatches(media.matches)
-    window.addEventListener('resize', listener)
-    return () => window.removeEventListener('resize', listener)
-  }, [matches, query])
+    const listener = () => setMatches(media.matches);
+    window.addEventListener('resize', listener);
+    return () => window.removeEventListener('resize', listener);
+  }, [matches, query]);
 
-  return matches
+  return matches;
 }
diff --git a/src/hooks/useReadingProgress.tsx b/src/hooks/useReadingProgress.tsx
index 70b8555..d6562a7 100644
--- a/src/hooks/useReadingProgress.tsx
+++ b/src/hooks/useReadingProgress.tsx
@@ -1,25 +1,25 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 
 const useReadingProgress = () => {
-    const [completion, setCompletion] = useState(0);
+  const [completion, setCompletion] = useState(0);
 
-    useEffect(() => {
-        const updateScrollCompletion = () => {
-            const currentProgress = window.scrollY;
-            const scrollHeight = document.body.scrollHeight - window.innerHeight;
-            if (scrollHeight) {
-                setCompletion(
-                    Number((currentProgress / scrollHeight).toFixed(2)) * 100
-                );
-            }
-        }
-        window.addEventListener('scroll', updateScrollCompletion);
-        return () => {
-            window.removeEventListener('scroll', updateScrollCompletion);
-        }
-    }, []);
+  useEffect(() => {
+    const updateScrollCompletion = () => {
+      const currentProgress = window.scrollY;
+      const scrollHeight = document.body.scrollHeight - window.innerHeight;
+      if (scrollHeight) {
+        setCompletion(
+          Number((currentProgress / scrollHeight).toFixed(2)) * 100
+        );
+      }
+    };
+    window.addEventListener('scroll', updateScrollCompletion);
+    return () => {
+      window.removeEventListener('scroll', updateScrollCompletion);
+    };
+  }, []);
 
-    return completion;
-}
+  return completion;
+};
 
-export default useReadingProgress
\ No newline at end of file
+export default useReadingProgress;
\ No newline at end of file
diff --git a/src/hooks/useSmoothScroll.tsx b/src/hooks/useSmoothScroll.tsx
index 338afdb..be3ce5a 100644
--- a/src/hooks/useSmoothScroll.tsx
+++ b/src/hooks/useSmoothScroll.tsx
@@ -1,48 +1,48 @@
-'use client'
+'use client';
 
-import { useEffect, useCallback } from 'react'
-import { useRouter, usePathname } from 'next/navigation'
+import { useEffect, useCallback } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
 
 export function useSmoothScroll(offset = 0) {
-  const router = useRouter()
-  const pathname = usePathname()
+  const router = useRouter();
+  const pathname = usePathname();
 
   const scrollToElement = useCallback((hash: string) => {
-    const targetElement = document.getElementById(hash.substring(1))
+    const targetElement = document.getElementById(hash.substring(1));
     if (targetElement) {
-      const yPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - offset
-      window.scrollTo({ top: yPosition, behavior: 'smooth' })
+      const yPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - offset;
+      window.scrollTo({ top: yPosition, behavior: 'smooth' });
     }
-  }, [offset])
+  }, [offset]);
 
   useEffect(() => {
     if (window.location.hash) {
-      scrollToElement(window.location.hash)
+      scrollToElement(window.location.hash);
     }
-  }, [pathname, scrollToElement])
+  }, [pathname, scrollToElement]);
 
   useEffect(() => {
     const handleClick = (e: MouseEvent) => {
-      const target = e.target as HTMLElement
-      const anchor = target.closest('a')
-      if (!anchor) return
+      const target = e.target as HTMLElement;
+      const anchor = target.closest('a');
+      if (!anchor) return;
 
-      const href = anchor.getAttribute('href')
-      if (!href) return
+      const href = anchor.getAttribute('href');
+      if (!href) return;
 
-      const url = new URL(href, window.location.origin)
+      const url = new URL(href, window.location.origin);
 
       if (url.pathname === pathname && url.hash) {
-        e.preventDefault()
-        scrollToElement(url.hash)
-        window.history.pushState(null, '', url.hash)
+        e.preventDefault();
+        scrollToElement(url.hash);
+        window.history.pushState(null, '', url.hash);
       } else if (url.pathname !== pathname && url.hash) {
-        e.preventDefault()
-        router.push(href)
+        e.preventDefault();
+        router.push(href);
       }
-    }
+    };
 
-    document.addEventListener('click', handleClick)
-    return () => document.removeEventListener('click', handleClick)
-  }, [pathname, router, scrollToElement])
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, [pathname, router, scrollToElement]);
 }
\ No newline at end of file
diff --git a/src/lib/posts.ts b/src/lib/posts.ts
index 193b3bf..78b6ce6 100644
--- a/src/lib/posts.ts
+++ b/src/lib/posts.ts
@@ -12,34 +12,34 @@ export type PostData = {
 }
 
 export function groupPostsByYear(
-    posts: PostMetadata[]
+  posts: PostMetadata[]
 ): { year: number; posts: PostMetadata[] }[] {
-    // Filter out posts with no date to avoid runtime errors
-    // Sort posts by date in descending order
-    // Group posts by year
-    // Sort by year in descending order
+  // Filter out posts with no date to avoid runtime errors
+  // Sort posts by date in descending order
+  // Group posts by year
+  // Sort by year in descending order
    
-    posts.sort(
-        (a, b) =>
-            (new Date(b.date ?? "").getTime() || 0) -
-            (new Date(a.date ?? "").getTime() || 0),
-    )
+  posts.sort(
+    (a, b) =>
+      (new Date(b.date ?? '').getTime() || 0) -
+            (new Date(a.date ?? '').getTime() || 0),
+  );
 
-    const groupedByYear: { [key: number]: PostMetadata[] } = posts.reduce((acc, post) => {
-        const year = new Date(post.date ?? "").getFullYear() || 1
-        if (!acc[year]) {
-            acc[year] = [];
-        }
-        acc[year].push(post);
-        return acc;
-    }, {} as { [key: number]: PostMetadata[] });
+  const groupedByYear: { [key: number]: PostMetadata[] } = posts.reduce((acc, post) => {
+    const year = new Date(post.date ?? '').getFullYear() || 1;
+    if (!acc[year]) {
+      acc[year] = [];
+    }
+    acc[year].push(post);
+    return acc;
+  }, {} as { [key: number]: PostMetadata[] });
 
-    const postsByYear = Object.keys(groupedByYear)
-        .map(year => ({
-            year: parseInt(year),
-            posts: groupedByYear[parseInt(year)]
-        }))
-        .sort((a, b) => b.year - a.year);
+  const postsByYear = Object.keys(groupedByYear)
+    .map(year => ({
+      year: parseInt(year),
+      posts: groupedByYear[parseInt(year)],
+    }))
+    .sort((a, b) => b.year - a.year);
 
-    return postsByYear;
+  return postsByYear;
 }
diff --git a/src/lib/techIcons.ts b/src/lib/techIcons.ts
index 58bd095..07a766d 100644
--- a/src/lib/techIcons.ts
+++ b/src/lib/techIcons.ts
@@ -1,46 +1,46 @@
 export const techIcons: { [key: string]: string } = {
-    "AWS": "la:aws",
-    "AWS EC2": "simple-icons:amazonec2",
-    "Axios": "simple-icons:axios",
-    "Bash": "devicon-plain:bash",
-    "C": "devicon:c",
-    "C++": "devicon:cplusplus",
-    "C++20": "devicon:cplusplus",
-    "Cloudflare": "devicon:cloudflare",
-    "CMake": "devicon:cmake",
-    "CSS3": "devicon:css3",
-    "Cypress": "devicon-plain:cypressio",
-    "D3.js": "logos:d3",
-    "Django": "vscode-icons:file-type-django",
-    "Docker": "logos:docker-icon",
-    "Firebase": "devicon:firebase",
-    "Flask": "simple-icons:flask",
-    "Framer Motion": "simple-icons:framer",
-    "Go": "logos:go",
-    "HTML5": "devicon:html5",
-    "JavaScript": "devicon:javascript",
-    "JavaScript (ES6)": "devicon:javascript",
-    "Jest": "logos:jest",
-    "jQuery": "devicon-plain:jquery",
-    "Linux": "devicon:linux",
-    "MongoDB": "logos:mongodb-icon",
-    "MySQL": "fontisto:mysql",
-    "Next.js": "devicon:nextjs",
-    "Node.js": "devicon:nodejs",
-    "NumPy": "devicon:numpy",
-    "OpenCV": "devicon:opencv",
-    "Postgres": "logos:postgresql",
-    "Postman": "devicon:postman",
-    "Powershell": "vscode-icons:file-type-powershell",
-    "Pytest": "simple-icons:pytest",
-    "Python": "devicon:python",
-    "Python3": "devicon:python",
-    "R": "devicon:rstudio",
-    "Railway": "simple-icons:railway",
-    "React": "logos:react",
-    "Redis": "devicon:redis",
-    "Socket.IO": "simple-icons:socketdotio",
-    "Streamlit": "devicon:streamlit",
-    "TailwindCSS": "devicon:tailwindcss",
-    "TypeScript": "devicon:typescript",
-}
+  'AWS': 'la:aws',
+  'AWS EC2': 'simple-icons:amazonec2',
+  'Axios': 'simple-icons:axios',
+  'Bash': 'devicon-plain:bash',
+  'C': 'devicon:c',
+  'C++': 'devicon:cplusplus',
+  'C++20': 'devicon:cplusplus',
+  'Cloudflare': 'devicon:cloudflare',
+  'CMake': 'devicon:cmake',
+  'CSS3': 'devicon:css3',
+  'Cypress': 'devicon-plain:cypressio',
+  'D3.js': 'logos:d3',
+  'Django': 'vscode-icons:file-type-django',
+  'Docker': 'logos:docker-icon',
+  'Firebase': 'devicon:firebase',
+  'Flask': 'simple-icons:flask',
+  'Framer Motion': 'simple-icons:framer',
+  'Go': 'logos:go',
+  'HTML5': 'devicon:html5',
+  'JavaScript': 'devicon:javascript',
+  'JavaScript (ES6)': 'devicon:javascript',
+  'Jest': 'logos:jest',
+  'jQuery': 'devicon-plain:jquery',
+  'Linux': 'devicon:linux',
+  'MongoDB': 'logos:mongodb-icon',
+  'MySQL': 'fontisto:mysql',
+  'Next.js': 'devicon:nextjs',
+  'Node.js': 'devicon:nodejs',
+  'NumPy': 'devicon:numpy',
+  'OpenCV': 'devicon:opencv',
+  'Postgres': 'logos:postgresql',
+  'Postman': 'devicon:postman',
+  'Powershell': 'vscode-icons:file-type-powershell',
+  'Pytest': 'simple-icons:pytest',
+  'Python': 'devicon:python',
+  'Python3': 'devicon:python',
+  'R': 'devicon:rstudio',
+  'Railway': 'simple-icons:railway',
+  'React': 'logos:react',
+  'Redis': 'devicon:redis',
+  'Socket.IO': 'simple-icons:socketdotio',
+  'Streamlit': 'devicon:streamlit',
+  'TailwindCSS': 'devicon:tailwindcss',
+  'TypeScript': 'devicon:typescript',
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index ff36dd4..104214f 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -9,7 +9,7 @@ export const formatDate = (d: string): string => {
   return new Intl.DateTimeFormat('en-US', {
     month: 'short',
     day: '2-digit',
-    year: 'numeric'
+    year: 'numeric',
   }).format(new Date(d));
 };
 

From 4f586c961d40e28588b669db245ff2dfcfca1709 Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Sun, 6 Apr 2025 21:26:50 -0400
Subject: [PATCH 03/11] lint: add prettier for code formatting

---
 .eslintrc.json    |   8 +---
 .prettierrc       |   8 ++++
 package-lock.json | 106 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   6 ++-
 4 files changed, 121 insertions(+), 7 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.eslintrc.json b/.eslintrc.json
index 725320f..15eca7a 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -9,11 +9,7 @@
     "no-debugger": "error",
     // "no-unused-vars": "off", // Handled by TS version above
 
-     // Style
-     "semi": ["error", "always"],
-     "quotes": ["error", "single", { "avoidEscape": true }],
-     "indent": ["error", 2],
-     "object-curly-spacing": ["error", "always"],
-     "comma-dangle": ["error", "always-multiline"]
+    // Prettier takes over formatting rules now
+    "prettier/prettier": "error"
   }
 }
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..93d8c75
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+    "singleQuote": true,
+    "semi": true,
+    "trailingComma": "all",
+    "printWidth": 100,
+    "tabWidth": 2,
+    "arrowParens": "always"
+}
diff --git a/package-lock.json b/package-lock.json
index 0ce97ca..3ca2667 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,10 @@
         "@types/react-dom": "^18",
         "eslint": "9.14.0",
         "eslint-config-next": "15.0.3",
+        "eslint-config-prettier": "^10.1.1",
+        "eslint-plugin-prettier": "^5.2.6",
         "postcss": "^8",
+        "prettier": "^3.5.3",
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
       }
@@ -1010,6 +1013,18 @@
         "node": ">=14"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.1.tgz",
+      "integrity": "sha512-VzgHzGblFmUeBmmrk55zPyrQIArQN4vujc9shWytaPdB3P7qhi0cpaiKIr7tlCmFv2lYUwnLospIqjL9ZSAhhg==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
@@ -2769,6 +2784,18 @@
         }
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.1.tgz",
+      "integrity": "sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -2929,6 +2956,36 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
       }
     },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.6.tgz",
+      "integrity": "sha512-mUcf7QG2Tjk7H055Jk0lGBjbgDnfrvqjhXh9t2xLMSCjZVcw9Rb1V6sVNXO0th3jgeO7zllWPTNRil3JW94TnQ==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.11.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-react": {
       "version": "7.37.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
@@ -3204,6 +3261,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -5949,6 +6012,33 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6965,6 +7055,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/synckit": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.2.tgz",
+      "integrity": "sha512-1IUffI8zZ8qUMB3NUJIjk0RpLroG/8NkQDAWH1NbB2iJ0/5pn3M8rxfNzMz4GH9OnYaGYn31LEDSXJp/qIlxgA==",
+      "dev": true,
+      "dependencies": {
+        "@pkgr/core": "^0.2.0",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/synckit"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
diff --git a/package.json b/package.json
index 066143e..d714759 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "buildgh": "next build && next export"
+    "buildgh": "next build && next export",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@mdx-js/loader": "^3.1.0",
@@ -35,7 +36,10 @@
     "@types/react-dom": "^18",
     "eslint": "9.14.0",
     "eslint-config-next": "15.0.3",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.6",
     "postcss": "^8",
+    "prettier": "^3.5.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

From ab0d0a413766b770cae389cfec4c9cfd0bb1ed31 Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Sun, 6 Apr 2025 21:33:07 -0400
Subject: [PATCH 04/11] lint: add eslint plugin for organizing and validating
 whole import statements

---
 .eslintrc.json    | 19 ++++++++++++++++++-
 package-lock.json |  1 +
 package.json      |  1 +
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 15eca7a..8f161a0 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,14 +1,31 @@
 {
   "extends": [
     "next/core-web-vitals",
-    "next/typescript"
+    "next/typescript",
+    "plugin:prettier/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript"
   ],
+  "plugins": ["prettier", "import"],
   "rules": {
     // Code quality
     "no-console": "warn",
     "no-debugger": "error",
     // "no-unused-vars": "off", // Handled by TS version above
 
+    // Import sorting and cleanliness
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],
+        "newlines-between": "always",
+        "alphabetize": { "order": "asc", "caseInsensitive": true }
+      }
+    ],
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+
     // Prettier takes over formatting rules now
     "prettier/prettier": "error"
   }
diff --git a/package-lock.json b/package-lock.json
index 3ca2667..53df1e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "eslint": "9.14.0",
         "eslint-config-next": "15.0.3",
         "eslint-config-prettier": "^10.1.1",
+        "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-prettier": "^5.2.6",
         "postcss": "^8",
         "prettier": "^3.5.3",
diff --git a/package.json b/package.json
index d714759..02d14fe 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "eslint": "9.14.0",
     "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.6",
     "postcss": "^8",
     "prettier": "^3.5.3",

From 6180f2ae22c114fdcbd3fd561b0f8d68d65e800e Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Sun, 6 Apr 2025 22:09:47 -0400
Subject: [PATCH 05/11] lint: add Prettier plugin for sorting Tailwind class
 names

---
 .prettierrc       | 13 ++++----
 package-lock.json | 79 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 3 files changed, 87 insertions(+), 6 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 93d8c75..da3e2d5 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,8 +1,9 @@
 {
-    "singleQuote": true,
-    "semi": true,
-    "trailingComma": "all",
-    "printWidth": 100,
-    "tabWidth": 2,
-    "arrowParens": "always"
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/package-lock.json b/package-lock.json
index 53df1e0..46f1dc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "eslint-plugin-prettier": "^5.2.6",
         "postcss": "^8",
         "prettier": "^3.5.3",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
       }
@@ -6040,6 +6041,84 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
+      "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
diff --git a/package.json b/package.json
index 02d14fe..d265bd0 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "eslint-plugin-prettier": "^5.2.6",
     "postcss": "^8",
     "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

From 2568cae3e1c201c6a0613b37a18d18870d18ae7f Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Sun, 6 Apr 2025 22:56:53 -0400
Subject: [PATCH 06/11] ci: added lint-staged as pre-commit hook using husky

---
 .husky/pre-commit |   0
 package-lock.json | 579 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  14 +-
 3 files changed, 592 insertions(+), 1 deletion(-)
 create mode 100644 .husky/pre-commit

diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 0000000..e69de29
diff --git a/package-lock.json b/package-lock.json
index 46f1dc2..64540bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,8 @@
         "eslint-config-prettier": "^10.1.1",
         "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-prettier": "^5.2.6",
+        "husky": "^9.1.7",
+        "lint-staged": "^15.5.0",
         "postcss": "^8",
         "prettier": "^3.5.3",
         "prettier-plugin-tailwindcss": "^0.6.11",
@@ -1628,6 +1630,21 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-escapes": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.0.0.tgz",
+      "integrity": "sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==",
+      "dev": true,
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
@@ -2153,6 +2170,60 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
+      "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==",
+      "dev": true,
+      "dependencies": {
+        "slice-ansi": "^5.0.0",
+        "string-width": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/emoji-regex": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
+      "dev": true
+    },
+    "node_modules/cli-truncate/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2216,6 +2287,12 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -2491,6 +2568,18 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.9",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz",
@@ -3241,6 +3330,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "dev": true
+    },
+    "node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -3486,6 +3604,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-east-asian-width": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.3.0.tgz",
+      "integrity": "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -3523,6 +3653,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
@@ -3840,6 +3982,30 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4251,6 +4417,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-string": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
@@ -4523,6 +4701,123 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/lint-staged": {
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.5.0.tgz",
+      "integrity": "sha512-WyCzSbfYGhK7cU+UuDDkzUiytbfbi0ZdPy2orwtM75P3WTtQBzmG40cCxIa8Ii2+XjfxzLH6Be46tUfWS85Xfg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^5.4.1",
+        "commander": "^13.1.0",
+        "debug": "^4.4.0",
+        "execa": "^8.0.1",
+        "lilconfig": "^3.1.3",
+        "listr2": "^8.2.5",
+        "micromatch": "^4.0.8",
+        "pidtree": "^0.6.0",
+        "string-argv": "^0.3.2",
+        "yaml": "^2.7.0"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/lint-staged/node_modules/chalk": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
+      "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/commander": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz",
+      "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/listr2": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.2.5.tgz",
+      "integrity": "sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==",
+      "dev": true,
+      "dependencies": {
+        "cli-truncate": "^4.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/emoji-regex": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
+      "dev": true
+    },
+    "node_modules/listr2/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4544,6 +4839,108 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/emoji-regex": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
+      "dev": true
+    },
+    "node_modules/log-update/node_modules/is-fullwidth-code-point": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz",
+      "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==",
+      "dev": true,
+      "dependencies": {
+        "get-east-asian-width": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz",
+      "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -4759,6 +5156,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5349,6 +5752,30 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5549,6 +5976,33 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/npm-run-path": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5673,6 +6127,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -5835,6 +6304,18 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pidtree": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+      "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+      "dev": true,
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -6446,6 +6927,37 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -6456,6 +6968,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -6762,6 +7280,46 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "node_modules/slice-ansi": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
+      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.0.0",
+        "is-fullwidth-code-point": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/is-fullwidth-code-point": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
+      "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -6806,6 +7364,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -7039,6 +7606,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
diff --git a/package.json b/package.json
index d265bd0..ff471b3 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,17 @@
     "start": "next start",
     "lint": "next lint",
     "buildgh": "next build && next export",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md,css,scss,html}": [
+      "prettier --write"
+    ]
   },
   "dependencies": {
     "@mdx-js/loader": "^3.1.0",
@@ -39,6 +49,8 @@
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.6",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.5.0",
     "postcss": "^8",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",

From 2fd4e7119a2ad73dad5c24c06b41f9045e4d87ed Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Sun, 6 Apr 2025 22:59:02 -0400
Subject: [PATCH 07/11] lint: add pre-commit hook and run as intended

---
 .husky/pre-commit | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index e69de29..d0a7784 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
\ No newline at end of file

From 57501df1b8efbae92438e35345cc31d8f098ac4b Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Sun, 6 Apr 2025 23:52:19 -0400
Subject: [PATCH 08/11] lint: modify lint-staged and disable linting during
 production builds

---
 .eslintrc.json  | 13 +++++++++++--
 next.config.mjs |  6 +++++-
 package.json    |  2 +-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 8f161a0..3f6bf2d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -12,13 +12,22 @@
     // Code quality
     "no-console": "warn",
     "no-debugger": "error",
-    // "no-unused-vars": "off", // Handled by TS version above
+    "no-unused-vars": "off", // Handled by TS version above
 
     // Import sorting and cleanliness
     "import/order": [
       "error",
       {
-        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object",
+          "type"
+        ],
         "newlines-between": "always",
         "alphabetize": { "order": "asc", "caseInsensitive": true }
       }
diff --git a/next.config.mjs b/next.config.mjs
index 9d0602b..6e8b825 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,5 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    eslint: {
+        ignoreDuringBuilds: true,
+    },
+};
 
 export default nextConfig;
 
diff --git a/package.json b/package.json
index ff471b3..ddd77d3 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": [
-      "eslint --fix",
+      "next lint --fix",
       "prettier --write"
     ],
     "*.{json,md,css,scss,html}": [

From 10415a412516a9508b1355b956d342abc98f963a Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Mon, 7 Apr 2025 00:05:04 -0400
Subject: [PATCH 09/11] ci: move lint-staged settings from package.json to
 .lintstagedrc.js

---
 .lintstagedrc.js | 11 +++++++++++
 package.json     |  9 ---------
 2 files changed, 11 insertions(+), 9 deletions(-)
 create mode 100644 .lintstagedrc.js

diff --git a/.lintstagedrc.js b/.lintstagedrc.js
new file mode 100644
index 0000000..93f6e69
--- /dev/null
+++ b/.lintstagedrc.js
@@ -0,0 +1,11 @@
+const path = require('path');
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`;
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
+  '*.{json,md,css,scss,html}': ['prettier --write'],
+};
diff --git a/package.json b/package.json
index ddd77d3..b330c6f 100644
--- a/package.json
+++ b/package.json
@@ -11,15 +11,6 @@
     "format": "prettier --write .",
     "prepare": "husky"
   },
-  "lint-staged": {
-    "*.{js,ts,jsx,tsx}": [
-      "next lint --fix",
-      "prettier --write"
-    ],
-    "*.{json,md,css,scss,html}": [
-      "prettier --write"
-    ]
-  },
   "dependencies": {
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",

From 746483b338ac1fb2b39207d2160332bb926bfa52 Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Mon, 7 Apr 2025 00:09:44 -0400
Subject: [PATCH 10/11] lint: run set lint commands to lint entire project

---
 README.md                               |   5 +
 next.config.mjs                         |   6 +-
 src/app/(home)/layout.tsx               |   4 +-
 src/app/(home)/page.tsx                 |  10 +-
 src/app/globals.css                     |  12 +-
 src/app/layout.tsx                      |  36 +++---
 src/app/not-found.tsx                   |  32 +++---
 src/app/providers.tsx                   |   6 +-
 src/components/About.tsx                |  76 ++++++++-----
 src/components/Education.tsx            |  60 ++++++----
 src/components/Experiences.tsx          |  25 +++--
 src/components/Footer.tsx               |  47 ++++----
 src/components/Header.tsx               | 143 ++++++++++++++----------
 src/components/Miscellaneous.tsx        |   4 +-
 src/components/Navbar.tsx               |  42 +++++--
 src/components/Projects.tsx             |  41 +++----
 src/components/Skills.tsx               |  85 +++++++-------
 src/components/SmoothScrollProvider.tsx |   8 +-
 src/components/ThemeSwitch.tsx          |  17 +--
 src/components/Tiles/ExperienceTile.tsx |  83 ++++++++------
 src/components/Tiles/ProjectTile.tsx    |  85 +++++++-------
 src/components/ui/BackButton.tsx        |  25 ++---
 src/components/ui/Badge.tsx             |  10 +-
 src/components/ui/BlurFade.tsx          |   6 +-
 src/components/ui/Highlighter.tsx       |  28 ++---
 src/components/ui/HoverHighlighter.tsx  |  46 ++++----
 src/components/ui/LinkWithArrow.tsx     |  31 ++---
 src/components/ui/Loader.tsx            |  26 ++++-
 src/data/resume.ts                      |  36 ++++--
 src/hooks/useReadingProgress.tsx        |   6 +-
 src/hooks/useSmoothScroll.tsx           |  21 ++--
 src/lib/posts.ts                        |  49 ++++----
 src/lib/techIcons.ts                    |  70 ++++++------
 tailwind.config.ts                      |  24 ++--
 tsconfig.json                           |  21 +---
 35 files changed, 696 insertions(+), 530 deletions(-)

diff --git a/README.md b/README.md
index 94a08e3..094155c 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,23 @@
 # steadyfall.github.io
 
 ## color-palette
+
 main:
+
 - `text-pink-500`
 - `text-thunderbird-600`
 - `text-azure-radiance-600`
 - `text-neon-green-500 dark:text-neon-green-400`
 
 across_colors:
+
 - `text-midnight-blue-500`
 - `text-pink-500`
 - `text-orange-500`
 - `text-blue-violet-500`
 
 highlighter:
+
 - cyan: `bg-cyan-300 dark:bg-cyan-500/30`
 - pink/violet-web: `bg-[#ff77e4]`
 - slate-blue: `bg-[#7777ff]`
@@ -21,6 +25,7 @@ highlighter:
 - yellow/lemon/laser-lemon: `bg-[#ffff77]`
 
 ## to-do:
+
 - [x] check out about highlighting words
 - [ ] YAML file parser for experience, projects
 - [x] skills, education section
diff --git a/next.config.mjs b/next.config.mjs
index 6e8b825..1d0e267 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    eslint: {
-        ignoreDuringBuilds: true,
-    },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
 };
 
 export default nextConfig;
diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
index 647ac86..68d70ef 100644
--- a/src/app/(home)/layout.tsx
+++ b/src/app/(home)/layout.tsx
@@ -9,7 +9,9 @@ export default async function HomeLayout({
   return (
     <>
       <Navbar />
-      <div className="flex-grow w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl">{children}</div>
+      <div className="mx-auto w-full flex-grow px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl">
+        {children}
+      </div>
       <Footer />
     </>
   );
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 0704e94..98c0b48 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -1,22 +1,22 @@
 'use client';
 
-import Header from '@/components/Header';
 import About from '@/components/About';
+import { Education } from '@/components/Education';
 import { Experiences } from '@/components/Experiences';
+import Header from '@/components/Header';
 import { Projects } from '@/components/Projects';
-import { Education } from '@/components/Education';
 import { Skills } from '@/components/Skills';
 import { personalDetails, experiences, projects, skills } from '@/data/resume';
 
 export default function Portfolio() {
   return (
-    <main className="py-6 z-1">
+    <main className="z-1 py-6">
       <Header {...personalDetails} />
       <About />
       <Experiences arr={experiences} />
       <Education />
-      <Skills arr={skills}/>
+      <Skills arr={skills} />
       <Projects arr={projects} />
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 5033828..3c23f30 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -5,13 +5,13 @@
 @tailwind utilities;
 
 :root {
-    --background: #ffffff;
-    --foreground: #171717;
-  }
-  
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
 .dark {
---background: #0a0a0a;
---foreground: #ededed;
+  --background: #0a0a0a;
+  --foreground: #ededed;
 }
 
 /* Use Tailwind's dark class */
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6b3482d..8395d8c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,13 +1,17 @@
-import type { Metadata } from 'next';
 import { Inter, Space_Mono } from 'next/font/google';
-import { Providers } from './providers';
-import './globals.css';
+
+import { SmoothScrollProvider } from '@/components/SmoothScrollProvider';
 import { detailsForMetadata } from '@/data/resume';
 import { cn } from '@/lib/utils';
-import { SmoothScrollProvider } from '@/components/SmoothScrollProvider';
+
+import { Providers } from './providers';
+
+import type { Metadata } from 'next';
+
+import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
-const spaceMono = Space_Mono({ 
+const spaceMono = Space_Mono({
   weight: ['400', '700'],
   subsets: ['latin'],
   variable: '--font-spaceMono',
@@ -50,22 +54,20 @@ export const metadata: Metadata = {
   verification: { google: 'Wwciyzq9ANfCqyfI9hjLic5BhSc30awKaJPxbWCm5mc' },
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode; }) {
-  // ${inter.className} 
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  // ${inter.className}
   return (
     <html lang="en" className={`${inter.className} ${spaceMono.variable}`} suppressHydrationWarning>
-      <body className={
-        cn(
-          'bg-neutral-100 dark:bg-neutral-950 text-gray-800 dark:text-gray-200',
-          'transition-colors duration-300'
-        )} 
-      suppressHydrationWarning
+      <body
+        className={cn(
+          'bg-neutral-100 text-gray-800 dark:bg-neutral-950 dark:text-gray-200',
+          'transition-colors duration-300',
+        )}
+        suppressHydrationWarning
       >
         <SmoothScrollProvider offset={90}>
-          <div className="flex flex-col min-h-screen">
-            <Providers>
-              {children}
-            </Providers>
+          <div className="flex min-h-screen flex-col">
+            <Providers>{children}</Providers>
           </div>
         </SmoothScrollProvider>
       </body>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 9a1c34e..97ab9ef 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,28 +1,34 @@
-import BackButton from '@/components/ui/BackButton';
 import Link from 'next/link';
+
+import BackButton from '@/components/ui/BackButton';
 import { cn } from '@/lib/utils';
 
 export default function NotFound() {
   return (
-    <main className="flex flex-col items-center justify-center container mx-auto mt-[28vh] z-1">
-      <h1 className={
-        cn(
-          'font-typewriter text-6xl md:text-7xl lg:text-8xl font-bold',
-          'text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-500 dark:to-gray-300 from-gray-500 to-gray-700'
-        )
-      }>
-            404
+    <main className="z-1 container mx-auto mt-[28vh] flex flex-col items-center justify-center">
+      <h1
+        className={cn(
+          'font-typewriter text-6xl font-bold md:text-7xl lg:text-8xl',
+          'bg-gradient-to-r from-gray-500 to-gray-700 bg-clip-text text-transparent dark:from-gray-500 dark:to-gray-300',
+        )}
+      >
+        404
       </h1>
       <div className="mt-4 text-center">
-            The page you&apos;re looking for, is either not there or has been moved.
+        The page you&apos;re looking for, is either not there or has been moved.
       </div>
       <ul className="mt-4 flex gap-4 sm:gap-8">
         <li>{<BackButton>go back</BackButton>}</li>
         <li>|</li>
-        <li><Link href="/" className="text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white hover:underline hover:underline-offset-4">home</Link></li>
+        <li>
+          <Link
+            href="/"
+            className="text-slate-600 hover:text-black hover:underline hover:underline-offset-4 dark:text-slate-300 dark:hover:text-white"
+          >
+            home
+          </Link>
+        </li>
       </ul>
     </main>
   );
 }
-
-
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 52c6395..f742223 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -3,5 +3,9 @@
 import { ThemeProvider } from 'next-themes';
 
 export function Providers({ children }: { children: React.ReactNode }) {
-  return <ThemeProvider attribute="class" defaultTheme='system' enableSystem>{children}</ThemeProvider>;
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </ThemeProvider>
+  );
 }
diff --git a/src/components/About.tsx b/src/components/About.tsx
index 35efa74..4843a96 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -1,25 +1,32 @@
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
 import Highlight from '@/components/ui/Highlighter';
-import { cn } from '@/lib/utils';
 import LinkWithArrow from '@/components/ui/LinkWithArrow';
+import { cn } from '@/lib/utils';
 
 const About = () => {
   return (
     <section id="about" className="mb-12">
       <BlurFade delay={BLUR_FADE_DELAY * 3}>
-        <h2 className={cn(
-          'text-2xl md:text-3xl lg:text-4xl font-section mb-4',
-          'inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]'
-        )}>About</h2>
+        <h2
+          className={cn(
+            'mb-4 font-section text-2xl md:text-3xl lg:text-4xl',
+            'inline-block bg-gradient-to-r from-[#434343] to-[#000000] bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-100',
+          )}
+        >
+          About
+        </h2>
       </BlurFade>
       <BlurFade delay={BLUR_FADE_DELAY * 4}>
         <div className="text-gray-700 dark:text-gray-300">
           <p className="mb-2">
-            I am a <Highlight text="software developer" color="red"/> based in <Highlight text="Toronto" color="red"/> and currently a <Highlight text="junior" /> pursuing a 
-            <Highlight text="Computational Mathematics" /> major at the <Highlight text="University of Waterloo" />.
-            I am passionate about tech and innovation, always exploring the <span className="underline underline-offset-4">
-              intersection of software
-              development and AI.
+            I am a <Highlight text="software developer" color="red" /> based in{' '}
+            <Highlight text="Toronto" color="red" /> and currently a <Highlight text="junior" />{' '}
+            pursuing a
+            <Highlight text="Computational Mathematics" /> major at the{' '}
+            <Highlight text="University of Waterloo" />. I am passionate about tech and innovation,
+            always exploring the{' '}
+            <span className="underline underline-offset-4">
+              intersection of software development and AI.
             </span>
           </p>
           {/* <p className="mb-2">
@@ -38,30 +45,43 @@ const About = () => {
               <Highlight text="Impractical Jokers" color="pink"/>.
             </div> */}
           <p className="mb-2">
-            You can find me <Highlight text="re-watching" color="pink"/> any one of these series:&nbsp;
-            <Highlight text="Breaking Bad" color="pink"/>,&nbsp;
-            <Highlight text="Silicon Valley" color="pink"/>,&nbsp;
-            <Highlight text="South Park" color="pink"/> and <Highlight text="The Office" color="pink"/>.
+            You can find me <Highlight text="re-watching" color="pink" /> any one of these
+            series:&nbsp;
+            <Highlight text="Breaking Bad" color="pink" />
+            ,&nbsp;
+            <Highlight text="Silicon Valley" color="pink" />
+            ,&nbsp;
+            <Highlight text="South Park" color="pink" /> and{' '}
+            <Highlight text="The Office" color="pink" />.
           </p>
           <p className="mb-2">
-              For those of you curious, the favicon is a <Highlight text="4-hypercube graph" color="cyan" /> made via Python, using NetworkX and Matplotlib.
-              Check the <LinkWithArrow
-              href="/icon.ico" target="_blank"
-              className="mr-1 hover:underline hover:underline-offset-2 text-orange-500"
+            For those of you curious, the favicon is a{' '}
+            <Highlight text="4-hypercube graph" color="cyan" /> made via Python, using NetworkX and
+            Matplotlib. Check the{' '}
+            <LinkWithArrow
+              href="/icon.ico"
+              target="_blank"
+              className="mr-1 text-orange-500 hover:underline hover:underline-offset-2"
             >
-                image
+              image
             </LinkWithArrow>
-              out, learn <LinkWithArrow
-              href="https://en.wikipedia.org/wiki/Hypercube_graph" target="_blank"
-              className="mr-1 hover:underline hover:underline-offset-2 text-blue-violet-500"
+            out, learn{' '}
+            <LinkWithArrow
+              href="https://en.wikipedia.org/wiki/Hypercube_graph"
+              target="_blank"
+              className="mr-1 text-blue-violet-500 hover:underline hover:underline-offset-2"
             >
-                more
-            </LinkWithArrow> about hypercube graphs & here is the <LinkWithArrow
-              href="https://github.com/steadyfall/steadyfall.github.io/blob/main/hypercube/generate.py" target="_blank"
-              className="mr-1 hover:underline hover:underline-offset-2 dark:text-firefly-500 text-firefly-600"
+              more
+            </LinkWithArrow>{' '}
+            about hypercube graphs & here is the{' '}
+            <LinkWithArrow
+              href="https://github.com/steadyfall/steadyfall.github.io/blob/main/hypercube/generate.py"
+              target="_blank"
+              className="mr-1 text-firefly-600 hover:underline hover:underline-offset-2 dark:text-firefly-500"
             >
-                code
-            </LinkWithArrow> to generate it yourself.
+              code
+            </LinkWithArrow>{' '}
+            to generate it yourself.
           </p>
         </div>
       </BlurFade>
diff --git a/src/components/Education.tsx b/src/components/Education.tsx
index 38b9727..0965c58 100644
--- a/src/components/Education.tsx
+++ b/src/components/Education.tsx
@@ -1,6 +1,6 @@
-import { useMediaQuery } from '@/hooks/useMediaQuery';
-import LinkWithArrow from '@/components/ui/LinkWithArrow';
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
+import LinkWithArrow from '@/components/ui/LinkWithArrow';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { cn } from '@/lib/utils';
 
 export function Education() {
@@ -8,15 +8,19 @@ export function Education() {
   return (
     <section id="education" className="mb-12">
       <BlurFade delay={BLUR_FADE_DELAY * 7}>
-        <h2 className={cn(
-          'text-2xl md:text-3xl lg:text-4xl font-section mb-4',
-          'inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]'
-        )}>Education</h2>
+        <h2
+          className={cn(
+            'mb-4 font-section text-2xl md:text-3xl lg:text-4xl',
+            'inline-block bg-gradient-to-r from-[#434343] to-[#000000] bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-100',
+          )}
+        >
+          Education
+        </h2>
       </BlurFade>
       <BlurFade delay={BLUR_FADE_DELAY * 8}>
         <div className="flex items-center">
           <div className="relative flex-grow md:pl-12">
-            <div className={'bg-white aspect-square absolute left-[5px] rounded-lg'}>
+            <div className={'absolute left-[5px] aspect-square rounded-lg bg-white'}>
               {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
               <img
                 src="/images/uwaterlooLogo.png"
@@ -27,31 +31,47 @@ export function Education() {
               />
             </div>
             <div className={'pl-16 ' + (isDesktop && 'py-3')}>
-              <div className="flex flex-col md:items-start justify-between sm:flex-row mb-2">
+              <div className="mb-2 flex flex-col justify-between sm:flex-row md:items-start">
                 <div>
                   <LinkWithArrow
-                    href="https://uwaterloo.ca/" target="_blank"
-                    rel="noopener noreferrer" aria-label={'Link to University of Waterloo'}
+                    href="https://uwaterloo.ca/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label={'Link to University of Waterloo'}
                   >
-                    <h2 className="text-xl font-bold inline-flex items-center">
-                                            University of Waterloo
+                    <h2 className="inline-flex items-center text-xl font-bold">
+                      University of Waterloo
                     </h2>
                   </LinkWithArrow>
-                  <h3 className="text-lg font-semibold">Bachelor of Mathematics, Computational Mathematics Major</h3>
-                  {(!isDesktop) && <h3 className="text-gray-600 font-typewriter dark:text-gray-400">Sept 2022 - Present</h3>}
+                  <h3 className="text-lg font-semibold">
+                    Bachelor of Mathematics, Computational Mathematics Major
+                  </h3>
+                  {!isDesktop && (
+                    <h3 className="font-typewriter text-gray-600 dark:text-gray-400">
+                      Sept 2022 - Present
+                    </h3>
+                  )}
                 </div>
-                {isDesktop && (<h3 className="text-gray-600 font-typewriter dark:text-gray-400">Sept 2022 - Present</h3>)}
+                {isDesktop && (
+                  <h3 className="font-typewriter text-gray-600 dark:text-gray-400">
+                    Sept 2022 - Present
+                  </h3>
+                )}
               </div>
             </div>
           </div>
         </div>
-        <p className="text-gray-700 dark:text-gray-300 mt-1 py-0">
+        <p className="mt-1 py-0 text-gray-700 dark:text-gray-300">
           <LinkWithArrow
-            href="https://uwaterloo.ca/computational-mathematics/" target="_blank"
-            rel="noopener noreferrer" className="mr-0.5"
+            href="https://uwaterloo.ca/computational-mathematics/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mr-0.5"
           >
-                        Computational Mathematics
-          </LinkWithArrow> is a interdisplinary major that combines Mathematics, Statistics, Optimization and Computer Science, offered by the Faculty of Mathematics.
+            Computational Mathematics
+          </LinkWithArrow>{' '}
+          is a interdisplinary major that combines Mathematics, Statistics, Optimization and
+          Computer Science, offered by the Faculty of Mathematics.
           {/* TODO: Insert all courses using a recursive React component */}
         </p>
       </BlurFade>
diff --git a/src/components/Experiences.tsx b/src/components/Experiences.tsx
index 8b84e2f..f199ece 100644
--- a/src/components/Experiences.tsx
+++ b/src/components/Experiences.tsx
@@ -1,12 +1,14 @@
 'use client';
 
 import { useState } from 'react';
-import { ExperienceTileProps, ExperienceTile } from './Tiles/ExperienceTile';
+
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
 import { cn } from '@/lib/utils';
 
+import { ExperienceTileProps, ExperienceTile } from './Tiles/ExperienceTile';
+
 interface ExperiencesProps {
-    arr: ExperienceTileProps[];
+  arr: ExperienceTileProps[];
 }
 
 export function Experiences({ arr }: ExperiencesProps) {
@@ -15,18 +17,19 @@ export function Experiences({ arr }: ExperiencesProps) {
   return (
     <section id="experience" className="mb-12">
       <BlurFade delay={BLUR_FADE_DELAY * 5}>
-        <h2 className={cn(
-          'text-2xl md:text-3xl lg:text-4xl font-section mb-4',
-          'inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]'
-        )}>Experience</h2>
+        <h2
+          className={cn(
+            'mb-4 font-section text-2xl md:text-3xl lg:text-4xl',
+            'inline-block bg-gradient-to-r from-[#434343] to-[#000000] bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-100',
+          )}
+        >
+          Experience
+        </h2>
       </BlurFade>
       {experiences && experiences.length > 0 ? (
         <div className="space-y-6">
           {experiences.map((experience, index) => (
-            <BlurFade
-              key={index}
-              delay={BLUR_FADE_DELAY * 6 + index * 0.2}
-            >
+            <BlurFade key={index} delay={BLUR_FADE_DELAY * 6 + index * 0.2}>
               <ExperienceTile key={index} {...experience} />
             </BlurFade>
           ))}
@@ -36,4 +39,4 @@ export function Experiences({ arr }: ExperiencesProps) {
       )}
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 4aff6f2..1b229b5 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -4,31 +4,38 @@ import { cn } from '@/lib/utils';
 
 const Footer = () => {
   return (
-    <footer className={cn(
-      'py-12 text-gray-500 dark:text-gray-400'
-    )}>
-      <div className={cn(
-        'flex flex-col items-center justify-center sm:flex-row-reverse sm:justify-between',
-        'max-w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl'
-      )}>
-        <div className="flex justify-center md:justify-start space-x-4">
-          <LinkWithArrow 
-            href={personalDetails.githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
-            className="hover:underline hover:underline-offset-2 text-pink-500"
+    <footer className={cn('py-12 text-gray-500 dark:text-gray-400')}>
+      <div
+        className={cn(
+          'flex flex-col items-center justify-center sm:flex-row-reverse sm:justify-between',
+          'mx-auto max-w-full px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl',
+        )}
+      >
+        <div className="flex justify-center space-x-4 md:justify-start">
+          <LinkWithArrow
+            href={personalDetails.githubLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="GitHub"
+            className="text-pink-500 hover:underline hover:underline-offset-2"
           >
-              github
+            github
           </LinkWithArrow>
-          <LinkWithArrow 
-            href={personalDetails.linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
-            className="hover:underline hover:underline-offset-2 text-thunderbird-600"
+          <LinkWithArrow
+            href={personalDetails.linkedinLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="LinkedIn"
+            className="text-thunderbird-600 hover:underline hover:underline-offset-2"
           >
-              linkedin
+            linkedin
           </LinkWithArrow>
-          <LinkWithArrow 
-            href={'mailto:' + personalDetails.email} aria-label="Email"
-            className="hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
+          <LinkWithArrow
+            href={'mailto:' + personalDetails.email}
+            aria-label="Email"
+            className="text-azure-radiance-600 hover:underline hover:underline-offset-2" // text-orange-500"
           >
-              email
+            email
           </LinkWithArrow>
         </div>
         <div className="mt-6 sm:mt-0">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 99850d6..d8e674a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,41 +1,57 @@
+import copy from 'copy-to-clipboard';
 import { Copy, CopyCheck } from 'lucide-react';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
-import LinkWithArrow from '@/components/ui/LinkWithArrow';
+import { useEffect, useState } from 'react';
+
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
+import LinkWithArrow from '@/components/ui/LinkWithArrow';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 // import Image from 'next/image'
 
-import { useEffect, useState } from 'react';
-import copy from 'copy-to-clipboard';
-
 export type HeaderProps = {
-    name: string,
-    pronouns: string,
-    currentEducation: string,
-    currentJob?: string[],
-    basedFrom?: string,
-    githubLink: string,
-    linkedinLink: string,
-    email: string,
-    resumeFile: string,
-}
+  name: string;
+  pronouns: string;
+  currentEducation: string;
+  currentJob?: string[];
+  basedFrom?: string;
+  githubLink: string;
+  linkedinLink: string;
+  email: string;
+  resumeFile: string;
+};
 
-const Header = ({ name, pronouns, currentEducation, currentJob, basedFrom, githubLink, linkedinLink, email, resumeFile }: HeaderProps) => {
+const Header = ({
+  name,
+  pronouns,
+  currentEducation,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  currentJob,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  basedFrom,
+  githubLink,
+  linkedinLink,
+  email,
+  resumeFile,
+}: HeaderProps) => {
   const isDesktop = useMediaQuery('(min-width: 768px)');
   const [copied, setCopiedId] = useState<string>();
-  useEffect(() => { setTimeout(() => { setCopiedId(undefined); }, 3000); }, [copied]);
+  useEffect(() => {
+    setTimeout(() => {
+      setCopiedId(undefined);
+    }, 3000);
+  }, [copied]);
 
   return (
     <div className="container mx-auto mb-10">
-      <div className="flex flex-col md:flex-row items-center justify-between">
+      <div className="flex flex-col items-center justify-between md:flex-row">
         <BlurFade delay={BLUR_FADE_DELAY}>
-          {(!isDesktop) && (
-            <div className="flex-shrink-0 mb-4 md:mb-0 md:mr-8">
+          {!isDesktop && (
+            <div className="mb-4 flex-shrink-0 md:mb-0 md:mr-8">
               <img
                 src="/images/headshot.jpg"
                 alt="Profile"
                 width={200}
                 height={200}
-                className="rounded-lg size-36 md:size-48 lg:size-56 object-cover"
+                className="size-36 rounded-lg object-cover md:size-48 lg:size-56"
               />
             </div>
           )}
@@ -43,61 +59,72 @@ const Header = ({ name, pronouns, currentEducation, currentJob, basedFrom, githu
         <div className="flex-grow text-center md:text-left">
           <BlurFade delay={BLUR_FADE_DELAY}>
             <div className="flex items-center justify-center md:justify-start">
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mr-4">{name}</h1>
+              <h1 className="mr-4 text-4xl font-bold md:text-5xl lg:text-6xl">{name}</h1>
             </div>
           </BlurFade>
-          <div className="flex justify-center md:justify-start mt-4 space-x-4">
+          <div className="mt-4 flex justify-center space-x-4 md:justify-start">
             <BlurFade delay={BLUR_FADE_DELAY}>
-              <LinkWithArrow 
-                href={githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
-                className="hover:underline hover:underline-offset-2 text-pink-500"
+              <LinkWithArrow
+                href={githubLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="GitHub"
+                className="text-pink-500 hover:underline hover:underline-offset-2"
               >
-                                github
+                github
               </LinkWithArrow>
             </BlurFade>
             <BlurFade delay={BLUR_FADE_DELAY}>
-              <LinkWithArrow 
-                href={linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
-                className="hover:underline hover:underline-offset-2 text-thunderbird-600"
+              <LinkWithArrow
+                href={linkedinLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="LinkedIn"
+                className="text-thunderbird-600 hover:underline hover:underline-offset-2"
               >
-                                linkedin
+                linkedin
               </LinkWithArrow>
             </BlurFade>
             <BlurFade delay={BLUR_FADE_DELAY}>
-              <LinkWithArrow 
-                href={'mailto:' + email} aria-label="Email"
-                className="hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
+              <LinkWithArrow
+                href={'mailto:' + email}
+                aria-label="Email"
+                className="text-azure-radiance-600 hover:underline hover:underline-offset-2" // text-orange-500"
               >
-                                email
+                email
               </LinkWithArrow>
             </BlurFade>
             <BlurFade delay={BLUR_FADE_DELAY}>
-              <LinkWithArrow 
-                href={'/' + resumeFile} target="_blank" aria-label="Resume"
-                className="hover:underline hover:underline-offset-2 text-neon-green-500 dark:text-neon-green-400"
+              <LinkWithArrow
+                href={'/' + resumeFile}
+                target="_blank"
+                aria-label="Resume"
+                className="text-neon-green-500 hover:underline hover:underline-offset-2 dark:text-neon-green-400"
               >
-                                resume
+                resume
               </LinkWithArrow>
             </BlurFade>
           </div>
           <div className="mt-4 text-sm md:text-base lg:text-lg">
-            {pronouns && (<BlurFade delay={BLUR_FADE_DELAY}>
-              <p className="italic text-xs md:text-sm lg:text-base">{pronouns}</p>
-            </BlurFade>)}
-            {currentEducation && (<BlurFade delay={BLUR_FADE_DELAY}>
-              <p>{currentEducation}</p>
-            </BlurFade>)}
+            {pronouns && (
+              <BlurFade delay={BLUR_FADE_DELAY}>
+                <p className="text-xs italic md:text-sm lg:text-base">{pronouns}</p>
+              </BlurFade>
+            )}
+            {currentEducation && (
+              <BlurFade delay={BLUR_FADE_DELAY}>
+                <p>{currentEducation}</p>
+              </BlurFade>
+            )}
             <BlurFade delay={BLUR_FADE_DELAY}>
               <div className="inline-flex">
                 <p className="font-typewriter">
-                  {email.split('').map(
-                    (char) => {
-                      return (char === '@') ? '[at]' : char;
-                    }
-                  )}
+                  {email.split('').map((char) => {
+                    return char === '@' ? '[at]' : char;
+                  })}
                 </p>
                 <button
-                  className="ml-3 text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white cursor-pointer"
+                  className="ml-3 cursor-pointer text-slate-600 hover:text-black dark:text-slate-300 dark:hover:text-white"
                   onClick={async () => {
                     if ('clipboard' in navigator) {
                       await navigator.clipboard.writeText(email);
@@ -107,25 +134,25 @@ const Header = ({ name, pronouns, currentEducation, currentJob, basedFrom, githu
                     setCopiedId('copied-email');
                   }}
                 >
-                  {
-                    copied === 'copied-email' 
-                      ? <CopyCheck className="w-4 h-4 md:w-5 md:h-5"/> 
-                      : <Copy className="w-4 h-4 md:w-5 md:h-5"/>
-                  }
+                  {copied === 'copied-email' ? (
+                    <CopyCheck className="h-4 w-4 md:h-5 md:w-5" />
+                  ) : (
+                    <Copy className="h-4 w-4 md:h-5 md:w-5" />
+                  )}
                 </button>
               </div>
             </BlurFade>
           </div>
         </div>
         <BlurFade delay={BLUR_FADE_DELAY} inView={true}>
-          {(isDesktop) && (
+          {isDesktop && (
             <div className="flex-shrink-0">
               <img
                 src="/images/headshot.jpg"
                 alt="Profile"
                 width={200}
                 height={200}
-                className="rounded-lg size-36 md:size-48 lg:size-56 object-cover"
+                className="size-36 rounded-lg object-cover md:size-48 lg:size-56"
               />
             </div>
           )}
diff --git a/src/components/Miscellaneous.tsx b/src/components/Miscellaneous.tsx
index 4ccb2b3..6485ba5 100644
--- a/src/components/Miscellaneous.tsx
+++ b/src/components/Miscellaneous.tsx
@@ -1,8 +1,8 @@
 const misc = () => {
   return (
     <section id="misc" className="mb-12">
-      <h2 className="text-2xl font-bold mb-4">Misc.</h2>
-      <ul className="list-disc list-inside text-gray-700 dark:text-gray-300">
+      <h2 className="mb-4 text-2xl font-bold">Misc.</h2>
+      <ul className="list-inside list-disc text-gray-700 dark:text-gray-300">
         <li>Winner of MSU Hackathon 2023</li>
         <li>Volunteer coding instructor for local high school students</li>
         <li>Avid rock climber and nature photographer</li>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c29e6be..8931b97 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,24 +1,44 @@
 'use client';
 
+import Link from 'next/link';
+
+import HoverHighlight from '@/components/ui/HoverHighlighter';
 import { cn } from '@/lib/utils';
+
 import ThemeSwitch from './ThemeSwitch';
-import HoverHighlight from '@/components/ui/HoverHighlighter';
-import Link from 'next/link';
 
 const Navbar = () => {
   // const completion = useReadingProgress();
 
   return (
     <header className="sticky top-0 z-50 py-6 backdrop-blur-xl">
-      <nav className={cn(
-        'flex items-center justify-between',
-        'max-w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl'
-      )}>
+      <nav
+        className={cn(
+          'flex items-center justify-between',
+          'mx-auto max-w-full px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl',
+        )}
+      >
         <ul className="flex gap-4 sm:gap-8">
-          <li><Link href="/"><HoverHighlight text="home" /></Link></li>
-          <li><Link href="/#experience"><HoverHighlight text="experience"/></Link></li>
-          <li><Link href="/#projects"><HoverHighlight text="projects"/></Link></li>
-          <li><Link href="/posts"><HoverHighlight text="blog"/></Link></li>
+          <li>
+            <Link href="/">
+              <HoverHighlight text="home" />
+            </Link>
+          </li>
+          <li>
+            <Link href="/#experience">
+              <HoverHighlight text="experience" />
+            </Link>
+          </li>
+          <li>
+            <Link href="/#projects">
+              <HoverHighlight text="projects" />
+            </Link>
+          </li>
+          <li>
+            <Link href="/posts">
+              <HoverHighlight text="blog" />
+            </Link>
+          </li>
         </ul>
         <div className="flex gap-0 sm:gap-4">
           <ThemeSwitch />
@@ -28,4 +48,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
\ No newline at end of file
+export default Navbar;
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index da8b56e..7f6c462 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -1,10 +1,12 @@
 import { useState } from 'react';
-import { ProjectTile, ProjectTileProps } from './Tiles/ProjectTile';
+
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
 import { cn } from '@/lib/utils';
 
+import { ProjectTile, ProjectTileProps } from './Tiles/ProjectTile';
+
 interface ProjectProps {
-    arr: ProjectTileProps[];
+  arr: ProjectTileProps[];
 }
 
 export function Projects({ arr }: ProjectProps) {
@@ -13,30 +15,29 @@ export function Projects({ arr }: ProjectProps) {
   return (
     <section id="projects" className="mb-12">
       <BlurFade delay={BLUR_FADE_DELAY * 11}>
-        <h2 className={cn(
-          'text-2xl md:text-3xl lg:text-4xl font-section mb-4',
-          'inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]'
-        )}>Projects</h2>
+        <h2
+          className={cn(
+            'mb-4 font-section text-2xl md:text-3xl lg:text-4xl',
+            'inline-block bg-gradient-to-r from-[#434343] to-[#000000] bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-100',
+          )}
+        >
+          Projects
+        </h2>
       </BlurFade>
       {projects && projects.length > 0 ? (
         <div className="space-y-5">
-          {
-            projects.map((project, index) => {
-              project.delayTime = BLUR_FADE_DELAY * 12 + index * 0.2;
-              return (
-                <BlurFade
-                  key={index}
-                  delay={BLUR_FADE_DELAY * 12 + index * 0.2}
-                >
-                  <ProjectTile key={index} {...project} />
-                </BlurFade>
-              );
-            })
-          }
+          {projects.map((project, index) => {
+            project.delayTime = BLUR_FADE_DELAY * 12 + index * 0.2;
+            return (
+              <BlurFade key={index} delay={BLUR_FADE_DELAY * 12 + index * 0.2}>
+                <ProjectTile key={index} {...project} />
+              </BlurFade>
+            );
+          })}
         </div>
       ) : (
         <p>No projects to display.</p>
       )}
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx
index 00142da..fc81c0e 100644
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -1,17 +1,18 @@
-import { Badge } from '@/components/ui/Badge';
+import { Icon } from '@iconify/react';
 import { useState } from 'react';
+
+import { Badge } from '@/components/ui/Badge';
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
-import { cn } from '@/lib/utils';
-import { Icon } from '@iconify/react';
 import { techIcons } from '@/lib/techIcons';
+import { cn } from '@/lib/utils';
 
 interface SkillsProps {
-    arr: {
-        languages: string[];
-        frameworksAndLibraries: string[];
-        databases?: string[];
-        tools: string[];
-    };
+  arr: {
+    languages: string[];
+    frameworksAndLibraries: string[];
+    databases?: string[];
+    tools: string[];
+  };
 }
 
 export function Skills({ arr }: SkillsProps) {
@@ -20,41 +21,31 @@ export function Skills({ arr }: SkillsProps) {
   const result = Object.entries(skills).map(([key, value], idx) => {
     return (
       <div className="mb-4" key={idx} suppressHydrationWarning>
-        <div className="text-xl mb-2 font-bold">
+        <div className="mb-2 text-xl font-bold">
           {
-            <BlurFade
-              delay={BLUR_FADE_DELAY * 10}
-            >
-              {(key === 'frameworksAndLibraries') 
-                ? (
-                  ('databases' in skills) 
-                    ? 'Frameworks & Libraries' 
-                    : 'Frameworks, Libraries & Databases'
-                )
-                : key.charAt(0).toUpperCase() + key.slice(1)}:
+            <BlurFade delay={BLUR_FADE_DELAY * 10}>
+              {key === 'frameworksAndLibraries'
+                ? 'databases' in skills
+                  ? 'Frameworks & Libraries'
+                  : 'Frameworks, Libraries & Databases'
+                : key.charAt(0).toUpperCase() + key.slice(1)}
+              :
             </BlurFade>
           }
         </div>
         <div className="flex flex-wrap gap-1">
-          {
-            value.map((skillText, index) => (
-              <BlurFade
-                key={index}
-                delay={BLUR_FADE_DELAY * 10 + index * 0.05}
-              >
-                <Badge key={index}>
-                  {
-                    techIcons?.[skillText] &&
-                                        <span className="mr-2">{
-                                          <Icon icon={techIcons[skillText]} 
-                                            inline={true} width={18} height={18}/>
-                                        }</span>
-                  }
-                  <span>{skillText}</span>
-                </Badge>
-              </BlurFade>
-            ))
-          }
+          {value.map((skillText, index) => (
+            <BlurFade key={index} delay={BLUR_FADE_DELAY * 10 + index * 0.05}>
+              <Badge key={index}>
+                {techIcons?.[skillText] && (
+                  <span className="mr-2">
+                    {<Icon icon={techIcons[skillText]} inline={true} width={18} height={18} />}
+                  </span>
+                )}
+                <span>{skillText}</span>
+              </Badge>
+            </BlurFade>
+          ))}
         </div>
       </div>
     );
@@ -62,14 +53,16 @@ export function Skills({ arr }: SkillsProps) {
   return (
     <section id="skills" className="mb-12">
       <BlurFade delay={BLUR_FADE_DELAY * 9}>
-        <h2 className={cn(
-          'text-2xl md:text-3xl lg:text-4xl font-section mb-4',
-          'inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]'
-        )}>Skills</h2>
+        <h2
+          className={cn(
+            'mb-4 font-section text-2xl md:text-3xl lg:text-4xl',
+            'inline-block bg-gradient-to-r from-[#434343] to-[#000000] bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-100',
+          )}
+        >
+          Skills
+        </h2>
       </BlurFade>
-      {skills ? result : (
-        <p>No skills to display.</p>
-      )}
+      {skills ? result : <p>No skills to display.</p>}
     </section>
   );
 }
diff --git a/src/components/SmoothScrollProvider.tsx b/src/components/SmoothScrollProvider.tsx
index 8fb043c..cdc85e7 100644
--- a/src/components/SmoothScrollProvider.tsx
+++ b/src/components/SmoothScrollProvider.tsx
@@ -2,7 +2,13 @@
 
 import { useSmoothScroll } from '@/hooks/useSmoothScroll';
 
-export function SmoothScrollProvider({ children, offset = 0 }: { children: React.ReactNode, offset?: number }) {
+export function SmoothScrollProvider({
+  children,
+  offset = 0,
+}: {
+  children: React.ReactNode;
+  offset?: number;
+}) {
   useSmoothScroll(offset);
   return <>{children}</>;
 }
diff --git a/src/components/ThemeSwitch.tsx b/src/components/ThemeSwitch.tsx
index 84eb48a..c15c5bf 100644
--- a/src/components/ThemeSwitch.tsx
+++ b/src/components/ThemeSwitch.tsx
@@ -1,15 +1,15 @@
 'use client';
 
 import { Moon, Sun } from 'lucide-react';
-import { useState, useEffect } from 'react';
 import { useTheme } from 'next-themes';
+import { useState, useEffect } from 'react';
 // import Image from "next/image";
 
 export default function ThemeSwitch() {
   const [mounted, setMounted] = useState(false);
   const { setTheme, resolvedTheme } = useTheme();
 
-  useEffect(() =>  setMounted(true), []);
+  useEffect(() => setMounted(true), []);
 
   if (!mounted) return null;
 
@@ -18,12 +18,13 @@ export default function ThemeSwitch() {
       className="cursor-pointer"
       onClick={() => {
         setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
-      }}>
-      {
-        resolvedTheme === 'dark' 
-          ? <Sun className="w-4 h-4 md:w-5 md:h-5 text-orange-300"/> 
-          : <Moon className="w-4 h-4 md:w-5 md:h-5 text-indigo-500"/>
-      }
+      }}
+    >
+      {resolvedTheme === 'dark' ? (
+        <Sun className="h-4 w-4 text-orange-300 md:h-5 md:w-5" />
+      ) : (
+        <Moon className="h-4 w-4 text-indigo-500 md:h-5 md:w-5" />
+      )}
     </button>
   );
 }
diff --git a/src/components/Tiles/ExperienceTile.tsx b/src/components/Tiles/ExperienceTile.tsx
index af344c1..e5314c0 100644
--- a/src/components/Tiles/ExperienceTile.tsx
+++ b/src/components/Tiles/ExperienceTile.tsx
@@ -3,26 +3,33 @@ import { useMediaQuery } from '@/hooks/useMediaQuery';
 // import Image from 'next/image';
 
 export type ExperienceTileProps = {
-  companyLogo: string
-  companyName: string
-  companyLink: string
-  position: string
-  period: string
-  responsibilities?: string[]
-}
-
-
+  companyLogo: string;
+  companyName: string;
+  companyLink: string;
+  position: string;
+  period: string;
+  responsibilities?: string[];
+};
 
-export function ExperienceTile({ companyLogo, companyName, companyLink, position, period, responsibilities }: ExperienceTileProps) {
+export function ExperienceTile({
+  companyLogo,
+  companyName,
+  companyLink,
+  position,
+  period,
+  responsibilities,
+}: ExperienceTileProps) {
   const isDesktop = useMediaQuery('(min-width: 768px)');
   return (
-    <div className={
-      (
-        !(responsibilities && responsibilities.length > 0) && !isDesktop ? '-mb-6' : 'mb-6'
-      ) + ' ' + 'flex items-center'
-    }>
+    <div
+      className={
+        (!(responsibilities && responsibilities.length > 0) && !isDesktop ? '-mb-6' : 'mb-6') +
+        ' ' +
+        'flex items-center'
+      }
+    >
       <div className="relative flex-grow md:pl-12">
-        <div className="bg-white aspect-square absolute left-[5px] top-3 rounded-lg">
+        <div className="absolute left-[5px] top-3 aspect-square rounded-lg bg-white">
           {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
           <img
             src={companyLogo}
@@ -32,33 +39,37 @@ export function ExperienceTile({ companyLogo, companyName, companyLink, position
             className="rounded-md"
           />
         </div>
-        <div className="pl-16 py-3"> 
-          <div className="flex flex-col md:items-start justify-between sm:flex-row mb-4">
+        <div className="py-3 pl-16">
+          <div className="mb-4 flex flex-col justify-between sm:flex-row md:items-start">
             <div>
               <h2 className="text-xl font-bold">{position}</h2>
-              <LinkWithArrow 
-                href={companyLink} target="_blank"
-                rel="noopener noreferrer" aria-label={`Link to ${companyName}`}
+              <LinkWithArrow
+                href={companyLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={`Link to ${companyName}`}
               >
-                <h3 className="text-lg font-semibold">
-                  {companyName}
-                </h3>
+                <h3 className="text-lg font-semibold">{companyName}</h3>
               </LinkWithArrow>
-              {(!isDesktop) && <h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>}
+              {!isDesktop && (
+                <h3 className="font-typewriter text-gray-600 dark:text-gray-400">{period}</h3>
+              )}
             </div>
-            {isDesktop && (<h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>)}
+            {isDesktop && (
+              <h3 className="font-typewriter text-gray-600 dark:text-gray-400">{period}</h3>
+            )}
           </div>
-          {responsibilities && responsibilities.length > 0 &&
-                  <div className="mt-4">
-                    <ul className="list-inside text-gray-700 dark:text-gray-300 space-y-1">
-                      {responsibilities.map((responsibility, index) => (
-                        <li key={index}>- {responsibility}</li>
-                      ))}
-                    </ul>
-                  </div>
-          }
+          {responsibilities && responsibilities.length > 0 && (
+            <div className="mt-4">
+              <ul className="list-inside space-y-1 text-gray-700 dark:text-gray-300">
+                {responsibilities.map((responsibility, index) => (
+                  <li key={index}>- {responsibility}</li>
+                ))}
+              </ul>
+            </div>
+          )}
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Tiles/ProjectTile.tsx b/src/components/Tiles/ProjectTile.tsx
index f99e76f..d3e85dc 100644
--- a/src/components/Tiles/ProjectTile.tsx
+++ b/src/components/Tiles/ProjectTile.tsx
@@ -1,44 +1,58 @@
 import { Icon } from '@iconify/react';
-import { techIcons } from '@/lib/techIcons';
+
 import { Badge } from '@/components/ui/Badge';
 import BlurFade from '@/components/ui/BlurFade';
 import LinkWithArrow from '@/components/ui/LinkWithArrow';
+import { techIcons } from '@/lib/techIcons';
 
 type ProjectTileDetailProps = {
-  title: string
-  description: string
-  repo: boolean,
-  repoUrl?: string,
-  live: boolean,
-  liveUrl?: string,
-  techStack: string[]
-}
+  title: string;
+  description: string;
+  repo: boolean;
+  repoUrl?: string;
+  live: boolean;
+  liveUrl?: string;
+  techStack: string[];
+};
 
 export type ProjectTileProps = ProjectTileDetailProps & {
   delayTime?: number;
 };
 
-export function ProjectTile({ delayTime, title, description, repo, repoUrl, live, liveUrl, techStack }: ProjectTileProps) {
+export function ProjectTile({
+  delayTime,
+  title,
+  description,
+  repo,
+  repoUrl,
+  live,
+  liveUrl,
+  techStack,
+}: ProjectTileProps) {
   // const isDesktop = useMediaQuery('(min-width: 768px)')
   return (
     <div className="items-center">
-      <div className="flex flex-col md:items-start justify-between sm:flex-row mb-2">
+      <div className="mb-2 flex flex-col justify-between sm:flex-row md:items-start">
         <h3 className="text-xl font-semibold">{title}</h3>
-        <div className="space-x-2 justify-end">
+        <div className="justify-end space-x-2">
           {repo && (
             <LinkWithArrow
-              href={repoUrl} target="_blank"
-              rel="noopener noreferrer" aria-label={`Repository link for ${title}`}
-              className="hover:underline hover:underline-offset-2 text-pink-500"
+              href={repoUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`Repository link for ${title}`}
+              className="text-pink-500 hover:underline hover:underline-offset-2"
             >
               repo
             </LinkWithArrow>
           )}
           {live && (
             <LinkWithArrow
-              href={liveUrl} target="_blank"
-              rel="noopener noreferrer" aria-label={`Live link for ${title}`}
-              className="hover:underline hover:underline-offset-2 text-midnight-blue-500"
+              href={liveUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`Live link for ${title}`}
+              className="text-midnight-blue-500 hover:underline hover:underline-offset-2"
             >
               link
             </LinkWithArrow>
@@ -48,36 +62,31 @@ export function ProjectTile({ delayTime, title, description, repo, repoUrl, live
       <p className="text-gray-700 dark:text-gray-300">{description}</p>
       {techStack && techStack.length > 0 && (
         <div className="mt-3 flex flex-wrap gap-1">
-          {techStack.map((skillText, index) => (
+          {techStack.map((skillText, index) =>
             delayTime ? (
-              <BlurFade
-                key={index}
-                delay={delayTime + index * 0.05}
-              >
+              <BlurFade key={index} delay={delayTime + index * 0.05}>
                 <Badge key={index} variant={'secondary'}>
-                  {
-                    techIcons?.[skillText] &&
-                        <span className="mr-2">{
-                          <Icon icon={techIcons[skillText]} inline={true} width={18} height={18}/>
-                        }</span>
-                  }
+                  {techIcons?.[skillText] && (
+                    <span className="mr-2">
+                      {<Icon icon={techIcons[skillText]} inline={true} width={18} height={18} />}
+                    </span>
+                  )}
                   <span>{skillText}</span>
                 </Badge>
               </BlurFade>
             ) : (
               <Badge key={index} variant={'secondary'}>
-                {
-                  techIcons?.[skillText] &&
-                        <span className="mr-2">{
-                          <Icon icon={techIcons[skillText]} inline={true} width={18} height={18}/>
-                        }</span>
-                }
+                {techIcons?.[skillText] && (
+                  <span className="mr-2">
+                    {<Icon icon={techIcons[skillText]} inline={true} width={18} height={18} />}
+                  </span>
+                )}
                 <span>{skillText}</span>
               </Badge>
-            )
-          ))}
+            ),
+          )}
         </div>
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/BackButton.tsx b/src/components/ui/BackButton.tsx
index a91e77e..0d2aa4f 100644
--- a/src/components/ui/BackButton.tsx
+++ b/src/components/ui/BackButton.tsx
@@ -1,16 +1,17 @@
 'use client';
 
-import { cn } from '@/lib/utils';
 import { useRouter } from 'next/navigation';
 
+import { cn } from '@/lib/utils';
 
-export default function BackButton({ className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+export default function BackButton({
+  className,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   const router = useRouter();
 
   const hasHistory =
-    (typeof window !== 'undefined' &&
-      window.history?.length &&
-      window.history.length > 1) ||
+    (typeof window !== 'undefined' && window.history?.length && window.history.length > 1) ||
     typeof window === 'undefined';
 
   if (!hasHistory) {
@@ -19,15 +20,13 @@ export default function BackButton({ className, ...props }: React.ButtonHTMLAttr
 
   return (
     <button
-      className={
-        cn(
-          'text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white',
-          'cursor-pointer hover:underline hover:underline-offset-4',
-          className
-        )
-      }
+      className={cn(
+        'text-slate-600 hover:text-black dark:text-slate-300 dark:hover:text-white',
+        'cursor-pointer hover:underline hover:underline-offset-4',
+        className,
+      )}
       onClick={router.back}
       {...props}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
index e1ae16f..9f51d34 100644
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -18,7 +18,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: 'default',
     },
-  }
+  },
 );
 
 export interface BadgeProps
@@ -26,9 +26,7 @@ export interface BadgeProps
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
-export { Badge, badgeVariants };
\ No newline at end of file
+export { Badge, badgeVariants };
diff --git a/src/components/ui/BlurFade.tsx b/src/components/ui/BlurFade.tsx
index 0ab0fef..5003ce7 100644
--- a/src/components/ui/BlurFade.tsx
+++ b/src/components/ui/BlurFade.tsx
@@ -4,7 +4,11 @@ import { AnimatePresence, motion, useInView, Variants } from 'framer-motion';
 import { useRef } from 'react';
 
 type MarginValue = `${number}${'px' | '%'}`;
-type MarginType = MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;
+type MarginType =
+  | MarginValue
+  | `${MarginValue} ${MarginValue}`
+  | `${MarginValue} ${MarginValue} ${MarginValue}`
+  | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;
 
 interface BlurFadeProps {
   children: React.ReactNode;
diff --git a/src/components/ui/Highlighter.tsx b/src/components/ui/Highlighter.tsx
index f4513f8..af02f99 100644
--- a/src/components/ui/Highlighter.tsx
+++ b/src/components/ui/Highlighter.tsx
@@ -1,8 +1,16 @@
 import { cn } from '@/lib/utils';
 
 interface HighlightProps {
-    text: string
-    color?: 'cyan' | 'pink' | 'violet-web' | 'slate-blue' | 'red' | 'yellow' | 'lemon' | 'laser-lemon'
+  text: string;
+  color?:
+    | 'cyan'
+    | 'pink'
+    | 'violet-web'
+    | 'slate-blue'
+    | 'red'
+    | 'yellow'
+    | 'lemon'
+    | 'laser-lemon';
 }
 
 /**
@@ -18,22 +26,16 @@ export default function Highlight({ text, color = 'yellow' }: HighlightProps) {
 
   if (color === 'cyan') {
     colorClass = 'bg-cyan-200 dark:bg-cyan-500/30';
-  }
-  else if (color === 'pink' || color === 'violet-web') {
+  } else if (color === 'pink' || color === 'violet-web') {
     colorClass = 'bg-[#ffa7ee] dark:bg-[#f73ed2]/30';
-  }
-  else if (color === 'slate-blue') {
+  } else if (color === 'slate-blue') {
     colorClass = 'bg-[#a0a8ff] dark:bg-[#675bf9]/50';
-  }
-  else if (color === 'red') {
+  } else if (color === 'red') {
     colorClass = 'bg-[#ffa0a0] dark:bg-[#f83b3b]/50';
-  }
-  else {
+  } else {
     // This covers "yellow", "lemon", "laser-lemon", and the default case
     colorClass = 'bg-[#ffff77] dark:bg-[#fce913]/30';
   }
 
-  return (
-    <span className={cn('px-1 rounded', colorClass)}>{text}</span>
-  );
+  return <span className={cn('rounded px-1', colorClass)}>{text}</span>;
 }
diff --git a/src/components/ui/HoverHighlighter.tsx b/src/components/ui/HoverHighlighter.tsx
index dc1b2b2..6465b40 100644
--- a/src/components/ui/HoverHighlighter.tsx
+++ b/src/components/ui/HoverHighlighter.tsx
@@ -1,8 +1,17 @@
 import { cn } from '@/lib/utils';
 
 interface HoverHighlightProps {
-    text: string
-    color?: 'cyan' | 'pink' | 'violet-web' | 'slate-blue' | 'red' | 'yellow' | 'lemon' | 'laser-lemon' | 'background'
+  text: string;
+  color?:
+    | 'cyan'
+    | 'pink'
+    | 'violet-web'
+    | 'slate-blue'
+    | 'red'
+    | 'yellow'
+    | 'lemon'
+    | 'laser-lemon'
+    | 'background';
 }
 
 /**
@@ -17,36 +26,35 @@ export default function HoverHighlight({ text, color = 'background' }: HoverHigh
 
   if (color === 'cyan') {
     colorClass = 'bg-cyan-200 dark:bg-cyan-500/30';
-  }
-  else if (color === 'pink' || color === 'violet-web') {
+  } else if (color === 'pink' || color === 'violet-web') {
     colorClass = 'bg-[#ffa7ee] dark:bg-[#f73ed2]/30';
-  }
-  else if (color === 'slate-blue') {
+  } else if (color === 'slate-blue') {
     colorClass = 'bg-[#a0a8ff] dark:bg-[#675bf9]/50';
-  }
-  else if (color === 'red') {
+  } else if (color === 'red') {
     colorClass = 'bg-[#ffa0a0] dark:bg-[#f83b3b]/50';
-  }
-  else if (color === 'background') {
+  } else if (color === 'background') {
     colorClass = 'dark:bg-neutral-100 bg-neutral-950';
-  }
-  else {
+  } else {
     // This covers "yellow", "lemon", "laser-lemon", and the default case
     colorClass = 'bg-[#ffff77] dark:bg-[#fce913]/30';
   }
 
   return (
-    <span className="relative inline-block group">
-      <span 
+    <span className="group relative inline-block">
+      <span
         className={cn(
           colorClass,
-          'absolute inset-0 transform scale-x-0 origin-left group-hover:scale-x-100 transition-transform duration-300 ease-in-out'
+          'absolute inset-0 origin-left scale-x-0 transform transition-transform duration-300 ease-in-out group-hover:scale-x-100',
         )}
       ></span>
-      <span className={cn(
-        'relative z-1',
-        color === 'background' ? 'group-hover:dark:text-gray-800 group-hover:text-gray-200' : ''
-      )}>{text}</span>
+      <span
+        className={cn(
+          'z-1 relative',
+          color === 'background' ? 'group-hover:text-gray-200 group-hover:dark:text-gray-800' : '',
+        )}
+      >
+        {text}
+      </span>
     </span>
   );
 }
diff --git a/src/components/ui/LinkWithArrow.tsx b/src/components/ui/LinkWithArrow.tsx
index 5cb3cd6..b63369f 100644
--- a/src/components/ui/LinkWithArrow.tsx
+++ b/src/components/ui/LinkWithArrow.tsx
@@ -1,24 +1,25 @@
 'use client';
 
-import { cn } from '@/lib/utils';
 import { ArrowUpRight } from 'lucide-react';
 
+import { cn } from '@/lib/utils';
 
-export default function LinkWithArrow({ className, href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+export default function LinkWithArrow({
+  className,
+  href,
+  children,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
   return (
-    <a
-      className={
-        cn('group inline-flex items-center', className)
-      }
-      href={href}
-      {...props}
-    >
+    <a className={cn('group inline-flex items-center', className)} href={href} {...props}>
       {children}
-      <ArrowUpRight className={cn(
-        'w-4 h-4 md:w-5 md:h-5',
-        'transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1',
-        'flex-shrink-0'
-      )}/>
+      <ArrowUpRight
+        className={cn(
+          'h-4 w-4 md:h-5 md:w-5',
+          'transition-transform duration-300 group-hover:-translate-y-1 group-hover:translate-x-1',
+          'flex-shrink-0',
+        )}
+      />
     </a>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
index 5c7abff..aea1352 100644
--- a/src/components/ui/Loader.tsx
+++ b/src/components/ui/Loader.tsx
@@ -1,15 +1,29 @@
 export default function Loading() {
   return (
-    <main className="flex flex-col items-center container mt-[28vh] z-1">
-      <svg className="size-7 sm:size-8 md:size-9 lg:size-10 text-gray-300 animate-spin" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"
-        width="24" height="24">
+    <main className="z-1 container mt-[28vh] flex flex-col items-center">
+      <svg
+        className="size-7 animate-spin text-gray-300 sm:size-8 md:size-9 lg:size-10"
+        viewBox="0 0 64 64"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+      >
         <path
           d="M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z"
-          stroke="currentColor" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"></path>
+          stroke="currentColor"
+          strokeWidth="5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        ></path>
         <path
           d="M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762"
-          stroke="currentColor" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" className="text-gray-900">
-        </path>
+          stroke="currentColor"
+          strokeWidth="5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-gray-900"
+        ></path>
       </svg>
     </main>
   );
diff --git a/src/data/resume.ts b/src/data/resume.ts
index 17846bf..0250a7c 100644
--- a/src/data/resume.ts
+++ b/src/data/resume.ts
@@ -3,7 +3,8 @@ export const detailsForMetadata = {
   title: 'Himank Dave',
   name: 'Himank Dave',
   ogImage: '/icon.ico',
-  description: 'A sleek, minimalistic and dynamic personal website built with React, TailwindCSS, Next.js and Framer Motion.',
+  description:
+    'A sleek, minimalistic and dynamic personal website built with React, TailwindCSS, Next.js and Framer Motion.',
 };
 
 export const personalDetails = {
@@ -36,7 +37,7 @@ export const experiences = [
       'Developed an ETL pipeline for unstructured hierarchical data with Flask, supporting interactive visualizations via React and D3.js.',
       'Built a self-hosted uptime monitoring tool using Node.js, Axios for web & database monitoring, Redis for data storage, and Socket.IO for real-time websocket communication, with VPS deployment via Docker.',
       'Designed multiple CI/CD pipelines using Github Actions to automate unit and integration testing with Jest and Cypress, deployment, and monitoring processes for the uptime monitoring tool.',
-      'Engineered a domain-specific chatbot with 85% accuracy, leveraging a PDF-trained algorithm, custom model trainer, and OpenAI\'s NLP API for multilingual responses.',
+      "Engineered a domain-specific chatbot with 85% accuracy, leveraging a PDF-trained algorithm, custom model trainer, and OpenAI's NLP API for multilingual responses.",
     ],
   },
   {
@@ -58,7 +59,8 @@ export const experiences = [
 export const projects = [
   {
     title: 'Trivivo',
-    description: 'Crafted a feature-rich, dynamic quiz game platform with progressive difficulty levels, real-time analytics, and comprehensive admin tools, complemented by a secure API for question management and user engagement tracking.',
+    description:
+      'Crafted a feature-rich, dynamic quiz game platform with progressive difficulty levels, real-time analytics, and comprehensive admin tools, complemented by a secure API for question management and user engagement tracking.',
     repo: true,
     repoUrl: 'https://github.com/steadyfall/wwbm-webapp',
     live: false,
@@ -66,7 +68,8 @@ export const projects = [
   },
   {
     title: 'SpectraSVD',
-    description: 'Designed and deployed an advanced image compression algorithm achieving 25%+ size reduction, complemented by a real-time interactive web application for demonstrating compression quality and efficiency.',
+    description:
+      'Designed and deployed an advanced image compression algorithm achieving 25%+ size reduction, complemented by a real-time interactive web application for demonstrating compression quality and efficiency.',
     repo: true,
     repoUrl: 'https://github.com/steadyfall/svd-compression',
     live: true,
@@ -75,23 +78,26 @@ export const projects = [
   },
   {
     title: 'Personal Website',
-    description: 'Built a modern, responsive portfolio website with fluid animations, architected as a customizable template.',
+    description:
+      'Built a modern, responsive portfolio website with fluid animations, architected as a customizable template.',
     repo: true,
     repoUrl: 'https://github.com/steadyfall/steadyfall.github.io.git',
     live: true,
     liveUrl: 'https://steadyfall.github.io',
-    techStack: ['TypeScript', 'React', 'TailwindCSS', 'Next.js', 'Framer Motion','Node.js'],
+    techStack: ['TypeScript', 'React', 'TailwindCSS', 'Next.js', 'Framer Motion', 'Node.js'],
   },
   {
     title: 'Chess (CS246 Final Project)',
-    description: 'Developed a C++ chess engine with innovative multi-player variants and AI capabilities, employing advanced software design patterns and rigorous testing methodologies in a Linux environment.',
+    description:
+      'Developed a C++ chess engine with innovative multi-player variants and AI capabilities, employing advanced software design patterns and rigorous testing methodologies in a Linux environment.',
     repo: false,
     live: false,
     techStack: ['C++', 'CMake', 'XQuartz'],
   },
   {
     title: 'EcoWiz',
-    description: 'Engineered a full-stack application featuring a multimodal image classification system for garbage sorting, achieving 80% accuracy through advanced deep learning techniques.',
+    description:
+      'Engineered a full-stack application featuring a multimodal image classification system for garbage sorting, achieving 80% accuracy through advanced deep learning techniques.',
     repo: true,
     repoUrl: 'https://github.com/karman103/DeltaHacksX',
     live: false,
@@ -99,7 +105,8 @@ export const projects = [
   },
   {
     title: 'RedWish',
-    description: 'Developed a comprehensive full-stack health application to streamline blood donation and transfusion processes, incorporating an AI-powered chatbot to enhance user engagement and accessibility.',
+    description:
+      'Developed a comprehensive full-stack health application to streamline blood donation and transfusion processes, incorporating an AI-powered chatbot to enhance user engagement and accessibility.',
     repo: true,
     repoUrl: 'https://github.com/steadyfall/RedWish',
     live: true,
@@ -110,7 +117,16 @@ export const projects = [
 
 export const skills = {
   languages: ['Python', 'JavaScript (ES6)', 'TypeScript', 'Go', 'C', 'C++20', 'SQL'],
-  frameworksAndLibraries: ['Django', 'Flask', 'React', 'TailwindCSS', 'Next.js', 'Node.js', 'Postgres', 'MySQL'],
+  frameworksAndLibraries: [
+    'Django',
+    'Flask',
+    'React',
+    'TailwindCSS',
+    'Next.js',
+    'Node.js',
+    'Postgres',
+    'MySQL',
+  ],
   tools: ['Bash', 'Powershell', 'Docker', 'Postman'],
 };
 // "Axios", "Socket.IO"
diff --git a/src/hooks/useReadingProgress.tsx b/src/hooks/useReadingProgress.tsx
index d6562a7..4b6a0fc 100644
--- a/src/hooks/useReadingProgress.tsx
+++ b/src/hooks/useReadingProgress.tsx
@@ -8,9 +8,7 @@ const useReadingProgress = () => {
       const currentProgress = window.scrollY;
       const scrollHeight = document.body.scrollHeight - window.innerHeight;
       if (scrollHeight) {
-        setCompletion(
-          Number((currentProgress / scrollHeight).toFixed(2)) * 100
-        );
+        setCompletion(Number((currentProgress / scrollHeight).toFixed(2)) * 100);
       }
     };
     window.addEventListener('scroll', updateScrollCompletion);
@@ -22,4 +20,4 @@ const useReadingProgress = () => {
   return completion;
 };
 
-export default useReadingProgress;
\ No newline at end of file
+export default useReadingProgress;
diff --git a/src/hooks/useSmoothScroll.tsx b/src/hooks/useSmoothScroll.tsx
index be3ce5a..e527634 100644
--- a/src/hooks/useSmoothScroll.tsx
+++ b/src/hooks/useSmoothScroll.tsx
@@ -1,19 +1,22 @@
 'use client';
 
-import { useEffect, useCallback } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
+import { useEffect, useCallback } from 'react';
 
 export function useSmoothScroll(offset = 0) {
   const router = useRouter();
   const pathname = usePathname();
 
-  const scrollToElement = useCallback((hash: string) => {
-    const targetElement = document.getElementById(hash.substring(1));
-    if (targetElement) {
-      const yPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - offset;
-      window.scrollTo({ top: yPosition, behavior: 'smooth' });
-    }
-  }, [offset]);
+  const scrollToElement = useCallback(
+    (hash: string) => {
+      const targetElement = document.getElementById(hash.substring(1));
+      if (targetElement) {
+        const yPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - offset;
+        window.scrollTo({ top: yPosition, behavior: 'smooth' });
+      }
+    },
+    [offset],
+  );
 
   useEffect(() => {
     if (window.location.hash) {
@@ -45,4 +48,4 @@ export function useSmoothScroll(offset = 0) {
     document.addEventListener('click', handleClick);
     return () => document.removeEventListener('click', handleClick);
   }, [pathname, router, scrollToElement]);
-}
\ No newline at end of file
+}
diff --git a/src/lib/posts.ts b/src/lib/posts.ts
index 78b6ce6..558dd17 100644
--- a/src/lib/posts.ts
+++ b/src/lib/posts.ts
@@ -1,41 +1,40 @@
 export type PostMetadata = {
-    title?: string
-    description?: string
-    date?: string
-    tags?: string[]
-    slug: string
-}
+  title?: string;
+  description?: string;
+  date?: string;
+  tags?: string[];
+  slug: string;
+};
 
 export type PostData = {
-    metadata: PostMetadata,
-    content: string
-}
+  metadata: PostMetadata;
+  content: string;
+};
 
-export function groupPostsByYear(
-  posts: PostMetadata[]
-): { year: number; posts: PostMetadata[] }[] {
+export function groupPostsByYear(posts: PostMetadata[]): { year: number; posts: PostMetadata[] }[] {
   // Filter out posts with no date to avoid runtime errors
   // Sort posts by date in descending order
   // Group posts by year
   // Sort by year in descending order
-   
+
   posts.sort(
-    (a, b) =>
-      (new Date(b.date ?? '').getTime() || 0) -
-            (new Date(a.date ?? '').getTime() || 0),
+    (a, b) => (new Date(b.date ?? '').getTime() || 0) - (new Date(a.date ?? '').getTime() || 0),
   );
 
-  const groupedByYear: { [key: number]: PostMetadata[] } = posts.reduce((acc, post) => {
-    const year = new Date(post.date ?? '').getFullYear() || 1;
-    if (!acc[year]) {
-      acc[year] = [];
-    }
-    acc[year].push(post);
-    return acc;
-  }, {} as { [key: number]: PostMetadata[] });
+  const groupedByYear: { [key: number]: PostMetadata[] } = posts.reduce(
+    (acc, post) => {
+      const year = new Date(post.date ?? '').getFullYear() || 1;
+      if (!acc[year]) {
+        acc[year] = [];
+      }
+      acc[year].push(post);
+      return acc;
+    },
+    {} as { [key: number]: PostMetadata[] },
+  );
 
   const postsByYear = Object.keys(groupedByYear)
-    .map(year => ({
+    .map((year) => ({
       year: parseInt(year),
       posts: groupedByYear[parseInt(year)],
     }))
diff --git a/src/lib/techIcons.ts b/src/lib/techIcons.ts
index 07a766d..54189e2 100644
--- a/src/lib/techIcons.ts
+++ b/src/lib/techIcons.ts
@@ -1,46 +1,46 @@
 export const techIcons: { [key: string]: string } = {
-  'AWS': 'la:aws',
+  AWS: 'la:aws',
   'AWS EC2': 'simple-icons:amazonec2',
-  'Axios': 'simple-icons:axios',
-  'Bash': 'devicon-plain:bash',
-  'C': 'devicon:c',
+  Axios: 'simple-icons:axios',
+  Bash: 'devicon-plain:bash',
+  C: 'devicon:c',
   'C++': 'devicon:cplusplus',
   'C++20': 'devicon:cplusplus',
-  'Cloudflare': 'devicon:cloudflare',
-  'CMake': 'devicon:cmake',
-  'CSS3': 'devicon:css3',
-  'Cypress': 'devicon-plain:cypressio',
+  Cloudflare: 'devicon:cloudflare',
+  CMake: 'devicon:cmake',
+  CSS3: 'devicon:css3',
+  Cypress: 'devicon-plain:cypressio',
   'D3.js': 'logos:d3',
-  'Django': 'vscode-icons:file-type-django',
-  'Docker': 'logos:docker-icon',
-  'Firebase': 'devicon:firebase',
-  'Flask': 'simple-icons:flask',
+  Django: 'vscode-icons:file-type-django',
+  Docker: 'logos:docker-icon',
+  Firebase: 'devicon:firebase',
+  Flask: 'simple-icons:flask',
   'Framer Motion': 'simple-icons:framer',
-  'Go': 'logos:go',
-  'HTML5': 'devicon:html5',
-  'JavaScript': 'devicon:javascript',
+  Go: 'logos:go',
+  HTML5: 'devicon:html5',
+  JavaScript: 'devicon:javascript',
   'JavaScript (ES6)': 'devicon:javascript',
-  'Jest': 'logos:jest',
-  'jQuery': 'devicon-plain:jquery',
-  'Linux': 'devicon:linux',
-  'MongoDB': 'logos:mongodb-icon',
-  'MySQL': 'fontisto:mysql',
+  Jest: 'logos:jest',
+  jQuery: 'devicon-plain:jquery',
+  Linux: 'devicon:linux',
+  MongoDB: 'logos:mongodb-icon',
+  MySQL: 'fontisto:mysql',
   'Next.js': 'devicon:nextjs',
   'Node.js': 'devicon:nodejs',
-  'NumPy': 'devicon:numpy',
-  'OpenCV': 'devicon:opencv',
-  'Postgres': 'logos:postgresql',
-  'Postman': 'devicon:postman',
-  'Powershell': 'vscode-icons:file-type-powershell',
-  'Pytest': 'simple-icons:pytest',
-  'Python': 'devicon:python',
-  'Python3': 'devicon:python',
-  'R': 'devicon:rstudio',
-  'Railway': 'simple-icons:railway',
-  'React': 'logos:react',
-  'Redis': 'devicon:redis',
+  NumPy: 'devicon:numpy',
+  OpenCV: 'devicon:opencv',
+  Postgres: 'logos:postgresql',
+  Postman: 'devicon:postman',
+  Powershell: 'vscode-icons:file-type-powershell',
+  Pytest: 'simple-icons:pytest',
+  Python: 'devicon:python',
+  Python3: 'devicon:python',
+  R: 'devicon:rstudio',
+  Railway: 'simple-icons:railway',
+  React: 'logos:react',
+  Redis: 'devicon:redis',
   'Socket.IO': 'simple-icons:socketdotio',
-  'Streamlit': 'devicon:streamlit',
-  'TailwindCSS': 'devicon:tailwindcss',
-  'TypeScript': 'devicon:typescript',
+  Streamlit: 'devicon:streamlit',
+  TailwindCSS: 'devicon:tailwindcss',
+  TypeScript: 'devicon:typescript',
 };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 531a545..4385a4e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,21 +1,21 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
       fontFamily: {
         sans: ['var(--font-inter)'],
         typewriter: ['var(--font-spaceMono)'],
-        'section': ['Starlight', 'sans-serif'],
+        section: ['Starlight', 'sans-serif'],
       },
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
         'midnight-blue': {
           '50': '#ebfaff',
           '100': '#d3f3ff',
@@ -29,7 +29,7 @@ const config: Config = {
           '900': '#0452a4',
           '950': '#0a3b76',
         },
-        'mantis': {
+        mantis: {
           '50': '#f2fbf2',
           '100': '#e2f7e1',
           '200': '#c4eec4',
@@ -42,7 +42,7 @@ const config: Config = {
           '900': '#1d4a1f',
           '950': '#0b280c',
         },
-        'sushi': {
+        sushi: {
           '50': '#f4f9ec',
           '100': '#e5f1d6',
           '200': '#cee4b2',
@@ -94,7 +94,7 @@ const config: Config = {
           '900': '#1d478b',
           '950': '#162d55',
         },
-        'thunderbird': {
+        thunderbird: {
           '50': '#fff2f1',
           '100': '#ffe1e0',
           '200': '#ffc8c6',
@@ -107,7 +107,7 @@ const config: Config = {
           '900': '#861a16',
           '950': '#490906',
         },
-        'starship': {
+        starship: {
           '50': '#fbfde9',
           '100': '#f6fcc5',
           '200': '#f1f98f',
@@ -133,7 +133,7 @@ const config: Config = {
           '900': '#6e2d43',
           '950': '#3d1421',
         },
-        'firefly': {
+        firefly: {
           '50': '#f1f9fa',
           '100': '#dceff1',
           '200': '#bedfe3',
diff --git a/tsconfig.json b/tsconfig.json
index f48e7ee..51d0dbc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,10 +1,6 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -22,19 +18,10 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
     "target": "ES2017"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

From 549bee9eeeae54e7160a2ec45d67c14e3413b99b Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Mon, 7 Apr 2025 21:31:57 -0400
Subject: [PATCH 11/11] ci: add workflow for linting (ESLint & Prettier) & type
 checking

---
 .github/workflows/lint-and-check.yml | 83 ++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 .github/workflows/lint-and-check.yml

diff --git a/.github/workflows/lint-and-check.yml b/.github/workflows/lint-and-check.yml
new file mode 100644
index 0000000..8847983
--- /dev/null
+++ b/.github/workflows/lint-and-check.yml
@@ -0,0 +1,83 @@
+name: Lint and Type-checking
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+    branches:
+      - main
+      - dev
+
+jobs:
+  lint:
+    name: ESLint & Prettier 
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Get list of changed files
+        id: files
+        run: |
+          echo "CHANGED_FILES=$(git diff --name-only --diff-filter=ACMRT origin/${{ github.base_ref || github.ref_name }} | tr '\n' ' ')" >> $GITHUB_ENV
+
+      - name: Lint JS/TS files with ESLint (no auto-fix)
+        if: ${{ env.CHANGED_FILES != ''}}
+        run: |
+          FILES=$(echo "$CHANGED_FILES" | tr ' ' '\n' | grep -E '\.(js|jsx|ts|tsx)$' | xargs)
+          if [ -n "$FILES" ]; then
+            echo "Running ESLint on:"
+            echo "$FILES"
+            npx next lint --file $FILES
+          else
+            echo "No JS/TS files to lint."
+          fi
+
+      - name: Format other files with Prettier
+        if: ${{ env.CHANGED_FILES != ''}}
+        run: |
+          FILES=$(echo "$CHANGED_FILES" | tr ' ' '\n' | grep -E '\.(json|md|css|scss|html)$' | xargs)
+          if [ -n "$FILES" ]; then
+            echo "Running Prettier on:"
+            echo "$FILES"
+            npx prettier --check $FILES
+          else
+            echo "No files to format with Prettier."
+          fi
+      
+      - name: Type Check
+        run: |
+          echo "Running TypeScript type checking..."
+          npx tsc --noEmit
+  
+  type-check:
+    name: Type Checking 
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type Check
+        run: |
+          echo "Running TypeScript type checking..."
+          npx tsc --noEmit