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

feat: add 404 page with centered layout

Browse Source 
not-found.tsx renders oversized Fraunces heading with a back link.
Body gets flex flex-col min-h-screen so main can flex-1 to fill
available height without pushing the footer off screen.
This commit is contained in:
Ilia Mashkov
2026-05-18 20:46:22 +03:00
parent b88263a65a
commit 540df57f8d
2 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layout.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={`${fraunces.variable} ${publicSans.variable}`}> <body className={`${fraunces.variable} ${publicSans.variable} flex flex-col min-h-screen`}>
{children} {children}
<Footer /> <Footer />
</body> </body>
app/not-found.tsx
+13
View File
@@ -0,0 +1,13 @@
import { Link } from '$shared/ui';
/**
* Custom 404 page — shown for any unmatched route.
*/
export default function NotFound() {
return (
<main className="flex-1 flex flex-col items-center justify-center gap-6">
<h1 className="font-heading text-[clamp(8rem,20vw,18rem)] leading-none">404</h1>
<Link href="/">Back to main</Link>
</main>
);
}