fix: cleanup footer, smart navigation, and projects redesign
Removed aggressive background text in footer. Implemented intelligent back button for projects. Redesigned project archive page. Stabilized idle quote logic in activity feed.
This commit is contained in:
@@ -1,142 +1,85 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Heart, Code } from 'lucide-react';
|
||||
import { SiGithub, SiLinkedin } from 'react-icons/si';
|
||||
import Link from 'next/link';
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { useConsent } from "./ConsentProvider";
|
||||
import { Github, Linkedin, Mail, ArrowUp } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const Footer = () => {
|
||||
const locale = useLocale();
|
||||
const t = useTranslations("footer");
|
||||
const { resetConsent } = useConsent();
|
||||
const year = new Date().getFullYear();
|
||||
|
||||
const [currentYear] = useState(() => new Date().getFullYear());
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: SiGithub, href: 'https://github.com/Denshooter', label: 'GitHub' },
|
||||
{ icon: SiLinkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' }
|
||||
];
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="relative py-12 px-4 bg-white border-t border-stone-200">
|
||||
<footer className="bg-[#fdfcf8] dark:bg-stone-950 pt-32 pb-12 px-6 overflow-hidden transition-colors duration-500">
|
||||
<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: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="flex items-center space-x-3"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360, scale: 1.1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-12 h-12 bg-gradient-to-br from-liquid-mint to-liquid-lavender rounded-xl flex items-center justify-center shadow-md"
|
||||
>
|
||||
<Code className="w-6 h-6 text-stone-800" />
|
||||
</motion.div>
|
||||
<div>
|
||||
<Link href={`/${locale}`} className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
|
||||
dk<span className="text-liquid-rose">0</span>
|
||||
</Link>
|
||||
<p className="text-xs text-stone-500">{t("role")}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Social Links */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.4, delay: 0.05 }}
|
||||
className="flex space-x-3"
|
||||
>
|
||||
{socialLinks.map((social) => (
|
||||
<motion.a
|
||||
key={social.label}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{ scale: 1.15, y: -3 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="p-3 bg-stone-50 hover:bg-white rounded-xl text-stone-600 hover:text-stone-900 transition-all duration-200 border border-stone-200 hover:border-stone-300 shadow-sm"
|
||||
aria-label={social.label}
|
||||
>
|
||||
<social.icon size={18} />
|
||||
</motion.a>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Copyright */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.4, delay: 0.1 }}
|
||||
className="flex items-center space-x-2 text-stone-400 text-sm"
|
||||
>
|
||||
<span>© {currentYear}</span>
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
>
|
||||
<Heart size={14} className="text-liquid-rose fill-liquid-rose" />
|
||||
</motion.div>
|
||||
<span>{t("madeIn")}</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Huge Outlined Name */}
|
||||
<div className="relative mb-24 select-none pointer-events-none">
|
||||
<h2 className="text-[12vw] font-black leading-none text-stone-900/5 dark:text-white/5 uppercase tracking-tighter text-center">
|
||||
Dennis Konkol
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Legal Links */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.4, delay: 0.15 }}
|
||||
className="mt-8 pt-6 border-t border-stone-100 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"
|
||||
>
|
||||
<div className="flex space-x-6 text-sm">
|
||||
<Link
|
||||
href={`/${locale}/legal-notice`}
|
||||
className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-end">
|
||||
{/* Copyright & Info */}
|
||||
<div className="md:col-span-4 space-y-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-stone-900 dark:bg-stone-50 flex items-center justify-center text-white dark:text-stone-900 font-black text-xs">
|
||||
dk
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter">Software Engineer</p>
|
||||
<p className="text-stone-500 text-sm font-medium">© {year} All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="md:col-span-4 grid grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">Legal</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href={`/${locale}/legal-notice`} className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">{t("legalNotice")}</Link>
|
||||
<Link href={`/${locale}/privacy-policy`} className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">{t("privacyPolicy")}</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">Social</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">GitHub</a>
|
||||
<a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Back to Top */}
|
||||
<div className="md:col-span-4 flex justify-start md:justify-end">
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="group flex flex-col items-center gap-4 text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
{t("legalNotice")}
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${locale}/privacy-policy`}
|
||||
className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
|
||||
>
|
||||
{t("privacyPolicy")}
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => resetConsent()}
|
||||
className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
|
||||
title={t("privacySettingsTitle")}
|
||||
>
|
||||
{t("privacySettings")}
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.3em] vertical-text transform rotate-180" style={{ writingMode: 'vertical-rl' }}>Back to top</span>
|
||||
<div className="w-12 h-12 rounded-full border border-stone-200 dark:border-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 transition-all shadow-sm">
|
||||
<ArrowUp size={20} />
|
||||
</div>
|
||||
</button>
|
||||
<Link
|
||||
href="/404"
|
||||
className="text-stone-500 hover:text-stone-800 transition-colors duration-200 font-mono text-xs"
|
||||
title="Kernel Panic 404"
|
||||
>
|
||||
404
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-stone-400 flex items-center space-x-1">
|
||||
<span>{t("builtWith")}</span>
|
||||
<span className="text-stone-600 font-semibold">Next.js</span>
|
||||
<span className="text-stone-300">•</span>
|
||||
<span className="text-stone-600 font-semibold">TypeScript</span>
|
||||
<span className="text-stone-300">•</span>
|
||||
<span className="text-stone-600 font-semibold">Tailwind CSS</span>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="mt-20 pt-8 border-t border-stone-100 dark:border-stone-900 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-[10px] font-bold text-stone-400 uppercase tracking-widest">
|
||||
Built with Next.js, Directus & Passion.
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
||||
<span className="text-[10px] font-bold text-stone-400 uppercase tracking-widest">Systems Online</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
@@ -25,52 +25,51 @@ const Header = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none">
|
||||
<div className="fixed top-8 left-0 right-0 z-50 flex justify-center px-6 pointer-events-none">
|
||||
<motion.nav
|
||||
initial={{ y: -100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
className="pointer-events-auto bg-white/80 dark:bg-stone-900/80 backdrop-blur-xl border border-stone-200/50 dark:border-stone-800/50 shadow-lg rounded-full px-2 py-2 flex items-center gap-2"
|
||||
className="pointer-events-auto bg-white/70 dark:bg-stone-900/70 backdrop-blur-2xl border border-white/40 dark:border-white/5 shadow-[0_8px_32px_rgba(0,0,0,0.05)] rounded-full px-3 py-2 flex items-center gap-1 md:gap-4"
|
||||
>
|
||||
{/* Logo / Home Button */}
|
||||
{/* Logo Pill */}
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-full bg-stone-100 dark:bg-stone-800 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors font-bold text-stone-900 dark:text-stone-100"
|
||||
className="w-10 h-10 flex items-center justify-center rounded-full bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 transition-transform hover:scale-105 active:scale-95 shadow-lg"
|
||||
>
|
||||
dk
|
||||
<span className="font-black text-xs tracking-tighter">dk</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Nav Items */}
|
||||
<div className="hidden md:flex items-center gap-1 px-2">
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden md:flex items-center gap-1">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="px-4 py-2 text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 hover:bg-stone-100 dark:hover:bg-stone-800/50 rounded-full transition-all"
|
||||
className="px-5 py-2 text-[10px] font-black uppercase tracking-[0.2em] text-stone-500 hover:text-stone-900 dark:hover:text-stone-100 rounded-full transition-all"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="w-px h-6 bg-stone-200 dark:bg-stone-800 mx-1 hidden md:block"></div>
|
||||
<div className="w-px h-4 bg-stone-200 dark:bg-white/10 mx-1 hidden md:block"></div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Actions Pill */}
|
||||
<div className="flex items-center gap-1 bg-stone-100/50 dark:bg-white/5 rounded-full p-1">
|
||||
<Link
|
||||
href={locale === "en" ? pathname.replace(/^\/en/, "/de") : pathname.replace(/^\/de/, "/en")}
|
||||
className="w-9 h-9 flex items-center justify-center text-xs font-bold text-stone-600 dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-800 rounded-full transition-colors"
|
||||
className="w-8 h-8 flex items-center justify-center text-[10px] font-black text-stone-500 hover:text-stone-900 dark:hover:text-stone-100 rounded-full transition-colors"
|
||||
>
|
||||
{locale === "en" ? "DE" : "EN"}
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
{/* Mobile Menu Toggle */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="w-9 h-9 flex md:hidden items-center justify-center text-stone-600 dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-800 rounded-full transition-colors"
|
||||
className="w-8 h-8 flex md:hidden items-center justify-center text-stone-600 dark:text-stone-400 hover:bg-white dark:hover:bg-stone-800 rounded-full transition-colors shadow-sm"
|
||||
>
|
||||
{isOpen ? <X size={18} /> : <Menu size={18} />}
|
||||
{isOpen ? <X size={14} /> : <Menu size={14} />}
|
||||
</button>
|
||||
</div>
|
||||
</motion.nav>
|
||||
@@ -80,18 +79,18 @@ const Header = () => {
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: -20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: -20 }}
|
||||
className="fixed top-20 left-4 right-4 z-40 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-3xl shadow-2xl p-4 md:hidden"
|
||||
initial={{ opacity: 0, y: 10, scale: 0.98 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 10, scale: 0.98 }}
|
||||
className="fixed top-24 left-6 right-6 z-40 bg-white/90 dark:bg-stone-900/95 backdrop-blur-3xl border border-white/40 dark:border-white/10 rounded-[2.5rem] shadow-2xl p-6 md:hidden overflow-hidden"
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-3">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="px-4 py-3 text-lg font-medium text-stone-900 dark:text-stone-100 bg-stone-50 dark:bg-stone-800/50 rounded-xl"
|
||||
className="px-6 py-4 text-sm font-black uppercase tracking-[0.2em] text-stone-900 dark:text-stone-100 bg-stone-50 dark:bg-white/5 rounded-2xl transition-colors hover:bg-liquid-mint/10"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user