feat: Website-Rework mit verbessertem Design, Sicherheit und Deployment

- Neue About/Skills-Sektion hinzugefügt
- Verbesserte UI/UX für alle Komponenten
- Enhanced Contact Form mit Validierung
- Verbesserte Security Headers und Middleware
- Sichere Deployment-Skripte (safe-deploy.sh)
- Zero-Downtime Deployment Support
- Verbesserte Docker-Sicherheit
- Umfassende Sicherheits-Dokumentation
- Performance-Optimierungen
- Accessibility-Verbesserungen

app/components/Footer.tsx

@@ -25,7 +25,7 @@ const Footer = () => {
   }
 
   return (
-    <footer className="relative py-12 px-4 bg-black border-t border-gray-800/50">
+    <footer className="relative py-12 px-4 bg-black/95 backdrop-blur-sm border-t border-gray-800/50">
       <div className="max-w-7xl mx-auto">
         <div className="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
           {/* Brand */}
@@ -36,11 +36,15 @@ const Footer = () => {
             transition={{ duration: 0.6 }}
             className="flex items-center space-x-3"
           >
-            <div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
-              <Code className="w-5 h-5 text-white" />
-            </div>
+            <motion.div
+              whileHover={{ rotate: 360, scale: 1.1 }}
+              transition={{ duration: 0.5 }}
+              className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-xl flex items-center justify-center shadow-lg"
+            >
+              <Code className="w-6 h-6 text-white" />
+            </motion.div>
             <div>
-              <Link href="/" className="text-xl font-bold font-mono text-white">
+              <Link href="/" className="text-xl font-bold font-mono text-white hover:text-blue-400 transition-colors">
                 dk<span className="text-red-500">0</span>
               </Link>
               <p className="text-xs text-gray-500">Software Engineer</p>
@@ -53,7 +57,7 @@ const Footer = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6, delay: 0.1 }}
-            className="flex space-x-4"
+            className="flex space-x-3"
           >
             {socialLinks.map((social) => (
               <motion.a
@@ -61,9 +65,10 @@ const Footer = () => {
                 href={social.href}
                 target="_blank"
                 rel="noopener noreferrer"
-                whileHover={{ scale: 1.1, y: -2 }}
+                whileHover={{ scale: 1.15, y: -3 }}
                 whileTap={{ scale: 0.95 }}
-                className="p-3 bg-gray-800/50 hover:bg-gray-700/50 rounded-lg text-gray-300 hover:text-white transition-all duration-200"
+                className="p-3 bg-gray-800/60 backdrop-blur-sm hover:bg-gray-700/60 rounded-xl text-gray-300 hover:text-white transition-all duration-200 border border-gray-700/50 hover:border-gray-600 shadow-lg"
+                aria-label={social.label}
               >
                 <social.icon size={18} />
               </motion.a>
@@ -112,8 +117,13 @@ const Footer = () => {
             </Link>
           </div>
           
-          <div className="text-xs text-gray-600">
-            Built with Next.js, TypeScript & Tailwind CSS
+          <div className="text-xs text-gray-500 flex items-center space-x-1">
+            <span>Built with</span>
+            <span className="text-blue-400 font-semibold">Next.js</span>
+            <span className="text-gray-600">•</span>
+            <span className="text-blue-400 font-semibold">TypeScript</span>
+            <span className="text-gray-600">•</span>
+            <span className="text-blue-400 font-semibold">Tailwind CSS</span>
           </div>
         </motion.div>
       </div>