refactor: fix linting and typechecking errors

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

public/pdf.worker.min.js

@@ -30356,7 +30356,6 @@ class PostScriptLexer {
       ;
       (t = this.nextChar()) >= 0 &&
       ((t >= 65 && t <= 90) || (t >= 97 && t <= 122));
-
     )
       i.push(String.fromCharCode(t));
     const a = i.join("");
@@ -30378,7 +30377,6 @@ class PostScriptLexer {
       ;
       (e = this.nextChar()) >= 0 &&
       ((e >= 48 && e <= 57) || 45 === e || 46 === e);
-
     )
       t.push(String.fromCharCode(e));
     const i = parseFloat(t.join(""));
@@ -37773,7 +37771,6 @@ class XMLParserBase {
     for (
       ;
       a < e.length && !isWhitespace(e, a) && ">" !== e[a] && "/" !== e[a];
-
     )
       ++a;
     const s = e.substring(t, a);
@@ -37810,7 +37807,6 @@ class XMLParserBase {
       ">" !== e[i] &&
       "?" !== e[i] &&
       "/" !== e[i];
-
     )
       ++i;
     const a = e.substring(t, i);

src/app/api/publications/[filename]/route.ts

@@ -1,4 +1,4 @@
-import { NextRequest, NextResponse } from "next/server";
+import { type NextRequest, NextResponse } from "next/server";
 import { readFile } from "fs/promises";
 import { join } from "path";
 

src/app/articles/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ArrowUpRight, Newspaper } from "lucide-react";
-import { Button } from "~/components/ui/button";
+
 import Link from "next/link";
 import {
   Card,
@@ -22,12 +22,12 @@ export default function ArticlesPage() {
       await new Promise((resolve) => setTimeout(resolve, 0));
       setLoading(false);
     };
-    fetchArticles();
+    void fetchArticles();
   }, []);
 
   return (
     <div className="space-y-6">
-      <section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
+      <section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
         <div className="flex items-start gap-3">
           <Newspaper className="h-8 w-8 text-primary" />
           <div>

src/app/blog/[slug]/page.tsx

@@ -1,12 +1,17 @@
 import { notFound } from "next/navigation";
-import { ArrowLeft } from "lucide-react";
-import Link from "next/link";
-import { Button } from "~/components/ui/button";
 import { Badge } from "~/components/ui/badge";
 import fs from "fs";
 import path from "path";
 import { BreadcrumbUpdater } from "~/components/BreadcrumbUpdater";
 
+interface BlogPostMetadata {
+  title: string;
+  publishedAt: string;
+  tags?: string[];
+  summary?: string;
+  image?: string;
+}
+
 interface PageProps {
   params: Promise<{ slug: string }>;
 }
@@ -25,9 +30,11 @@ export async function generateStaticParams() {
 export async function generateMetadata({ params }: PageProps) {
   const { slug } = await params;
   try {
-        const { metadata } = await import(`~/content/blog/${slug}.mdx`);
+    const { metadata } = (await import(`~/content/blog/${slug}.mdx`)) as {
+      metadata: BlogPostMetadata;
+    };
     return metadata;
-    } catch (e) {
+  } catch {
     return {
       title: "Post Not Found",
     };
@@ -40,10 +47,13 @@ export default async function BlogPost({ params }: PageProps) {
   let metadata;
 
   try {
-        const content = await import(`~/content/blog/${slug}.mdx`);
+    const content = (await import(`~/content/blog/${slug}.mdx`)) as {
+      default: React.ComponentType;
+      metadata: BlogPostMetadata;
+    };
     Post = content.default;
     metadata = content.metadata;
-    } catch (e) {
+  } catch {
     notFound();
   }
 
@@ -58,9 +68,9 @@ export default async function BlogPost({ params }: PageProps) {
                     </Link>
                 </Button> */}
 
-                <h1 className="text-3xl font-bold mb-4">{metadata.title}</h1>
+        <h1 className="mb-4 text-3xl font-bold">{metadata.title}</h1>
 
-                <div className="flex flex-wrap gap-4 items-center text-muted-foreground mb-6">
+        <div className="mb-6 flex flex-wrap items-center gap-4 text-muted-foreground">
           <time dateTime={metadata.publishedAt}>{metadata.publishedAt}</time>
           {metadata.tags && (
             <div className="flex flex-wrap gap-2">
@@ -74,7 +84,7 @@ export default async function BlogPost({ params }: PageProps) {
         </div>
       </div>
 
-            <div className="prose prose-zinc dark:prose-invert max-w-none">
+      <div className="prose prose-zinc max-w-none dark:prose-invert">
         <Post />
       </div>
     </article>

src/app/blog/page.tsx

@@ -1,12 +1,26 @@
 import Link from "next/link";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "~/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "~/components/ui/card";
 import { Badge } from "~/components/ui/badge";
 import { BookOpen } from "lucide-react";
 import fs from "fs";
 import path from "path";
 
+interface BlogPost {
+  title: string;
+  publishedAt: string;
+  summary: string;
+  tags?: string[];
+  slug: string;
+}
+
 // Helper to get blog posts
-async function getBlogPosts() {
+async function getBlogPosts(): Promise<BlogPost[]> {
   const contentDir = path.join(process.cwd(), "src/content/blog");
   const files = fs.readdirSync(contentDir);
 
@@ -16,12 +30,14 @@ async function getBlogPosts() {
       .map(async (file) => {
         const slug = file.replace(".mdx", "");
         // Dynamic import to get metadata
-                const { metadata } = await import(`~/content/blog/${file}`);
+        const { metadata } = (await import(`~/content/blog/${file}`)) as {
+          metadata: Omit<BlogPost, "slug">;
+        };
         return {
           slug,
           ...metadata,
         };
-            })
+      }),
   );
 
   return posts.sort((a, b) => {
@@ -42,7 +58,7 @@ export default async function BlogPage() {
 
   return (
     <div className="space-y-8">
-            <section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
+      <section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
         <div className="flex items-start gap-3">
           <BookOpen className="h-8 w-8 text-primary" />
           <div>
@@ -54,14 +70,18 @@ export default async function BlogPage() {
         </p>
       </section>
 
-            <div className="grid gap-6 animate-fade-in-up-delay-2">
+      <div className="animate-fade-in-up-delay-2 grid gap-6">
         {posts.map((post) => (
-                    <Link key={post.slug} href={`/blog/${post.slug}`} className="block card-hover">
+          <Link
+            key={post.slug}
+            href={`/blog/${post.slug}`}
+            className="card-hover block"
+          >
             <Card className="h-full transition-colors hover:bg-muted/50">
               <CardHeader>
-                                <div className="flex justify-between items-start">
-                                    <CardTitle className="text-xl mb-2">{post.title}</CardTitle>
-                                    <span className="text-sm text-muted-foreground whitespace-nowrap ml-4">
+                <div className="flex items-start justify-between">
+                  <CardTitle className="mb-2 text-xl">{post.title}</CardTitle>
+                  <span className="ml-4 whitespace-nowrap text-sm text-muted-foreground">
                     {post.publishedAt}
                   </span>
                 </div>

src/app/cv/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs";
 import {
   Card,
@@ -22,8 +22,6 @@ import {
   ChevronRight,
   AlertCircle,
   Loader2,
-  Maximize2,
-  Minimize2,
   Eye,
 } from "lucide-react";
 import Link from "next/link";
@@ -116,7 +114,7 @@ function PDFViewer({ url, title, type }: PDFViewerProps) {
       }
     };
 
-    loadPDF();
+    void loadPDF();
   }, [url, isClient]);
 
   useEffect(() => {
@@ -177,7 +175,7 @@ function PDFViewer({ url, title, type }: PDFViewerProps) {
       }
     };
 
-    renderPage();
+    void renderPage();
   }, [pdfDoc, pageNum, scale, rotation]);
 
   const nextPage = () => {
@@ -481,7 +479,7 @@ export default function CVPage() {
 
   return (
     <div className="space-y-6">
-      <section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
+      <section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
         <div className="flex items-start gap-3">
           <FileText className="h-8 w-8 text-primary" />
           <div>
@@ -520,8 +518,6 @@ export default function CVPage() {
           </TabsContent>
         </Tabs>
       </div>
-
-
     </div>
   );
 }

src/app/experience/page.tsx

@@ -55,7 +55,7 @@ export default function ExperiencePage() {
   const renderExperienceSection = (
     title: string,
     experiences: typeof researchExperience,
-    delay: number = 1,
+    delay = 1,
   ) => (
     <section className="animate-fade-in-up space-y-6">
       <h2 className="text-2xl font-bold">{title}</h2>
@@ -118,7 +118,7 @@ export default function ExperiencePage() {
   return (
     <div className="space-y-12">
       {/* Header */}
-      <section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
+      <section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
         <div className="flex items-start gap-3">
           <Building className="h-8 w-8 text-primary" />
           <div>

src/app/layout.tsx

@@ -1,4 +1,3 @@
-
 import Script from "next/script";
 import type { Metadata } from "next";
 import { env } from "~/env";
@@ -26,20 +25,20 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
       suppressHydrationWarning
     >
       <body
-        className="flex min-h-screen flex-col bg-background font-sans text-foreground relative"
+        className="relative flex min-h-screen flex-col bg-background font-sans text-foreground"
         suppressHydrationWarning
       >
         {/* Background Elements */}
-        <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
+        <div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
           <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
-          <div className="w-[800px] h-[800px] bg-neutral-400/40 dark:bg-neutral-500/30 rounded-full blur-3xl animate-blob"></div>
+          <div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/40 blur-3xl dark:bg-neutral-500/30"></div>
         </div>
 
         {env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
           <Script
             defer
             src={
-              env.NEXT_PUBLIC_UMAMI_SCRIPT_URL ||
+              env.NEXT_PUBLIC_UMAMI_SCRIPT_URL ??
               "https://analytics.umami.is/script.js"
             }
             data-website-id={env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
@@ -48,9 +47,9 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
 
         <BreadcrumbProvider>
           <Navigation />
-          <div className="flex flex-1 pt-24 flex-col lg:flex-row">
+          <div className="flex flex-1 flex-col pt-24 lg:flex-row">
             <Sidebar />
-            <div className="flex-1 min-w-0 lg:pl-96">
+            <div className="min-w-0 flex-1 lg:pl-96">
               <div className="mx-auto max-w-screen-xl px-6 sm:px-8 lg:pl-0 lg:pr-8">
                 <main className="pb-8 pt-4">
                   <BreadcrumbWrapper />

src/app/page.tsx

@@ -1,19 +1,20 @@
 import {
   ArrowUpRight,
-  Code,
-  FlaskConical,
-  Users,
-  GraduationCap,
-  Building,
-  MapPin,
-  Mail,
-  ExternalLink,
-  BookOpen,
-  School,
   Award,
-  Calendar,
+  BookOpen,
+  Building,
+  Code,
+  ExternalLink,
+  FlaskConical,
+  GraduationCap,
+  Mail,
+  MapPin,
+  School,
+  Users
 } from "lucide-react";
 import Link from "next/link";
+import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
 import {
   Card,
   CardContent,
@@ -21,9 +22,7 @@ import {
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
-import { Badge } from "~/components/ui/badge";
-import { researchInterests, education, experiences, awards } from "~/lib/data";
+import { awards, education, experiences, researchInterests } from "~/lib/data";
 
 export default function HomePage() {
   const researchExperience = experiences.filter(

src/app/projects/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import {
   Card,
   CardHeader,
@@ -14,21 +13,14 @@ import Link from "next/link";
 import { ArrowUpRight, Play, BookOpen, FolderGit2, Github } from "lucide-react";
 import { projects } from "~/lib/data";
 import { ImageWithSkeleton } from "~/components/ui/image-with-skeleton";
-import { CardSkeleton } from "~/components/ui/skeletons";
 
 export default function ProjectsPage() {
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setLoading(false);
-  }, []);
-
   const featuredProjects = projects.filter((p) => p.featured);
   const otherProjects = projects.filter((p) => !p.featured);
 
   return (
     <div className="space-y-8">
-      <section className="prose prose-zinc dark:prose-invert max-w-none">
+      <section className="prose prose-zinc max-w-none dark:prose-invert">
         <div className="flex items-start gap-3">
           <FolderGit2 className="h-8 w-8 text-primary" />
           <div>
@@ -45,14 +37,7 @@ export default function ProjectsPage() {
       <section className="animate-fade-in-up space-y-6">
         <h2 className="text-2xl font-bold">Featured Work</h2>
         <div className="space-y-8">
-          {loading ? (
-            <>
-              <CardSkeleton />
-              <CardSkeleton />
-              <CardSkeleton />
-            </>
-          ) : (
-            featuredProjects.map((project, index) => (
+          {featuredProjects.map((project, index) => (
             <div
               key={index}
               className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
@@ -65,7 +50,7 @@ export default function ProjectsPage() {
                       <div className="flex items-center justify-center p-4 lg:h-full">
                         <ImageWithSkeleton
                           src={project.image}
-                            alt={project.imageAlt || project.title}
+                          alt={project.imageAlt ?? project.title}
                           width={400}
                           height={300}
                           className="h-auto w-full object-contain"
@@ -189,8 +174,7 @@ export default function ProjectsPage() {
                 </div>
               </Card>
             </div>
-            ))
-          )}
+          ))}
         </div>
       </section>
 
@@ -199,13 +183,7 @@ export default function ProjectsPage() {
         <section className="animate-fade-in-up space-y-6">
           <h2 className="text-2xl font-bold">Additional Projects</h2>
           <div className="grid-equal-height grid gap-6 md:grid-cols-2">
-            {loading ? (
-              <>
-                <CardSkeleton />
-                <CardSkeleton />
-              </>
-            ) : (
-              otherProjects.map((project, index) => (
+            {otherProjects.map((project, index) => (
               <div
                 key={index}
                 className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
@@ -215,7 +193,7 @@ export default function ProjectsPage() {
                     <div className="flex h-48 items-center justify-center p-4">
                       <ImageWithSkeleton
                         src={project.image}
-                          alt={project.imageAlt || project.title}
+                        alt={project.imageAlt ?? project.title}
                         width={400}
                         height={250}
                         className="h-auto max-h-full w-full object-contain"
@@ -323,8 +301,7 @@ export default function ProjectsPage() {
                   </div>
                 </Card>
               </div>
-              ))
-            )}
+            ))}
           </div>
         </section>
       )}

src/app/publications/page.tsx

@@ -5,7 +5,6 @@ import {
   BookOpenText,
   FileText,
   Presentation,
-  BookOpen,
   Monitor,
 } from "lucide-react";
 import Link from "next/link";
@@ -18,7 +17,6 @@ import {
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
-import { Skeleton } from "~/components/ui/skeleton";
 import { CardSkeleton } from "~/components/ui/skeletons";
 import type { Publication } from "~/lib/bibtex";
 import { parseBibtex } from "~/lib/bibtex";
@@ -27,10 +25,10 @@ import { parseBibtex } from "~/lib/bibtex";
 export default function PublicationsPage() {
   const [publications, setPublications] = useState<Publication[]>([]);
   const [loading, setLoading] = useState(true);
-  const tagsToStrip = ["paperUrl", "posterUrl"];
+
 
   useEffect(() => {
-    fetch("/publications.bib")
+    void fetch("/publications.bib")
       .then((res) => res.text())
       .then((text) => {
         const pubs = parseBibtex(text);
@@ -85,7 +83,7 @@ export default function PublicationsPage() {
 
   return (
     <div className="space-y-6">
-      <section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
+      <section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
         <div className="flex items-start gap-3">
           <BookOpenText className="h-8 w-8 text-primary" />
           <div>

src/app/travel/page.tsx

@@ -26,7 +26,7 @@ export default function TripsPage() {
 
   return (
     <div className="space-y-6">
-      <section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
+      <section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
         <div className="flex items-start gap-3">
           <Plane className="h-8 w-8 text-primary" />
           <div>
@@ -63,9 +63,7 @@ export default function TripsPage() {
                           <ImageWithSkeleton
                             src={image}
                             alt={
-                              trip.alts && trip.alts[imgIndex]
-                                ? trip.alts[imgIndex]
-                                : `${trip.title} - image ${imgIndex + 1}`
+                              trip.alts?.[imgIndex] ?? `${trip.title} - image ${imgIndex + 1}`
                             }
                             width={250}
                             height={200}

src/components/AccessibleVideo.tsx

@@ -80,7 +80,7 @@ export function AccessibleVideo({
               controls
               src={src}
               aria-label={title}
-              title={posterAlt || title}
+              title={posterAlt ?? title}
             >
               {captionSrc && (
                 <track
@@ -148,7 +148,7 @@ export function AccessibleVideo({
             View Full Transcript
           </summary>
           <div className="mt-2 rounded-md bg-muted p-4">
-            <div className="prose prose-sm dark:prose-invert max-w-none">
+            <div className="prose prose-sm max-w-none dark:prose-invert">
               <div dangerouslySetInnerHTML={{ __html: transcript }} />
             </div>
           </div>

src/components/ColorPalette.tsx

@@ -25,7 +25,10 @@ function hslToHex(hsl: string) {
       return p;
     };
 
-        const q = lDecimal < 0.5 ? lDecimal * (1 + sDecimal) : lDecimal + sDecimal - lDecimal * sDecimal;
+    const q =
+      lDecimal < 0.5
+        ? lDecimal * (1 + sDecimal)
+        : lDecimal + sDecimal - lDecimal * sDecimal;
     const p = 2 * lDecimal - q;
 
     r = hue2rgb(p, q, hDecimal + 1 / 3);
@@ -91,7 +94,7 @@ const ColorSwatch = ({ hsl, title }: { hsl: string; title: string }) => {
   const hex = hslToHex(hsl);
 
   const copyToClipboard = () => {
-        navigator.clipboard.writeText(hex);
+    void navigator.clipboard.writeText(hex);
     setCopied(true);
     setTimeout(() => setCopied(false), 1000);
   };
@@ -100,28 +103,34 @@ const ColorSwatch = ({ hsl, title }: { hsl: string; title: string }) => {
     <div className="group relative flex flex-col items-center">
       <div
         className={cn(
-                    "h-12 w-12 flex-shrink-0 rounded-lg shadow-sm cursor-pointer transition-transform active:scale-95 border border-border/20",
+          "h-12 w-12 flex-shrink-0 cursor-pointer rounded-lg border border-border/20 shadow-sm transition-transform active:scale-95",
         )}
         style={{ backgroundColor: hex }}
         onClick={copyToClipboard}
         title={`${title} (${hex})`}
       />
-            <div className="absolute -bottom-8 opacity-0 group-hover:opacity-100 transition-opacity bg-popover text-popover-foreground text-xs px-2 py-1 rounded shadow-md whitespace-nowrap z-10 pointer-events-none border border-border">
+      <div className="pointer-events-none absolute -bottom-8 z-10 whitespace-nowrap rounded border border-border bg-popover px-2 py-1 text-xs text-popover-foreground opacity-0 shadow-md transition-opacity group-hover:opacity-100">
         {copied ? "Copied!" : hex}
       </div>
     </div>
   );
 };
 
-const ColorSection = ({ mode, colors }: { mode: "light" | "dark"; colors: typeof THEME_COLORS.light }) => {
+const ColorSection = ({
+  mode,
+  colors,
+}: {
+  mode: "light" | "dark";
+  colors: typeof THEME_COLORS.light;
+}) => {
   return (
     <div className="space-y-4">
-            <h4 className="font-heading font-bold capitalize text-lg">{mode} Mode</h4>
+      <h4 className="font-heading text-lg font-bold capitalize">{mode} Mode</h4>
 
       {/* Backgrounds */}
-            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
         <div className="w-24 text-sm font-medium">Backgrounds</div>
-                <div className="flex gap-2 flex-wrap">
+        <div className="flex flex-wrap gap-2">
           <ColorSwatch hsl={colors.background} title="background" />
           <ColorSwatch hsl={colors.card} title="card" />
           <ColorSwatch hsl={colors.popover} title="popover" />
@@ -131,39 +140,57 @@ const ColorSection = ({ mode, colors }: { mode: "light" | "dark"; colors: typeof
       </div>
 
       {/* Foregrounds */}
-            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
         <div className="w-24 text-sm font-medium">Foregrounds</div>
-                <div className="flex gap-2 flex-wrap">
+        <div className="flex flex-wrap gap-2">
           <ColorSwatch hsl={colors.foreground} title="foreground" />
-                    <ColorSwatch hsl={colors["card-foreground"]} title="card-foreground" />
-                    <ColorSwatch hsl={colors["popover-foreground"]} title="popover-foreground" />
-                    <ColorSwatch hsl={colors["muted-foreground"]} title="muted-foreground" />
-                    <ColorSwatch hsl={colors["secondary-foreground"]} title="secondary-foreground" />
+          <ColorSwatch
+            hsl={colors["card-foreground"]}
+            title="card-foreground"
+          />
+          <ColorSwatch
+            hsl={colors["popover-foreground"]}
+            title="popover-foreground"
+          />
+          <ColorSwatch
+            hsl={colors["muted-foreground"]}
+            title="muted-foreground"
+          />
+          <ColorSwatch
+            hsl={colors["secondary-foreground"]}
+            title="secondary-foreground"
+          />
         </div>
       </div>
 
       {/* Primary */}
-            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
         <div className="w-24 text-sm font-medium">Primary</div>
-                <div className="flex gap-2 flex-wrap">
+        <div className="flex flex-wrap gap-2">
           <ColorSwatch hsl={colors.primary} title="primary" />
-                    <ColorSwatch hsl={colors["primary-foreground"]} title="primary-foreground" />
+          <ColorSwatch
+            hsl={colors["primary-foreground"]}
+            title="primary-foreground"
+          />
         </div>
       </div>
 
       {/* Destructive */}
-            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
         <div className="w-24 text-sm font-medium">Destructive</div>
-                <div className="flex gap-2 flex-wrap">
+        <div className="flex flex-wrap gap-2">
           <ColorSwatch hsl={colors.destructive} title="destructive" />
-                    <ColorSwatch hsl={colors["destructive-foreground"]} title="destructive-foreground" />
+          <ColorSwatch
+            hsl={colors["destructive-foreground"]}
+            title="destructive-foreground"
+          />
         </div>
       </div>
 
       {/* UI Elements */}
-            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
         <div className="w-24 text-sm font-medium">UI Elements</div>
-                <div className="flex gap-2 flex-wrap">
+        <div className="flex flex-wrap gap-2">
           <ColorSwatch hsl={colors.border} title="border" />
           <ColorSwatch hsl={colors.input} title="input" />
           <ColorSwatch hsl={colors.ring} title="ring" />
@@ -175,11 +202,12 @@ const ColorSection = ({ mode, colors }: { mode: "light" | "dark"; colors: typeof
 
 export function ColorPalette() {
   return (
-        <div className="space-y-12 not-prose my-8">
+    <div className="not-prose my-8 space-y-12">
       <div>
-                <h3 className="text-lg font-bold mb-4">Scales</h3>
-                <p className="text-muted-foreground mb-6">
-                    The system uses semantic color scales that adapt to the current theme. Hover to see hex codes.
+        <h3 className="mb-4 text-lg font-bold">Scales</h3>
+        <p className="mb-6 text-muted-foreground">
+          The system uses semantic color scales that adapt to the current theme.
+          Hover to see hex codes.
         </p>
 
         <div className="grid gap-12 lg:grid-cols-2">

src/components/Navigation.tsx

@@ -14,7 +14,7 @@ import {
 } from "lucide-react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 const navItems = [
   { href: "/", label: "About", icon: Home },
@@ -34,13 +34,13 @@ export function Navigation() {
   return (
     <>
       <nav
-        className={`fixed top-4 left-4 right-4 z-[51] rounded-2xl border bg-background/80 backdrop-blur-md shadow-sm transition-all duration-200 ${isOpen ? "border-transparent" : "border-border/60"
+        className={`fixed left-4 right-4 top-4 z-[51] rounded-2xl border bg-background/80 shadow-sm backdrop-blur-md transition-all duration-200 ${isOpen ? "border-transparent" : "border-border/60"
           }`}
       >
         <div className="relative px-8">
           <div className="flex h-16 items-center justify-between">
             <Link href="/" className="flex items-center py-2">
-              <span className="text-xl font-semibold font-heading tracking-tight transition-colors hover:text-primary">
+              <span className="font-heading text-xl font-semibold tracking-tight transition-colors hover:text-primary">
                 Sean O&apos;Connor
               </span>
             </Link>
@@ -87,7 +87,7 @@ export function Navigation() {
         aria-hidden="true"
       />
       <div
-        className={`fixed left-4 right-4 top-24 z-50 overflow-hidden rounded-2xl border border-border/50 bg-background/80 backdrop-blur-md shadow-sm transition-all duration-300 lg:hidden ${isOpen ? "max-h-[calc(100vh-8rem)] opacity-100" : "max-h-0 opacity-0"
+        className={`fixed left-4 right-4 top-24 z-50 overflow-hidden rounded-2xl border border-border/50 bg-background/80 shadow-sm backdrop-blur-md transition-all duration-300 lg:hidden ${isOpen ? "max-h-[calc(100vh-8rem)] opacity-100" : "max-h-0 opacity-0"
           }`}
       >
         <div className="flex flex-col space-y-2 p-4">

src/components/PageBreadcrumb.tsx

@@ -4,7 +4,6 @@ import * as React from "react";
 import { usePathname } from "next/navigation";
 import {
   Home,
-  ChevronRight,
   FolderGit2,
   BookOpenText,
   Newspaper,

src/components/Sidebar.tsx

@@ -70,7 +70,7 @@ export function Sidebar() {
       )}
 
       {/* Desktop layout - clean and elegant sidebar */}
-      <div className="hidden fixed top-24 left-4 bottom-4 w-80 rounded-3xl border border-border/60 bg-background/80 backdrop-blur-xl lg:block overflow-hidden">
+      <div className="fixed bottom-4 left-4 top-24 hidden w-80 overflow-hidden rounded-3xl border border-border/60 bg-background/80 backdrop-blur-xl lg:block">
         <div className="flex h-full flex-col">
           {/* Profile Section */}
           <div className="flex-shrink-0 border-b border-border/50 px-8 py-8">

src/components/mdx/Cards.tsx

@@ -13,9 +13,9 @@ export function CardGrid({ children, className, cols = 2 }: CardGridProps) {
   return (
     <div
       className={cn(
-                "grid gap-6 my-6",
+        "my-6 grid gap-6",
         cols === 2 ? "md:grid-cols-2" : "md:grid-cols-3",
-                className
+        className,
       )}
     >
       {children}
@@ -30,7 +30,12 @@ interface FeatureCardProps {
   className?: string;
 }
 
-export function FeatureCard({ title, icon: Icon, children, className }: FeatureCardProps) {
+export function FeatureCard({
+  title,
+  icon: Icon,
+  children,
+  className,
+}: FeatureCardProps) {
   return (
     <Card className={cn("h-full", className)}>
       <CardHeader className="pb-3">
@@ -53,9 +58,14 @@ interface ResourceCardProps {
   href: string;
 }
 
-export function ResourceCard({ title, subtitle, icon: Icon, href }: ResourceCardProps) {
+export function ResourceCard({
+  title,
+  subtitle,
+  icon: Icon,
+  href,
+}: ResourceCardProps) {
   return (
-        <Card className="h-full group cursor-pointer transition-colors hover:bg-accent">
+    <Card className="group h-full cursor-pointer transition-colors hover:bg-accent">
       <Link
         href={href}
         target="_blank"
@@ -87,9 +97,7 @@ interface InfoCardProps {
 export function InfoCard({ children, className }: InfoCardProps) {
   return (
     <Card className={cn("my-6", className)}>
-            <CardContent className="p-6 space-y-4">
-                {children}
-            </CardContent>
+      <CardContent className="space-y-4 p-6">{children}</CardContent>
     </Card>
   );
 }

src/components/ui/badge.tsx

@@ -24,7 +24,8 @@ const badgeVariants = cva(
 );
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {

src/components/ui/button.tsx

@@ -35,7 +35,8 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }

src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-3xl border border-border/60 bg-background/80 backdrop-blur-xl text-card-foreground shadow-sm overflow-hidden",
+      "overflow-hidden rounded-3xl border border-border/60 bg-background/80 text-card-foreground shadow-sm backdrop-blur-xl",
       className,
     )}
     {...props}

src/components/ui/dropdown-menu.tsx

@@ -50,7 +50,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-xl border border-border/50 bg-background/80 backdrop-blur-md p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-xl border border-border/50 bg-background/80 p-1 text-popover-foreground shadow-lg backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}
@@ -68,7 +68,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-xl border border-border/50 bg-background/80 backdrop-blur-md p-1 text-popover-foreground shadow-md",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-xl border border-border/50 bg-background/80 p-1 text-popover-foreground shadow-md backdrop-blur-md",
         "origin-[--radix-dropdown-menu-content-transform-origin] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}

src/components/ui/image-with-skeleton.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Image, { ImageProps } from "next/image";
+import Image, { type ImageProps } from "next/image";
 import { Skeleton } from "~/components/ui/skeleton";
 import { cn } from "~/lib/utils";
 
@@ -13,6 +13,7 @@ export function ImageWithSkeleton({
   className,
   containerClassName,
   onLoad,
+  alt,
   ...props
 }: ImageWithSkeletonProps) {
   const [isLoading, setIsLoading] = useState(true);
@@ -21,10 +22,13 @@ export function ImageWithSkeleton({
     <div className={cn("relative overflow-hidden", containerClassName)}>
       {isLoading && <Skeleton className="absolute inset-0 h-full w-full" />}
       <Image
+        alt={alt}
         className={cn(
           "duration-700 ease-in-out",
-                    isLoading ? "scale-110 blur-2xl grayscale" : "scale-100 blur-0 grayscale-0",
-                    className
+          isLoading
+            ? "scale-110 blur-2xl grayscale"
+            : "scale-100 blur-0 grayscale-0",
+          className,
         )}
         onLoad={(e) => {
           setIsLoading(false);

src/components/ui/tabs.tsx

@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-xl bg-background/80 backdrop-blur-md border border-border/50 shadow-sm p-1 text-muted-foreground",
+      "inline-flex h-9 items-center justify-center rounded-xl border border-border/50 bg-background/80 p-1 text-muted-foreground shadow-sm backdrop-blur-md",
       className,
     )}
     {...props}

src/content/blog/accessibility.mdx

@@ -5,9 +5,10 @@ import Link from "next/link";
 export const metadata = {
   title: "Accessibility Features",
   publishedAt: "2024-11-01",
-  summary: "A deep dive into the process of building an inclusive web experience, from semantic HTML to custom accessible components.",
+  summary:
+    "A deep dive into the process of building an inclusive web experience, from semantic HTML to custom accessible components.",
   tags: ["Accessibility", "WCAG", "Inclusive Design", "Web Standards"],
-  image: "/images/accessibility.png"
+  image: "/images/accessibility.png",
 };
 
 # Building an Inclusive Web Experience
@@ -21,22 +22,27 @@ For me, the motivation was twofold. Professionally, I wanted to demonstrate that
 ## The Implementation Process
 
 ### Starting with the Basics
+
 The journey began with the fundamentals: **Semantic HTML**. I ensured that the site uses a logical heading hierarchy (`h1` through `h6`) so that screen reader users can easily navigate the document structure. I also made sure to use appropriate semantic elements like `<article>`, `<nav>`, and `<main>` instead of just wrapping everything in `div`s.
 
 ### Visual Accessibility
+
 Color and contrast were next on my list. I carefully selected a color palette that meets **WCAG AA standards** for contrast, ensuring that text is readable for users with visual impairments. I also implemented a system-aware dark mode, which isn't just a cool feature—it's essential for users with light sensitivity.
 
 I also built a strict **Image Alt System**. Every image on the site is required to have descriptive alt text. This ensures that users who rely on screen readers don't miss out on the context that images provide.
 
 ### Interactive Elements
+
 One of the biggest challenges was ensuring **Keyboard Navigation**. I tested every interactive element—buttons, links, form inputs—to make sure they could be reached and operated using only a keyboard. This involved managing focus states and ensuring that the tab order was logical.
 
 ## Overcoming Technical Challenges
 
 ### The Hydration Problem
+
 Working with Next.js presented a unique challenge: **Hydration**. The split between server-side rendering (SSR) and client-side interactivity can sometimes cause issues with accessibility tools if the HTML structure changes during hydration. To solve this, I created client-side wrapper components for complex interactive features. This allowed me to keep the performance benefits of SSR while ensuring a stable, accessible experience on the client.
 
 ### Video Accessibility
+
 I didn't want to just embed a standard video player. I built a custom **AccessibleVideo** component that includes closed captions with a toggle, a full transcript, and keyboard-accessible controls. This ensures that my video content is accessible to users who are deaf or hard of hearing, as well as those who prefer reading over watching.
 
 ## Ongoing Commitment

src/content/blog/design-system.mdx

@@ -1,9 +1,10 @@
 export const metadata = {
   title: "Designing My System: Soft, Translucent, and Alive",
   publishedAt: "2025-12-10",
-  summary: "A deep dive into the design philosophy behind my personal website's new theme, moving from rigid boxes to organic, living layers.",
+  summary:
+    "A deep dive into the design philosophy behind my personal website's new theme, moving from rigid boxes to organic, living layers.",
   tags: ["Design", "UI/UX", "TailwindCSS", "Frontend"],
-  image: "/images/design-system.png"
+  image: "/images/design-system.png",
 };
 
 ## The Philosophy: Soft, Translucent, and Alive
@@ -22,9 +23,9 @@ The heartbeat of this theme is the background. Instead of a flat color or a stat
 
 ```tsx
 // src/app/layout.tsx
-<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
+<div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
   <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px)...] bg-[size:24px_24px]"></div>
-  <div className="w-[800px] h-[800px] bg-neutral-400/40 dark:bg-neutral-500/30 rounded-full blur-3xl animate-blob"></div>
+  <div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/40 blur-3xl dark:bg-neutral-500/30"></div>
 </div>
 ```
 
@@ -39,7 +40,7 @@ In a traditional layout, the sidebar is stuck to the left, and the navbar is stu
 - **Navbar**: Fixed `top-4`, `left-4`, `right-4`.
 - **Sidebar**: Fixed `top-24`, `left-4`, `bottom-4`.
 
-This creates a sense of layering. The UI elements aren't *part* of the window; they are tools floating *above* the content.
+This creates a sense of layering. The UI elements aren't _part_ of the window; they are tools floating _above_ the content.
 
 ## Design Tokens
 
@@ -75,21 +76,21 @@ For typography, I wanted to blend the readability of a digital product with the
 
 ### The Serif: Playfair Display
 
-<p className="text-4xl font-heading mb-6">Playfair Display</p>
+<p className="mb-6 font-heading text-4xl">Playfair Display</p>
 
 I chose **Playfair Display** for all headings (`h1`–`h6`). It's a transitional serif typeface with high contrast strokes and delicate hairlines.
 
-*   **Why Serif?** Serifs feel "human", "established", and "emotional". They break the sterile "tech" vibe common in developer portfolios.
-*   **Why Playfair?** Its high contrast makes it perfect for large display sizes. It commands attention and adds a layer of sophistication that a sans-serif simply cannot achieve.
+- **Why Serif?** Serifs feel "human", "established", and "emotional". They break the sterile "tech" vibe common in developer portfolios.
+- **Why Playfair?** Its high contrast makes it perfect for large display sizes. It commands attention and adds a layer of sophistication that a sans-serif simply cannot achieve.
 
 ### The Sans: Inter
 
-<p className="text-4xl font-sans mb-6">Inter</p>
+<p className="mb-6 font-sans text-4xl">Inter</p>
 
 I chose **Inter** for the body text. It is the gold standard for screen readability.
 
-*   **Why Sans?** Sans-serif fonts are "rational", "clean", and "invisible". They reduce cognitive load, making long-form reading (like this blog post) effortless.
-*   **Why Inter?** It was designed specifically for computer screens, with a tall x-height that remains legible even at small sizes.
+- **Why Sans?** Sans-serif fonts are "rational", "clean", and "invisible". They reduce cognitive load, making long-form reading (like this blog post) effortless.
+- **Why Inter?** It was designed specifically for computer screens, with a tall x-height that remains legible even at small sizes.
 
 ### Implementation
 
@@ -109,7 +110,12 @@ theme: {
 
 ```css
 /* src/styles/globals.css */
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   @apply font-heading; /* Playfair Display */
 }
 

src/content/blog/eceg431.mdx

@@ -1,9 +1,10 @@
 export const metadata = {
   title: "ECEG 431 E-Portfolio",
   publishedAt: "2025-12-01",
-  summary: "E-Portfolio and reflection for the Nand2Tetris course, covering the journey from NAND gates to a high-level compiler.",
+  summary:
+    "E-Portfolio and reflection for the Nand2Tetris course, covering the journey from NAND gates to a high-level compiler.",
   tags: ["Simulation", "Compilers", "Python", "Assembly", "VM", "OS"],
-  image: "/images/nand2tetris.png"
+  image: "/images/nand2tetris.png",
 };
 
 ## Assignment Prompt
@@ -71,7 +72,7 @@ The "oh crap" moment. A dark figure from the past comes to haunt you; a love is
 
 For the course, this could be lots of things. Work piling up? Concepts getting hard? Confusion setting in? Difficulty asking for help? Reliance on LLMs piling on? Not coming to class? Or maybe something entirely external to the course. What was it for you? There seems to be a common theme that happens to all of us in this course---we set out strong, start doing well with big dreams, but we typically all go through something and our original plans for the course start to crumble. What were those moments for you?
 
-**[Project 5: The CPU](https://github.com/soconnor0919/eceg431/blob/main/05/CPU.hdl)**. This is where the "just wrapping logic gates" theory fell apart. It wasn't just logic anymore; it was *timing*. It was *control*. Decoding instructions was fine, but managing the control flow was a nightmare.
+**[Project 5: The CPU](https://github.com/soconnor0919/eceg431/blob/main/05/CPU.hdl)**. This is where the "just wrapping logic gates" theory fell apart. It wasn't just logic anymore; it was _timing_. It was _control_. Decoding instructions was fine, but managing the control flow was a nightmare.
 
 ```hdl
 // projects/05/CPU.hdl
@@ -83,7 +84,7 @@ Not(in=aInstr, out=cInstr); // cInstr = 1 when instruction[15] = 1
 Mux16(a=instruction, b=aluOut, sel=cInstr, out=aRegIn);
 ```
 
-As I wrote in my reflection: *"The problem was taking the instruction and turning it into something the ALU could handle... I just repeatedly hit my head against a wall."* (Project 5 Reflection). The fix wasn't more code. I had to stop coding and start drawing. I couldn't "hack" my way through a hardware definition. I had to understand the signals.
+As I wrote in my reflection: _"The problem was taking the instruction and turning it into something the ALU could handle... I just repeatedly hit my head against a wall."_ (Project 5 Reflection). The fix wasn't more code. I had to stop coding and start drawing. I couldn't "hack" my way through a hardware definition. I had to understand the signals.
 
 > There are three steps to solving a problem. Write down what you know, Think really hard, Write down the answer. You're at step 2.
 

src/content/blog/latex-intro.mdx

@@ -6,9 +6,10 @@ import Link from "next/link";
 export const metadata = {
   title: "Getting Started with LaTeX",
   publishedAt: "2024-10-15",
-  summary: "A guide to my 5-minute introduction to LaTeX, explaining why it's the gold standard for academic writing and how to get started.",
+  summary:
+    "A guide to my 5-minute introduction to LaTeX, explaining why it's the gold standard for academic writing and how to get started.",
   tags: ["LaTeX", "Tutorial", "Accessibility", "Education", "Overleaf"],
-  image: "/latex-thumbnail.jpg"
+  image: "/latex-thumbnail.jpg",
 };
 
 export const transcript = `
@@ -30,7 +31,7 @@ export const transcript = `
 
 In the world of engineering and science, clear communication is just as important as the technical work itself. I created this tutorial because I noticed many students struggling to format their mathematical equations and technical reports using standard word processors. **LaTeX** is the solution to that problem.
 
-It's the gold standard for academic and technical document preparation, especially in mathematics, computer science, and physics. Once you get past the initial learning curve, it allows you to focus entirely on the *content* of your work, trusting the system to handle the *presentation* professionally.
+It's the gold standard for academic and technical document preparation, especially in mathematics, computer science, and physics. Once you get past the initial learning curve, it allows you to focus entirely on the _content_ of your work, trusting the system to handle the _presentation_ professionally.
 
 ## The Tutorial
 

src/context/BreadcrumbContext.tsx

@@ -7,9 +7,15 @@ interface BreadcrumbContextType {
   setCustomTitle: (title: string | null) => void;
 }
 
-const BreadcrumbContext = createContext<BreadcrumbContextType | undefined>(undefined);
+const BreadcrumbContext = createContext<BreadcrumbContextType | undefined>(
+  undefined,
+);
 
-export function BreadcrumbProvider({ children }: { children: React.ReactNode }) {
+export function BreadcrumbProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   const [customTitle, setCustomTitle] = useState<string | null>(null);
 
   return (

src/lib/bibtex.ts

@@ -37,7 +37,7 @@ function parseAuthors(authorString: string): string[] {
 
 function parseBibTeXEntry(entry: string): BibTeXEntry | null {
   // Match the entry type and content
-  const typeMatch = entry.match(/^(\w+)\s*{\s*([\w\d-_]+)\s*,/);
+  const typeMatch = /^(\w+)\s*{\s*([\w\d-_]+)\s*,/.exec(entry);
   if (!typeMatch) return null;
 
   const type = typeMatch[1]!.toLowerCase();
@@ -55,7 +55,7 @@ function parseBibTeXEntry(entry: string): BibTeXEntry | null {
     if (!trimmedLine || trimmedLine === "}") continue;
 
     // Try to match a new field
-    const fieldMatch = trimmedLine.match(/(\w+)\s*=\s*{(.+?)},?$/);
+    const fieldMatch = /(\w+)\s*=\s*{(.+?)},?$/.exec(trimmedLine);
     if (fieldMatch?.[1] && fieldMatch?.[2]) {
       // Save previous field if exists
       if (currentField) {
@@ -103,15 +103,15 @@ export function parseBibtex(bibtex: string): Publication[] {
     })();
 
     return {
-      title: entry.fields.title?.replace(/[{}]/g, "") || "",
-      authors: parseAuthors(entry.fields.author || ""),
+      title: entry.fields.title?.replace(/[{}]/g, "") ?? "",
+      authors: parseAuthors(entry.fields.author ?? ""),
       venue:
-        entry.fields.booktitle ||
-        entry.fields.journal ||
-        entry.fields.organization ||
-        entry.fields.school ||
+        entry.fields.booktitle ??
+        entry.fields.journal ??
+        entry.fields.organization ??
+        entry.fields.school ??
         "",
-      year: parseInt(entry.fields.year || "0", 10),
+      year: parseInt(entry.fields.year ?? "0", 10),
       doi: entry.fields.doi,
       url: entry.fields.url,
       paperUrl: entry.fields.paperurl,
@@ -120,7 +120,7 @@ export function parseBibtex(bibtex: string): Publication[] {
       abstract: entry.fields.abstract,
       citationType: entry.type,
       citationKey: entry.citationKey,
-      notes: entry.fields.note || entry.fields.notes,
+      notes: entry.fields.note ?? entry.fields.notes,
       address: entry.fields.address,
       type: publicationType,
     };

src/lib/data.ts

@@ -414,14 +414,7 @@ export const projects: Project[] = [
       "A complete implementation of a general-purpose computer system, from NAND gates to a high-level object-oriented compiler.",
     longDescription:
       "Built a complete computer system from the ground up as part of the Nand2Tetris course (ECEG 431). Starting with a single NAND gate, I designed and simulated all hardware components including logic gates, ALU, RAM, and the CPU. On the software side, I developed an assembler, a virtual machine translator, and a compiler for a high-level object-oriented language, culminating in a fully functional Operating System. This project provided a deep, demystified understanding of how computers actually work under the hood.",
-    tags: [
-      "Simulation",
-      "Compilers",
-      "Python",
-      "Assembly",
-      "VM",
-      "OS",
-    ],
+    tags: ["Simulation", "Compilers", "Python", "Assembly", "VM", "OS"],
     link: "/blog/eceg431",
     gitLink: "https://github.com/soconnor0919/eceg431",
     image: "/images/nand2tetris.png",
@@ -443,8 +436,7 @@ export const projects: Project[] = [
   },
   {
     title: "PDF2MD",
-    description:
-      "A web application that converts PDFs to Markdown files.",
+    description: "A web application that converts PDFs to Markdown files.",
     longDescription:
       "Uses OCR and PDF parsing to extract text and convert it to Markdown, for easy editing and formatting.",
     tags: ["PDF", "Markdown", "OCR"],

tailwind.config.ts

@@ -1,5 +1,7 @@
 import { type Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";
+import typography from "@tailwindcss/typography";
+import tailwindAnimate from "tailwindcss-animate";
 
 export default {
   darkMode: "media",
@@ -64,5 +66,5 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+  plugins: [tailwindAnimate, typography],
 } satisfies Config;