denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

full upgrade to dev

Browse Source
This commit is contained in:
denshooter
2026-01-07 14:30:00 +01:00
parent 4dc727fcd6
commit 26a8610aa7
34 changed files with 6890 additions and 920 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
app/components/Header.tsx
View File

@@ -1,10 +1,10 @@
"use client";
import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Menu, X, Mail } from 'lucide-react';
import { SiGithub, SiLinkedin } from 'react-icons/si';
import Link from 'next/link';
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, X, Mail } from "lucide-react";
import { SiGithub, SiLinkedin } from "react-icons/si";
import Link from "next/link";
const Header = () => {
const [isOpen, setIsOpen] = useState(false);
@@ -20,21 +20,25 @@ const Header = () => {
setScrolled(window.scrollY > 50);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
const navItems = [
{ name: 'Home', href: '/' },
{ name: 'About', href: '#about' },
{ name: 'Projects', href: '#projects' },
{ name: 'Contact', href: '#contact' },
{ name: "Home", href: "/" },
{ name: "About", href: "#about" },
{ name: "Projects", href: "#projects" },
{ name: "Contact", href: "#contact" },
];
const socialLinks = [
{ 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' },
{ 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) {
@@ -49,22 +53,30 @@ const Header = () => {
transition={{ duration: 0.8, ease: "easeOut" }}
className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none"
>
<div className={`pointer-events-auto transition-all duration-500 ease-out ${
scrolled ? 'w-full max-w-5xl' : 'w-full max-w-7xl'
}`}>
<div className={`
<div
className={`pointer-events-auto transition-all duration-500 ease-out ${
scrolled ? "w-full max-w-5xl" : "w-full max-w-7xl"
}`}
>
<div
className={`
backdrop-blur-xl transition-all duration-500
${scrolled
? 'bg-white/95 border border-stone-300 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3'
: 'bg-white/85 border border-stone-200 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full'
${
scrolled
? "bg-white/95 border border-stone-300 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3"
: "bg-white/85 border border-stone-200 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full"
}
flex justify-between items-center
`}>
`}
>
<motion.div
whileHover={{ scale: 1.05 }}
className="flex items-center space-x-2"
>
<Link href="/" className="text-2xl font-bold font-mono text-stone-800 tracking-tighter liquid-hover">
<Link
href="/"
className="text-2xl font-bold font-mono text-stone-800 tracking-tighter liquid-hover"
>
dk<span className="text-liquid-rose">0</span>
</Link>
</motion.div>
@@ -80,11 +92,14 @@ const Header = () => {
href={item.href}
className="text-stone-600 hover:text-stone-900 transition-colors duration-200 font-medium relative group px-2 py-1 liquid-hover"
onClick={(e) => {
if (item.href.startsWith('#')) {
if (item.href.startsWith("#")) {
e.preventDefault();
const element = document.querySelector(item.href);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
element.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
}
}}
@@ -153,12 +168,15 @@ const Header = () => {
href={item.href}
onClick={(e) => {
setIsOpen(false);
if (item.href.startsWith('#')) {
if (item.href.startsWith("#")) {
e.preventDefault();
setTimeout(() => {
const element = document.querySelector(item.href);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
element.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
}, 100);
}
@@ -169,7 +187,7 @@ const Header = () => {
</Link>
</motion.div>
))}
<div className="pt-6 mt-4 border-t border-stone-200">
<div className="flex justify-center space-x-4">
{socialLinks.map((social, index) => (
@@ -180,7 +198,9 @@ const Header = () => {
rel="noopener noreferrer"
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ delay: (navItems.length + index) * 0.05 }}
transition={{
delay: (navItems.length + index) * 0.05,
}}
whileHover={{ scale: 1.1 }}
className="p-3 rounded-full bg-white/60 text-stone-600 shadow-sm"
aria-label={social.label}