joe/next-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start cleaning up other pages

Browse Source
This commit is contained in:
Joe Monk
2025-07-09 01:16:37 +01:00
parent 89875a9341
commit 6860d30e1c
11 changed files with 33 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
next.config.js
View File

@@ -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,
},

5
src/app/(root)/cv/page.tsx
View File

@@ -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>
);

8
src/app/(root)/layout.tsx
View File

@@ -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> */}
</>
);
}

18
src/app/(root)/page.tsx
View File

@@ -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>
// );
// }

9
src/app/(root)/posts/layout.tsx
View File

@@ -1,9 +0,0 @@
import type React from "react";
export default function Post({
children,
}: {
children: React.JSX.Element;
}): React.JSX.Element {
return <>{children}</>;
}

2
src/app/(root)/posts/page.tsx
View File

@@ -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>

29
src/app/_components/cv.tsx
View File

@@ -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">

4
src/app/_components/navbar-client.tsx
View File

@@ -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}

6
src/app/_components/theme-switcher.tsx
View File

@@ -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");
}
};

8
src/env.js
View File

@@ -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,
},
/**

44
src/styles/globals.css
View File

@@ -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 */