Add new blog posts and update existing content

- Created "My 2023 Coding Edition" post detailing projects and experiences in Rust and game development. - Added "My 2024 and 2025 roadmap" outlining goals and projects for the upcoming years. - Introduced "Python Tutorial - Introduction" and "Python - Variables" posts to teach Python programming basics. - Published "ROADMAP for 2023" to outline initial goals for the year. - Added "My Rust little adventure" post summarizing various Rust projects undertaken. - Released "Spanish Inquisition - 3.0.1 UPDATE" detailing the latest game update and features. - Added multiple background images in AVIF format for website use. - Removed unused SVG files to clean up the public directory.
2025-09-03 23:27:41 +02:00
parent 2e6afd0556
commit 8a921b0423
37 changed files with 1347 additions and 121 deletions
--- a/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/frutiger-bold.woff
+++ b/app/frutiger-bold.woff
--- a/app/frutiger.woff
+++ b/app/frutiger.woff
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,10 +1,25 @@
@import "tailwindcss";
+@plugin "@tailwindcss/typography";

 :root {
  --background: #ffffff;
  --foreground: #171717;
 }

+@theme {
+  --color-aero-blue: #7cb9e8;
+  --color-aero-green: #8ff0a4;
+  --color-sky-blue: #87ceeb;
+  --color-grass-green: #7cfc00;
+  --color-water: #00bfff;
+  --color-window-title: #0058e1;
+
+  --background-start: var(--color-sky-blue);
+  --background-end: var(--color-lime-300);
+
+  --font-display: var(--font-frutiger), "Arial", "Helvetica", "sans-serif";
+}
+
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
@@ -20,7 +35,27 @@
 }

 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background-color: #3cb1e7;
+  background-image: 
+      /* A subtle white radial gradient for a "lens flare" or glossy spot effect */ radial-gradient(
+      circle at 10% 20%,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(255, 255, 255, 0) 25%
+    ),
+    /* The main blue sky gradient */
+      linear-gradient(to bottom, #54c5f9 0%, #87e0fd 70%),
+    /* The green hill at the bottom */
+      radial-gradient(circle at 50% 100%, #9cff9c 0%, #3cdc5c 40%, #24a844 80%);
+  background-attachment: fixed;
+  min-height: 100vh;
+  color: #333;
+}
+
+::selection {
+  background-color: #0058e1;
+  color: white;
+}
+
+.window-shadow {
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,20 +1,28 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+import localFont from "next/font/local";
+import SwitchingBackground from "@/components/switching-background";
+import CursorEffect from "@/components/cursor-effect";
+const frutiger = localFont({
+  src: [
+    {
+      path: "./frutiger.woff",
+      weight: "normal",
+      style: "normal",
+    },
+    {
+      path: "./frutiger-bold.woff",
+      weight: "bold",
+      style: "normal",
+    },
+  ],
+  variable: "--font-frutiger",
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Gabriel Kaszewski's Blog",
+  description: "A personal blog by Gabriel Kaszewski",
 };

 export default function RootLayout({
@@ -24,10 +32,10 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+      <body className={`${frutiger.className} antialiased`}>
+        <SwitchingBackground />
+        <CursorEffect />
+        <main className="container mx-auto px-4 py-8 md:py-12">{children}</main>
      </body>
    </html>
  );
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,103 +1,51 @@
-import Image from "next/image";
+import { getSortedPostsData, PostMeta } from "../lib/posts";
+import Link from "next/link";
+import Window from "../components/window";

 export default function Home() {
-  return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
+  const allPostsData: PostMeta[] = getSortedPostsData();

-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+  return (
+    <div className="space-y-12">
+      <header className="text-center">
+        <h1 className="text-5xl font-bold text-white [text-shadow:_2px_2px_4px_rgb(0_0_0_/_40%)]">
+          Gabriel's Kaszewski Blog
+        </h1>
+        <p className="mt-2 text-lg text-white/90 [text-shadow:_1px_1px_2px_rgb(0_0_0_/_30%)]">
+          A little corner of the internet from the 2000s.
+        </p>
+      </header>
+
+      <section>
+        {/* The list of posts is displayed inside our custom Window component */}
+        <Window title="Blog Posts">
+          {allPostsData.length > 0 ? (
+            <ul className="space-y-4">
+              {allPostsData.map(({ id, date, title }) => (
+                <li key={id}>
+                  <Link
+                    href={`/posts/${id}`}
+                    className="block rounded-md bg-white/50 p-4 transition-all duration-200 hover:bg-white/80 hover:shadow-md"
+                  >
+                    <h3 className="font-bold text-lg text-blue-800">{title}</h3>
+                    <small className="text-gray-600">
+                      {new Date(date).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })}
+                    </small>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="text-gray-600">
+              No posts found. Add some markdown files to the 'posts' directory!
+            </p>
+          )}
+        </Window>
+      </section>
    </div>
  );
 }
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -0,0 +1,62 @@
+import Link from "next/link";
+import { getPostData, getAllPostIds } from "@/lib/posts";
+import type { PostData } from "@/lib/posts";
+import Window from "../../../components/window";
+import { MDXRemote } from "next-mdx-remote/rsc";
+
+interface PageProps {
+  params: {
+    slug: string;
+  };
+}
+
+// This function tells Next.js which blog posts exist at build time
+export async function generateStaticParams() {
+  const paths = getAllPostIds();
+  return paths.map((path) => ({ slug: path.params.slug }));
+}
+
+// Generates metadata (like the title tag) for each blog post page
+export async function generateMetadata({ params }: PageProps) {
+  const postData = await getPostData(params.slug);
+  return {
+    title: `${postData.title} | Gabriel's Kaszewski Blog`,
+  };
+}
+
+export default async function Post({ params }: PageProps) {
+  // Fetch the specific post's content based on the URL slug
+  const postData: PostData = await getPostData(params.slug);
+
+  return (
+    <div className="mx-auto max-w-4xl">
+      <Window title={postData.title}>
+        <article>
+          <div className="mb-4 text-gray-500 flex flex-col gap-1">
+            <span>
+              {new Date(postData.date).toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}
+            </span>
+            <span className="text-sm text-gray-400">
+              {postData.readingTime}
+            </span>
+          </div>
+          <div className="prose lg:prose-xl max-w-none">
+            <MDXRemote source={postData.content} />
+          </div>
+        </article>
+      </Window>
+      <div className="mt-8 text-center">
+        <Link
+          href="/"
+          className="inline-block rounded-full bg-white/80 px-6 py-2 font-semibold text-blue-700 shadow-md transition-all hover:bg-white"
+        >
+          ← Back to home
+        </Link>
+      </div>
+    </div>
+  );
+}