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} */ /** @type {import("next").NextConfig} */
const config = { const config = {
pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"], pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
allowedDevOrigins: ["*.vscode.home.joemonk.co.uk"], allowedDevOrigins: ["*.vscode.home.joemonk.co.uk", "*.vscode.localhost"],
experimental: { experimental: {
reactCompiler: true, 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 { export default function CvPage(): React.JSX.Element {
return ( return (
<div> <div>
<div className="flex flex-row justify-center pb-4"> <div className="flex flex-row justify-center">
<button type="button" className="border px-4 py-2"> <button type="button" className="btn btn-primary">
Download Download
</button> </button>
</div> </div>
<div className="divider divider-primary"></div>
<Cv /> <Cv />
</div> </div>
); );

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

@@ -9,16 +9,10 @@ export default function RootLayout({
return ( return (
<> <>
<NavBar /> <NavBar />
<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">
<main className="mx-auto w-full flex-1 px-6 py-4 align-middle lg:max-w-5xl">
{children} {children}
</main> </main>
<Footer /> <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 { export default function Home(): React.JSX.Element {
return <HomeMdx />; 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) => { {postDetails.map((post) => {
return ( return (
<div key={post.link}> <div key={post.link}>
<div className="prose dark:prose-invert mx-auto"> <div className="card md:card-side">
<h2> <h2>
<Link href={post.link}>{post.metadata.title}</Link> <Link href={post.link}>{post.metadata.title}</Link>
</h2> </h2>

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

@@ -10,11 +10,12 @@ type ExperienceContent = {
content: string | React.JSX.Element; content: string | React.JSX.Element;
}; };
let printBreakCount = 0;
function PrintBreak({ count }: { count?: number }): React.JSX.Element { function PrintBreak({ count }: { count?: number }): React.JSX.Element {
return ( return (
<> <>
{Array.from({ length: count ?? 1 }).map(() => ( {Array.from({ length: count ?? 1 }).map(() => (
<br key={"break"} className="hidden print:block" /> <br key={`break-${printBreakCount++}`} className="hidden print:block" />
))} ))}
</> </>
); );
@@ -119,7 +120,7 @@ function Experience({
content: ExperienceContent; content: ExperienceContent;
}): React.JSX.Element { }): React.JSX.Element {
return ( 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"> <div className="w-20 justify-center text-center">
{content.endDate} {content.endDate}
<br /> <br />
@@ -128,10 +129,10 @@ function Experience({
{content.startDate} {content.startDate}
</div> </div>
<div className="flex w-full flex-col"> <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="self-start text-left">{content.title}</div>
<div className="flex-grow self-start text-right">{content.tech}</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} {content.company}
</div> </div>
</div> </div>
@@ -144,20 +145,20 @@ function Experience({
// TODO // TODO
export default function Cv(): React.JSX.Element { export default function Cv(): React.JSX.Element {
return ( 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"> <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 Joe Lewis Monk
</h1> </h1>
<div className="flex flex-col gap-2 p-2"> <div className="flex flex-col gap-2 p-2">
<div className="grid grid-cols-3 border-dracula-bg-light border-b-2 pb-2"> <div className="grid grid-cols-3 border-b-2 pb-2">
<span className="border-dracula-bg-light border-r-[1px] text-left"> <span className="border-r text-left">
joemonk.co.uk joemonk.co.uk
</span> </span>
<span className="border-dracula-bg-light border-x-[1px] text-center"> <span className="border-x text-center">
07757 017587 07757 017587
</span> </span>
<span className="border-dracula-bg-light border-l-[1px] text-right"> <span className="border-l text-right">
joemonk@hotmail.co.uk joemonk@hotmail.co.uk
</span> </span>
</div> </div>
@@ -171,8 +172,8 @@ export default function Cv(): React.JSX.Element {
while moving between roles. while moving between roles.
</p> </p>
</div> </div>
<div className="flex flex-row gap-2 bg-dracula-bg-light px-2 py-1 text-white"> <div className="flex flex-row gap-2 px-2 py-1">
<PaperAirplaneIcon className="my-[2px] h-5" /> <PaperAirplaneIcon className="my-0.5 h-5" />
<h2 className="font-medium">Experience</h2> <h2 className="font-medium">Experience</h2>
</div> </div>
<div className="flex flex-col gap-4 py-2"> <div className="flex flex-col gap-4 py-2">

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

@@ -71,7 +71,7 @@ export default function NavBarClient({
<Link <Link
key={item.name} key={item.name}
href={item.href} 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" : "" item.current ? "border-b-accent/75" : ""
}`} }`}
aria-current={item.current ? "page" : undefined} 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 { export default function ThemeSwitcher(): React.JSX.Element {
const toggleTheme = (): void => { const toggleTheme = (): void => {
const currentTheme = document.documentElement.getAttribute("data-theme"); const currentTheme = document.documentElement.getAttribute("data-theme");
if (currentTheme === "dracula-pastel") { if (currentTheme === "nord") {
localStorage.theme = "dracula-soft"; localStorage.theme = "dracula-soft";
document.documentElement.setAttribute("data-theme", "dracula-soft"); document.documentElement.setAttribute("data-theme", "dracula-soft");
} else { } else {
localStorage.theme = "dracula-pastel"; localStorage.theme = "nord";
document.documentElement.setAttribute("data-theme", "dracula-pastel"); document.documentElement.setAttribute("data-theme", "nord");
} }
}; };

8
src/env.js
View File

@@ -17,8 +17,8 @@ export const env = createEnv({
NODE_ENV: z NODE_ENV: z
.enum(["development", "test", "production"]) .enum(["development", "test", "production"])
.default("development"), .default("development"),
AWS_ACCESS_KEY_ID: z.string(), S3_ACCESS_KEY_ID: z.string(),
AWS_SECRET_ACCESS_KEY: z.string(), S3_SECRET_ACCESS_KEY: z.string(),
PORT: z.number({ coerce: true }).int().default(3000), PORT: z.number({ coerce: true }).int().default(3000),
}, },
@@ -41,8 +41,8 @@ export const env = createEnv({
AUTH_CLIENT_SECRET: process.env.AUTH_CLIENT_SECRET, AUTH_CLIENT_SECRET: process.env.AUTH_CLIENT_SECRET,
DATABASE_URL: process.env.DATABASE_URL, DATABASE_URL: process.env.DATABASE_URL,
NODE_ENV: process.env.NODE_ENV, NODE_ENV: process.env.NODE_ENV,
AWS_ACCESS_KEY_ID: process.env.AWS_ACCESS_KEY_ID, S3_ACCESS_KEY_ID: process.env.S3_ACCESS_KEY_ID,
AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY, S3_SECRET_ACCESS_KEY: process.env.S3_SECRET_ACCESS_KEY,
PORT: process.env.PORT, PORT: process.env.PORT,
}, },
/** /**

44
src/styles/globals.css
View File

@@ -2,47 +2,9 @@
@plugin "@tailwindcss/typography"; @plugin "@tailwindcss/typography";
@plugin "daisyui"; @plugin "daisyui" {
themes: nord --default;
@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/theme" { @plugin "daisyui/theme" {
/* Nicked from the vscode soft theme https://github.com/dracula/visual-studio-code/blob/master/src/dracula.yml */ /* Nicked from the vscode soft theme https://github.com/dracula/visual-studio-code/blob/master/src/dracula.yml */