fix: Lighthouse a11y and perf — aria, contrast, images, browserslist

app/globals.css

@@ -167,9 +167,3 @@ body {
     animation: none;
   }
 }
-
-@media (hover: none) {
-  .fluid-shape {
-    display: none;
-  }
-}

components/ui/animated-marquee.tsx

@@ -14,7 +14,7 @@ export function AnimatedMarquee({ items }: AnimatedMarqueeProps) {
         {marqueeItems.map((item, i) => (
           <div
             key={i}
-            className="text-zinc-500 dark:text-zinc-500 font-heading tracking-wider font-semibold text-sm uppercase flex items-center"
+            className="text-zinc-500 dark:text-zinc-400 font-heading tracking-wider font-semibold text-sm uppercase flex items-center"
           >
             {item}
           </div>

components/ui/back-to-top.tsx

@@ -18,6 +18,7 @@ export function BackToTop() {
             className={`fixed bottom-8 right-8 z-50 p-3 rounded-full glass-card text-zinc-500 dark:text-zinc-400 hover:text-accent dark:hover:text-accent transition-all duration-200 ${visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}`}
             aria-label="Back to top"
             aria-hidden={!visible}
+            tabIndex={visible ? undefined : -1}
         >
             <ArrowUp size={18} />
         </button>

components/ui/experience-card.tsx

@@ -67,7 +67,7 @@ export function ExperienceCard({ experience, isOpen, onToggle }: ExperienceCardP
                     }}
                 >
                     <div style={{ minHeight: TEASER_HEIGHT }}>
-                        <p className="text-zinc-600 dark:text-zinc-500 text-sm leading-relaxed">{experience.description}</p>
+                        <p className="text-zinc-600 dark:text-zinc-400 text-sm leading-relaxed">{experience.description}</p>
                     </div>
                 </div>
 

package.json

@@ -19,6 +19,19 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1"
   },
+  "browserslist": {
+    "production": [
+      "chrome >= 100",
+      "edge >= 100",
+      "firefox >= 100",
+      "safari >= 15.4"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",

todo.md

@@ -1,5 +1,14 @@
 # Todo
 
+## Render-blocking CSS
+
+Next.js App Router injects CSS via `<link rel="stylesheet" data-precedence="next">`. Because of the `data-precedence` attribute (React's internal hydration ordering), `beasties` inlines critical CSS but leaves the blocking `<link>` intact — Lighthouse still flags it. Work was reverted.
+
+- [ ] Find a strategy compatible with `data-precedence`:
+  - Option A: run beasties, then patch remaining `<link rel="stylesheet" data-precedence="next">` tags to `media="print" onload="this.media='all'"` + `<noscript>` fallback
+  - Option B: wait for a beasties release that handles `data-precedence`
+  - Option C: accept it — the render-blocking CSS is small and GitHub Pages cache TTL is the bigger bottleneck
+
 ## i18n — Spanish support
 
 Add a language toggle (EN / ES) so the site can be read in Spanish.