Add Dockerfile, add raw view

src/components/global/Banner.tsx

@@ -0,0 +1,42 @@
+import { prisma } from "@/lib/prisma";
+import { cn } from "@/lib/utils";
+import { Pacifico } from "next/font/google";
+import Image from "next/image";
+
+const pacifico = Pacifico({ weight: "400", subsets: ["latin"] });
+
+export default async function Banner() {
+  const headerImage = await prisma.artwork.findFirst({
+    where: { setAsHeader: true },
+    // include: {
+    //   variants: {
+    //     where: { type: "modified" },
+    //     take: 1,
+    //   },
+    // },
+  })
+
+  const alt = headerImage?.altText ?? "Header Image"
+  const title = "Gaertan Art"
+
+  return (
+    <div className="w-full">
+      {headerImage && (
+        <div className="relative w-full h-24 md:h-48 lg:h-48">
+          <Image
+            src={`/api/image/${headerImage.variants[0].s3Key}`}
+            alt={alt}
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-black/40 flex items-center justify-center text-center">
+            <h1 className={cn(pacifico.className, "text-shadow text-white text-3xl md:text-5xl font-bold drop-shadow")}>
+              {title}
+            </h1>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/global/Footer.tsx

@@ -0,0 +1,5 @@
+export default function Footer() {
+  return (
+    <div>© 2025 by gaertan.art | All rights reserved</div>
+  );
+}

src/components/global/Header.tsx

@@ -0,0 +1,14 @@
+import ModeToggle from "./ModeToggle";
+import TopNav from "./TopNav";
+
+export default function Header() {
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-between px-4 md:px-8 py-2">
+        <TopNav />
+        <ModeToggle />
+      </div>
+    </div>
+  );
+}

src/components/global/ModeToggle.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export default function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/components/global/ThemeProvider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import * as React from "react"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

src/components/global/TopNav.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
+import { Menu } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { Button } from "../ui/button";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
+
+const links = [
+  { href: "/", label: "Home" },
+  { href: "/artworks", label: "Portfolio" },
+  { href: "/artworks/animalstudies", label: "Animal Studies" },
+  // { href: "/portfolio/artfight", label: "Artfight" },
+  // { href: "/portfolio/minis", label: "Miniatures" },
+  // { href: "/commissions", label: "Commissions" },
+  // { href: "/ych", label: "YCH / Custom offers" },
+  // { href: "/tos", label: "Terms of Service" },
+  // { href: "/todo", label: "todo (temp)" },
+]
+
+export default function TopNav() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="w-full flex items-center justify-between">
+      {/* Desktop Nav */}
+      <div className="hidden md:flex">
+        <NavigationMenu>
+          <NavigationMenuList>
+            {links.map(({ href, label }) => (
+              <NavigationMenuItem key={href}>
+                <NavigationMenuLink
+                  asChild
+                  className={navigationMenuTriggerStyle()}
+                >
+                  <Link href={href}>{label}</Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            ))}
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+
+      {/* Mobile Nav */}
+      <div className="md:hidden">
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger asChild>
+            <Button variant="outline" size="icon">
+              <Menu className="w-6 h-6" />
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left">
+            <SheetHeader>
+              <SheetTitle className="text-lg">Navigation</SheetTitle>
+            </SheetHeader>
+            <nav className="mt-4 flex flex-col gap-2">
+              {links.map(({ href, label }) => (
+                <Link
+                  key={href}
+                  href={href}
+                  onClick={() => setOpen(false)}
+                  className="block px-4 py-2 rounded-md hover:bg-muted text-sm font-medium transition-colors"
+                >
+                  {label}
+                </Link>
+              ))}
+            </nav>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </div>
+  );
+}