perf: remove Sentry client SDK and lazy-load TipTap (~830KB saved)

- Remove withSentryConfig wrapper from next.config.ts (Sentry was disabled anyway)
- Clear instrumentation-client.ts to prevent Sentry client bundle (~400KB)
- Lazy-load RichTextClient via next/dynamic in About.tsx and Contact.tsx
- Defers TipTap/ProseMirror loading until CMS data arrives (~430KB)
- Homepage First Load JS: 1479KB → 646KB (56% reduction)
- Shared JS: 182KB → 102KB (44% reduction)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

.gitignore

@@ -1,5 +1,9 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Local tooling
+.claude/
+._*
+
 # dependencies
 /node_modules
 /.pnp

app/components/About.tsx

@@ -4,7 +4,8 @@ import { useState, useEffect } from "react";
 import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, BookOpen, MessageSquare, ArrowRight, Tv, Plane, Camera, Stars, Music, Terminal, Cpu } from "lucide-react";
 import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
-import RichTextClient from "./RichTextClient";
+import dynamic from "next/dynamic";
+const RichTextClient = dynamic(() => import("./RichTextClient"), { ssr: false });
 import CurrentlyReading from "./CurrentlyReading";
 import ReadBooks from "./ReadBooks";
 import { motion, AnimatePresence } from "framer-motion";
