eslint changes

eslint.config.mjs

···
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
 });
 
-export default defineConfig([globalIgnores([
+export default defineConfig([
+  globalIgnores([
     "**/node_modules/",
     "**/.next/",
     "**/.vercel/",
···
     "**/public/",
     "**/*.config.js",
     "**/*.config.ts",
-]), {
-    extends: fixupConfigRules(compat.extends(
+  ]),
+  {
+    extends: fixupConfigRules(
+      compat.extends(
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:react/recommended",
         "plugin:react-hooks/recommended",
         "plugin:jsx-a11y/recommended",
-        "prettier",
-    )),
+        "prettier"
+      )
+    ),
 
     plugins: {
-        "@typescript-eslint": fixupPluginRules(typescriptEslint),
-        react: fixupPluginRules(react),
-        "react-hooks": fixupPluginRules(reactHooks),
-        "jsx-a11y": fixupPluginRules(jsxA11Y),
+      "@typescript-eslint": fixupPluginRules(typescriptEslint),
+      react: fixupPluginRules(react),
+      "react-hooks": fixupPluginRules(reactHooks),
+      "jsx-a11y": fixupPluginRules(jsxA11Y),
     },
 
     languageOptions: {
-        globals: {
-            ...globals.browser,
-            ...globals.node,
-        },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
 
-        parser: tsParser,
-        ecmaVersion: 2021,
-        sourceType: "module",
+      parser: tsParser,
+      ecmaVersion: 2021,
+      sourceType: "module",
 
-        parserOptions: {
-            ecmaFeatures: {
-                jsx: true,
-            },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
         },
+      },
     },
 
     settings: {
-        react: {
-            version: "detect",
-        },
+      react: {
+        version: "detect",
+      },
     },
 
     rules: {
-        "@typescript-eslint/no-unused-vars": ["warn", {
-            argsIgnorePattern: "^_",
-            varsIgnorePattern: "^_",
-        }],
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+        },
+      ],
 
-        "@typescript-eslint/no-explicit-any": "warn",
-        "react-hooks/rules-of-hooks": "error",
-        "react-hooks/exhaustive-deps": "warn",
-        "react/no-unescaped-entities": "warn",
-        "react/react-in-jsx-scope": "off",
-        "react/prop-types": "off",
+      "@typescript-eslint/no-explicit-any": "warn",
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "react/no-unescaped-entities": "warn",
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
 
-        "no-console": ["warn", {
-            allow: ["warn", "error"],
-        }],
+      "no-console": [
+        "warn",
+        {
+          allow: ["warn", "error"],
+        },
+      ],
     },
-}]);
+  },
+]);

src/app/(home)/page.tsx

···
                   Wentworth Institute of Technology
                 </Link>{" "}
                 in Boston, Massachusetts. When not in school or at work,
-                Jasper's hobbies include reading, being in the great outdoors,
-                photography, computer programming, cooking, and running away to
-                join the circus.
+                Jasper&apos;s hobbies include reading, being in the great
+                outdoors, photography, computer programming, cooking, and
+                running away to join the circus.
               </p>
               <p className="text-sm text-gray-600 dark:text-white/70">
                 An avid organizer and big picture thinker, you can often find
···
                 adventures, both close to home and abroad.
               </p>
               <p className="text-sm text-gray-600 dark:text-white/70">
-                Recently they've been focusing their time (outside of their
+                Recently they&apos;ve been focusing their time (outside of their
                 degree) on{" "}
                 <Link
                   className="lnk"
···
               </p>
 
               <p className="text-sm text-gray-600 dark:text-white/70">
-                Previously, Jasper's adventures included working at{" "}
+                Previously, Jasper&apos;s adventures included working at{" "}
                 <Link
                   className="lnk"
                   href="https://mlh.io/?utm_source=jaspermayone.com&utm_medium=referral"
···
                 </Link>{" "}
                 as the Summer 2025 engineering intern, a month-long trip to
                 Rwanda, where they filmed a documentary and managed production
-                for their fellow students' films. They also played a key role in
-                the Waitsfield Elementary PTA's Annual Ski & Skate sale,
-                co-coordinated large scale climate conferences called “See
+                for their fellow students&apos; films. They also played a key
+                role in the Waitsfield Elementary PTA&apos;s Annual Ski & Skate
+                sale, co-coordinated large scale climate conferences called “See
                 Change Sessions” with thousands of attendees, and enjoyed
                 concerts by AJR, Sammy Rae & the Friends, and Lake Street Dive.
               </p>

src/app/api/og/route.tsx

···
     }
 
     return generateOGImage(data);
