From 6860d30e1c42998c6ee7f294b73fbb99aed938f9 Mon Sep 17 00:00:00 2001
From: Joe Monk <joemonk@hotmail.co.uk>
Date: Wed, 9 Jul 2025 01:16:37 +0100
Subject: [PATCH] Start cleaning up other pages

---
 next.config.js                         |  2 +-
 src/app/(root)/cv/page.tsx             |  5 +--
 src/app/(root)/layout.tsx              |  8 +----
 src/app/(root)/page.tsx                | 18 -----------
 src/app/(root)/posts/layout.tsx        |  9 ------
 src/app/(root)/posts/page.tsx          |  2 +-
 src/app/_components/cv.tsx             | 29 +++++++++--------
 src/app/_components/navbar-client.tsx  |  4 +--
 src/app/_components/theme-switcher.tsx |  6 ++--
 src/env.js                             |  8 ++---
 src/styles/globals.css                 | 44 ++------------------------
 11 files changed, 33 insertions(+), 102 deletions(-)
 delete mode 100644 src/app/(root)/posts/layout.tsx

diff --git a/next.config.js b/next.config.js
index 6807ba7..ddac90c 100644
--- a/next.config.js
+++ b/next.config.js
@@ -8,7 +8,7 @@ import createMDX from "@next/mdx";
 /** @type {import("next").NextConfig} */
 const config = {
 	pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
-	allowedDevOrigins: ["*.vscode.home.joemonk.co.uk"],
+	allowedDevOrigins: ["*.vscode.home.joemonk.co.uk", "*.vscode.localhost"],
 	experimental: {
 		reactCompiler: true,
 	},
diff --git a/src/app/(root)/cv/page.tsx b/src/app/(root)/cv/page.tsx
index 4f05975..ccde92c 100644
--- a/src/app/(root)/cv/page.tsx
+++ b/src/app/(root)/cv/page.tsx
@@ -4,11 +4,12 @@ import Cv from "@/app/_components/cv";
 export default function CvPage(): React.JSX.Element {
 	return (
 		<div>
-			<div className="flex flex-row justify-center pb-4">
-				<button type="button" className="border px-4 py-2">
+			<div className="flex flex-row justify-center">
+				<button type="button" className="btn btn-primary">
 					Download
 				</button>
 			</div>
+              <div className="divider divider-primary"></div>
 			<Cv />
 		</div>
 	);
diff --git a/src/app/(root)/layout.tsx b/src/app/(root)/layout.tsx
index 7619b20..08298e0 100644
--- a/src/app/(root)/layout.tsx
+++ b/src/app/(root)/layout.tsx
@@ -9,16 +9,10 @@ export default function RootLayout({
 	return (
 		<>
 			<NavBar />
-
-			<main className="mx-auto w-full flex-1 px-6 py-4 align-middle lg:max-w-5xl">
+			<main className="bg-base-200 sm:border-x-2 dark:border-0 border-accent mx-auto w-full flex-1 px-6 py-4 align-middle lg:max-w-5xl">
 				{children}
 			</main>
 			<Footer />
-
-			{/* <main className="px-6 py-4 w-full flex-1 align-middle overflow-y-scroll scrollbar scrollbar-thumb-dracula-purple scrollbar-track-dracula-bg-light">
-        <div className="mx-auto w-full align-middle lg:max-w-5xl ">
-        </div>
-      </main> */}
 		</>
 	);
 }
diff --git a/src/app/(root)/page.tsx b/src/app/(root)/page.tsx
index 4997d87..d590225 100644
--- a/src/app/(root)/page.tsx
+++ b/src/app/(root)/page.tsx
@@ -3,21 +3,3 @@ import HomeMdx from "@/markdown/page.mdx";
 export default function Home(): React.JSX.Element {
 	return <HomeMdx />;
 }
-
-// import { auth } from "@/server/auth";
-// import { HydrateClient } from "@/trpc/server";
-
-// export default async function Home() {
-//   const session = await auth();
-
-//   if (session?.user) {
-//     // void api.post.getLatest.prefetch();
-//   }
-
-//   return (
-//     <HydrateClient>
-//       <main className="flex min-h-screen flex-col items-center justify-center">
-//       </main>
-//     </HydrateClient>
-//   );
-// }
diff --git a/src/app/(root)/posts/layout.tsx b/src/app/(root)/posts/layout.tsx
deleted file mode 100644
index f0e0228..0000000
--- a/src/app/(root)/posts/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type React from "react";
-
-export default function Post({
-	children,
-}: {
-	children: React.JSX.Element;
-}): React.JSX.Element {
-	return <>{children}</>;
-}
diff --git a/src/app/(root)/posts/page.tsx b/src/app/(root)/posts/page.tsx
index be8a740..900bd41 100644
--- a/src/app/(root)/posts/page.tsx
+++ b/src/app/(root)/posts/page.tsx
@@ -49,7 +49,7 @@ export default async function Posts(): Promise<React.JSX.Element> {
 			{postDetails.map((post) => {
 				return (
 					<div key={post.link}>
-						<div className="prose dark:prose-invert mx-auto">
+						<div className="card md:card-side">
 							<h2>
 								<Link href={post.link}>{post.metadata.title}</Link>
 							</h2>
diff --git a/src/app/_components/cv.tsx b/src/app/_components/cv.tsx
index ee5eb09..6972779 100644
--- a/src/app/_components/cv.tsx
+++ b/src/app/_components/cv.tsx
@@ -10,11 +10,12 @@ type ExperienceContent = {
 	content: string | React.JSX.Element;
 };
 
+let printBreakCount = 0;
 function PrintBreak({ count }: { count?: number }): React.JSX.Element {
 	return (
 		<>
 			{Array.from({ length: count ?? 1 }).map(() => (
-				<br key={"break"} className="hidden print:block" />
+				<br key={`break-${printBreakCount++}`} className="hidden print:block" />
 			))}
 		</>
 	);
@@ -100,7 +101,7 @@ const content: ExperienceContent[] = [
 		tech: "TS/JS/WebGL/NodeJS",
 		title: "Game Developer",
 		content:
-			"I was hired to continue as a C++ Developer, but soon transitioned to the mobile team due to company priorities. Despite having no prior experience with JavaScript, I quickly became proficient in the language and its ecosystem, which enabled me to promptly integrate into my new role.I started with creating games, but similar to my time at Inspired, I wrote extra scripts and improved the game libraries to assist development across the team.",
+			"I was hired to continue as a C++ Developer, but soon transitioned to the mobile team due to company priorities. Despite having no prior experience with JavaScript, I quickly became proficient in the language and its ecosystem, which enabled me to promptly integrate into my new role. I started with creating games, but similar to my time at Inspired, I wrote extra scripts and improved the game libraries to assist development across the team.",
 	},
 	{
 		company: "Inspired Gaming",
@@ -109,7 +110,7 @@ const content: ExperienceContent[] = [
 		tech: "C++/DirectX/Python",
 		title: "Engine/Game Developer",
 		content:
-			"My initial responsibilities involved converting existing games to work on a variety of hardware, though I quickly moved up to work on building some of the more complex games and tooling myself, before going on to mentor new starters.Soon after, I advanced into the game engine development team, which explored ways of improving the development cycle and coding efficiency for other developers. We improved the libraries, build steps and used middleware such as Conan and custom VS plugins to provide prebuilt binaries and improve cohesion and standards across the teams.",
+			"My initial responsibilities involved converting existing games to work on a variety of hardware, though I quickly moved up to work on building some of the more complex games and tooling myself, before going on to mentor new starters. Soon after, I advanced into the game engine development team, which explored ways of improving the development cycle and coding efficiency for other developers. We improved the libraries, build steps and used middleware such as Conan and custom VS plugins to provide prebuilt binaries and improve cohesion and standards across the teams.",
 	},
 ];
 
@@ -119,7 +120,7 @@ function Experience({
 	content: ExperienceContent;
 }): React.JSX.Element {
 	return (
-		<div className="flex flex-row gap-4 border-b-2 border-b-dracula-bg-light last:border-b-0 dark:border-b-dracula-orange">
+		<div className="flex flex-row gap-4 border-b-2 border-b-accent last:border-b-0">
 			<div className="w-20 justify-center text-center">
 				{content.endDate}
 				<br />
@@ -128,10 +129,10 @@ function Experience({
 				{content.startDate}
 			</div>
 			<div className="flex w-full flex-col">
-				<div className="mb-2 flex w-full flex-row border-dracula-bg-light border-b-[1px] pb-1">
+				<div className="mb-2 flex w-full flex-row border-b pb-1">
 					<div className="self-start text-left">{content.title}</div>
 					<div className="flex-grow self-start text-right">{content.tech}</div>
-					<div className="ml-3 w-20 border-dracula-bg-light border-l-[1px] pr-2 text-right">
+					<div className="ml-3 w-20 border-dracula-bg-light border-l pr-2 text-right">
 						{content.company}
 					</div>
 				</div>
@@ -144,20 +145,20 @@ function Experience({
 // TODO
 export default function Cv(): React.JSX.Element {
 	return (
-		<div className="mx-auto w-[20cm] dark:text-white print:pt-[0.5cm]">
+		<div className="mx-auto max-w-[20cm] print:w-[20cm] print:pt-[0.5cm] border-accent">
 			<div className="flex flex-col justify-center">
-				<h1 className="bg-dracula-bg-light py-1 text-center font-medium text-2xl text-white uppercase">
+				<h1 className="py-1 text-center font-medium text-2xl uppercase">
 					Joe Lewis Monk
 				</h1>
 				<div className="flex flex-col gap-2 p-2">
-					<div className="grid grid-cols-3 border-dracula-bg-light border-b-2 pb-2">
-						<span className="border-dracula-bg-light border-r-[1px] text-left">
+					<div className="grid grid-cols-3 border-b-2 pb-2">
+						<span className="border-r text-left">
 							joemonk.co.uk
 						</span>
-						<span className="border-dracula-bg-light border-x-[1px] text-center">
+						<span className="border-x text-center">
 							07757 017587
 						</span>
-						<span className="border-dracula-bg-light border-l-[1px] text-right">
+						<span className="border-l text-right">
 							joemonk@hotmail.co.uk
 						</span>
 					</div>
@@ -171,8 +172,8 @@ export default function Cv(): React.JSX.Element {
 						while moving between roles.
 					</p>
 				</div>
-				<div className="flex flex-row gap-2 bg-dracula-bg-light px-2 py-1 text-white">
-					<PaperAirplaneIcon className="my-[2px] h-5" />
+				<div className="flex flex-row gap-2 px-2 py-1">
+					<PaperAirplaneIcon className="my-0.5 h-5" />
 					<h2 className="font-medium">Experience</h2>
 				</div>
 				<div className="flex flex-col gap-4 py-2">
diff --git a/src/app/_components/navbar-client.tsx b/src/app/_components/navbar-client.tsx
index 3ffb3c7..2c965a4 100644
--- a/src/app/_components/navbar-client.tsx
+++ b/src/app/_components/navbar-client.tsx
@@ -64,14 +64,14 @@ export default function NavBarClient({
 								className="btn hidden items-center rounded border-2 border-primary/75 p-1 transition-colors hover:bg-primary/25 sm:flex"
 								href="/"
 							>
-								<HomeModernIcon className="h-8 w-auto rounded-sm" />
+							    <HomeModernIcon className="h-8 w-auto rounded-sm" />
 							</Link>
 							<div className="ml-12 hidden gap-4 sm:flex">
 								{activeNavigation.map((item) => (
 									<Link
 										key={item.name}
 										href={item.href}
-										className={`btn min-w-20 rounded-lg rounded-b-none border-transparent border-b-2 px-3 pt-2.5 pb-1 text-center text-lg font-medium outline-0 hover:border-primary hover:bg-primary/25 ${
+										className={`btn min-w-20 rounded-lg rounded-b-none border-transparent border-b-2 px-2 py-1 pt-1.5 text-center text-lg font-medium hover:border-primary hover:bg-primary/25 ${
 											item.current ? "border-b-accent/75" : ""
 										}`}
 										aria-current={item.current ? "page" : undefined}
diff --git a/src/app/_components/theme-switcher.tsx b/src/app/_components/theme-switcher.tsx
index 7dbddf5..123c86e 100644
--- a/src/app/_components/theme-switcher.tsx
+++ b/src/app/_components/theme-switcher.tsx
@@ -6,12 +6,12 @@ import type React from "react";
 export default function ThemeSwitcher(): React.JSX.Element {
 	const toggleTheme = (): void => {
 		const currentTheme = document.documentElement.getAttribute("data-theme");
-		if (currentTheme === "dracula-pastel") {
+		if (currentTheme === "nord") {
 			localStorage.theme = "dracula-soft";
 			document.documentElement.setAttribute("data-theme", "dracula-soft");
 		} else {
-			localStorage.theme = "dracula-pastel";
-			document.documentElement.setAttribute("data-theme", "dracula-pastel");
+			localStorage.theme = "nord";
+			document.documentElement.setAttribute("data-theme", "nord");
 		}
 	};
 
diff --git a/src/env.js b/src/env.js
index 1cd665b..92ef667 100644
--- a/src/env.js
+++ b/src/env.js
@@ -17,8 +17,8 @@ export const env = createEnv({
 		NODE_ENV: z
 			.enum(["development", "test", "production"])
 			.default("development"),
-		AWS_ACCESS_KEY_ID: z.string(),
-		AWS_SECRET_ACCESS_KEY: z.string(),
+		S3_ACCESS_KEY_ID: z.string(),
+		S3_SECRET_ACCESS_KEY: z.string(),
 		PORT: z.number({ coerce: true }).int().default(3000),
 	},
 
@@ -41,8 +41,8 @@ export const env = createEnv({
 		AUTH_CLIENT_SECRET: process.env.AUTH_CLIENT_SECRET,
 		DATABASE_URL: process.env.DATABASE_URL,
 		NODE_ENV: process.env.NODE_ENV,
-		AWS_ACCESS_KEY_ID: process.env.AWS_ACCESS_KEY_ID,
-		AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY,
+		S3_ACCESS_KEY_ID: process.env.S3_ACCESS_KEY_ID,
+		S3_SECRET_ACCESS_KEY: process.env.S3_SECRET_ACCESS_KEY,
 		PORT: process.env.PORT,
 	},
 	/**
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 91173fb..a609c6b 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,47 +2,9 @@
 @plugin "@tailwindcss/typography";
 
 
-@plugin "daisyui";
-
-@plugin "daisyui/theme" {
-  name: "dracula-pastel";
-  default: true;
-  prefersdark: false;
-  color-scheme: "light";
-
-  --color-base-100: oklch(100% 0 0);
-  --color-base-200: oklch(98.462% 0.001 247.838);
-  --color-base-300: oklch(92.462% 0.001 247.838);
-  --color-base-content: oklch(20% 0 0);
-
-  --color-primary: oklch(90% 0.063 306.703); 
-  --color-primary-content: oklch(49% 0.265 301.924);
-  --color-secondary: oklch(89% 0.058 10.001);
-  --color-secondary-content: oklch(51% 0.222 16.935);
-  --color-accent: oklch(90% 0.093 164.15);
-  --color-accent-content: oklch(50% 0.118 165.612);
-  --color-neutral: oklch(55% 0.046 257.417);
-  --color-neutral-content: oklch(92% 0.013 255.508);
-  --color-info: oklch(86% 0.127 207.078);
-  --color-info-content: oklch(52% 0.105 223.128);
-  --color-success: oklch(87% 0.15 154.449);
-  --color-success-content: oklch(52% 0.154 150.069);
-  --color-warning: oklch(83% 0.128 66.29);
-  --color-warning-content: oklch(55% 0.195 38.402);
-  --color-error: oklch(80% 0.114 19.571);
-  --color-error-content: oklch(50% 0.213 27.518);
-
-  --radius-selector: 0.5rem;
-  --radius-field: 0.5rem;
-  --radius-box: 0.5rem;
-
-  --size-selector: 0.25rem;
-  --size-field: 0.25rem;
-  --border: 1px;
-
-  --depth: 0;
-  --noise: 0;
-}
+@plugin "daisyui" {
+    themes: nord --default;
+};
 
 @plugin "daisyui/theme" {
   /* Nicked from the vscode soft theme  https://github.com/dracula/visual-studio-code/blob/master/src/dracula.yml */