🎨 Complete Portfolio Redesign: Modern Dark Theme + Admin Dashboard + Enhanced Markdown Editor

✨ New Features:
- Complete dark theme redesign with glassmorphism effects
- Responsive admin dashboard with collapsible projects list
- Enhanced markdown editor with live preview
- Project image upload functionality
- Improved project management (create, edit, delete, publish/unpublish)
- Slug-based project URLs
- Legal pages (Impressum, Privacy Policy)
- Modern animations with Framer Motion

🔧 Improvements:
- Fixed hydration errors with mounted state
- Enhanced UI/UX with better spacing and proportions
- Improved markdown rendering with custom components
- Better project image placeholders with initials
- Conditional rendering for GitHub/Live Demo links
- Enhanced toolbar with categorized quick actions
- Responsive grid layout for admin dashboard

📱 Technical:
- Next.js 15 + TypeScript + Tailwind CSS
- Local storage for project persistence
- Optimized performance and responsive design

app/components/Header.tsx

@@ -1,138 +1,175 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import Link from "next/link";
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Menu, X, Github, Linkedin, Mail } from 'lucide-react';
+import Link from 'next/link';
 
-export default function Header() {
-  const [isVisible, setIsVisible] = useState(false);
+const Header = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setTimeout(() => {
-      setIsVisible(true);
-    }, 50); // Delay to start the animation after Projects
+    setMounted(true);
   }, []);
 
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
 
