🎨 Palette: UX & Accessibility Improvements

src/app/globals.css

@@ -30,6 +30,15 @@
   /* other browsers */
 }
 
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 p,
 div {
   text-align: justify;

src/components/footer.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { SunIcon, MoonIcon } from "@heroicons/react/24/outline";
 import { Switch } from "@heroui/react";
 
 import { useTheme } from "@/contexts/theme";
@@ -33,7 +34,13 @@ const Footer = () => {
             aria-label="Toggle dark mode"
           >
             <Switch.Control className="data-[selected=true]:bg-primary">
-              <Switch.Thumb />
+              <Switch.Thumb className="flex items-center justify-center">
+                {theme === "dark" ? (
+                  <MoonIcon className="size-3 text-primary" />
+                ) : (
+                  <SunIcon className="size-3 text-amber-500" />
+                )}
+              </Switch.Thumb>
             </Switch.Control>
           </Switch>
           <span className="text-sm font-medium text-slate-500 dark:text-slate-400 min-w-20">

src/components/header.tsx

@@ -95,7 +95,7 @@ export const MainHeader = () => {
             aria-label="Toggle menu"
             aria-expanded={isMenuOpen}
             aria-controls="mobile-menu"
-            className="p-2"
+            className="p-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md"
           >
             <svg
               className="h-6 w-6"
@@ -126,7 +126,7 @@ export const MainHeader = () => {
           {sections.map((section) => (
             <li key={section.name}>
               <a
-                className={`text-sm font-medium transition-colors hover:text-primary ${
+                className={`text-sm font-medium transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md px-1 ${
                   activeSection === section.link.substring(1)
                     ? "text-primary"
                     : "text-foreground-500"
@@ -150,7 +150,7 @@ export const MainHeader = () => {
             {sections.map((section) => (
               <li key={section.name}>
                 <a
-                  className={`block text-lg py-2 transition-colors hover:text-primary ${
+                  className={`block text-lg py-2 transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md px-2 ${
                     activeSection === section.link.substring(1)
                       ? "text-primary"
                       : "text-foreground-500"

src/components/publication.tsx

@@ -37,7 +37,7 @@ const CiteButton = ({ publication }: { publication: Publication }) => {
       <Popover.Trigger>
         <button
           aria-label="Cite"
-          className="text-slate-500 hover:text-primary transition-colors flex items-center gap-1 text-sm font-medium h-auto p-0 min-w-0 bg-transparent"
+          className="text-slate-500 hover:text-primary transition-colors flex items-center gap-1 text-sm font-medium h-auto p-0 min-w-0 bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md px-1"
         >
           <FaQuoteLeft className="size-4" />
           <span>Cite</span>

src/components/section-item-card.tsx

@@ -24,7 +24,12 @@ export const SectionItemCard = ({
 }: SectionItemCardProps) => {
   return (
     <div className="transition-all duration-700">
-      <a href={href} target="_blank" rel="noopener noreferrer">
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-xl"
+      >
         <div className="section-item p-3">
           <Image src={image.src} alt={image.alt} width={150} height={150} />
           <p className="text-xl md:text-2xl text-foreground">{title}</p>