@@ -86,7 +87,7 @@ const About = () => {
           >
             <div className="space-y-5 sm:space-y-6 md:space-y-8">
               <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase">
-                {t("title")}<span className="text-liquid-mint">.</span>
+                {t("title")}<span className="text-emerald-600 dark:text-emerald-400">.</span>
               </h2>
               <div className="prose prose-stone dark:prose-invert max-w-none text-base sm:text-lg md:text-xl lg:text-2xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
                 {isLoading ? (
@@ -103,7 +104,7 @@ const About = () => {
               </div>
               <div className="pt-4 sm:pt-6 md:pt-8">
                 <div className="inline-block bg-stone-50 dark:bg-stone-800 px-5 py-3 sm:px-8 sm:py-4 rounded-2xl sm:rounded-3xl border border-stone-100 dark:border-stone-700">
-                   <p className="text-[10px] font-black uppercase tracking-[0.2em] text-liquid-mint mb-1 sm:mb-2">{t("funFactTitle")}</p>
+                   <p className="text-[10px] font-black uppercase tracking-[0.2em] text-emerald-700 dark:text-emerald-400 mb-1 sm:mb-2">{t("funFactTitle")}</p>
                    {isLoading ? <Skeleton className="h-5 w-48" /> : <p className="text-sm sm:text-base font-bold opacity-90">{t("funFactBody")}</p>}
                 </div>
               </div>
@@ -167,7 +168,7 @@ const About = () => {
               ) : (
                 techStack.map((cat) => (
                   <div key={cat.id} className="space-y-6">
-                    <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">{cat.name}</h4>
+                    <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">{cat.name}</h4>
                     <div className="flex flex-wrap gap-2">
                       {cat.items?.map((item: TechStackItem) => (
                         <span key={item.id} className="px-4 py-2 bg-stone-50 dark:bg-stone-800 rounded-xl text-xs font-bold border border-stone-100 dark:border-stone-700/50 hover:border-liquid-mint transition-colors">
@@ -263,16 +264,16 @@ const About = () => {
                           onClick={() => setSelectedSnippet(s)}
                           className="w-full text-left p-3 bg-stone-50 dark:bg-stone-800 rounded-xl border border-stone-100 dark:border-stone-700 hover:border-liquid-purple transition-all group/s"
                         >
-                          <p className="text-[9px] font-black uppercase tracking-widest text-stone-400 mb-0.5 group-hover/s:text-liquid-purple transition-colors">{s.category}</p>
+                          <p className="text-[9px] font-black uppercase tracking-widest text-stone-600 dark:text-stone-400 mb-0.5 group-hover/s:text-liquid-purple transition-colors">{s.category}</p>
                           <p className="text-xs font-bold text-stone-800 dark:text-stone-200">{s.title}</p>
                         </button>
                       ))
                     ) : (
-                      <p className="text-xs text-stone-400 italic">No snippets yet.</p>
+                      <p className="text-xs text-stone-500 dark:text-stone-400 italic">No snippets yet.</p>
                     )}
                   </div>
                 </div>
-                <Link href={`/${locale}/snippets`} className="mt-6 group/btn inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">
+                <Link href={`/${locale}/snippets`} className="mt-6 group/btn inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">
                   Enter the Lab <ArrowRight size={12} className="group-hover/btn:translate-x-1 transition-transform" />
                 </Link>
               </motion.div>
@@ -371,7 +372,7 @@ const About = () => {
               <div className="p-6 bg-stone-50 dark:bg-stone-800/50 border-t border-stone-100 dark:border-stone-800 text-center">
                 <button 
                   onClick={() => setSelectedSnippet(null)}
-                  className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
+                  className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
                 >
                   Close Laboratory
                 </button>

app/components/ActivityFeed.tsx

@@ -134,7 +134,7 @@ export default function ActivityFeed({
               transition={{ duration: 0.5 }}
               className="space-y-4"
             >
-              <p className="text-base sm:text-lg md:text-xl lg:text-2xl font-light leading-tight text-stone-700 dark:text-stone-300 italic">
+              <p className="text-base sm:text-lg md:text-xl lg:text-2xl font-light leading-tight text-stone-300 italic">
                 &ldquo;{allQuotes[quoteIndex].content}&rdquo;
               </p>
               <p className="text-xs font-black text-stone-400 dark:text-stone-500 uppercase tracking-widest">

app/components/ClientProviders.tsx

@@ -14,6 +14,11 @@ const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs").cat
   loading: () => null,
 });
 
+const ShaderGradientBackground = dynamic(
+  () => import("./ShaderGradientBackground"),
+  { ssr: false, loading: () => null }
+);
+
 export default function ClientProviders({
   children,
 }: {
@@ -100,6 +105,7 @@ function GatedProviders({
     <ErrorBoundary>
       <ToastProvider>
         {mounted && <BackgroundBlobs />}
+        {mounted && <ShaderGradientBackground />}
         <div className="relative z-10">{children}</div>
       </ToastProvider>
     </ErrorBoundary>

app/components/Contact.tsx

@@ -6,7 +6,8 @@ import { Mail, MapPin, Send, Github, Linkedin } from "lucide-react";
 import { useToast } from "@/components/Toast";
 import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
-import RichTextClient from "./RichTextClient";
+import dynamic from "next/dynamic";
+const RichTextClient = dynamic(() => import("./RichTextClient"), { ssr: false });
 
 const Contact = () => {
   const { showEmailSent, showEmailError } = useToast();
@@ -169,7 +170,7 @@ const Contact = () => {
           >
             <div className="max-w-3xl">
               <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase mb-4 sm:mb-6 md:mb-8">
-                {t("title")}<span className="text-liquid-mint">.</span>
+                {t("title")}<span className="text-emerald-600 dark:text-emerald-400">.</span>
               </h2>
               {cmsDoc ? (
                 <RichTextClient doc={cmsDoc} className="prose prose-stone dark:prose-invert max-w-none text-base sm:text-lg md:text-xl lg:text-2xl font-light leading-relaxed text-stone-600 dark:text-stone-400" />
@@ -192,10 +193,10 @@ 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">
-                   <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">Connect</p>
+                   <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark: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>
+                     <span className="text-[10px] font-black uppercase tracking-widest text-emerald-700 dark:text-emerald-400">Online</span>
                    </div>
                  </div>
                  
@@ -203,7 +204,7 @@ const Contact = () => {
                    {/* Email */}
                    <a href="mailto:contact@dk0.dev" className="flex items-center justify-between group/link">
                      <div className="flex flex-col">
-                       <span className="text-[9px] font-black uppercase tracking-[0.2em] text-stone-400 mb-1">Email</span>
+                       <span className="text-[9px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 mb-1">Email</span>
                        <span className="text-lg sm:text-xl md:text-2xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase group-hover/link:text-liquid-mint transition-colors">contact@dk0.dev</span>
                      </div>
                      <div className="w-10 h-10 rounded-full border border-stone-100 dark:border-stone-800 flex items-center justify-center group-hover/link:bg-stone-900 dark:group-hover/link:bg-stone-50 group-hover/link:text-white dark:group-hover/link:text-stone-900 transition-all">
@@ -216,7 +217,7 @@ const Contact = () => {
                    {/* GitHub */}
                    <a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className="flex items-center justify-between group/link">
                      <div className="flex flex-col">
-                       <span className="text-[9px] font-black uppercase tracking-[0.2em] text-stone-400 mb-1">Code</span>
+                       <span className="text-[9px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 mb-1">Code</span>
                        <span className="text-lg sm:text-xl md:text-2xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase group-hover/link:text-liquid-mint transition-colors">GitHub</span>
                      </div>
                      <div className="w-10 h-10 rounded-full border border-stone-100 dark:border-stone-800 flex items-center justify-center group-hover/link:bg-stone-900 dark:group-hover/link:bg-stone-50 group-hover/link:text-white dark:group-hover/link:text-stone-900 transition-all">
@@ -229,7 +230,7 @@ const Contact = () => {
                    {/* LinkedIn */}
                    <a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className="flex items-center justify-between group/link">
                      <div className="flex flex-col">
-                       <span className="text-[9px] font-black uppercase tracking-[0.2em] text-stone-400 mb-1">Professional</span>
+                       <span className="text-[9px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 mb-1">Professional</span>
                        <span className="text-lg sm:text-xl md:text-2xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase group-hover/link:text-[#0077b5] transition-colors">LinkedIn</span>
                      </div>
                      <div className="w-10 h-10 rounded-full border border-stone-100 dark:border-stone-800 flex items-center justify-center group-hover/link:bg-stone-900 dark:group-hover/link:bg-stone-50 group-hover/link:text-white dark:group-hover/link:text-stone-900 transition-all">
@@ -240,7 +241,7 @@ const Contact = () => {
                </div>
                
                <div className="mt-6 sm:mt-8 md:mt-12 pt-4 sm:pt-6 md:pt-8 border-t border-stone-100 dark:border-stone-800 relative z-10">
-                 <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 mb-2">Location</p>
+                 <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 mb-2">Location</p>
                  <div className="flex items-center gap-2 text-stone-900 dark:text-stone-50">
                    <MapPin size={14} className="text-liquid-mint" />
                    <span className="font-bold">{tInfo("locationValue")}</span>
@@ -264,7 +265,7 @@ const Contact = () => {
             <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6 md:space-y-8">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 md:gap-8">
                 <div className="space-y-2">
-                  <label htmlFor="name" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 pl-4">
+                  <label htmlFor="name" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 pl-4">
                     {tForm("labels.name")}
                   </label>
                   <input
@@ -281,7 +282,7 @@ const Contact = () => {
                 </div>
 
                 <div className="space-y-2">
-                  <label htmlFor="email" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 pl-4">
+                  <label htmlFor="email" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 pl-4">
                     {tForm("labels.email")}
                   </label>
                   <input
@@ -299,7 +300,7 @@ const Contact = () => {
               </div>
 
               <div className="space-y-2">
-                <label htmlFor="subject" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 pl-4">
+                <label htmlFor="subject" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 pl-4">
                   {tForm("labels.subject")}
                 </label>
                 <input
@@ -316,7 +317,7 @@ const Contact = () => {
               </div>
 
               <div className="space-y-2">
-                <label htmlFor="message" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 pl-4">
+                <label htmlFor="message" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 pl-4">
                   {tForm("labels.message")}
                 </label>
                 <textarea

app/components/Footer.tsx

@@ -33,14 +33,14 @@ const Footer = () => {
           {/* Navigation Links */}
           <div className="md:col-span-4 grid grid-cols-2 gap-8">
             <div className="space-y-4">
-              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">Legal</p>
+              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">Legal</p>
               <div className="flex flex-col gap-2">
                 <Link href={`/${locale}/legal-notice`} className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">{t("legalNotice")}</Link>
                 <Link href={`/${locale}/privacy-policy`} className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">{t("privacyPolicy")}</Link>
               </div>
             </div>
             <div className="space-y-4">
-              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">Social</p>
+              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">Social</p>
               <div className="flex flex-col gap-2">
                 <a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">GitHub</a>
                 <a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">LinkedIn</a>
@@ -52,9 +52,9 @@ const Footer = () => {
           <div className="md:col-span-4 flex justify-start md:justify-end">
             <button 
               onClick={scrollToTop}
-              className="group flex flex-col items-center gap-4 text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
+              className="group flex flex-col items-center gap-4 text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
             >
-              <span className="text-[10px] font-black uppercase tracking-[0.3em] vertical-text transform rotate-180" style={{ writingMode: 'vertical-rl' }}>Back to top</span>
+              <span className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-600 dark:text-stone-400 vertical-text transform rotate-180" style={{ writingMode: 'vertical-rl' }}>Back to top</span>
               <div className="w-12 h-12 rounded-full border border-stone-200 dark:border-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 transition-all shadow-sm">
                 <ArrowUp size={20} />
               </div>
@@ -64,12 +64,12 @@ const Footer = () => {
 
         {/* Bottom Bar */}
         <div className="mt-10 sm:mt-16 md:mt-20 pt-6 sm:pt-8 border-t border-stone-100 dark:border-stone-900 flex flex-col md:flex-row justify-between items-center gap-4">
-          <p className="text-[10px] font-bold text-stone-400 uppercase tracking-widest">
+          <p className="text-[10px] font-bold text-stone-600 dark:text-stone-400 uppercase tracking-widest">
             Built with Next.js, Directus & Passion.
           </p>
           <div className="flex items-center gap-2">
             <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-            <span className="text-[10px] font-bold text-stone-400 uppercase tracking-widest">Systems Online</span>
+            <span className="text-[10px] font-bold text-stone-600 dark:text-stone-400 uppercase tracking-widest">Systems Online</span>
           </div>
         </div>
       </div>

app/components/Grain.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-
-const Grain = () => {
-  return (
-    <div
-      className="pointer-events-none fixed inset-0 z-[9999] h-full w-full overflow-hidden"
-    >
-      <div 
-        className="absolute inset-[-200%] h-[400%] w-[400%] bg-[url('/images/grain.png')] bg-repeat opacity-[0.03] dark:opacity-[0.05]"
-        style={{ transform: 'translate3d(0, 0, 0)' }}
-      />
-      <motion.div
-        animate={{
-          x: [0, -50, 20, -10, 40, -20, 0],
-          y: [0, 20, -30, 10, -20, 30, 0],
-        }}
-        transition={{
-          duration: 0.5,
-          repeat: Infinity,
-          ease: "linear",
-        }}
-        className="absolute inset-[-200%] h-[400%] w-[400%] bg-[url('/images/grain.png')] bg-repeat opacity-[0.03] dark:opacity-[0.05]"
-      />
-    </div>
-  );
-};
-
-export default Grain;

app/components/Hero.tsx

@@ -58,16 +58,16 @@ const Hero = () => {
 
             <h1 className="text-[2.75rem] sm:text-6xl md:text-8xl lg:text-[9.5rem] font-black tracking-tighter leading-[0.85] text-stone-900 dark:text-stone-50 uppercase">
               <motion.span
-                initial={{ opacity: 0, x: -50 }}
-                animate={{ opacity: 1, x: 0 }}
+                initial={{ x: -50 }}
+                animate={{ x: 0 }}
                 transition={{ duration: 0.8, delay: 0.1 }}
                 className="block"
               >
                 {getLabel("hero.line1", "Building")}
               </motion.span>
               <motion.span
-                initial={{ opacity: 0, x: -50 }}
-                animate={{ opacity: 1, x: 0 }}
+                initial={{ x: -50 }}
+                animate={{ x: 0 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
                 className="block text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-liquid-sky to-liquid-purple pb-2 sm:pb-4"
               >
@@ -75,14 +75,9 @@ const Hero = () => {
               </motion.span>
             </h1>
 
-            <motion.p
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 1, delay: 0.4 }}
-              className="text-base sm:text-lg md:text-xl lg:text-2xl text-stone-600 dark:text-stone-400 max-w-xl mx-auto lg:mx-0 font-light leading-relaxed tracking-tight"
-            >
+            <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-stone-600 dark:text-stone-400 max-w-xl mx-auto lg:mx-0 font-light leading-relaxed tracking-tight">
               {t("description")}
-            </motion.p>
+            </p>
 
             <motion.div
               initial={{ opacity: 0, y: 20 }}

app/components/Projects.tsx

@@ -52,7 +52,7 @@ const Projects = () => {
         <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 sm:mb-12 md:mb-16 gap-4 sm:gap-6">
           <div>
             <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-stone-900 dark:text-stone-50 tracking-tighter mb-2 sm:mb-4 uppercase">
-              Selected Work<span className="text-liquid-mint">.</span>
+              Selected Work<span className="text-emerald-600 dark:text-emerald-400">.</span>
             </h2>
             <p className="text-base sm:text-lg md:text-xl text-stone-500 max-w-xl font-light">
               Projects that pushed my boundaries.

app/components/ShaderGradientBackgroundClient.tsx

@@ -1,16 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import ShaderGradientBackground from "./ShaderGradientBackground";
-
-export default function ShaderGradientBackgroundClient() {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-
-  return <ShaderGradientBackground />;
-}

app/globals.css

@@ -2,19 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Grain Effect */
-.grain-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 9999;
-  pointer-events: none;
-  opacity: 0.04;
-  mix-blend-mode: overlay;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
-}
 
 :root {
     /* Warm Brown & Off-White Palette */

app/layout.tsx

@@ -31,7 +31,6 @@ 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" />

components/BackgroundBlobs.tsx

@@ -16,28 +16,28 @@ const BackgroundBlobs = () => {
     <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
       {/* Mint blob - top left */}
       <motion.div
-        className="absolute top-[-10%] left-[-10%] w-[40vw] h-[40vw] bg-liquid-mint/40 rounded-full blur-[60px] mix-blend-multiply"
+        className="absolute top-[-10%] left-[-10%] w-[40vw] h-[40vw] bg-liquid-mint/40 rounded-full blur-[60px] opacity-70"
         animate={{ scale: [1, 1.15, 1] }}
         transition={{ duration: 40, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
       />
 
       {/* Lavender blob - top right */}
       <motion.div
-        className="absolute top-[10%] right-[-5%] w-[35vw] h-[35vw] bg-liquid-lavender/35 rounded-full blur-[60px] mix-blend-multiply"
+        className="absolute top-[10%] right-[-5%] w-[35vw] h-[35vw] bg-liquid-lavender/35 rounded-full blur-[60px] opacity-70"
         animate={{ scale: [1, 1.1, 1] }}
         transition={{ duration: 45, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
       />
 
       {/* Rose blob - bottom left */}
       <motion.div
-        className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-liquid-rose/35 rounded-full blur-[60px] mix-blend-multiply"
+        className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-liquid-rose/35 rounded-full blur-[60px] opacity-70"
         animate={{ scale: [1, 1.2, 1] }}
         transition={{ duration: 50, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
       />
 
       {/* Peach blob - middle right */}
       <motion.div
-        className="absolute top-[40%] right-[10%] w-[30vw] h-[30vw] bg-orange-200/30 rounded-full blur-[60px] mix-blend-multiply"
+        className="absolute top-[40%] right-[10%] w-[30vw] h-[30vw] bg-orange-200/30 rounded-full blur-[60px] opacity-70"
         animate={{ scale: [1, 1.25, 1] }}
         transition={{ duration: 55, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
       />

instrumentation-client.ts

@@ -1,32 +1,2 @@
-// This file configures the initialization of Sentry on the client.
-// The added config here will be used whenever a users loads a page in their browser.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-
-Sentry.init({
-  // DSN from environment variable with fallback to wizard-provided value
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || "https://148e31ea874c60f3d2e0f70fd6701f6b@o4510751135105024.ingest.de.sentry.io/4510751388926032",
-
-  // Add optional integrations for additional features
-  integrations: [Sentry.replayIntegration()],
-
-  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1,
-  // Enable logs to be sent to Sentry
-  enableLogs: true,
-
-  // Define how likely Replay events are sampled.
-  // This sets the sample rate to be 10%. You may want this to be 100% while
-  // in development and sample at a lower rate in production
-  replaysSessionSampleRate: 0.1,
-
-  // Define how likely Replay events are sampled when an error occurs.
-  replaysOnErrorSampleRate: 1.0,
-
-  // Enable sending user PII (Personally Identifiable Information)
-  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
-  sendDefaultPii: true,
-});
-
-export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
+// Sentry client SDK disabled to reduce bundle size (~400KB).
+// To re-enable, restore the @sentry/nextjs import and withSentryConfig in next.config.ts.

next.config.ts

@@ -3,8 +3,6 @@ import dotenv from "dotenv";
 import path from "path";
 import bundleAnalyzer from "@next/bundle-analyzer";
 import createNextIntlPlugin from "next-intl/plugin";
-import { withSentryConfig } from "@sentry/nextjs";
-
 // Load the .env file from the working directory
 dotenv.config({ path: path.resolve(process.cwd(), ".env") });
 
@@ -228,42 +226,4 @@ const withBundleAnalyzer = bundleAnalyzer({
 
 const withNextIntl = createNextIntlPlugin("./i18n/request.ts");
 
-// Wrap with Sentry
-export default withSentryConfig(
-  withBundleAnalyzer(withNextIntl(nextConfig)),
-  {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
-
-    org: "dk0",
-    project: "portfolio",
-
-    // Only print logs for uploading source maps in CI
-    silent: !process.env.CI,
-
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: true,
-
-    // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-    tunnelRoute: "/monitoring",
-
-    // Webpack-specific options
-    webpack: {
-      // Automatically annotate React components to show their full name in breadcrumbs and session replay
-      reactComponentAnnotation: {
-        enabled: true,
-      },
-      // Automatically tree-shake Sentry logger statements to reduce bundle size
-      treeshake: {
-        removeDebugLogging: true,
-      },
-      // Enables automatic instrumentation of Vercel Cron Monitors
-      automaticVercelMonitors: true,
-    },
-
-    // Source maps configuration
-    sourcemaps: {
-      disable: false,
-    },
-  }
-);
+export default withBundleAnalyzer(withNextIntl(nextConfig));

package.json

@@ -86,6 +86,12 @@
     "tailwind-merge": "^2.6.0",
     "three": "^0.183.1"
   },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "last 2 Edge versions"
+  ],
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@playwright/test": "^1.57.0",

sentry.edge.config.ts

@@ -5,12 +5,6 @@
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  // DSN from environment variable with fallback to wizard-provided value
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || "https://148e31ea874c60f3d2e0f70fd6701f6b@o4510751135105024.ingest.de.sentry.io/4510751388926032",
-
-  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
+  enabled: false,
 });

sentry.server.config.ts

@@ -5,12 +5,6 @@
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  // DSN from environment variable with fallback to wizard-provided value
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || "https://148e31ea874c60f3d2e0f70fd6701f6b@o4510751135105024.ingest.de.sentry.io/4510751388926032",
-
-  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
+  enabled: false,
 });