fix: resolve project 404s with Directus fallback and upgrade 404 page
Merged Directus and PostgreSQL project data, implemented single project fetch from CMS, and modernized the NotFound component with liquid design.
This commit is contained in:
denshooter
+97
-125
@@ -1,149 +1,121 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Home, ArrowLeft, Search, Ghost, RefreshCcw } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Home, ArrowLeft, Search } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function NotFound() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [input, setInput] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
// In tests, avoid next/dynamic loadable timing and render a stable fallback
|
||||
if (process.env.NODE_ENV === "test") {
|
||||
return (
|
||||
<div>
|
||||
Oops! The page you're looking for doesn't exist.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!mounted) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#faf8f3]">
|
||||
<div className="text-center">
|
||||
<div className="text-[#795548]">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleCommand = (cmd: string) => {
|
||||
const command = cmd.toLowerCase().trim();
|
||||
if (command === 'home' || command === 'cd ~' || command === 'cd /') {
|
||||
router.push('/');
|
||||
} else if (command === 'back' || command === 'cd ..') {
|
||||
router.back();
|
||||
} else if (command === 'search') {
|
||||
router.push('/projects');
|
||||
}
|
||||
};
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#faf8f3] p-4">
|
||||
<div className="w-full max-w-2xl">
|
||||
{/* Terminal-style 404 */}
|
||||
<div className="bg-[#3e2723] rounded-2xl shadow-2xl overflow-hidden border border-[#5d4037]">
|
||||
{/* Terminal Header */}
|
||||
<div className="bg-[#5d4037] px-4 py-3 flex items-center gap-2 border-b border-[#795548]">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-[#d84315]"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-[#bcaaa4]"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-[#a1887f]"></div>
|
||||
</div>
|
||||
<div className="ml-4 text-[#faf8f3] text-sm font-mono">
|
||||
terminal@portfolio ~ 404
|
||||
</div>
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#fdfcf8] dark:bg-stone-950 overflow-hidden relative">
|
||||
{/* Liquid Background Blobs */}
|
||||
<motion.div
|
||||
className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-liquid-mint/20 dark:bg-liquid-mint/10 rounded-full blur-[120px]"
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
x: [0, 50, 0],
|
||||
y: [0, 30, 0],
|
||||
}}
|
||||
transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-liquid-rose/20 dark:bg-liquid-rose/10 rounded-full blur-[120px]"
|
||||
animate={{
|
||||
scale: [1.2, 1, 1.2],
|
||||
x: [0, -50, 0],
|
||||
y: [0, -30, 0],
|
||||
}}
|
||||
transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 max-w-2xl w-full px-6 text-center">
|
||||
{/* Large 404 with Liquid Animation */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
className="relative inline-block mb-8"
|
||||
>
|
||||
<h1 className="text-[12rem] md:text-[16rem] font-black text-stone-900/5 dark:text-stone-100/5 select-none leading-none">
|
||||
404
|
||||
</h1>
|
||||
<motion.div
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
animate={{ y: [0, -10, 0] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||||
>
|
||||
<Ghost size={120} className="text-stone-800 dark:text-stone-200 opacity-80" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Content Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
className="bg-white/40 dark:bg-stone-900/40 backdrop-blur-2xl border border-white/60 dark:border-white/10 rounded-[2.5rem] p-8 md:p-12 shadow-[0_20px_50px_rgba(0,0,0,0.05)] dark:shadow-none"
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-stone-900 dark:text-stone-50 mb-4 font-sans tracking-tight">
|
||||
Lost in the Liquid.
|
||||
</h2>
|
||||
<p className="text-stone-600 dark:text-stone-400 text-lg md:text-xl font-light leading-relaxed mb-10 max-w-md mx-auto">
|
||||
The page you are looking for has evaporated or never existed in this dimension.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center justify-center gap-3 px-8 py-4 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl font-bold hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg hover:shadow-xl dark:shadow-none group"
|
||||
>
|
||||
<Home size={20} className="group-hover:-translate-y-0.5 transition-transform" />
|
||||
<span>Back Home</span>
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="flex items-center justify-center gap-3 px-8 py-4 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 border border-stone-200 dark:border-stone-700 rounded-2xl font-bold hover:bg-stone-50 dark:hover:bg-stone-700 hover:scale-[1.02] active:scale-[0.98] transition-all shadow-sm group"
|
||||
>
|
||||
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
|
||||
<span>Go Back</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Terminal Body */}
|
||||
<div className="p-6 md:p-8 font-mono text-sm md:text-base">
|
||||
<div className="mb-6">
|
||||
<div className="text-[#bcaaa4] mb-2">$ cd {mounted ? window.location.pathname : '/unknown'}</div>
|
||||
<div className="text-[#d84315] mb-4">
|
||||
<span className="mr-2">✗</span>
|
||||
Error: ENOENT: no such file or directory
|
||||
</div>
|
||||
<div className="text-[#a1887f] mb-6">
|
||||
<pre className="whitespace-pre-wrap">
|
||||
{`
|
||||
██╗ ██╗ ██████╗ ██╗ ██╗
|
||||
██║ ██║██╔═████╗██║ ██║
|
||||
███████║██║██╔██║███████║
|
||||
╚════██║████╔╝██║╚════██║
|
||||
██║╚██████╔╝ ██║
|
||||
╚═╝ ╚═════╝ ╚═╝
|
||||
`}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div className="text-[#faf8f3] mb-6">
|
||||
<p className="mb-3">The page you're looking for seems to have wandered off.</p>
|
||||
<p className="text-[#bcaaa4]">Perhaps it never existed, or maybe it's on a coffee break.</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 text-[#a1887f]">
|
||||
<div className="mb-2">Available commands:</div>
|
||||
<div className="pl-4 space-y-1 text-sm">
|
||||
<div>→ <span className="text-[#faf8f3]">home</span> - Return to homepage</div>
|
||||
<div>→ <span className="text-[#faf8f3]">back</span> - Go back to previous page</div>
|
||||
<div>→ <span className="text-[#faf8f3]">search</span> - Search the website</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interactive Command Line */}
|
||||
<div className="flex items-center gap-2 border-t border-[#5d4037] pt-4">
|
||||
<span className="text-[#a1887f]">$</span>
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleCommand(input);
|
||||
setInput('');
|
||||
}
|
||||
}}
|
||||
placeholder="Type a command..."
|
||||
className="flex-1 bg-transparent text-[#faf8f3] outline-none placeholder:text-[#795548] font-mono"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-8 pt-8 border-t border-stone-100 dark:border-stone-800">
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center gap-2 text-stone-500 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 transition-colors font-medium group"
|
||||
>
|
||||
<Search size={18} className="group-hover:rotate-12 transition-transform" />
|
||||
<span>Looking for my work? Explore projects</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Quick Action Buttons */}
|
||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center justify-center gap-2 bg-[#fffcf5] hover:bg-[#faf8f3] border border-[#d7ccc8] rounded-xl px-6 py-4 transition-all hover:shadow-md group"
|
||||
{/* Floating Help Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1 }}
|
||||
className="mt-12"
|
||||
>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-stone-100 dark:bg-stone-800 rounded-full text-stone-500 dark:text-stone-400 text-xs font-mono hover:text-stone-800 dark:hover:text-stone-200 transition-colors"
|
||||
>
|
||||
<Home className="w-5 h-5 text-[#5d4037] group-hover:text-[#3e2723]" />
|
||||
<span className="text-[#3e2723] font-medium">Home</span>
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="flex items-center justify-center gap-2 bg-[#fffcf5] hover:bg-[#faf8f3] border border-[#d7ccc8] rounded-xl px-6 py-4 transition-all hover:shadow-md group"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5 text-[#5d4037] group-hover:text-[#3e2723]" />
|
||||
<span className="text-[#3e2723] font-medium">Go Back</span>
|
||||
<RefreshCcw size={12} />
|
||||
<span>ERR_PAGE_NOT_FOUND_404</span>
|
||||
</button>
|
||||
|
||||
<Link
|
||||
href="/projects"
|
||||
className="flex items-center justify-center gap-2 bg-[#fffcf5] hover:bg-[#faf8f3] border border-[#d7ccc8] rounded-xl px-6 py-4 transition-all hover:shadow-md group"
|
||||
>
|
||||
<Search className="w-5 h-5 text-[#5d4037] group-hover:text-[#3e2723]" />
|
||||
<span className="text-[#3e2723] font-medium">Explore Projects</span>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user