Cayden Website 2.0: Rewrite with t3code & hand

app/layout.tsx

@@ -1,42 +1,53 @@
-import React from "react";
-import type {Metadata} from "next";
-import {Cormorant_Garamond, Poppins} from "next/font/google";
-import "./globals.css";
-import Header from "@/components/layout/layout-header";
+import type { ReactNode } from 'react';
+import type { Metadata, Viewport } from 'next';
+import { Inter, JetBrains_Mono, Space_Grotesk } from 'next/font/google';
+import './globals.css';
+import Header from '@/components/layout/layout-header';
+import Footer from '@/components/layout/layout-footer';
+import PageBackground from '@/components/layout/page-background';
 
-const cormorantGaramond = Cormorant_Garamond({
-    subsets: ['latin'],
-    variable: "--font-cormorantGaramond",
-    weight: ['400']
-})
+const spaceGrotesk = Space_Grotesk({
+	subsets: ['latin'],
+	variable: '--font-space-grotesk',
+});
 
-const poppins = Poppins({
-    subsets: ['latin'],
-    variable: "--font-poppins",
-    weight: ['400', '600']
-})
+const inter = Inter({
+	subsets: ['latin'],
+	variable: '--font-inter',
+});
 
+const jetbrainsMono = JetBrains_Mono({
+	subsets: ['latin'],
+	variable: '--font-jetbrains-mono',
+	weight: ['400', '500'],
+});
 
 export const metadata: Metadata = {
-    title: "sh ~./caydencodes.sh",
-    description: "Come and see what I'm all about.",
+	title: 'Cayden — Web Developer',
+	description:
+		'Web developer building clinical interfaces and fleet software.',
 };
 
-export default async function RootLayout({
-                                       children,
-                                   }: Readonly<{
-    children: React.ReactNode;
+export const viewport: Viewport = {
+	themeColor: '#040807',
+};
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: ReactNode;
 }>) {
-    return (
-        <html
-            lang="en"
-            className={`${cormorantGaramond.variable} ${poppins.variable} bg-neutral-100 h-full antialiased`}
-        >
-        <body
-            className="min-h-full flex flex-col bg-polar-night-lighter text-snow-storm text-shadow-snow-storm-dark">
-        <Header/>
-        {children}
-        </body>
-        </html>
-    );
+	return (
+		<html
+			lang="en"
+			className={`${spaceGrotesk.variable} ${inter.variable} ${jetbrainsMono.variable} h-full bg-obsidian antialiased`}
+		>
+			<body className="relative isolate flex min-h-full flex-col font-sans text-ink">
+				<PageBackground />
+				<Header />
+				<div className="flex-1">{children}</div>
+				<Footer />
+			</body>
+		</html>
+	);
 }