feat: Add professional portfolio images and Hero redesign

- Add 15 optimized WebP images for portfolio (21-53KB each) - Redesign Hero section with full-width background image - Add SSR support for Hero component - Update About section with new portrait image - Update Contact page with professional headshot - Add images to Services/Leistungen page - Add image optimization script (sharp) - Update translations for gallery section Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-19 23:33:28 +01:00
parent b1ec7b4d61
commit 87c7ebc5e3
75 changed files with 10271 additions and 1314 deletions
@@ -0,0 +1,112 @@
+const GlobalBackground = () => {
+  return (
+    <>
+      {/* Background layer */}
+      <div
+        className="fixed inset-0 bg-zinc-900"
+        style={{ zIndex: -2 }}
+      />
+
+      {/* Gradient overlay */}
+      <div
+        className="fixed inset-0"
+        style={{
+          zIndex: -1,
+          background: 'linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 50%, #1e1e1e 100%)',
+          opacity: 0.9
+        }}
+      />
+
+      {/* Animated lines */}
+      <div
+        className="fixed inset-0 pointer-events-none"
+        style={{ zIndex: -1 }}
+      >
+        <svg
+          className="w-full h-full"
+          preserveAspectRatio="none"
+          style={{ opacity: 0.3 }}
+        >
+          <line
+            x1="0%"
+            y1="20%"
+            x2="100%"
+            y2="20%"
+            stroke="white"
+            strokeWidth="1"
+            opacity="0.2"
+          >
+            <animate
+              attributeName="y1"
+              values="20%;80%;20%"
+              dur="10s"
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="y2"
+              values="20%;80%;20%"
+              dur="10s"
+              repeatCount="indefinite"
+            />
+          </line>
+
+          <line
+            x1="0%"
+            y1="50%"
+            x2="100%"
+            y2="50%"
+            stroke="white"
+            strokeWidth="1"
+            opacity="0.15"
+          >
+            <animate
+              attributeName="x1"
+              values="0%;100%;0%"
+              dur="15s"
+              repeatCount="indefinite"
+            />
+          </line>
+
+          <line
+            x1="20%"
+            y1="0%"
+            x2="20%"
+            y2="100%"
+            stroke="white"
+            strokeWidth="1"
+            opacity="0.1"
+          >
+            <animate
+              attributeName="x1"
+              values="20%;80%;20%"
+              dur="12s"
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="x2"
+              values="20%;80%;20%"
+              dur="12s"
+              repeatCount="indefinite"
+            />
+          </line>
+        </svg>
+      </div>
+
+      {/* Grid overlay */}
+      <div
+        className="fixed inset-0 pointer-events-none"
+        style={{
+          zIndex: -1,
+          backgroundImage: `
+            linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px)
+          `,
+          backgroundSize: '50px 50px',
+          opacity: 0.5
+        }}
+      />
+    </>
+  );
+};
+
+export default GlobalBackground;