update
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Mail, Phone, MapPin, Send, Github, Linkedin, Twitter } from 'lucide-react';
|
||||
import { Mail, Phone, MapPin, Send } from 'lucide-react';
|
||||
import { useToast } from '@/components/Toast';
|
||||
|
||||
const Contact = () => {
|
||||
@@ -66,28 +66,22 @@ const Contact = () => {
|
||||
{
|
||||
icon: Mail,
|
||||
title: 'Email',
|
||||
value: 'contact@dki.one',
|
||||
href: 'mailto:contact@dki.one'
|
||||
value: 'contact@dk0.dev',
|
||||
href: 'mailto:contact@dk0.dev'
|
||||
},
|
||||
{
|
||||
icon: Phone,
|
||||
title: 'Phone',
|
||||
value: '+49 123 456 789',
|
||||
href: 'tel:+49123456789'
|
||||
value: '+49 176 12669990',
|
||||
href: 'tel:+4917612669990'
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
title: 'Location',
|
||||
value: 'Osnabrück, Germany',
|
||||
href: '#'
|
||||
}
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: Github, href: 'https://github.com/Denshooter', label: 'GitHub' },
|
||||
{ icon: Linkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' },
|
||||
{ icon: Twitter, href: 'https://twitter.com/dkonkol', label: 'Twitter' }
|
||||
];
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
@@ -155,25 +149,6 @@ const Contact = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-white mb-4">Follow Me</h4>
|
||||
<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, y: -2 }}
|
||||
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-colors"
|
||||
>
|
||||
<social.icon size={20} />
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Form */}
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Github, Linkedin, Mail, Heart } from 'lucide-react';
|
||||
import { Heart, Code } from 'lucide-react';
|
||||
import { SiGithub, SiLinkedin } from 'react-icons/si';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Footer = () => {
|
||||
@@ -15,16 +16,8 @@ const Footer = () => {
|
||||
}, []);
|
||||
|
||||
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' }
|
||||
];
|
||||
|
||||
const quickLinks = [
|
||||
{ name: 'Home', href: '/' },
|
||||
{ name: 'Projects', href: '/projects' },
|
||||
{ name: 'About', href: '#about' },
|
||||
{ name: 'Contact', href: '#contact' }
|
||||
{ icon: SiGithub, href: 'https://github.com/Denshooter', label: 'GitHub' },
|
||||
{ icon: SiLinkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' }
|
||||
];
|
||||
|
||||
if (!mounted) {
|
||||
@@ -32,129 +25,95 @@ const Footer = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<footer className="relative py-16 px-4 border-t border-gray-800">
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent"></div>
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
|
||||
<div className="md:col-span-2">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<Link href="/" className="text-3xl font-bold gradient-text mb-4 inline-block">
|
||||
Dennis Konkol
|
||||
<footer className="relative py-12 px-4 bg-black 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 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
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>
|
||||
<div>
|
||||
<Link href="/" className="text-xl font-bold font-mono text-white">
|
||||
dk<span className="text-red-500">0</span>
|
||||
</Link>
|
||||
<p className="text-gray-400 mb-6 max-w-md leading-relaxed">
|
||||
A passionate software engineer and student based in Osnabrück, Germany.
|
||||
Creating innovative solutions that make a difference in the digital world.
|
||||
</p>
|
||||
|
||||
<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, y: -2 }}
|
||||
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"
|
||||
>
|
||||
<social.icon size={20} />
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">Software Engineer</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Social Links */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="flex space-x-4"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Quick Links</h3>
|
||||
<ul className="space-y-2">
|
||||
{quickLinks.map((link) => (
|
||||
<li key={link.name}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="text-gray-400 hover:text-white transition-colors duration-200"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{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-3 bg-gray-800/50 hover:bg-gray-700/50 rounded-lg text-gray-300 hover:text-white transition-all duration-200"
|
||||
>
|
||||
<social.icon size={18} />
|
||||
</motion.a>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Copyright */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="flex items-center space-x-2 text-gray-400 text-sm"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Legal</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href="/legal-notice"
|
||||
className="text-gray-400 hover:text-white transition-colors duration-200"
|
||||
>
|
||||
Impressum
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/privacy-policy"
|
||||
className="text-gray-400 hover:text-white transition-colors duration-200"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Contact</h3>
|
||||
<div className="space-y-2 text-gray-400">
|
||||
<p>Osnabrück, Germany</p>
|
||||
<p>contact@dki.one</p>
|
||||
<p>+49 123 456 789</p>
|
||||
</div>
|
||||
<span>© {currentYear}</span>
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
>
|
||||
<Heart size={14} className="text-red-500" />
|
||||
</motion.div>
|
||||
<span>Made in Germany</span>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Legal Links */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="pt-8 border-t border-gray-800 text-center"
|
||||
className="mt-8 pt-6 border-t border-gray-800/50 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
|
||||
<p className="text-gray-400">
|
||||
© {currentYear} Dennis Konkol. All rights reserved.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center space-x-2 text-gray-400">
|
||||
<span>Made with</span>
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
>
|
||||
<Heart size={16} className="text-red-500" />
|
||||
</motion.div>
|
||||
<span>in Germany</span>
|
||||
</div>
|
||||
<div className="flex space-x-6 text-sm">
|
||||
<Link
|
||||
href="/legal-notice"
|
||||
className="text-gray-500 hover:text-gray-300 transition-colors duration-200"
|
||||
>
|
||||
Impressum
|
||||
</Link>
|
||||
<Link
|
||||
href="/privacy-policy"
|
||||
className="text-gray-500 hover:text-gray-300 transition-colors duration-200"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-600">
|
||||
Built with Next.js, TypeScript & Tailwind CSS
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Footer_Back() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
}, 450); // Delay to start the animation
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<footer
|
||||
className={`p-3 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
|
||||
>
|
||||
<div className={`flex flex-col md:flex-row items-center justify-between`}>
|
||||
<div className={`flex-col items-center`}>
|
||||
<p className="md:mt-1 text-lg">
|
||||
Connect with me on social platforms:
|
||||
</p>
|
||||
<div className="flex justify-center items-center space-x-4 mt-4">
|
||||
<Link
|
||||
aria-label={"Dennis Github"}
|
||||
href="https://github.com/Denshooter"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="w-10 h-10"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.746.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.997.108-.774.42-1.305.763-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.527.117-3.18 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.4 3-.405 1.02.005 2.043.14 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.877.118 3.18.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.218.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
|
||||
</svg>
|
||||
</Link>
|
||||
<Link
|
||||
aria-label={"Dennis Linked In"}
|
||||
href="https://linkedin.com/in/dkonkol"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="w-10 h-10"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5 11.5h-3v-5.5c0-1.38-1.12-2.5-2.5-2.5s-2.5 1.12-2.5 2.5v5.5h-3v-10h3v1.5c.83-1.17 2.17-1.5 3.5-1.5 2.48 0 4.5 2.02 4.5 4.5v5.5z" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 md:absolute md:left-1/2 md:transform md:-translate-x-1/2">
|
||||
<Link
|
||||
href={"/"}
|
||||
className="p-4 mt-4 md:px-4 md:my-6 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600 transition"
|
||||
>
|
||||
Back to main page
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex-col">
|
||||
<div className="mt-4">
|
||||
<Link
|
||||
href="/privacy-policy"
|
||||
className="text-blue-800 transition-underline"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link
|
||||
href="/legal-notice"
|
||||
className="ml-4 text-blue-800 transition-underline"
|
||||
>
|
||||
Legal Notice
|
||||
</Link>
|
||||
</div>
|
||||
<p className="md:mt-4">© Dennis Konkol 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,8 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Menu, X, Github, Linkedin, Mail } from 'lucide-react';
|
||||
import { Menu, X, Mail } from 'lucide-react';
|
||||
import { SiGithub, SiLinkedin } from 'react-icons/si';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Header = () => {
|
||||
@@ -31,9 +32,9 @@ const Header = () => {
|
||||
];
|
||||
|
||||
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' },
|
||||
{ icon: SiGithub, href: 'https://github.com/Denshooter', label: 'GitHub' },
|
||||
{ icon: SiLinkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' },
|
||||
{ icon: Mail, href: 'mailto:contact@dk0.dev', label: 'Email' },
|
||||
];
|
||||
|
||||
if (!mounted) {
|
||||
@@ -70,8 +71,8 @@ const Header = () => {
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Link href="/" className="text-2xl font-bold gradient-text">
|
||||
DK
|
||||
<Link href="/" className="text-2xl font-bold font-mono text-white">
|
||||
dk<span className="text-red-500">0</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ const Hero = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 pb-8">
|
||||
{/* Animated Background */}
|
||||
<div className="absolute inset-0 animated-bg"></div>
|
||||
|
||||
@@ -71,17 +71,26 @@ const Hero = () => {
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
|
||||
{/* Domain - über dem Profilbild */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<div className="domain-text text-white/95 text-center">
|
||||
dk<span className="text-red-500">0</span>.dev
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Profile Image */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8, rotateY: -15 }}
|
||||
animate={{ opacity: 1, scale: 1, rotateY: 0 }}
|
||||
transition={{ duration: 1, delay: 0.1, ease: "easeOut" }}
|
||||
transition={{ duration: 1, delay: 0.7, ease: "easeOut" }}
|
||||
className="mb-8 flex justify-center"
|
||||
>
|
||||
<div className="relative group">
|
||||
{/* Glowing border effect */}
|
||||
<div className="absolute -inset-1 bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600 rounded-full blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-pulse"></div>
|
||||
|
||||
{/* Profile image container */}
|
||||
<div className="relative bg-gray-900 rounded-full p-1">
|
||||
<motion.div
|
||||
@@ -137,7 +146,7 @@ const Hero = () => {
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.8 }}
|
||||
className="text-5xl md:text-7xl font-bold mb-6"
|
||||
className="text-5xl md:text-7xl font-bold mb-4"
|
||||
>
|
||||
<span className="gradient-text">Dennis Konkol</span>
|
||||
</motion.h1>
|
||||
@@ -146,7 +155,7 @@ const Hero = () => {
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 1.0 }}
|
||||
transition={{ duration: 0.8, delay: 1.1 }}
|
||||
className="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto"
|
||||
>
|
||||
Student & Software Engineer based in Osnabrück, Germany
|
||||
@@ -216,15 +225,15 @@ const Hero = () => {
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1.5 }}
|
||||
className="mt-16 text-center"
|
||||
className="mt-12 md:mt-16 text-center relative z-20"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, 10, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
className="flex flex-col items-center text-gray-400"
|
||||
className="flex flex-col items-center text-white/90 bg-black/30 backdrop-blur-md px-6 py-3 rounded-full border border-white/20 shadow-lg"
|
||||
>
|
||||
<span className="text-sm mb-2">Scroll Down</span>
|
||||
<ArrowDown className="w-5 h-5" />
|
||||
<span className="text-sm md:text-base mb-2 font-medium">Scroll Down</span>
|
||||
<ArrowDown className="w-5 h-5 md:w-6 md:h-6" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user