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>

src/components/portfolio/PortfolioGrid.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import PortfolioCard from './PortfolioCard';
+
+interface Project {
+  slug: string;
+  title: string;
+  description: string;
+  excerpt?: string;
+  technologies: string[];
+  category?: string;
+  date?: string;
+  featured?: boolean;
+}
+
+interface PortfolioGridProps {
+  projects: Project[];
+}
+
+const PortfolioGrid = ({ projects }: PortfolioGridProps) => {
+  const containerVariants = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 },
+  };
+
+  return (
+    <motion.div
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      className="grid grid-cols-1 md:grid-cols-2 gap-8"
+    >
+      {projects.map((project) => (
+        <motion.div
+          key={project.slug}
+          variants={itemVariants}
+          transition={{ duration: 0.5 }}
+          className="group"
+        >
+          <PortfolioCard project={project} />
+        </motion.div>
+      ))}
+    </motion.div>
+  );
+};
+
+export default PortfolioGrid;