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
This commit is contained in:
@@ -26,8 +26,8 @@ const Header = () => {
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', href: '/' },
|
||||
{ name: 'Projects', href: '/projects' },
|
||||
{ name: 'About', href: '#about' },
|
||||
{ name: 'Projects', href: '#projects' },
|
||||
{ name: 'Contact', href: '#contact' },
|
||||
];
|
||||
|
||||
@@ -85,10 +85,19 @@ const Header = () => {
|
||||
>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-gray-300 hover:text-white transition-colors duration-200 font-medium relative group"
|
||||
className="text-gray-300 hover:text-white transition-colors duration-200 font-medium relative group px-2 py-1"
|
||||
onClick={(e) => {
|
||||
if (item.href.startsWith('#')) {
|
||||
e.preventDefault();
|
||||
const element = document.querySelector(item.href);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
<span className="absolute -bottom-1 left-2 right-2 h-0.5 bg-gradient-to-r from-blue-500 to-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
@@ -122,50 +131,77 @@ const Header = () => {
|
||||
|
||||
<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"
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-40 md:hidden"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="md:hidden glass border-t border-gray-800/50 z-50 relative"
|
||||
>
|
||||
<div className="px-4 py-6 space-y-2">
|
||||
{navItems.map((item, index) => (
|
||||
<motion.div
|
||||
key={item.name}
|
||||
initial={{ x: -20, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
exit={{ x: -20, opacity: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
>
|
||||
{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"
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={(e) => {
|
||||
setIsOpen(false);
|
||||
if (item.href.startsWith('#')) {
|
||||
e.preventDefault();
|
||||
setTimeout(() => {
|
||||
const element = document.querySelector(item.href);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
className="block text-gray-300 hover:text-white transition-all duration-200 font-medium py-3 px-4 rounded-lg hover:bg-gray-800/50 border-l-2 border-transparent hover:border-blue-500"
|
||||
>
|
||||
<social.icon size={20} />
|
||||
</motion.a>
|
||||
))}
|
||||
{item.name}
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
<div className="pt-4 mt-4 border-t border-gray-700/50">
|
||||
<p className="text-xs text-gray-500 mb-3 px-4">Connect with me</p>
|
||||
<div className="flex space-x-3 px-4">
|
||||
{socialLinks.map((social, index) => (
|
||||
<motion.a
|
||||
key={social.label}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: (navItems.length + index) * 0.05 }}
|
||||
whileHover={{ scale: 1.1, y: -2 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="p-3 rounded-xl bg-gray-800/50 hover:bg-gray-700/50 transition-all duration-200 text-gray-300 hover:text-white"
|
||||
aria-label={social.label}
|
||||
>
|
||||
<social.icon size={20} />
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.header>
|
||||
|
||||
Reference in New Issue
Block a user