-  const toggleSidebar = () => {
-    setIsSidebarOpen(!isSidebarOpen);
-  };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
-  const scrollToSection = (id: string) => {
-    const element = document.getElementById(id);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth" });
-    } else {
-      /*go to main page and scroll*/
-      window.location.href = `/#${id}`;
-    }
-  };
+  const navItems = [
+    { name: 'Home', href: '/' },
+    { name: 'Projects', href: '/projects' },
+    { name: 'About', href: '#about' },
+    { name: 'Contact', href: '#contact' },
+  ];
+
+  const socialLinks = [
+    { icon: Github, href: 'https://github.com/Denshooter', label: 'GitHub' },
+    { icon: Linkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' },
+    { icon: Mail, href: 'mailto:contact@dki.one', label: 'Email' },
+  ];
+
+  if (!mounted) {
+    return null;
+  }
 
   return (
-    <div className={`p-4 ${isVisible ? "animate-fly-in" : "opacity-0"}`}>
-      <div
-        className={`fixed top-4 left-4 right-4 p-4 bg-white/45 text-gray-700 backdrop-blur-md shadow-xl rounded-2xl z-50 ${isSidebarOpen ? "transform -translate-y-full" : ""}`}
+    <>
+      <div className="particles">
+        {[...Array(20)].map((_, i) => (
+          <div
+            key={i}
+            className="particle"
+            style={{
+              left: `${(i * 5.5) % 100}%`,
+              animationDelay: `${(i * 0.8) % 20}s`,
+              animationDuration: `${20 + (i * 0.4) % 10}s`,
+            }}
+          />
+        ))}
+      </div>
+
+      <motion.header
+        initial={{ y: -100 }}
+        animate={{ y: 0 }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
+        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+          scrolled ? 'glass' : 'bg-transparent'
+        }`}
       >
-        <header className="w-full">
-          <nav className="flex flex-row items-center px-4">
-            <Link href="/" className="flex justify-start">
-              <h1 className="text-xl md:text-2xl">Dennis Konkol</h1>
-            </Link>
-            <div className="flex-grow"></div>
-            <button
-              className="text-gray-700 hover:text-gray-900 md:hidden"
-              onClick={toggleSidebar}
-              aria-label={"Open menu"}
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              className="flex items-center space-x-2"
             >
-              <svg
-                className="w-6 h-6"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
-            </button>
-            <div className="hidden md:flex space-x-4 md:space-x-6">
-              <button
-                onClick={() => scrollToSection("about")}
-                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
-              >
-                About
-              </button>
-              <button
-                onClick={() => scrollToSection("projects")}
-                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
-              >
-                Projects
-              </button>
-              <button
-                onClick={() => scrollToSection("contact")}
-                className="relative pl-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
-              >
-                Contact
-              </button>
+              <Link href="/" className="text-2xl font-bold gradient-text">
+                DK
+              </Link>
+            </motion.div>
+
+            <nav className="hidden md:flex items-center space-x-8">
+              {navItems.map((item) => (
+                <motion.div
+                  key={item.name}
+                  whileHover={{ y: -2 }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  <Link
+                    href={item.href}
+                    className="text-gray-300 hover:text-white transition-colors duration-200 font-medium relative group"
+                  >
+                    {item.name}
+                    <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-300 group-hover:w-full"></span>
+                  </Link>
+                </motion.div>
+              ))}
+            </nav>
+
+            <div className="hidden md:flex items-center space-x-4">
+              {socialLinks.map((social) => (
+                <motion.a
+                  key={social.label}
+                  href={social.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  whileHover={{ scale: 1.1, y: -2 }}
+                  whileTap={{ scale: 0.95 }}
+                  className="p-2 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 transition-colors duration-200 text-gray-300 hover:text-white"
+                >
+                  <social.icon size={20} />
+                </motion.a>
+              ))}
             </div>
-          </nav>
-        </header>
-      </div>
 
-      <div
-        className={`fixed inset-0 bg-black bg-opacity-50 transition-opacity ${isSidebarOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`}
-        onClick={toggleSidebar}
-      ></div>
-
-      <div
-        className={`fixed z-10 top-0 right-0 h-full bg-white w-1/3 transform transition-transform flex flex-col ${isSidebarOpen ? "translate-x-0" : "translate-x-full"}`}
-      >
-        <button
-          aria-label={"Close menu"}
-          className="absolute top-4 right-4 text-gray-700 hover:text-gray-900"
-          onClick={toggleSidebar}
-        >
-          <svg
-            className="w-6 h-6"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
-        <div className="pt-8 space-y-4 flex-grow">
-          <button
-            onClick={() => scrollToSection("about")}
-            className="w-full px-4 py-2 pt-8 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
-          >
-            About
-          </button>
-          <button
-            onClick={() => scrollToSection("projects")}
-            className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
-          >
-            Projects
-          </button>
-          <button
-            onClick={() => scrollToSection("contact")}
-            className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
-          >
-            Contact
-          </button>
+            <motion.button
+              whileTap={{ scale: 0.95 }}
+              onClick={() => setIsOpen(!isOpen)}
+              className="md:hidden p-2 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 transition-colors duration-200 text-gray-300 hover:text-white"
+            >
+              {isOpen ? <X size={24} /> : <Menu size={24} />}
+            </motion.button>
+          </div>
         </div>
-        <p className="text-center text-xs text-gray-500 p-4">© 2025 Dennis</p>
-      </div>
-    </div>
+
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.3 }}
+              className="md:hidden glass"
+            >
+              <div className="px-4 py-6 space-y-4">
+                {navItems.map((item) => (
+                  <motion.div
+                    key={item.name}
+                    initial={{ x: -20, opacity: 0 }}
+                    animate={{ x: 0, opacity: 1 }}
+                    transition={{ delay: navItems.indexOf(item) * 0.1 }}
+                  >
+                    <Link
+                      href={item.href}
+                      onClick={() => setIsOpen(false)}
+                      className="block text-gray-300 hover:text-white transition-colors duration-200 font-medium py-2"
+                    >
+                      {item.name}
+                    </Link>
+                  </motion.div>
+                ))}
+                
+                <div className="pt-4 border-t border-gray-700">
+                  <div className="flex space-x-4">
+                    {socialLinks.map((social) => (
+                      <motion.a
+                        key={social.label}
+                        href={social.href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.95 }}
+                        className="p-3 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 transition-colors duration-200 text-gray-300 hover:text-white"
+                      >
+                        <social.icon size={20} />
+                      </motion.a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.header>
+    </>
   );
-}
+};
+
+export default Header;