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:
2026-02-16 01:35:35 +01:00
parent 7955dfbabb
commit 91eb446ac5
10 changed files with 176 additions and 2650 deletions

View File

@@ -3,10 +3,11 @@
import { motion } from "framer-motion";
import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2, Code } from "lucide-react";
import Link from "next/link";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useRouter } from "next/navigation";
export type ProjectDetailData = {
id: number;
@@ -35,9 +36,15 @@ export default function ProjectDetailClient({
}) {
const tCommon = useTranslations("common");
const tDetail = useTranslations("projects.detail");
const tShared = useTranslations("projects.shared");
const router = useRouter();
const [canGoBack, setCanGoBack] = useState(false);
useEffect(() => {
// Prüfen, ob wir eine History haben (von Home gekommen)
if (typeof window !== 'undefined' && window.history.length > 1) {
setCanGoBack(true);
}
try {
navigator.sendBeacon?.(
"/api/analytics/track",
@@ -46,18 +53,31 @@ export default function ProjectDetailClient({
} catch {}
}, [project.id, project.slug, locale]);
const handleBack = (e: React.MouseEvent) => {
e.preventDefault();
// Wenn wir direkt auf die Seite gekommen sind (Deep Link), gehen wir zur Projektliste
// Ansonsten nutzen wir den Browser-Back, um an die exakte Stelle der Home oder Liste zurückzukehren
if (canGoBack) {
router.back();
} else {
router.push(`/${locale}/projects`);
}
};
return (
<div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 pt-32 pb-20 px-6 transition-colors duration-500">
<div className="max-w-7xl mx-auto">
{/* Navigation */}
<Link
href={`/${locale}/projects`}
className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-12 group"
{/* Navigation - Intelligent Back */}
<button
onClick={handleBack}
className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-12 group bg-transparent border-none cursor-pointer"
>
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
<span className="font-bold uppercase tracking-widest text-xs">{tCommon("backToProjects")}</span>
</Link>
<span className="font-bold uppercase tracking-widest text-xs">
{tCommon("back")}
</span>
</button>
{/* Title Section */}
<div className="mb-20">
@@ -82,10 +102,7 @@ export default function ProjectDetailClient({
</div>
</div>
{/* Bento Details Grid */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
{/* Main Content */}
<div className="lg:col-span-8 space-y-8">
<div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm">
<div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
@@ -94,12 +111,9 @@ export default function ProjectDetailClient({
</div>
</div>
{/* Sidebar Boxes */}
<div className="lg:col-span-4 space-y-8">
{/* Quick Links Box */}
<div className="bg-stone-900 dark:bg-stone-800 rounded-[3rem] p-10 border border-stone-800 dark:border-stone-700 shadow-2xl text-white">
<h3 className="text-xl font-black mb-8 flex items-center gap-2 uppercase tracking-widest text-liquid-mint">Links</h3>
<h3 className="text-xl font-black mb-8 uppercase tracking-widest text-liquid-mint">Links</h3>
<div className="space-y-4">
{project.live && (
<a href={project.live} target="_blank" rel="noopener noreferrer" className="flex items-center justify-between w-full p-5 bg-white text-stone-900 rounded-2xl font-black hover:scale-105 transition-transform group">
@@ -116,9 +130,8 @@ export default function ProjectDetailClient({
</div>
</div>
{/* Tech Stack Box */}
<div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm">
<h3 className="text-xl font-black mb-8 flex items-center gap-2 uppercase tracking-widest text-stone-400">Stack</h3>
<h3 className="text-xl font-black mb-8 uppercase tracking-widest text-stone-400">Stack</h3>
<div className="flex flex-wrap gap-2">
{project.tags.map((tag) => (
<span key={tag} className="px-4 py-2 bg-stone-50 dark:bg-stone-800 rounded-xl text-xs font-bold border border-stone-100 dark:border-stone-700">
@@ -127,27 +140,6 @@ export default function ProjectDetailClient({
))}
</div>
</div>
{/* Meta Stats */}
<div className="bg-liquid-mint/5 dark:bg-stone-900 rounded-[3rem] p-10 border border-liquid-mint/20 dark:border-stone-800/60">
<div className="flex flex-col gap-6">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-full bg-white dark:bg-stone-800 flex items-center justify-center shadow-sm"><Calendar size={18} className="text-liquid-mint" /></div>
<div>
<p className="text-[10px] font-black uppercase tracking-widest text-stone-400">Release Date</p>
<p className="font-bold text-stone-900 dark:text-stone-100">{new Date(project.date).toLocaleDateString(locale, { year: 'numeric', month: 'long' })}</p>
</div>
</div>
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-full bg-white dark:bg-stone-800 flex items-center justify-center shadow-sm"><Code size={18} className="text-liquid-sky" /></div>
<div>
<p className="text-[10px] font-black uppercase tracking-widest text-stone-400">Category</p>
<p className="font-bold text-stone-900 dark:text-stone-100">{project.category}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>