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

feat: major UI/UX overhaul, snippets system, and performance fixes
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 9m26s
Details

Browse Source
This commit is contained in:
denshooter
2026-02-16 12:31:40 +01:00
parent 6f62b37c3a
commit a5dba298f3
41 changed files with 1610 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
app/not-found.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { motion } from "framer-motion";
import { Home, ArrowLeft, Search, Ghost, RefreshCcw } from "lucide-react";
import { Home, ArrowLeft, Search, Ghost, RefreshCcw, Terminal } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
@@ -17,106 +17,93 @@ export default function NotFound() {
if (!mounted) return null;
return (
<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>
<main className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 py-24 px-6 flex items-center justify-center transition-colors duration-500">
<div className="max-w-7xl mx-auto w-full">
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8 max-w-5xl mx-auto">
{/* Main Error Card */}
<motion.div
className="absolute inset-0 flex items-center justify-center"
animate={{ y: [0, -10, 0] }}
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
className="md:col-span-12 lg:col-span-8 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 flex flex-col justify-between min-h-[400px]"
>
<Ghost size={120} className="text-stone-800 dark:text-stone-200 opacity-80" />
<div>
<div className="flex items-center gap-3 mb-12">
<div className="w-10 h-10 rounded-2xl bg-stone-900 dark:bg-stone-50 flex items-center justify-center text-white dark:text-stone-900 font-black text-xs">
404
</div>
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-400">Error Report</span>
</div>
<h1 className="text-5xl md:text-8xl font-black tracking-tighter uppercase text-stone-900 dark:text-stone-50 leading-[0.8] mb-8">
Page not <br/>Found<span className="text-liquid-mint">.</span>
</h1>
<p className="text-xl md:text-2xl font-light text-stone-500 max-w-md leading-relaxed">
The content you are looking for has been moved, deleted, or never existed.
</p>
</div>
<div className="mt-12 flex flex-wrap gap-4">
<Link
href="/"
className="group relative px-10 py-4 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl font-black text-xs uppercase tracking-[0.2em] shadow-xl hover:scale-105 transition-all"
>
Return Home
</Link>
<button
onClick={() => router.back()}
className="px-10 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-black text-xs uppercase tracking-[0.2em] hover:bg-stone-50 dark:hover:bg-stone-700 transition-all"
>
Go Back
</button>
</div>
</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>
{/* Sidebar Cards */}
<div className="md:col-span-12 lg:col-span-4 flex flex-col gap-6">
{/* Search/Explore Projects */}
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.1 }}
className="bg-stone-900 rounded-[2.5rem] p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex-1 flex flex-col justify-between"
>
<div className="relative z-10">
<Search className="text-liquid-mint mb-6" size={32} />
<h3 className="text-2xl font-black uppercase tracking-tighter mb-2">Explore Work</h3>
<p className="text-stone-400 text-sm font-medium">Maybe what you need is in my project archive?</p>
</div>
<Link
href="/projects"
className="mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-liquid-mint group-hover:gap-4 transition-all"
>
View Projects <ArrowLeft className="rotate-180" size={14} />
</Link>
<div className="absolute top-0 right-0 w-32 h-32 bg-liquid-mint/5 blur-3xl rounded-full -mr-16 -mt-16" />
</motion.div>
<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"
{/* Visit the Lab */}
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.2 }}
className="bg-white dark:bg-stone-900 rounded-[2.5rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex-1 flex flex-col justify-between 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 className="relative z-10">
<Terminal className="text-liquid-purple mb-6" size={32} />
<h3 className="text-2xl font-black uppercase tracking-tighter mb-2 text-stone-900 dark:text-stone-50">Technical</h3>
<p className="text-stone-500 dark:text-stone-400 text-sm font-medium">Check out my collection of code snippets and notes.</p>
</div>
<Link
href="/snippets"
className="mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
>
Enter the Lab <ArrowLeft className="rotate-180" size={14} />
</Link>
</motion.div>
</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>
</motion.div>
{/* 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"
>
<RefreshCcw size={12} />
<span>ERR_PAGE_NOT_FOUND_404</span>
</button>
</motion.div>
</div>
</div>
</div>
</main>
);
}