feat: update personal information and localization in various components

apps/web/src/features/projects/components/ProjectCard.tsx

@@ -12,58 +12,58 @@ interface ProjectCardProps {
 export const ProjectCard: React.FC<ProjectCardProps> = ({ project, index }) => {
   return (
     <motion.div
-      initial={{ opacity: 0, y: 20 }}
+      layout
+      initial={{ opacity: 0, y: 22 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}
-      transition={{ duration: 0.5, delay: index * 0.1 }}
-      whileHover={{ y: -10 }}
-      className="group rounded-xl overflow-hidden border border-green-500/30 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm hover:border-green-500/60 transition-all duration-300"
+      transition={{ duration: 0.45, delay: index * 0.08, ease: 'easeOut' }}
+      whileHover={{ y: -8, scale: 1.01 }}
+      className="group rounded-3xl overflow-hidden border border-green-500/25 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm hover:border-green-500/55 transition-all duration-300 shadow-[0_20px_60px_-40px_rgba(34,197,94,0.8)]"
     >
       {/* Image */}
       <div className="relative h-64 overflow-hidden bg-gradient-to-br from-gray-900 to-black">
         <img
           src={project.image}
           alt={project.title}
-          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-out"
         />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
+        <div className="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
       </div>
 
       {/* Content */}
       <div className="p-6">
-        {/* Category Badge */}
-        <div className="inline-block mb-4 px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50">
+        <div className="inline-flex items-center gap-2 mb-4 px-3 py-1 rounded-full bg-green-500/15 border border-green-500/25">
           <span className="text-green-400 text-xs font-semibold">{project.category}</span>
         </div>
 
-        <h3 className="text-xl font-bold text-white mb-2">{project.title}</h3>
-        <p className="text-gray-400 text-sm mb-4 line-clamp-2">{project.description}</p>
+        <h3 className="text-2xl font-bold text-white mb-3">{project.title}</h3>
+        <p className="text-gray-400 text-sm mb-5 line-clamp-3">{project.description}</p>
 
-        {/* Tags */}
         <div className="flex flex-wrap gap-2 mb-6">
           {project.tags.slice(0, 3).map((tag) => (
             <span
               key={tag}
-              className="text-xs px-2 py-1 rounded border border-green-500/30 text-green-400"
+              className="text-xs px-2 py-1 rounded-full border border-green-500/25 text-green-300 bg-white/5"
             >
               {tag}
             </span>
           ))}
           {project.tags.length > 3 && (
-            <span className="text-xs px-2 py-1 text-gray-500">
+            <span className="text-xs px-2 py-1 rounded-full text-gray-400 bg-gray-900/40">
               +{project.tags.length - 3}
             </span>
           )}
         </div>
 
-        {/* Links */}
-        <div className="flex gap-3">
+        <div className="flex flex-wrap gap-3">
           {project.link && (
             <motion.a
               href={project.link}
-              whileHover={{ scale: 1.1 }}
+              target="_blank"
+              rel="noreferrer"
+              whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              className="flex items-center gap-2 px-4 py-2 rounded-lg bg-green-500/20 hover:bg-green-500/30 text-green-400 transition-colors text-sm font-medium"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-green-500/20 hover:bg-green-500/30 text-green-300 transition-colors text-sm font-medium"
             >
               <ExternalLink size={16} />
               Live
@@ -72,9 +72,11 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, index }) => {
           {project.github && (
             <motion.a
               href={project.github}
-              whileHover={{ scale: 1.1 }}
+              target="_blank"
+              rel="noreferrer"
+              whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              className="flex items-center gap-2 px-4 py-2 rounded-lg border border-green-500/30 hover:border-green-500/60 text-gray-300 hover:text-white transition-colors text-sm font-medium"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-green-500/25 hover:border-green-500/50 text-gray-300 hover:text-white transition-colors text-sm font-medium"
             >
               <FaGithub size={16} />
               Code

apps/web/src/features/projects/components/ProjectsSection.tsx

@@ -5,12 +5,12 @@ import { ProjectCard } from './ProjectCard';
 import AnimatedSection from '../../../shared/components/AnimatedSection';
 import type { Project } from '../../../shared/types';
 
-type Category = 'All' | 'Web Apps' | 'UI Components' | 'Full Stack';
+type Category = 'Alle' | 'Webanwendungen' | 'UI-Komponenten' | 'Fullstack';
 
 export const ProjectsSection: React.FC = () => {
-  const [selectedCategory, setSelectedCategory] = useState<Category>('All');
+  const [selectedCategory, setSelectedCategory] = useState<Category>('Alle');
 
-  const categories: Category[] = ['All', 'Web Apps', 'UI Components', 'Full Stack'];
+  const categories: Category[] = ['Alle', 'Webanwendungen', 'UI-Komponenten', 'Fullstack'];
 
   const filteredProjects = projectsData.filter(
     (project: Project) =>
@@ -29,14 +29,14 @@ export const ProjectsSection: React.FC = () => {
             transition={{ duration: 0.5 }}
             className="inline-block px-4 py-2 rounded-full border border-green-500/50 bg-green-500/10 mb-6"
           >
-            <span className="text-green-400 text-sm font-medium">My Work</span>
+            <span className="text-green-400 text-sm font-medium">Meine Projekte</span>
           </motion.div>
 
           <h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">
-            Featured Projects
+            Ausgewählte Projekte
           </h2>
           <p className="text-gray-400 text-lg max-w-2xl mx-auto">
-            Showcasing my best work and achievements
+            Eine Auswahl meiner besten Lösungen und Erfolge
           </p>
         </div>
 

apps/web/src/features/projects/data/projectsData.ts

@@ -3,34 +3,34 @@ import type { Project } from '../../../shared/types';
 export const projectsData: Project[] = [
   {
     id: '1',
-    title: 'E-Commerce Platform',
+    title: 'Order Flow Microservice Suite',
     description:
-      'Full-stack e-commerce platform with product catalog, shopping cart, and payment integration using Stripe',
-    image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=800&h=600&fit=crop',
-    tags: ['React', 'Next.js', 'TypeScript', 'Tailwind CSS', 'MongoDB'],
-    category: 'Full Stack',
+      'Skalierbare Auftragsverwaltung mit .NET, SQL, Docker und SQS für robuste, ereignisgesteuerte Commerce-Flows.',
+    image: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&h=600&fit=crop',
+    tags: ['.NET', 'Docker', 'SQL', 'SQS', 'Clean Architecture'],
+    category: 'Fullstack',
     link: '#',
     github: '#',
   },
   {
     id: '2',
-    title: 'Task Management Dashboard',
+    title: 'Design System Engine',
     description:
-      'A collaborative task management application with real-time updates, user authentication, and advanced filtering',
-    image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop',
-    tags: ['React', 'Firebase', 'TypeScript', 'Tailwind CSS'],
-    category: 'Web Apps',
+      'Wiederverwendbares UI-System mit React, Tailwind, Figma-Tokens und Storybook für teamübergreifende Konsistenz.',
+    image: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&h=600&fit=crop',
+    tags: ['React', 'Tailwind CSS', 'Figma', 'Storybook'],
+    category: 'UI-Komponenten',
     link: '#',
     github: '#',
   },
   {
     id: '3',
-    title: 'Component Library',
+    title: 'Performance Platform',
     description:
-      'A comprehensive reusable component library with Storybook documentation and design system tokens',
-    image: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop',
-    tags: ['React', 'Storybook', 'Tailwind CSS', 'TypeScript'],
-    category: 'UI Components',
+      'Leistungsstarkes Backend mit Node.js, Fastify, NestJS und Docker, optimiert für schnelle Deployments und Observability.',
+    image: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&h=600&fit=crop',
+    tags: ['Node.js', 'Fastify', 'NestJS', 'Docker', 'Linux'],
+    category: 'Webanwendungen',
     link: '#',
     github: '#',
   },