fix: performance issues

2026-02-07 09:37:44 +01:00
parent d0d66dd85f
commit 00bafa761b
6 changed files with 154 additions and 152 deletions
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -5,6 +5,7 @@ import "../globals.css";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
 import { notFound } from "next/navigation";
+import { LazyMotion, domAnimation } from "framer-motion";

 const inter = Inter({
  subsets: ["latin"],
@@ -122,7 +123,9 @@ export default async function RootLayout({
      </head>
      <body className="antialiased">
        <NextIntlClientProvider messages={messages}>
-          <Layout>{children}</Layout>
+          <LazyMotion features={domAnimation}>
+            <Layout>{children}</Layout>
+          </LazyMotion>
        </NextIntlClientProvider>
      </body>
    </html>
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,7 +1,7 @@
 "use client";

 import React, { useState } from "react";
-import { m, LazyMotion, domAnimation } from "framer-motion";
+import { m } from "framer-motion";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";

@@ -62,15 +62,13 @@ export const Button = ({
  );

  const spotlight = (
-    <LazyMotion features={domAnimation}>
-      <m.div
-        className="absolute inset-0 z-0 pointer-events-none transition-opacity duration-500"
-        style={{
-          opacity: isHovered ? 1 : 0,
-          background: `radial-gradient(600px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.15), transparent 40%)`,
-        }}
-      />
-    </LazyMotion>
+    <m.div
+      className="absolute inset-0 z-0 pointer-events-none transition-opacity duration-500"
+      style={{
+        opacity: isHovered ? 1 : 0,
+        background: `radial-gradient(600px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.15), transparent 40%)`,
+      }}
+    />
  );

  const buttonProps = {
--- a/components/HomeContent.tsx
+++ b/components/HomeContent.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { m, LazyMotion, domAnimation } from "framer-motion";
+import { m } from "framer-motion";
 import {
  BarChart3,
  CheckCircle2,
@@ -326,55 +326,53 @@ export default function Home() {
              <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />

              <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
-                <LazyMotion features={domAnimation}>
-                  <svg
-                    viewBox="0 0 400 400"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <m.circle
-                      animate={{ r: [400, 410, 400], opacity: [0.1, 0.2, 0.1] }}
-                      transition={{
-                        duration: 5,
-                        repeat: Infinity,
-                        ease: "easeInOut",
-                      }}
-                      cx="400"
-                      cy="0"
-                      r="400"
-                      stroke="white"
-                      strokeWidth="2"
-                    />
-                    <m.circle
-                      animate={{ r: [300, 310, 300], opacity: [0.1, 0.2, 0.1] }}
-                      transition={{
-                        duration: 4,
-                        repeat: Infinity,
-                        ease: "easeInOut",
-                        delay: 0.5,
-                      }}
-                      cx="400"
-                      cy="0"
-                      r="300"
-                      stroke="white"
-                      strokeWidth="2"
-                    />
-                    <m.circle
-                      animate={{ r: [200, 210, 200], opacity: [0.1, 0.2, 0.1] }}
-                      transition={{
-                        duration: 3,
-                        repeat: Infinity,
-                        ease: "easeInOut",
-                        delay: 1,
-                      }}
-                      cx="400"
-                      cy="0"
-                      r="200"
-                      stroke="white"
-                      strokeWidth="2"
-                    />
-                  </svg>
-                </LazyMotion>
+                <svg
+                  viewBox="0 0 400 400"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <m.circle
+                    animate={{ r: [400, 410, 400], opacity: [0.1, 0.2, 0.1] }}
+                    transition={{
+                      duration: 5,
+                      repeat: Infinity,
+                      ease: "easeInOut",
+                    }}
+                    cx="400"
+                    cy="0"
+                    r="400"
+                    stroke="white"
+                    strokeWidth="2"
+                  />
+                  <m.circle
+                    animate={{ r: [300, 310, 300], opacity: [0.1, 0.2, 0.1] }}
+                    transition={{
+                      duration: 4,
+                      repeat: Infinity,
+                      ease: "easeInOut",
+                      delay: 0.5,
+                    }}
+                    cx="400"
+                    cy="0"
+                    r="300"
+                    stroke="white"
+                    strokeWidth="2"
+                  />
+                  <m.circle
+                    animate={{ r: [200, 210, 200], opacity: [0.1, 0.2, 0.1] }}
+                    transition={{
+                      duration: 3,
+                      repeat: Infinity,
+                      ease: "easeInOut",
+                      delay: 1,
+                    }}
+                    cx="400"
+                    cy="0"
+                    r="200"
+                    stroke="white"
+                    strokeWidth="2"
+                  />
+                </svg>
              </div>

              <div className="relative z-10">
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -116,38 +116,36 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
      </Reveal>

      {/* Mobile Menu Overlay */}
-      <LazyMotion features={domAnimation}>
-        <AnimatePresence>
-          {isMobileMenuOpen && (
-            <m.div
-              initial={{ opacity: 0, y: -20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -20 }}
-              className="fixed inset-0 z-[90] bg-white pt-32 px-6 md:hidden"
-            >
-              <nav className="flex flex-col gap-4">
-                {navLinks.map((link) => (
-                  <Link
-                    key={link.href}
-                    href={link.href}
-                    className={`flex items-center gap-4 p-4 rounded-xl text-lg font-semibold transition-all ${
-                      isActive(link.href)
-                        ? "text-accent bg-accent/5"
-                        : "text-slate-600 hover:text-primary hover:bg-slate-50"
-                    }`}
-                  >
-                    <link.icon size={24} />
-                    {link.label}
-                  </Link>
-                ))}
-                <Button href="/kontakt" className="mt-4 w-full">
-                  {t("nav.cta")}
-                </Button>
-              </nav>
-            </m.div>
-          )}
-        </AnimatePresence>
-      </LazyMotion>
+      <AnimatePresence>
+        {isMobileMenuOpen && (
+          <m.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            className="fixed inset-0 z-[90] bg-white pt-32 px-6 md:hidden"
+          >
+            <nav className="flex flex-col gap-4">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className={`flex items-center gap-4 p-4 rounded-xl text-lg font-semibold transition-all ${
+                    isActive(link.href)
+                      ? "text-accent bg-accent/5"
+                      : "text-slate-600 hover:text-primary hover:bg-slate-50"
+                  }`}
+                >
+                  <link.icon size={24} />
+                  {link.label}
+                </Link>
+              ))}
+              <Button href="/kontakt" className="mt-4 w-full">
+                {t("nav.cta")}
+              </Button>
+            </nav>
+          </m.div>
+        )}
+      </AnimatePresence>

      <main className="flex-grow">{children}</main>

@@ -168,18 +166,16 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
          <div className="absolute inset-0 grid-pattern opacity-[0.08] pointer-events-none" />

          {/* Animated Tech Lines */}
-          <LazyMotion features={domAnimation}>
-            <m.div
-              animate={{ x: ["-100%", "100%"] }}
-              transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
-              className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-accent/30 to-transparent"
-            />
-            <m.div
-              animate={{ x: ["100%", "-100%"] }}
-              transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
-              className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-accent/20 to-transparent"
-            />
-          </LazyMotion>
+          <m.div
+            animate={{ x: ["-100%", "100%"] }}
+            transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
+            className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-accent/30 to-transparent"
+          />
+          <m.div
+            animate={{ x: ["100%", "-100%"] }}
+            transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+            className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-accent/20 to-transparent"
+          />

          {/* Corner Accents */}
          <div className="tech-corner top-8 left-8 border-t border-l border-white/10 group-hover:border-accent/30 transition-colors duration-700" />
--- a/components/Reveal.tsx
+++ b/components/Reveal.tsx
@@ -1,26 +1,26 @@
-'use client';
+"use client";

-import React from 'react';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import React from "react";
+import { m } from "framer-motion";

 interface RevealProps {
  children: React.ReactNode;
  className?: string;
  delay?: number;
-  direction?: 'up' | 'down' | 'left' | 'right';
+  direction?: "up" | "down" | "left" | "right";
  fullWidth?: boolean;
  viewportMargin?: string;
-  trigger?: 'inView' | 'mount';
+  trigger?: "inView" | "mount";
 }

 export const Reveal = ({
  children,
-  className = '',
+  className = "",
  delay = 0,
-  direction = 'up',
+  direction = "up",
  fullWidth = false,
  viewportMargin = "-50px",
-  trigger = 'inView'
+  trigger = "inView",
 }: RevealProps) => {
  const directions = {
    up: { y: 30 },
@@ -30,35 +30,45 @@ export const Reveal = ({
  };

  return (
-    <LazyMotion features={domAnimation}>
    <m.div
      initial={{
        opacity: 0,
-        ...directions[direction]
+        ...directions[direction],
      }}
-      animate={trigger === 'mount' ? {
-        opacity: 1,
-        x: 0,
-        y: 0
-      } : undefined}
-      whileInView={trigger === 'inView' ? {
-        opacity: 1,
-        x: 0,
-        y: 0
-      } : undefined}
-      viewport={trigger === 'inView' ? { once: true, margin: viewportMargin } : undefined}
+      animate={
+        trigger === "mount"
+          ? {
+              opacity: 1,
+              x: 0,
+              y: 0,
+            }
+          : undefined
+      }
+      whileInView={
+        trigger === "inView"
+          ? {
+              opacity: 1,
+              x: 0,
+              y: 0,
+            }
+          : undefined
+      }
+      viewport={
+        trigger === "inView"
+          ? { once: true, margin: viewportMargin }
+          : undefined
+      }
      transition={{
        type: "spring",
        stiffness: 50,
        damping: 20,
        mass: 1,
-        delay: delay
+        delay: delay,
      }}
-      className={`${fullWidth ? 'w-full' : ''} ${className} motion-fix`}
+      className={`${fullWidth ? "w-full" : ""} ${className} motion-fix will-change-[transform,opacity]`}
    >
      {children}
    </m.div>
-    </LazyMotion>
  );
 };

@@ -68,13 +78,12 @@ interface StaggerProps {
  staggerDelay?: number;
 }

-export const Stagger = ({ 
-  children, 
-  className = '', 
-  staggerDelay = 0.1 
+export const Stagger = ({
+  children,
+  className = "",
+  staggerDelay = 0.1,
 }: StaggerProps) => {
  return (
-    <LazyMotion features={domAnimation}>
    <m.div
      initial="initial"
      whileInView="animate"
@@ -90,6 +99,5 @@ export const Stagger = ({
    >
      {children}
    </m.div>
-    </LazyMotion>
  );
 };
--- a/components/TileGrid.tsx
+++ b/components/TileGrid.tsx
@@ -1,7 +1,7 @@
-'use client';
+"use client";

-import React, { useEffect, useState } from 'react';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import React, { useEffect, useState } from "react";
+import { m } from "framer-motion";

 export const TileGrid = () => {
  const [mounted, setMounted] = useState(false);
@@ -12,42 +12,41 @@ export const TileGrid = () => {

  if (!mounted) return null;

-  const rows = 15;
-  const cols = 20;
+  const rows = 7;
+  const cols = 8;

  return (
    <div className="absolute inset-0 pointer-events-none overflow-hidden z-[1]">
-      <LazyMotion features={domAnimation}>
-      <div className="flex flex-col gap-3 min-w-[120%] min-h-[120%] -left-[10%] -top-[10%] absolute">
+      <div className="flex flex-col gap-8 md:gap-12 min-w-[120%] min-h-[120%] -left-[10%] -top-[10%] absolute">
        {[...Array(rows)].map((_, rowIndex) => (
          <div
            key={rowIndex}
-            className="flex gap-3 justify-center"
+            className="flex gap-8 md:gap-12 justify-center"
            style={{
-              transform: rowIndex % 2 === 0 ? 'translateX(0)' : 'translateX(80px)',
+              transform:
+                rowIndex % 2 === 0 ? "translateX(0)" : "translateX(100px)",
            }}
          >
            {[...Array(cols)].map((_, colIndex) => (
              <m.div
                key={`${rowIndex}-${colIndex}`}
-                initial={{ opacity: 0.05 }}
+                initial={{ opacity: 0.03 }}
                animate={{
-                  opacity: [0.05, Math.random() > 0.9 ? 0.25 : 0.05, 0.05],
-                  scale: [1, Math.random() > 0.9 ? 1.05 : 1, 1]
+                  opacity: [0.03, Math.random() > 0.8 ? 0.15 : 0.03, 0.03],
+                  scale: [1, Math.random() > 0.8 ? 1.02 : 1, 1],
                }}
                transition={{
-                  duration: 5 + Math.random() * 5,
+                  duration: 8 + Math.random() * 8,
                  repeat: Infinity,
-                  delay: Math.random() * 20,
-                  ease: "easeInOut"
+                  delay: Math.random() * 15,
+                  ease: "easeInOut",
                }}
-                className="w-24 h-24 md:w-40 md:h-40 bg-white/10 backdrop-blur-[2px] rounded-2xl md:rounded-3xl border border-white/20 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] shrink-0"
+                className="w-32 h-32 md:w-56 md:h-56 bg-white/5 rounded-3xl md:rounded-[3rem] border border-white/10 shadow-[0_8px_32px_0_rgba(31,38,135,0.03)] shrink-0 will-change-transform"
              />
            ))}
          </div>
        ))}
      </div>
-      </LazyMotion>
    </div>
  );
 };