-  } catch (e: any) {
-    console.log(`${e.message}`);
+  } catch (e: unknown) {
+    console.error(`OG image generation failed:`, e);
     return new Response(`Failed to generate the image`, {
       status: 500,
     });

src/app/concerts/page.tsx

···
               className="mb-4 text-xl font-bold text-gray-800 dark:text-white"
               style={{ fontFamily: "var(--font-balgin)" }}
             >
-              Concerts I've Attended
+              Concerts I've Attended
             </h1>
 
             <p className="mb-6 text-gray-600 dark:text-white/70">
-              A running list of live shows and concerts I've been to over the
-              years.
+              A running list of live shows and concerts I&apos;ve been to over
+              the years.
             </p>
 
             <div className="space-y-8">

src/app/contact/page.tsx

···
                 </Link>
               </p>
               <p className="text-gray-600 dark:text-white/70">
-                Want my phone number? Let's be friends first! I promise I
+                Want my phone number? Let&apos;s be friends first! I promise I
                 respond super quick on the other platforms 😁
               </p>
 

src/app/elsewhere/page.tsx

···
               My appearances elsewhere.
             </h1>
             <p className="mb-6 text-gray-600 italic dark:text-white/70">
-              a list of output or writings on sites other than one's own
+              a list of output or writings on sites other than one&apos;s own
             </p>
 
             {sortedAppearances.length === 0 ? (

src/app/green/page.tsx

···
 
             <div className="space-y-4">
               <p className="text-gray-600 dark:text-white/70">
-                I love the environment! I'm a big fan of green energy and
-                sustainability. I'm always looking for ways to reduce my carbon
-                footprint and make a positive impact on the planet.
+                I love the environment! I&apos;m a big fan of green energy and
+                sustainability. I&apos;m always looking for ways to reduce my
+                carbon footprint and make a positive impact on the planet.
               </p>
 
               {/* Carbon Rating Card */}
···
 
                 <p className="mb-2 text-sm text-gray-600 dark:text-gray-400">
                   This website produces minimal carbon emissions with just{" "}
-                  <strong>0.17 grams of CO₂</strong> per page view. That's
+                  <strong>0.17 grams of CO₂</strong> per page view. That&apos;s
                   excellent for web sustainability!
                 </p>
 

src/app/panera/page.tsx

···
                   fontWeight: 600,
                 }}
               >
-                Jasper's Panera Bread Order
+                Jasper's Panera Bread Order
               </div>
               <p
                 className="mx-auto max-w-2xl text-gray-600"
                 style={{ lineHeight: "1.6", fontFamily: "var(--font-balgin)" }}
               >
                 Inspired by people creating /chipotle pages with their Chipotle
-                order for when their friends get them Chipotle, here's what I
-                usually get at Panera in case anyone wants to get me Panera and
-                is wondering what to get.
+                order for when their friends get them Chipotle, here&apos;s what
+                I usually get at Panera in case anyone wants to get me Panera
+                and is wondering what to get.
               </p>
             </div>
           </div>

src/app/pfp/page.tsx

···
             </h1>
 
             <p className="mb-5 text-gray-600 dark:text-white/70">
-              Here's all the profile photos I've used over the years
+              Here&apos;s all the profile photos I&apos;ve used over the years
             </p>
 
             <div className="grid grid-cols-4 gap-4 md:grid-cols-5 lg:grid-cols-6">

src/app/portfolio/page.tsx

···
         <main className="m-5 flex-1">
           <div className="mb-8">
             <p className="mb-3 text-gray-700 dark:text-white/70">
-              A collection of projects I've worked on, ranging from web
+              A collection of projects I&apos;ve worked on, ranging from web
               applications to creative tools and experiments.
             </p>
           </div>

src/app/verify/page.tsx

···
             <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
               If you have questions about my identity at these{" "}
               <b>or any other addresses</b>, you can email me at any of the ones
-              you see above to verify it's me. I also sign my emails with my GPG
-              key (listed below) whenever possible.
+              you see above to verify it&apos;s me. I also sign my emails with
+              my GPG key (listed below) whenever possible.
             </p>
           </div>
         </section>

src/components/email.tsx

···
       {/* h2 with custom .ul class  */}
       <h2 className={styles.lightUl}>Newsletter</h2>
       <p className="mb-4 text-sm text-gray-700 dark:text-white/70">
-        Subscribe to my newsletter to get <i>occasioal</i> updates on what I'm
-        up to.
+        Subscribe to my newsletter to get <i>occasioal</i> updates on what
+        I&apos;m up to.
       </p>
 
       {!submitted ? (

src/components/ui/button.tsx

···
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }

src/lib/og-image.tsx

···
   const colors = getColors(type);
 
   return new ImageResponse(
-    (
+    <div
+      style={{
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: colors.bg,
+        padding: "40px",
+        fontFamily:
+          'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      }}
+    >
       <div
         style={{
-          height: "100%",
-          width: "100%",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
-          backgroundColor: colors.bg,
-          padding: "40px",
-          fontFamily:
-            'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          border: `2px solid ${colors.border}`,
+          borderRadius: "16px",
+          padding: "50px",
+          backgroundColor: colors.cardBg,
+          boxShadow: "0 25px 50px rgba(0, 0, 0, 0.4)",
+          width: "90%",
+          height: "80%",
+          textAlign: "center",
         }}
       >
-        <div
+        <h1
           style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            border: `2px solid ${colors.border}`,
-            borderRadius: "16px",
-            padding: "50px",
-            backgroundColor: colors.cardBg,
-            boxShadow: "0 25px 50px rgba(0, 0, 0, 0.4)",
-            width: "90%",
-            height: "80%",
+            fontSize: title.length > 20 ? "64px" : "80px",
+            fontWeight: "bold",
+            color: "#ffffff",
+            marginBottom: "16px",
             textAlign: "center",
+            borderBottom: `4px solid ${colors.accent}`,
+            paddingBottom: "12px",
+            maxWidth: "100%",
+            lineHeight: 1.1,
           }}
         >
-          <h1
+          {title}
+        </h1>
+
+        {subtitle && (
+          <div
             style={{
-              fontSize: title.length > 20 ? "64px" : "80px",
-              fontWeight: "bold",
-              color: "#ffffff",
-              marginBottom: "16px",
+              fontSize: "36px",
+              color: "#e2e8f0",
               textAlign: "center",
-              borderBottom: `4px solid ${colors.accent}`,
-              paddingBottom: "12px",
-              maxWidth: "100%",
-              lineHeight: 1.1,
+              maxWidth: "800px",
+              lineHeight: 1.3,
+              marginBottom: description ? "16px" : "24px",
             }}
           >
-            {title}
-          </h1>
-
-          {subtitle && (
-            <div
-              style={{
-                fontSize: "36px",
-                color: "#e2e8f0",
-                textAlign: "center",
-                maxWidth: "800px",
-                lineHeight: 1.3,
-                marginBottom: description ? "16px" : "24px",
-              }}
-            >
-              {subtitle}
-            </div>
-          )}
-
-          {description && (
-            <div
-              style={{
-                fontSize: "24px",
-                color: "#94a3b8",
-                textAlign: "center",
-                maxWidth: "700px",
-                lineHeight: 1.4,
-                marginBottom: "24px",
-              }}
-            >
-              {description}
-            </div>
-          )}
+            {subtitle}
+          </div>
+        )}
 
+        {description && (
           <div
             style={{
-              fontSize: "20px",
-              color: colors.accent,
-              marginTop: "auto",
+              fontSize: "24px",
+              color: "#94a3b8",
               textAlign: "center",
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
+              maxWidth: "700px",
+              lineHeight: 1.4,
+              marginBottom: "24px",
             }}
           >
-            <div
-              style={{
-                width: "8px",
-                height: "8px",
-                borderRadius: "50%",
-                backgroundColor: colors.accent,
-              }}
-            />
-            jaspermayone.com
-            <div
-              style={{
-                width: "8px",
-                height: "8px",
-                borderRadius: "50%",
-                backgroundColor: colors.accent,
-              }}
-            />
+            {description}
           </div>
+        )}
+
+        <div
+          style={{
+            fontSize: "20px",
+            color: colors.accent,
+            marginTop: "auto",
+            textAlign: "center",
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+          }}
+        >
+          <div
+            style={{
+              width: "8px",
+              height: "8px",
+              borderRadius: "50%",
+              backgroundColor: colors.accent,
+            }}
+          />
+          jaspermayone.com
+          <div
+            style={{
+              width: "8px",
+              height: "8px",
+              borderRadius: "50%",
+              backgroundColor: colors.accent,
+            }}
+          />
         </div>
       </div>
-    ),
+    </div>,
     {
       width: 1200,
       height: 630,

tsconfig.json

···
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
···
       }
     ],
     "paths": {
-      "@/*": [
-        "./src/*"
-      ],
-      "@public/*": [
-        "./public/*"
-      ]
-    },
+      "@/*": ["./src/*"],
+      "@public/*": ["./public/*"]
+    }
     // "baseUrl": "src/"
   },
   "include": [
···
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
-}
+  "exclude": ["node_modules"]
+}