🎨 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
This commit is contained in:
Dennis Konkol
@@ -1,53 +1,173 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
"use client";
|
||||
|
||||
export default function Hero() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowDown, Code, Zap, Rocket } from 'lucide-react';
|
||||
|
||||
const Hero = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
}, 150); // Delay to start the animation
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
id="about"
|
||||
className={`flex flex-col md:flex-row items-center justify-center pt-16 pb-16 px-6 text-gray-700 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
|
||||
const features = [
|
||||
{ icon: Code, text: 'Full-Stack Development' },
|
||||
{ icon: Zap, text: 'Modern Technologies' },
|
||||
{ icon: Rocket, text: 'Innovative Solutions' },
|
||||
];
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Animated Background */}
|
||||
<div className="absolute inset-0 animated-bg"></div>
|
||||
|
||||
{/* Floating Elements */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<motion.div
|
||||
className="absolute top-20 left-20 w-32 h-32 bg-blue-500/10 rounded-full blur-xl"
|
||||
initial={{ scale: 1, opacity: 0.3 }}
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
opacity: [0.3, 0.6, 0.3],
|
||||
}}
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute top-40 right-32 w-24 h-24 bg-purple-500/10 rounded-full blur-xl"
|
||||
initial={{ scale: 1.2, opacity: 0.6 }}
|
||||
animate={{
|
||||
scale: [1.2, 1, 1.2],
|
||||
opacity: [0.6, 0.3, 0.6],
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-32 left-1/3 w-40 h-40 bg-cyan-500/10 rounded-full blur-xl"
|
||||
initial={{ scale: 1, opacity: 0.4 }}
|
||||
animate={{
|
||||
scale: [1, 1.3, 1],
|
||||
opacity: [0.4, 0.7, 0.4],
|
||||
}}
|
||||
transition={{
|
||||
duration: 6,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
|
||||
{/* Main Title */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="text-5xl md:text-7xl font-bold mb-6"
|
||||
>
|
||||
<div
|
||||
className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">
|
||||
Hi, I’m Dennis
|
||||
</h1>
|
||||
<h2 className="mt-2 text-xl md:text-2xl font-semibold text-gray-700">
|
||||
Student & Software Engineer
|
||||
</h2>
|
||||
<h3 className="mt-1 text-lg md:text-xl text-gray-600">
|
||||
Based in Osnabrück, Germany
|
||||
</h3>
|
||||
<p className="mt-6 text-gray-800 text-lg leading-relaxed">
|
||||
Passionate about technology, coding, and solving real-world problems.
|
||||
I enjoy building innovative solutions and continuously expanding my
|
||||
knowledge.
|
||||
</p>
|
||||
<p className="mt-4 text-gray-700 text-base">
|
||||
Currently working on exciting projects that merge creativity with
|
||||
functionality. Always eager to learn and collaborate!
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex mt-8 md:mt-0 md:ml-12">
|
||||
<Image
|
||||
src="/images/me.jpg"
|
||||
alt="Image of Dennis"
|
||||
width={400}
|
||||
height={400}
|
||||
className="rounded-2xl shadow-lg shadow-gray-700 object-cover"
|
||||
loading="lazy" // Lazy Loading
|
||||
style={{width: "auto", height: "400px"}}
|
||||
sizes="(max-width: 640px) 640px, 828px" // Definiere, welche Bildgröße bei welcher Bildschirmgröße geladen wird
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<span className="gradient-text">Dennis Konkol</span>
|
||||
</motion.h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto"
|
||||
>
|
||||
Student & Software Engineer based in Osnabrück, Germany
|
||||
</motion.p>
|
||||
|
||||
{/* Description */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="text-lg text-gray-400 mb-12 max-w-3xl mx-auto leading-relaxed"
|
||||
>
|
||||
Passionate about technology, coding, and solving real-world problems.
|
||||
I create innovative solutions that make a difference.
|
||||
</motion.p>
|
||||
|
||||
{/* Features */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.8 }}
|
||||
className="flex flex-wrap justify-center gap-6 mb-12"
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={feature.text}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 1 + index * 0.1 }}
|
||||
whileHover={{ scale: 1.05, y: -5 }}
|
||||
className="flex items-center space-x-2 px-4 py-2 rounded-full glass-card"
|
||||
>
|
||||
<feature.icon className="w-5 h-5 text-blue-400" />
|
||||
<span className="text-gray-300 font-medium">{feature.text}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 1.2 }}
|
||||
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
|
||||
>
|
||||
<motion.a
|
||||
href="#projects"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="btn-primary px-8 py-4 text-lg font-semibold"
|
||||
>
|
||||
View My Work
|
||||
</motion.a>
|
||||
|
||||
<motion.a
|
||||
href="#contact"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="px-8 py-4 text-lg font-semibold border-2 border-gray-600 text-gray-300 hover:text-white hover:border-gray-500 rounded-lg transition-all duration-200"
|
||||
>
|
||||
Get In Touch
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
|
||||
{/* Scroll Indicator */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1.5 }}
|
||||
className="mt-16 text-center"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, 10, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
className="flex flex-col items-center text-gray-400"
|
||||
>
|
||||
<span className="text-sm mb-2">Scroll Down</span>
|
||||
<ArrowDown className="w-5 h-5" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
|
||||
Reference in New Issue
Block a user