perf: fix TBT/LCP/a11y — disable shader animation, cache APIs, fix images

Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com>

app/api/book-reviews/route.ts

@@ -3,7 +3,9 @@ import { getBookReviews } from '@/lib/directus';
 import { checkRateLimit, getClientIp } from '@/lib/auth';
 
 export const runtime = 'nodejs';
-export const dynamic = 'force-dynamic';
+export const revalidate = 300;
+
+const CACHE_TTL = 300; // 5 minutes
 
 /**
  * GET /api/book-reviews
@@ -31,25 +33,23 @@ export async function GET(request: NextRequest) {
     }
 
     if (reviews && reviews.length > 0) {
-      return NextResponse.json({
-        bookReviews: reviews,
-        source: 'directus'
-      });
+      return NextResponse.json(
+        { bookReviews: reviews, source: 'directus' },
+        { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
     }
 
-    return NextResponse.json({
-      bookReviews: null,
-      source: 'fallback'
-    });
+    return NextResponse.json(
+      { bookReviews: null, source: 'fallback' },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
 
   } catch (error) {
-    console.error('Error loading book reviews:', error);
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error loading book reviews:', error);
+    }
     return NextResponse.json(
-      {
-        bookReviews: null,
-        error: 'Failed to load book reviews',
-        source: 'error'
-      },
+      { bookReviews: null, error: 'Failed to load book reviews', source: 'error' },
       { status: 500 }
     );
   }

app/api/content/page/route.ts

@@ -2,6 +2,8 @@ import { NextRequest, NextResponse } from "next/server";
 import { getContentByKey } from "@/lib/content";
 import { getContentPage } from "@/lib/directus";
 
+const CACHE_TTL = 300; // 5 minutes
+
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url);
   const key = searchParams.get("key");
@@ -15,21 +17,32 @@ export async function GET(request: NextRequest) {
     // 1) Try Directus first
     const directusPage = await getContentPage(key, locale);
     if (directusPage) {
-      return NextResponse.json({
-        content: {
-          title: directusPage.title,
-          slug: directusPage.slug,
-          locale: directusPage.locale || locale,
-          content: directusPage.content,
+      return NextResponse.json(
+        {
+          content: {
+            title: directusPage.title,
+            slug: directusPage.slug,
+            locale: directusPage.locale || locale,
+            content: directusPage.content,
+          },
+          source: "directus",
         },
-        source: "directus",
-      });
+        { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
     }
 
     // 2) Fallback: PostgreSQL
     const translation = await getContentByKey({ key, locale });
-    if (!translation) return NextResponse.json({ content: null });
-    return NextResponse.json({ content: translation, source: "postgresql" });
+    if (!translation) {
+      return NextResponse.json(
+        { content: null },
+        { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
+    }
+    return NextResponse.json(
+      { content: translation, source: "postgresql" },
+      { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
   } catch (error) {
     // If DB isn't migrated/available, fail soft so the UI can fall back to next-intl strings.
     if (process.env.NODE_ENV === "development") {

app/api/hobbies/route.ts

@@ -3,7 +3,9 @@ import { getHobbies } from '@/lib/directus';
 import { checkRateLimit, getClientIp } from '@/lib/auth';
 
 export const runtime = 'nodejs';
-export const dynamic = 'force-dynamic';
+export const revalidate = 300;
+
+const CACHE_TTL = 300; // 5 minutes
 
 /**
  * GET /api/hobbies
@@ -28,26 +30,24 @@ export async function GET(request: NextRequest) {
     const hobbies = await getHobbies(locale);
 
     if (hobbies && hobbies.length > 0) {
-      return NextResponse.json({
-        hobbies,
-        source: 'directus'
-      });
+      return NextResponse.json(
+        { hobbies, source: 'directus' },
+        { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
     }
 
     // Fallback: return empty (component will use hardcoded fallback)
-    return NextResponse.json({
-      hobbies: null,
-      source: 'fallback'
-    });
+    return NextResponse.json(
+      { hobbies: null, source: 'fallback' },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
 
   } catch (error) {
-    console.error('Error loading hobbies:', error);
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error loading hobbies:', error);
+    }
     return NextResponse.json(
-      { 
-        hobbies: null, 
-        error: 'Failed to load hobbies',
-        source: 'error' 
-      },
+      { hobbies: null, error: 'Failed to load hobbies', source: 'error' },
       { status: 500 }
     );
   }

app/api/messages/route.ts

@@ -1,13 +1,18 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getMessages } from "@/lib/directus";
 
+const CACHE_TTL = 300; // 5 minutes
+
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url);
   const locale = searchParams.get("locale") || "en";
 
   try {
     const messages = await getMessages(locale);
-    return NextResponse.json({ messages });
+    return NextResponse.json(
+      { messages },
+      { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
   } catch {
     return NextResponse.json({ messages: {} }, { status: 500 });
   }

app/api/snippets/route.ts

@@ -1,6 +1,8 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getSnippets } from '@/lib/directus';
 
+const CACHE_TTL = 300; // 5 minutes
+
 export async function GET(request: NextRequest) {
   try {
     const { searchParams } = new URL(request.url);
@@ -9,9 +11,10 @@ export async function GET(request: NextRequest) {
     
     const snippets = await getSnippets(limit, featured);
     
-    return NextResponse.json({
-      snippets: snippets || []
-    });
+    return NextResponse.json(
+      { snippets: snippets || [] },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
   } catch (_error) {
     return NextResponse.json({ error: 'Failed to fetch snippets' }, { status: 500 });
   }

app/api/tech-stack/route.ts

@@ -3,7 +3,9 @@ import { getTechStack } from '@/lib/directus';
 import { checkRateLimit, getClientIp } from '@/lib/auth';
 
 export const runtime = 'nodejs';
-export const dynamic = 'force-dynamic';
+export const revalidate = 300;
+
+const CACHE_TTL = 300; // 5 minutes
 
 /**
  * GET /api/tech-stack
@@ -28,26 +30,24 @@ export async function GET(request: NextRequest) {
     const techStack = await getTechStack(locale);
 
     if (techStack && techStack.length > 0) {
-      return NextResponse.json({
-        techStack,
-        source: 'directus'
-      });
+      return NextResponse.json(
+        { techStack, source: 'directus' },
+        { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
     }
 
     // Fallback: return empty (component will use hardcoded fallback)
-    return NextResponse.json({
-      techStack: null,
-      source: 'fallback'
-    });
+    return NextResponse.json(
+      { techStack: null, source: 'fallback' },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
 
   } catch (error) {
-    console.error('Error loading tech stack:', error);
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error loading tech stack:', error);
+    }
     return NextResponse.json(
-      { 
-        techStack: null, 
-        error: 'Failed to load tech stack',
-        source: 'error' 
-      },
+      { techStack: null, error: 'Failed to load tech stack', source: 'error' },
       { status: 500 }
     );
   }

app/components/About.tsx

@@ -34,12 +34,11 @@ const About = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const [cmsRes, techRes, hobbiesRes, msgRes, booksRes, snippetsRes] = await Promise.all([
+        const [cmsRes, techRes, hobbiesRes, msgRes, snippetsRes] = await Promise.all([
           fetch(`/api/content/page?key=home-about&locale=${locale}`),
           fetch(`/api/tech-stack?locale=${locale}`),
           fetch(`/api/hobbies?locale=${locale}`),
           fetch(`/api/messages?locale=${locale}`),
-          fetch(`/api/book-reviews?locale=${locale}`),
           fetch(`/api/snippets?limit=3&featured=true`)
         ]);
         
@@ -57,9 +56,6 @@ const About = () => {
 
         const snippetsData = await snippetsRes.json();
         if (snippetsData?.snippets) setSnippets(snippetsData.snippets);
-
-        await booksRes.json();
-        // Books data is available but we don't need to track count anymore
       } catch (error) {
         console.error("About data fetch failed:", error);
       } finally {

app/components/ActivityFeed.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Disc3, Gamepad2, Zap, Quote as QuoteIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 interface CustomActivity {
   [key: string]: unknown;
@@ -172,7 +173,7 @@ export default function ActivityFeed({
           <div className="flex gap-4">
             {data.gaming.image && (
               <div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-lg relative">
-                <img src={data.gaming.image} alt={data.gaming.name} className="w-full h-full object-cover" />
+                <Image src={data.gaming.image} alt={data.gaming.name} fill className="object-cover" sizes="48px" unoptimized />
               </div>
             )}
             <div className="min-w-0 flex flex-col justify-center">
@@ -215,10 +216,12 @@ export default function ActivityFeed({
           </div>
           <div className="flex gap-4 relative z-10">
             <div className="w-16 h-16 rounded-lg overflow-hidden shrink-0 shadow-md relative group-hover:shadow-xl transition-shadow duration-500">
-              <img 
+              <Image
                 src={data.music.albumArt}
                 alt="Album Art"
-                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" 
+                fill
+                className="object-cover transition-transform duration-700 group-hover:scale-110"
+                sizes="64px"
               />
             </div>
             <div className="min-w-0 flex flex-col justify-center">

app/components/BentoChat.tsx

@@ -105,7 +105,7 @@ export default function BentoChat() {
           placeholder="Ask me..."
           className="w-full bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-2xl py-3 pl-4 pr-12 text-sm focus:outline-none focus:ring-2 focus:ring-liquid-purple/30 transition-all shadow-inner dark:text-white"
         />
-        <button onClick={handleSend} className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-liquid-purple hover:scale-110 transition-transform">
+        <button onClick={handleSend} aria-label="Send message" className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-liquid-purple hover:scale-110 transition-transform">
           <Send size={18} />
         </button>
       </div>

app/components/Contact.tsx

@@ -192,7 +192,7 @@ const Contact = () => {
             <div className="bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex-1 flex flex-col justify-between relative overflow-hidden group">
                <div className="relative z-10">
                  <div className="flex justify-between items-center mb-6 sm:mb-8 md:mb-12">
-                   <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">Connect</h4>
+                   <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">Connect</p>
                    <div className="flex items-center gap-2 px-3 py-1 bg-emerald-500/10 rounded-full border border-emerald-500/20">
                      <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
                      <span className="text-[10px] font-black uppercase tracking-widest text-emerald-600 dark:text-emerald-400">Online</span>

app/components/Hero.tsx

@@ -115,7 +115,7 @@ const Hero = () => {
           >
             <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[3rem] sm:rounded-[4rem] lg:rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl" />
             <div className="relative w-full h-full rounded-[2.5rem] sm:rounded-[3rem] lg:rounded-[4rem] overflow-hidden border-[12px] sm:border-[16px] lg:border-[24px] border-white dark:border-stone-900 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] sm:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]">
-              <Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority />
+              <Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority sizes="(max-width: 640px) 208px, (max-width: 768px) 256px, (max-width: 1024px) 320px, 500px" />
             </div>
 
             <div className="absolute -bottom-4 -left-4 sm:-bottom-6 sm:-left-6 bg-white dark:bg-stone-800 px-5 py-3 sm:px-8 sm:py-4 rounded-xl sm:rounded-[2rem] shadow-2xl border border-stone-100 dark:border-stone-700">

app/components/ShaderGradientBackground.tsx

@@ -31,7 +31,7 @@ const ShaderGradientBackground = () => {
         <ShaderGradient
           control="props"
           type="sphere"
-          animate="on"
+          animate="off"
           brightness={1.3}
           cAzimuthAngle={180}
           cDistance={3.6}
@@ -57,7 +57,7 @@ const ShaderGradientBackground = () => {
         <ShaderGradient
           control="props"
           type="sphere"
-          animate="on"
+          animate="off"
           brightness={1.25}
           cAzimuthAngle={180}
           cDistance={3.6}
@@ -83,7 +83,7 @@ const ShaderGradientBackground = () => {
         <ShaderGradient
           control="props"
           type="sphere"
-          animate="on"
+          animate="off"
           brightness={1.2}
           cAzimuthAngle={180}
           cDistance={3.6}

app/layout.tsx

@@ -2,10 +2,15 @@ import "./globals.css";
 import { Metadata } from "next";
 import { Inter, Playfair_Display } from "next/font/google";
 import React from "react";
+import dynamic from "next/dynamic";
 import ClientProviders from "./components/ClientProviders";
 import { cookies } from "next/headers";
 import { getBaseUrl } from "@/lib/seo";
-import ShaderGradientBackground from "./components/ShaderGradientBackground";
+
+const ShaderGradientBackground = dynamic(
+  () => import("./components/ShaderGradientBackground"),
+  { ssr: false, loading: () => null }
+);
 
 const inter = Inter({
   variable: "--font-inter",
@@ -32,6 +37,7 @@ export default async function RootLayout({
     <html lang={locale} suppressHydrationWarning>
       <head>
         <meta charSet="utf-8" />
+        <link rel="preconnect" href="https://i.scdn.co" crossOrigin="anonymous" />
       </head>
       <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
         <div className="grain-overlay" aria-hidden="true" />

next.config.ts

@@ -46,7 +46,7 @@ const nextConfig: NextConfig = {
   // Image optimization
   images: {
     formats: ["image/webp", "image/avif"],
-    minimumCacheTTL: 60,
+    minimumCacheTTL: 2592000,
     remotePatterns: [
       {
         protocol: "https",
@@ -169,7 +169,35 @@ const nextConfig: NextConfig = {
         ],
       },
       {
-        source: "/api/(.*)",
+        // Only prevent caching for real-time/sensitive API routes
+        source: "/api/n8n/(.*)",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "no-store, no-cache, must-revalidate, proxy-revalidate",
+          },
+        ],
+      },
+      {
+        source: "/api/auth/(.*)",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "no-store, no-cache, must-revalidate, proxy-revalidate",
+          },
+        ],
+      },
+      {
+        source: "/api/email/(.*)",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "no-store, no-cache, must-revalidate, proxy-revalidate",
+          },
+        ],
+      },
+      {
+        source: "/api/contacts/(.*)",
         headers: [
           {
             key: "Cache-Control",

package.json

@@ -115,5 +115,11 @@
     "tsx": "^4.20.5",
     "typescript": "5.9.3",
     "whatwg-fetch": "^3.6.20"
-  }
+  },
+  "browserslist": [
+    "chrome >= 100",
+    "firefox >= 100",
+    "safari >= 15",
+    "edge >= 100"
+  ]
 }