Initial portfolio CMS: Fastify API + Vite SPA

Single-container app with Postgres catalog, Typesense search,
Authelia Remote-User admin, portfolio views, resume/PDF, media
uploads, and ArtStation import tooling.

.env.example

@@ -0,0 +1,39 @@
+# Server
+NODE_ENV=production
+PORT=3000
+HOST=0.0.0.0
+PUBLIC_URL=https://jmartgraphix.com
+
+# Postgres
+DB_HOST=postgres
+DB_PORT=5432
+DB_NAME=jmartgraphix-com
+DB_USER=jmartgraphix-com
+DB_PASS=changeme
+DB_TYPE=postgres
+DATABASE_URL=postgresql://jmartgraphix-com:changeme@postgres:5432/jmartgraphix-com
+
+# Typesense
+TYPESENSE_HOST=typesense
+TYPESENSE_PORT=8108
+TYPESENSE_PROTOCOL=http
+TYPESENSE_API_KEY=typesense_api_key_change_me
+
+# Imgproxy (optional)
+IMGPROXY_HOST=http://imgproxy:8080
+IMGPROXY_KEY=
+IMGPROXY_SALT=
+
+# Auth — Authelia Remote-User trust
+# Comma-separated groups allowed to access admin (empty = any authenticated user)
+ADMIN_GROUPS=lldap_admin,admin,portfolio_admin
+# When true, require Remote-User header for /api/v1/admin/* (disable only for local dev)
+REQUIRE_REMOTE_USER=true
+
+# Uploads
+UPLOAD_DIR=/app/data/uploads
+MAX_UPLOAD_MB=50
+
+# Resume PDF
+SITE_NAME=jmartgraphix
+SITE_TAGLINE=Creative Professional Portfolio

.gitignore

@@ -0,0 +1,15 @@
+node_modules/
+dist/
+build/
+.env
+.env.local
+*.log
+.DS_Store
+coverage/
+.vite/
+uploads/
+server/public/uploads/
+client/dist/
+server/dist/
+*.tsbuildinfo
+.prisma/

Dockerfile

@@ -0,0 +1,71 @@
+# syntax=docker/dockerfile:1
+
+# ── Dependencies ──────────────────────────────────────────────
+FROM node:22-bookworm-slim AS deps
+WORKDIR /app
+COPY package.json package-lock.json* ./
+COPY client/package.json ./client/
+COPY server/package.json ./server/
+RUN npm ci 2>/dev/null || npm install
+
+# ── Build client ──────────────────────────────────────────────
+FROM deps AS client-build
+COPY client ./client
+RUN npm run build -w client
+
+# ── Build server ──────────────────────────────────────────────
+FROM deps AS server-build
+COPY server ./server
+WORKDIR /app/server
+RUN npx prisma generate
+RUN npm run build
+
+# ── Runtime ───────────────────────────────────────────────────
+FROM node:22-bookworm-slim AS runtime
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    chromium \
+    ca-certificates \
+    fonts-liberation \
+    fonts-dejavu-core \
+    && rm -rf /var/lib/apt/lists/*
+
+ENV NODE_ENV=production \
+    PORT=3000 \
+    HOST=0.0.0.0 \
+    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium \
+    PUPPETEER_SKIP_DOWNLOAD=true \
+    CLIENT_DIST=/app/public \
+    PUBLIC_DIR=/app/public \
+    UPLOAD_DIR=/app/data/uploads
+
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+COPY server/package.json ./server/
+COPY client/package.json ./client/
+RUN npm ci --omit=dev 2>/dev/null || npm install --omit=dev
+
+COPY --from=server-build /app/server/dist ./server/dist
+COPY --from=server-build /app/server/prisma ./server/prisma
+COPY --from=server-build /app/node_modules/.prisma ./node_modules/.prisma
+COPY --from=server-build /app/node_modules/@prisma ./node_modules/@prisma
+COPY --from=client-build /app/client/dist ./public
+COPY public/.well-known ./public/.well-known
+
+# ArtStation import tooling (tsx available via optional reinstall of dev deps on demand)
+COPY server/scripts ./server/scripts
+COPY server/src ./server/src
+COPY server/tsconfig.json ./server/tsconfig.json
+COPY server/package.json ./server/package.json
+
+RUN mkdir -p /app/data/uploads/originals /app/data/uploads/thumbs /app/data/uploads/videos \
+    && cd /app/server && npx prisma generate
+
+WORKDIR /app/server
+EXPOSE 3000
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=60s --retries=3 \
+  CMD node -e "fetch('http://127.0.0.1:3000/api/v1/health').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))"
+
+CMD ["node", "dist/index.js"]

README.md

@@ -0,0 +1,87 @@
+# jmartgraphix.com — Portfolio CMS
+
+Single-container portfolio website: **Fastify API** + **Vite/React SPA**, backed by **PostgreSQL** and **Typesense 30.2**. Admin is protected by **Authelia** (`Remote-User` / `Remote-Groups` headers).
+
+## Architecture
+
+```
+Traefik (TLS) → jmartgraphix-com:3000
+                  ├── static SPA (public + /admin)
+                  ├── /api/v1/* (OpenAPI at /api/docs)
+                  ├── /uploads/*
+                  └── /.well-known/* (matrix, webfinger)
+
+Sidecars: Typesense
+Shared:   Postgres (catalog), optional imgproxy
+```
+
+| Path | Auth |
+|------|------|
+| `/`, `/portfolio/*`, `/resume`, `/api/v1/*` (public) | None |
+| `/admin`, `/api/v1/admin/*` | Authelia forwardAuth → `Remote-User` |
+
+## Source of truth
+
+- Gitea: `https://git.jmartgraphix.com/jmartin/jmartgraphix.com.git`
+- Local clone: `/docker/jmartgraphix/hub/`
+- Host workspace `/docker/jmartgraphix` is **not** the git root (uploads, typesense data, prompt live there)
+
+## Deploy loop
+
+```bash
+cd /docker/jmartgraphix/hub
+git add -A && git commit -m "…" && git push origin master
+
+cd /docker/komodo/periphery/stacks/jmartgraphix-com
+docker compose up -d --build
+```
+
+Verify:
+
+```bash
+curl -s https://jmartgraphix.com/api/v1/health
+docker logs jmartgraphix-com --tail 80
+```
+
+Look for: Database migrations applied, Typesense index, Server listening.
+
+## Environment
+
+See `.env.example`. Stack secrets live in  
+`/docker/komodo/periphery/stacks/jmartgraphix-com/.env`.
+
+## ArtStation import
+
+```bash
+docker exec -it jmartgraphix-com \
+  npx tsx scripts/import-artstation.ts --user jmartgraphix
+
+# dry run
+docker exec -it jmartgraphix-com \
+  npx tsx scripts/import-artstation.ts --user jmartgraphix --dry-run
+
+# single artwork
+docker exec -it jmartgraphix-com \
+  npx tsx scripts/import-artstation.ts --url https://www.artstation.com/artwork/XXXX
+```
+
+Imported projects are **drafts** — review and publish in `/admin`.
+
+## Local development
+
+```bash
+cd /docker/jmartgraphix/hub
+cp .env.example .env   # set DATABASE_URL, REQUIRE_REMOTE_USER=false
+npm install
+npm run db:migrate -w server
+npm run dev
+```
+
+## Features
+
+- Multi-category projects with media gallery, YouTube/Vimeo/self-hosted video
+- Portfolio views (`/portfolio/game-dev`, `/portfolio/engineering`, …)
+- Typesense search, filters, featured, sort by priority/date/title
+- Editable resume + PDF download
+- OpenAPI docs at `/api/docs`
+- Sitemap `/sitemap.xml`, RSS `/rss.xml`

client/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0a0a0b" />
+    <meta name="description" content="jmartgraphix — Creative professional portfolio: 3D, CAD, animation, design." />
+    <meta property="og:site_name" content="jmartgraphix" />
+    <meta property="og:type" content="website" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
+    <title>jmartgraphix</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

client/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.4.0",
+    "yet-another-react-lightbox": "^3.21.7"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "sass": "^1.86.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.2"
+  }
+}

client/src/App.tsx

@@ -0,0 +1,40 @@
+import { Routes, Route } from "react-router-dom";
+import { Layout } from "./components/Layout";
+import { HomePage } from "./pages/HomePage";
+import { PortfolioPage } from "./pages/PortfolioPage";
+import { ProjectPage } from "./pages/ProjectPage";
+import { ResumePage } from "./pages/ResumePage";
+import { AboutPage } from "./pages/AboutPage";
+import { AdminLayout } from "./pages/admin/AdminLayout";
+import { AdminDashboard } from "./pages/admin/AdminDashboard";
+import { AdminProjects } from "./pages/admin/AdminProjects";
+import { AdminProjectEdit } from "./pages/admin/AdminProjectEdit";
+import { AdminCategories } from "./pages/admin/AdminCategories";
+import { AdminViews } from "./pages/admin/AdminViews";
+import { AdminResume } from "./pages/admin/AdminResume";
+import { AdminSettings } from "./pages/admin/AdminSettings";
+
+export default function App() {
+  return (
+    <Routes>
+      <Route element={<Layout />}>
+        <Route index element={<HomePage />} />
+        <Route path="portfolio" element={<PortfolioPage />} />
+        <Route path="portfolio/:viewSlug" element={<PortfolioPage />} />
+        <Route path="project/:slug" element={<ProjectPage />} />
+        <Route path="resume" element={<ResumePage />} />
+        <Route path="about" element={<AboutPage />} />
+      </Route>
+      <Route path="admin" element={<AdminLayout />}>
+        <Route index element={<AdminDashboard />} />
+        <Route path="projects" element={<AdminProjects />} />
+        <Route path="projects/new" element={<AdminProjectEdit />} />
+        <Route path="projects/:id" element={<AdminProjectEdit />} />
+        <Route path="categories" element={<AdminCategories />} />
+        <Route path="views" element={<AdminViews />} />
+        <Route path="resume" element={<AdminResume />} />
+        <Route path="settings" element={<AdminSettings />} />
+      </Route>
+    </Routes>
+  );
+}

client/src/components/Layout.scss

@@ -0,0 +1,152 @@
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  height: var(--header-h);
+  border-bottom: 1px solid var(--border);
+  background: rgba(10, 10, 11, 0.82);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+
+  &__inner {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  &__logo {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    font-size: 1.05rem;
+  }
+
+  &__mark {
+    color: var(--accent);
+    font-size: 0.85rem;
+  }
+
+  &__nav {
+    display: flex;
+    align-items: center;
+    gap: 1.75rem;
+
+    a {
+      font-size: 0.9rem;
+      color: var(--text-muted);
+      transition: color 0.15s;
+
+      &:hover,
+      &.active {
+        color: var(--text);
+      }
+
+      &.active {
+        color: var(--accent);
+      }
+    }
+  }
+
+  &__ext {
+    opacity: 0.85;
+  }
+
+  &__burger {
+    display: none;
+    width: 40px;
+    height: 40px;
+    place-items: center;
+    flex-direction: column;
+    gap: 6px;
+
+    span {
+      display: block;
+      width: 20px;
+      height: 1.5px;
+      background: var(--text);
+    }
+  }
+}
+
+@media (max-width: 720px) {
+  .site-header {
+    &__burger {
+      display: flex;
+    }
+
+    &__nav {
+      position: absolute;
+      top: var(--header-h);
+      left: 0;
+      right: 0;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0;
+      padding: 0.5rem 0 1rem;
+      background: var(--bg-elevated);
+      border-bottom: 1px solid var(--border);
+      display: none;
+
+      &.is-open {
+        display: flex;
+      }
+
+      a {
+        padding: 0.85rem 1.25rem;
+      }
+    }
+  }
+}
+
+.site-main {
+  flex: 1;
+}
+
+.site-footer {
+  margin-top: 5rem;
+  border-top: 1px solid var(--border);
+  padding: 3rem 0 2.5rem;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+
+  &__inner {
+    display: grid;
+    gap: 1.5rem;
+
+    strong {
+      color: var(--text);
+      display: block;
+      margin-bottom: 0.35rem;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  &__links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.25rem;
+
+    a:hover {
+      color: var(--accent);
+    }
+  }
+
+  &__copy {
+    font-size: 0.8rem;
+    color: var(--text-dim);
+  }
+}
+
+@media (min-width: 768px) {
+  .site-footer__inner {
+    grid-template-columns: 1.5fr 1fr auto;
+    align-items: end;
+  }
+}

client/src/components/Layout.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from "react";
+import { Link, NavLink, Outlet, useLocation } from "react-router-dom";
+import { api, type SiteSettings } from "../lib/api";
+import "./Layout.scss";
+
+export function Layout() {
+  const [site, setSite] = useState<SiteSettings | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    api.site().then(setSite).catch(() => setSite({ name: "jmartgraphix" }));
+  }, []);
+
+  useEffect(() => {
+    setMenuOpen(false);
+  }, [location.pathname]);
+
+  const name = site?.name || "jmartgraphix";
+
+  return (
+    <>
+      <header className="site-header">
+        <div className="container site-header__inner">
+          <Link to="/" className="site-header__logo" aria-label={`${name} home`}>
+            <span className="site-header__mark">◆</span>
+            <span>{name}</span>
+          </Link>
+          <button
+            className="site-header__burger"
+            aria-label="Toggle menu"
+            aria-expanded={menuOpen}
+            onClick={() => setMenuOpen((v) => !v)}
+          >
+            <span />
+            <span />
+          </button>
+          <nav className={`site-header__nav ${menuOpen ? "is-open" : ""}`} aria-label="Main">
+            <NavLink to="/portfolio">Portfolio</NavLink>
+            <NavLink to="/resume">Resume</NavLink>
+            <NavLink to="/about">About</NavLink>
+            <a
+              href="https://jmartgraphix.artstation.com/"
+              target="_blank"
+              rel="noreferrer"
+              className="site-header__ext"
+            >
+              ArtStation
+            </a>
+          </nav>
+        </div>
+      </header>
+      <main className="site-main">
+        <Outlet context={{ site }} />
+      </main>
+      <footer className="site-footer">
+        <div className="container site-footer__inner">
+          <div>
+            <strong>{name}</strong>
+            <p>{site?.tagline || "Creative professional portfolio"}</p>
+          </div>
+          <div className="site-footer__links">
+            {site?.social?.youtube && (
+              <a href={site.social.youtube} target="_blank" rel="noreferrer">
+                YouTube
+              </a>
+            )}
+            {site?.social?.vimeo && (
+              <a href={site.social.vimeo} target="_blank" rel="noreferrer">
+                Vimeo
+              </a>
+            )}
+            {site?.social?.artstation && (
+              <a href={site.social.artstation} target="_blank" rel="noreferrer">
+                ArtStation
+              </a>
+            )}
+            <Link to="/resume">Resume</Link>
+          </div>
+          <p className="site-footer__copy">© {new Date().getFullYear()} {name}</p>
+        </div>
+      </footer>
+    </>
+  );
+}

client/src/components/ProjectCard.scss

@@ -0,0 +1,95 @@
+.project-card {
+  animation: fadeUp 0.5s ease both;
+
+  &__link {
+    display: block;
+    height: 100%;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    transition: border-color 0.2s, transform 0.25s, box-shadow 0.25s;
+
+    &:hover {
+      border-color: var(--border-strong);
+      transform: translateY(-3px);
+      box-shadow: var(--shadow);
+
+      .project-card__media img {
+        transform: scale(1.04);
+      }
+    }
+  }
+
+  &__media {
+    position: relative;
+    aspect-ratio: 4 / 3;
+    overflow: hidden;
+    background: #0e0e10;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.55s ease;
+    }
+  }
+
+  &__placeholder {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    font-family: var(--font-serif);
+    font-size: 3rem;
+    color: var(--text-dim);
+    background: linear-gradient(145deg, #141416, #0c0c0e);
+  }
+
+  &__featured {
+    position: absolute;
+    top: 0.75rem;
+    left: 0.75rem;
+  }
+
+  &__body {
+    padding: 1.1rem 1.15rem 1.25rem;
+
+    h3 {
+      margin: 0 0 0.35rem;
+      font-size: 1.05rem;
+    }
+
+    p {
+      margin: 0;
+      font-size: 0.88rem;
+      color: var(--text-muted);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
+
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.45rem;
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--accent);
+  }
+
+  &__year {
+    color: var(--text-dim);
+    margin-left: auto;
+  }
+}
+
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.35rem;
+}

client/src/components/ProjectCard.tsx

@@ -0,0 +1,41 @@
+import { Link } from "react-router-dom";
+import type { Project } from "../lib/api";
+import { thumbOf } from "../lib/api";
+import "./ProjectCard.scss";
+
+export function ProjectCard({ project, index = 0 }: { project: Project; index?: number }) {
+  const thumb = thumbOf(project);
+  const year = project.date ? new Date(project.date).getFullYear() : null;
+
+  return (
+    <article
+      className="project-card"
+      style={{ animationDelay: `${Math.min(index, 12) * 40}ms` }}
+    >
+      <Link to={`/project/${project.slug}`} className="project-card__link">
+        <div className="project-card__media">
+          {thumb ? (
+            <img src={thumb} alt="" loading="lazy" />
+          ) : (
+            <div className="project-card__placeholder" aria-hidden>
+              {project.title.slice(0, 1)}
+            </div>
+          )}
+          {project.featured && <span className="badge project-card__featured">Featured</span>}
+        </div>
+        <div className="project-card__body">
+          <div className="project-card__meta">
+            {project.categories.slice(0, 2).map((c) => (
+              <span key={c.id}>{c.name}</span>
+            ))}
+            {year && <span className="project-card__year">{year}</span>}
+          </div>
+          <h3>{project.title}</h3>
+          {project.shortDescription && (
+            <p>{project.shortDescription}</p>
+          )}
+        </div>
+      </Link>
+    </article>
+  );
+}

client/src/lib/api.ts

@@ -0,0 +1,247 @@
+export type Visibility = "published" | "draft" | "private";
+
+export interface Category {
+  id: string;
+  name: string;
+  slug: string;
+  description?: string | null;
+  sortOrder?: number;
+  projectCount?: number;
+}
+
+export interface Tag {
+  id: string;
+  name: string;
+  slug: string;
+  projectCount?: number;
+}
+
+export interface Media {
+  id: string;
+  projectId?: string | null;
+  type: "image" | "video" | "external";
+  url: string;
+  thumbnailUrl?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  width?: number | null;
+  height?: number | null;
+  alt?: string | null;
+  caption?: string | null;
+  sortOrder: number;
+  videoSource?: "youtube" | "vimeo" | "self_hosted" | "external" | null;
+  videoId?: string | null;
+  externalUrl?: string | null;
+}
+
+export interface ExternalLink {
+  label: string;
+  url: string;
+}
+
+export interface Project {
+  id: string;
+  title: string;
+  slug: string;
+  description: string;
+  shortDescription?: string | null;
+  date?: string | null;
+  software: string[];
+  externalLinks: ExternalLink[];
+  featured: boolean;
+  displayPriority: number;
+  visibility: Visibility;
+  thumbnailId?: string | null;
+  thumbnail?: Media | null;
+  media?: Media[];
+  categories: Category[];
+  tags: Tag[];
+  sourceUrl?: string | null;
+  sourcePlatform?: string | null;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface PortfolioView {
+  id: string;
+  name: string;
+  slug: string;
+  description?: string | null;
+  defaultSort?: string;
+  showOthers?: boolean;
+  isActive?: boolean;
+  categoryPriorities?: {
+    priority: number;
+    category: Category;
+    categoryId?: string;
+  }[];
+}
+
+export interface Resume {
+  id: string;
+  fullName: string;
+  title: string;
+  email?: string | null;
+  phone?: string | null;
+  location?: string | null;
+  website?: string | null;
+  summary: string;
+  sections: unknown[];
+  htmlContent?: string | null;
+  theme?: string;
+}
+
+export interface SiteSettings {
+  name?: string;
+  tagline?: string;
+  about?: string;
+  social?: Record<string, string>;
+  heroTitle?: string;
+  heroSubtitle?: string;
+}
+
+export interface ListMeta {
+  page: number;
+  perPage: number;
+  total: number;
+  totalPages: number;
+  view?: {
+    slug: string;
+    name: string;
+    description?: string | null;
+    categories?: Category[];
+  };
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(path, {
+    ...init,
+    headers: {
+      ...(init?.body instanceof FormData ? {} : { "Content-Type": "application/json" }),
+      ...init?.headers,
+    },
+  });
+  if (!res.ok) {
+    let msg = res.statusText;
+    try {
+      const j = await res.json();
+      msg = j.message || j.error || msg;
+    } catch {
+      /* */
+    }
+    throw new Error(msg || `HTTP ${res.status}`);
+  }
+  if (res.status === 204) return undefined as T;
+  return res.json() as Promise<T>;
+}
+
+export const api = {
+  site: () => request<SiteSettings>("/api/v1/site"),
+  categories: () => request<Category[]>("/api/v1/categories"),
+  tags: () => request<Tag[]>("/api/v1/tags"),
+  projects: (params: Record<string, string | number | undefined> = {}) => {
+    const q = new URLSearchParams();
+    Object.entries(params).forEach(([k, v]) => {
+      if (v !== undefined && v !== "") q.set(k, String(v));
+    });
+    return request<{ data: Project[]; meta: ListMeta }>(`/api/v1/projects?${q}`);
+  },
+  project: (slug: string) => request<Project>(`/api/v1/projects/${slug}`),
+  featured: () => request<Project[]>("/api/v1/featured"),
+  views: () => request<PortfolioView[]>("/api/v1/views"),
+  view: (slug: string) => request<PortfolioView>(`/api/v1/views/${slug}`),
+  resume: () => request<Resume>("/api/v1/resume"),
+  health: () => request<{ status: string }>("/api/v1/health"),
+
+  // Admin
+  me: () => request<{ username: string; name?: string; groups: string[] }>("/api/v1/admin/me"),
+  adminProjects: (params: Record<string, string | number | undefined> = {}) => {
+    const q = new URLSearchParams();
+    Object.entries(params).forEach(([k, v]) => {
+      if (v !== undefined && v !== "") q.set(k, String(v));
+    });
+    return request<{ data: Project[]; meta: ListMeta }>(`/api/v1/admin/projects?${q}`);
+  },
+  adminProject: (id: string) => request<Project>(`/api/v1/admin/projects/${id}`),
+  createProject: (body: unknown) =>
+    request<Project>("/api/v1/admin/projects", { method: "POST", body: JSON.stringify(body) }),
+  updateProject: (id: string, body: unknown) =>
+    request<Project>(`/api/v1/admin/projects/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(body),
+    }),
+  deleteProject: (id: string) =>
+    request<{ ok: boolean }>(`/api/v1/admin/projects/${id}`, { method: "DELETE" }),
+  reorderProjects: (ids: string[]) =>
+    request<{ ok: boolean }>("/api/v1/admin/projects/reorder", {
+      method: "POST",
+      body: JSON.stringify({ ids }),
+    }),
+  uploadMedia: (file: File, projectId?: string) => {
+    const fd = new FormData();
+    fd.append("file", file);
+    if (projectId) fd.append("projectId", projectId);
+    return request<Media>("/api/v1/admin/media/upload", { method: "POST", body: fd });
+  },
+  addVideoLink: (url: string, projectId?: string) =>
+    request<Media>("/api/v1/admin/media/video-link", {
+      method: "POST",
+      body: JSON.stringify({ url, projectId }),
+    }),
+  deleteMedia: (id: string) =>
+    request<{ ok: boolean }>(`/api/v1/admin/media/${id}`, { method: "DELETE" }),
+  setThumbnail: (projectId: string, mediaId: string) =>
+    request<Project>(`/api/v1/admin/projects/${projectId}/thumbnail`, {
+      method: "POST",
+      body: JSON.stringify({ mediaId }),
+    }),
+  adminCategories: () => request<Category[]>("/api/v1/admin/categories"),
+  createCategory: (body: unknown) =>
+    request<Category>("/api/v1/admin/categories", { method: "POST", body: JSON.stringify(body) }),
+  updateCategory: (id: string, body: unknown) =>
+    request<Category>(`/api/v1/admin/categories/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(body),
+    }),
+  deleteCategory: (id: string) =>
+    request<{ ok: boolean }>(`/api/v1/admin/categories/${id}`, { method: "DELETE" }),
+  adminTags: () => request<Tag[]>("/api/v1/admin/tags"),
+  deleteTag: (id: string) =>
+    request<{ ok: boolean }>(`/api/v1/admin/tags/${id}`, { method: "DELETE" }),
+  adminViews: () => request<PortfolioView[]>("/api/v1/admin/views"),
+  createView: (body: unknown) =>
+    request<PortfolioView>("/api/v1/admin/views", { method: "POST", body: JSON.stringify(body) }),
+  updateView: (id: string, body: unknown) =>
+    request<PortfolioView>(`/api/v1/admin/views/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(body),
+    }),
+  deleteView: (id: string) =>
+    request<{ ok: boolean }>(`/api/v1/admin/views/${id}`, { method: "DELETE" }),
+  adminResume: () => request<Resume | null>("/api/v1/admin/resume"),
+  saveResume: (body: unknown) =>
+    request<Resume>("/api/v1/admin/resume", { method: "PUT", body: JSON.stringify(body) }),
+  adminSettings: () => request<Record<string, unknown>>("/api/v1/admin/settings"),
+  saveSiteSettings: (body: unknown) =>
+    request<unknown>("/api/v1/admin/settings/site", {
+      method: "PUT",
+      body: JSON.stringify(body),
+    }),
+  reindex: () =>
+    request<{ ok: boolean; indexed: number }>("/api/v1/admin/reindex", { method: "POST" }),
+};
+
+export function mediaSrc(url?: string | null): string {
+  if (!url) return "";
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  return url;
+}
+
+export function thumbOf(p: Project): string {
+  return (
+    mediaSrc(p.thumbnail?.thumbnailUrl || p.thumbnail?.url) ||
+    mediaSrc(p.media?.find((m) => m.type === "image")?.thumbnailUrl) ||
+    mediaSrc(p.media?.find((m) => m.type === "image")?.url) ||
+    ""
+  );
+}

client/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import "./styles/global.scss";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);

client/src/pages/AboutPage.scss

@@ -0,0 +1,60 @@
+.about {
+  padding: 3.5rem 0 4rem;
+  max-width: 820px;
+
+  h1 {
+    margin: 0 0 1rem;
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: clamp(2.2rem, 5vw, 3.2rem);
+  }
+
+  &__eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    font-size: 0.72rem;
+    color: var(--accent);
+    margin: 0 0 0.75rem;
+  }
+
+  &__lead {
+    font-size: 1.15rem;
+    color: var(--text-muted);
+    margin: 0 0 2.5rem;
+    max-width: 36rem;
+  }
+
+  &__grid {
+    display: grid;
+    gap: 2rem;
+
+    @media (min-width: 640px) {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    h2 {
+      margin: 0 0 0.85rem;
+      font-size: 0.78rem;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      color: var(--text-dim);
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      color: var(--text-muted);
+
+      li {
+        padding: 0.4rem 0;
+        border-bottom: 1px solid var(--border);
+      }
+    }
+  }
+
+  &__links a:hover {
+    color: var(--accent);
+  }
+}

client/src/pages/AboutPage.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { api, type SiteSettings } from "../lib/api";
+import "./AboutPage.scss";
+
+export function AboutPage() {
+  const [site, setSite] = useState<SiteSettings | null>(null);
+
+  useEffect(() => {
+    api.site().then(setSite).catch(() => {});
+  }, []);
+
+  return (
+    <div className="about page-enter container">
+      <p className="about__eyebrow">About</p>
+      <h1>{site?.name || "jmartgraphix"}</h1>
+      <p className="about__lead">
+        {site?.about ||
+          "Creative professional specializing in 3D art, technical design, animation, and visual media."}
+      </p>
+      <div className="about__grid">
+        <div>
+          <h2>Disciplines</h2>
+          <ul>
+            <li>3D Modeling & Sculpting</li>
+            <li>CAD & Product Visualization</li>
+            <li>Animation & Motion</li>
+            <li>Graphic Design & Illustration</li>
+            <li>Photography & Video</li>
+            <li>AI-assisted creative pipelines</li>
+          </ul>
+        </div>
+        <div>
+          <h2>Connect</h2>
+          <ul className="about__links">
+            {site?.social?.artstation && (
+              <li>
+                <a href={site.social.artstation} target="_blank" rel="noreferrer">
+                  ArtStation
+                </a>
+              </li>
+            )}
+            {site?.social?.youtube && (
+              <li>
+                <a href={site.social.youtube} target="_blank" rel="noreferrer">
+                  YouTube
+                </a>
+              </li>
+            )}
+            {site?.social?.vimeo && (
+              <li>
+                <a href={site.social.vimeo} target="_blank" rel="noreferrer">
+                  Vimeo
+                </a>
+              </li>
+            )}
+            <li>
+              <Link to="/resume">Resume</Link>
+            </li>
+            <li>
+              <Link to="/portfolio">Portfolio</Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/pages/HomePage.scss

@@ -0,0 +1,131 @@
+.home-hero {
+  padding: 5rem 0 3.5rem;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: -20% 20% auto -10%;
+    height: 70%;
+    background: radial-gradient(ellipse, rgba(201, 168, 124, 0.12), transparent 65%);
+    pointer-events: none;
+  }
+
+  h1 {
+    margin: 0 0 0.75rem;
+    font-size: clamp(2.8rem, 8vw, 5.2rem);
+    font-weight: 400;
+  }
+
+  &__serif {
+    font-family: var(--font-serif);
+    font-style: italic;
+    letter-spacing: -0.03em;
+  }
+
+  &__eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    font-size: 0.75rem;
+    color: var(--accent);
+    margin: 0 0 1rem;
+    font-weight: 500;
+  }
+
+  &__sub {
+    font-size: 1.15rem;
+    color: var(--text-muted);
+    margin: 0 0 1rem;
+    max-width: 32rem;
+  }
+
+  &__about {
+    max-width: 36rem;
+    color: var(--text-dim);
+    margin: 0 0 2rem;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+}
+
+.home-cats {
+  margin-bottom: 3rem;
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.55rem;
+  }
+
+  &__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.45rem 0.9rem;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    background: var(--bg-elevated);
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    transition: border-color 0.15s, color 0.15s, background 0.15s;
+
+    span {
+      font-size: 0.75rem;
+      color: var(--text-dim);
+    }
+
+    &:hover {
+      border-color: var(--accent);
+      color: var(--text);
+    }
+
+    &--view {
+      border-color: rgba(201, 168, 124, 0.35);
+      color: var(--accent);
+    }
+  }
+}
+
+.home-section {
+  margin-bottom: 4rem;
+
+  &__head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    gap: 1rem;
+
+    h2 {
+      margin: 0;
+      font-size: 1.5rem;
+      font-family: var(--font-serif);
+      font-style: italic;
+      font-weight: 400;
+    }
+
+    a {
+      color: var(--text-muted);
+      font-size: 0.9rem;
+      &:hover {
+        color: var(--accent);
+      }
+    }
+  }
+}
+
+.home-empty {
+  color: var(--text-muted);
+  padding: 2rem;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius);
+
+  a {
+    color: var(--accent);
+  }
+}

client/src/pages/HomePage.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { api, type Project, type SiteSettings, type Category } from "../lib/api";
+import { ProjectCard } from "../components/ProjectCard";
+import "./HomePage.scss";
+
+export function HomePage() {
+  const [site, setSite] = useState<SiteSettings | null>(null);
+  const [featured, setFeatured] = useState<Project[]>([]);
+  const [recent, setRecent] = useState<Project[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+
+  useEffect(() => {
+    Promise.all([
+      api.site(),
+      api.featured().catch(() => [] as Project[]),
+      api.projects({ sort: "date", perPage: 6 }),
+      api.categories(),
+    ]).then(([s, f, r, c]) => {
+      setSite(s);
+      setFeatured(f);
+      setRecent(r.data);
+      setCategories(c);
+    });
+  }, []);
+
+  const heroTitle = site?.heroTitle || site?.name || "jmartgraphix";
+  const heroSub = site?.heroSubtitle || "3D · Design · Motion · Craft";
+
+  return (
+    <div className="home page-enter">
+      <section className="home-hero">
+        <div className="container">
+          <p className="home-hero__eyebrow">Portfolio</p>
+          <h1>
+            <span className="home-hero__serif">{heroTitle}</span>
+          </h1>
+          <p className="home-hero__sub">{heroSub}</p>
+          <p className="home-hero__about">
+            {site?.about ||
+              "A curated collection of 3D modeling, CAD, animation, and visual design."}
+          </p>
+          <div className="home-hero__actions">
+            <Link to="/portfolio" className="btn btn--primary">
+              View portfolio
+            </Link>
+            <Link to="/resume" className="btn btn--ghost">
+              Resume
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      <section className="home-cats container">
+        <div className="home-cats__list">
+          {categories.map((c) => (
+            <Link key={c.id} to={`/portfolio/${c.slug}`} className="home-cats__chip">
+              {c.name}
+              {typeof c.projectCount === "number" && (
+                <span>{c.projectCount}</span>
+              )}
+            </Link>
+          ))}
+          <Link to="/portfolio/game-dev" className="home-cats__chip home-cats__chip--view">
+            Game Dev view
+          </Link>
+          <Link to="/portfolio/engineering" className="home-cats__chip home-cats__chip--view">
+            Engineering view
+          </Link>
+        </div>
+      </section>
+
+      {featured.length > 0 && (
+        <section className="container home-section">
+          <div className="home-section__head">
+            <h2>Featured</h2>
+            <Link to="/portfolio">All work →</Link>
+          </div>
+          <div className="project-grid">
+            {featured.map((p, i) => (
+              <ProjectCard key={p.id} project={p} index={i} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      <section className="container home-section">
+        <div className="home-section__head">
+          <h2>Recent</h2>
+        </div>
+        {recent.length === 0 ? (
+          <p className="home-empty">
+            Projects will appear here once published. Use the{" "}
+            <Link to="/admin">admin panel</Link> to add work, or import from ArtStation.
+          </p>
+        ) : (
+          <div className="project-grid">
+            {recent.map((p, i) => (
+              <ProjectCard key={p.id} project={p} index={i} />
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

client/src/pages/PortfolioPage.scss

@@ -0,0 +1,109 @@
+.portfolio {
+  padding: 3rem 0 4rem;
+
+  &__header {
+    margin-bottom: 2rem;
+
+    h1 {
+      margin: 0 0 0.5rem;
+      font-family: var(--font-serif);
+      font-style: italic;
+      font-weight: 400;
+      font-size: clamp(2rem, 5vw, 3rem);
+    }
+  }
+
+  &__eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    font-size: 0.72rem;
+    color: var(--accent);
+    margin: 0 0 0.5rem;
+  }
+
+  &__desc {
+    color: var(--text-muted);
+    max-width: 40rem;
+    margin: 0;
+  }
+
+  &__view-note {
+    margin-top: 0.75rem;
+    font-size: 0.85rem;
+    color: var(--text-dim);
+
+    code {
+      color: var(--accent);
+      font-size: 0.85em;
+    }
+
+    a {
+      color: var(--text-muted);
+      text-decoration: underline;
+    }
+  }
+
+  &__filters {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.65rem;
+    margin-bottom: 1.25rem;
+
+    @media (min-width: 720px) {
+      grid-template-columns: 1.5fr 1fr 0.8fr;
+    }
+
+    input,
+    select {
+      background: var(--bg-elevated);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      padding: 0.7rem 0.9rem;
+      outline: none;
+
+      &:focus {
+        border-color: var(--accent);
+      }
+    }
+  }
+
+  &__quick {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+    margin-bottom: 2rem;
+
+    a {
+      font-size: 0.78rem;
+      padding: 0.35rem 0.75rem;
+      border-radius: 999px;
+      border: 1px solid var(--border);
+      color: var(--text-muted);
+
+      &:hover,
+      &.is-active {
+        border-color: var(--accent);
+        color: var(--accent);
+      }
+    }
+  }
+
+  &__status {
+    color: var(--text-muted);
+    margin: 2rem 0;
+
+    &--err {
+      color: var(--danger);
+    }
+  }
+
+  &__pager {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1.25rem;
+    margin-top: 2.5rem;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+  }
+}

client/src/pages/PortfolioPage.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useState } from "react";
+import { useParams, useSearchParams, Link } from "react-router-dom";
+import { api, type Project, type Category, type ListMeta } from "../lib/api";
+import { ProjectCard } from "../components/ProjectCard";
+import "./PortfolioPage.scss";
+
+export function PortfolioPage() {
+  const { viewSlug } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [meta, setMeta] = useState<ListMeta | null>(null);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const q = searchParams.get("q") || "";
+  const category = searchParams.get("category") || "";
+  const tag = searchParams.get("tag") || "";
+  const sort = searchParams.get("sort") || "priority";
+  const page = parseInt(searchParams.get("page") || "1", 10) || 1;
+
+  useEffect(() => {
+    api.categories().then(setCategories).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    api
+      .projects({
+        q: q || undefined,
+        category: category || undefined,
+        tag: tag || undefined,
+        sort,
+        page,
+        perPage: 24,
+        view: viewSlug || undefined,
+      })
+      .then((res) => {
+        setProjects(res.data);
+        setMeta(res.meta);
+      })
+      .catch((e) => setError(e.message))
+      .finally(() => setLoading(false));
+  }, [q, category, tag, sort, page, viewSlug]);
+
+  function updateParam(key: string, value: string) {
+    const next = new URLSearchParams(searchParams);
+    if (value) next.set(key, value);
+    else next.delete(key);
+    if (key !== "page") next.delete("page");
+    setSearchParams(next);
+  }
+
+  const title = meta?.view?.name || (category ? categories.find((c) => c.slug === category)?.name : null) || "Portfolio";
+  const description =
+    meta?.view?.description ||
+    "Browse projects by category, tag, or search. Share tailored views with clients and collaborators.";
+
+  return (
+    <div className="portfolio page-enter container">
+      <header className="portfolio__header">
+        <div>
+          <p className="portfolio__eyebrow">Work</p>
+          <h1>{title}</h1>
+          <p className="portfolio__desc">{description}</p>
+          {viewSlug && (
+            <p className="portfolio__view-note">
+              Viewing curated list <code>/portfolio/{viewSlug}</code>
+              {" · "}
+              <Link to="/portfolio">clear view</Link>
+            </p>
+          )}
+        </div>
+      </header>
+
+      <div className="portfolio__filters">
+        <input
+          type="search"
+          placeholder="Search projects…"
+          defaultValue={q}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") updateParam("q", (e.target as HTMLInputElement).value);
+          }}
+          onBlur={(e) => updateParam("q", e.target.value)}
+          aria-label="Search projects"
+        />
+        <select
+          value={category}
+          onChange={(e) => updateParam("category", e.target.value)}
+          aria-label="Filter by category"
+          disabled={!!viewSlug}
+        >
+          <option value="">All categories</option>
+          {categories.map((c) => (
+            <option key={c.id} value={c.slug}>
+              {c.name}
+            </option>
+          ))}
+        </select>
+        <select
+          value={sort}
+          onChange={(e) => updateParam("sort", e.target.value)}
+          aria-label="Sort"
+        >
+          <option value="priority">Priority</option>
+          <option value="date">Date</option>
+          <option value="title">Alphabetical</option>
+        </select>
+      </div>
+
+      <div className="portfolio__quick">
+        {categories.map((c) => (
+          <Link
+            key={c.id}
+            to={`/portfolio/${c.slug}`}
+            className={viewSlug === c.slug ? "is-active" : ""}
+          >
+            {c.name}
+          </Link>
+        ))}
+      </div>
+
+      {loading && <p className="portfolio__status">Loading…</p>}
+      {error && <p className="portfolio__status portfolio__status--err">{error}</p>}
+
+      {!loading && !error && projects.length === 0 && (
+        <p className="portfolio__status">No published projects match these filters.</p>
+      )}
+
+      <div className="project-grid">
+        {projects.map((p, i) => (
+          <ProjectCard key={p.id} project={p} index={i} />
+        ))}
+      </div>
+
+      {meta && meta.totalPages > 1 && (
+        <div className="portfolio__pager">
+          <button
+            className="btn btn--ghost btn--sm"
+            disabled={page <= 1}
+            onClick={() => updateParam("page", String(page - 1))}
+          >
+            Previous
+          </button>
+          <span>
+            Page {meta.page} of {meta.totalPages} · {meta.total} projects
+          </span>
+          <button
+            className="btn btn--ghost btn--sm"
+            disabled={page >= meta.totalPages}
+            onClick={() => updateParam("page", String(page + 1))}
+          >
+            Next
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

client/src/pages/ProjectPage.scss

@@ -0,0 +1,145 @@
+.project-page {
+  padding: 2.5rem 0 4rem;
+
+  &__back {
+    display: inline-block;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+    &:hover {
+      color: var(--accent);
+    }
+  }
+
+  &__header {
+    margin-bottom: 1.75rem;
+
+    h1 {
+      margin: 0.75rem 0;
+      font-size: clamp(1.8rem, 4vw, 2.8rem);
+      font-family: var(--font-serif);
+      font-style: italic;
+      font-weight: 400;
+    }
+  }
+
+  &__cats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    color: var(--text-dim);
+    font-size: 0.9rem;
+  }
+
+  &__desc {
+    max-width: 42rem;
+    color: var(--text-muted);
+    margin-bottom: 2.5rem;
+
+    p {
+      margin: 0 0 0.85rem;
+      white-space: pre-wrap;
+    }
+  }
+
+  &__videos {
+    display: grid;
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+  }
+
+  &__video {
+    aspect-ratio: 16 / 9;
+    background: #000;
+    border-radius: var(--radius);
+    overflow: hidden;
+    border: 1px solid var(--border);
+
+    iframe,
+    video {
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+
+    p {
+      padding: 0.75rem 1rem;
+      margin: 0;
+      font-size: 0.9rem;
+      color: var(--text-muted);
+      background: var(--bg-card);
+    }
+  }
+
+  &__gallery {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+
+    @media (min-width: 720px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  &__shot {
+    padding: 0;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--bg-card);
+    transition: border-color 0.2s;
+
+    &:hover {
+      border-color: var(--border-strong);
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  &__footer {
+    margin-top: 2.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+
+    a:hover {
+      color: var(--accent);
+    }
+  }
+
+  &__links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  &__loading,
+  &__err {
+    color: var(--text-muted);
+    padding: 3rem 0;
+  }
+
+  &__err {
+    color: var(--danger);
+  }
+}

client/src/pages/ProjectPage.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+import { api, type Project, mediaSrc } from "../lib/api";
+import "./ProjectPage.scss";
+
+export function ProjectPage() {
+  const { slug } = useParams();
+  const [project, setProject] = useState<Project | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [lbIndex, setLbIndex] = useState(-1);
+
+  useEffect(() => {
+    if (!slug) return;
+    api
+      .project(slug)
+      .then((p) => {
+        setProject(p);
+        document.title = `${p.title} · jmartgraphix`;
+        // Open Graph-ish meta updates
+        const setMeta = (prop: string, content: string) => {
+          let el = document.querySelector(`meta[property="${prop}"]`);
+          if (!el) {
+            el = document.createElement("meta");
+            el.setAttribute("property", prop);
+            document.head.appendChild(el);
+          }
+          el.setAttribute("content", content);
+        };
+        setMeta("og:title", p.title);
+        setMeta("og:description", p.shortDescription || p.description.slice(0, 160));
+        const img = p.thumbnail?.url || p.media?.find((m) => m.type === "image")?.url;
+        if (img) setMeta("og:image", mediaSrc(img));
+      })
+      .catch((e) => setError(e.message));
+  }, [slug]);
+
+  if (error) {
+    return (
+      <div className="container project-page">
+        <p className="project-page__err">{error}</p>
+        <Link to="/portfolio">← Back to portfolio</Link>
+      </div>
+    );
+  }
+
+  if (!project) {
+    return (
+      <div className="container project-page">
+        <p className="project-page__loading">Loading…</p>
+      </div>
+    );
+  }
+
+  const images = (project.media || []).filter((m) => m.type === "image");
+  const videos = (project.media || []).filter((m) => m.type === "video");
+  const slides = images.map((m) => ({ src: mediaSrc(m.url) }));
+
+  return (
+    <article className="project-page page-enter">
+      <div className="container">
+        <Link to="/portfolio" className="project-page__back">
+          ← Portfolio
+        </Link>
+        <header className="project-page__header">
+          <div className="project-page__cats">
+            {project.categories.map((c) => (
+              <Link key={c.id} to={`/portfolio/${c.slug}`} className="badge">
+                {c.name}
+              </Link>
+            ))}
+          </div>
+          <h1>{project.title}</h1>
+          <div className="project-page__meta">
+            {project.date && (
+              <span>{new Date(project.date).toLocaleDateString(undefined, { year: "numeric", month: "long" })}</span>
+            )}
+            {project.software.length > 0 && (
+              <span>{project.software.join(" · ")}</span>
+            )}
+          </div>
+        </header>
+
+        {project.description && (
+          <div className="project-page__desc">
+            {project.description.split("\n").map((para, i) => (
+              <p key={i}>{para}</p>
+            ))}
+          </div>
+        )}
+
+        {videos.length > 0 && (
+          <div className="project-page__videos">
+            {videos.map((v) => (
+              <div key={v.id} className="project-page__video">
+                {v.videoSource === "youtube" || v.videoSource === "vimeo" ? (
+                  <iframe
+                    src={mediaSrc(v.url)}
+                    title={v.caption || project.title}
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                  />
+                ) : v.videoSource === "self_hosted" ? (
+                  <video src={mediaSrc(v.url)} controls playsInline />
+                ) : (
+                  <a href={v.externalUrl || v.url} target="_blank" rel="noreferrer" className="btn btn--ghost">
+                    Watch video ↗
+                  </a>
+                )}
+                {v.caption && <p>{v.caption}</p>}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="project-page__gallery">
+          {images.map((m, i) => (
+            <button
+              key={m.id}
+              type="button"
+              className="project-page__shot"
+              onClick={() => setLbIndex(i)}
+              aria-label={`Open image ${i + 1}`}
+            >
+              <img
+                src={mediaSrc(m.thumbnailUrl || m.url)}
+                alt={m.alt || project.title}
+                loading="lazy"
+              />
+            </button>
+          ))}
+        </div>
+
+        {(project.tags.length > 0 || project.externalLinks.length > 0) && (
+          <footer className="project-page__footer">
+            {project.tags.length > 0 && (
+              <div className="project-page__tags">
+                {project.tags.map((t) => (
+                  <Link key={t.id} to={`/portfolio?tag=${encodeURIComponent(t.name)}`}>
+                    #{t.name}
+                  </Link>
+                ))}
+              </div>
+            )}
+            {project.externalLinks.length > 0 && (
+              <div className="project-page__links">
+                {project.externalLinks.map((l) => (
+                  <a key={l.url} href={l.url} target="_blank" rel="noreferrer" className="btn btn--ghost btn--sm">
+                    {l.label} ↗
+                  </a>
+                ))}
+              </div>
+            )}
+          </footer>
+        )}
+      </div>
+
+      <Lightbox
+        open={lbIndex >= 0}
+        index={lbIndex}
+        close={() => setLbIndex(-1)}
+        slides={slides}
+      />
+    </article>
+  );
+}

client/src/pages/ResumePage.scss

@@ -0,0 +1,98 @@
+.resume-page {
+  padding: 2.5rem 0 4rem;
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.65rem;
+    margin-bottom: 2rem;
+  }
+
+  &__err {
+    color: var(--danger);
+  }
+}
+
+.resume-doc {
+  max-width: 780px;
+  margin: 0 auto;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 2.5rem 2rem;
+  box-shadow: var(--shadow);
+
+  @media (min-width: 720px) {
+    padding: 3rem 3rem;
+  }
+
+  &__header {
+    margin-bottom: 1.5rem;
+
+    h1 {
+      margin: 0 0 0.35rem;
+      font-size: 2.2rem;
+      font-family: var(--font-serif);
+      font-style: italic;
+      font-weight: 400;
+    }
+  }
+
+  &__title {
+    margin: 0 0 0.5rem;
+    color: var(--accent);
+    font-size: 1.05rem;
+  }
+
+  &__contact {
+    margin: 0;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+  }
+
+  &__summary {
+    border-left: 3px solid var(--accent);
+    padding-left: 1rem;
+    color: var(--text-muted);
+    margin: 0 0 2rem;
+  }
+
+  &__section {
+    margin-bottom: 1.75rem;
+
+    h2 {
+      margin: 0 0 1rem;
+      font-size: 0.78rem;
+      text-transform: uppercase;
+      letter-spacing: 0.14em;
+      color: var(--text-dim);
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 0.5rem;
+    }
+
+    p {
+      color: var(--text-muted);
+      margin: 0 0 0.65rem;
+    }
+
+    ul {
+      margin: 0.4rem 0 0 1.1rem;
+      color: var(--text-muted);
+    }
+  }
+
+  &__item {
+    margin-bottom: 1.25rem;
+
+    h3 {
+      margin: 0 0 0.25rem;
+      font-size: 1.05rem;
+    }
+  }
+
+  &__meta {
+    font-size: 0.85rem;
+    color: var(--text-dim);
+    margin-bottom: 0.4rem;
+  }
+}

client/src/pages/ResumePage.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from "react";
+import { api, type Resume } from "../lib/api";
+import "./ResumePage.scss";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Sec = any;
+
+export function ResumePage() {
+  const [resume, setResume] = useState<Resume | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api
+      .resume()
+      .then((r) => {
+        setResume(r);
+        document.title = `${r.fullName} — Resume · jmartgraphix`;
+      })
+      .catch((e) => setError(e.message));
+  }, []);
+
+  if (error) {
+    return (
+      <div className="container resume-page">
+        <p className="resume-page__err">{error}</p>
+      </div>
+    );
+  }
+
+  if (!resume) {
+    return (
+      <div className="container resume-page">
+        <p>Loading resume…</p>
+      </div>
+    );
+  }
+
+  const sections = (resume.sections || []) as Sec[];
+
+  return (
+    <div className="resume-page page-enter container">
+      <div className="resume-page__actions">
+        <a className="btn btn--primary" href="/api/v1/resume/pdf">
+          Download PDF
+        </a>
+        <a className="btn btn--ghost" href="/api/v1/resume/html" target="_blank" rel="noreferrer">
+          Printable HTML
+        </a>
+        <button
+          className="btn btn--ghost"
+          type="button"
+          onClick={() => {
+            navigator.clipboard?.writeText(window.location.href);
+          }}
+        >
+          Copy share link
+        </button>
+      </div>
+
+      <article className="resume-doc">
+        {resume.htmlContent ? (
+          <div dangerouslySetInnerHTML={{ __html: resume.htmlContent }} />
+        ) : (
+          <>
+            <header className="resume-doc__header">
+              <h1>{resume.fullName}</h1>
+              {resume.title && <p className="resume-doc__title">{resume.title}</p>}
+              <p className="resume-doc__contact">
+                {[resume.email, resume.phone, resume.location, resume.website]
+                  .filter(Boolean)
+                  .join(" · ")}
+              </p>
+            </header>
+            {resume.summary && <p className="resume-doc__summary">{resume.summary}</p>}
+            {sections.map((sec, i) => (
+              <section key={i} className="resume-doc__section">
+                <h2>{sec.title || sec.type}</h2>
+                {sec.type === "skills" &&
+                  (sec.items || []).map((g: Sec, j: number) => (
+                    <p key={j}>
+                      <strong>{g.group}</strong> — {(g.skills || []).join(", ")}
+                    </p>
+                  ))}
+                {sec.type === "links" && (
+                  <ul>
+                    {(sec.items || []).map((l: Sec, j: number) => (
+                      <li key={j}>
+                        <a href={l.url} target="_blank" rel="noreferrer">
+                          {l.label}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+                {sec.type !== "skills" &&
+                  sec.type !== "links" &&
+                  (sec.items || []).map((item: Sec, j: number) => (
+                    <div key={j} className="resume-doc__item">
+                      <h3>
+                        {item.title}
+                        {item.organization ? ` · ${item.organization}` : ""}
+                      </h3>
+                      <div className="resume-doc__meta">
+                        {[item.location, [item.startDate, item.endDate].filter(Boolean).join(" – ")]
+                          .filter(Boolean)
+                          .join(" · ")}
+                      </div>
+                      {item.description && <p>{item.description}</p>}
+                      {item.highlights && (
+                        <ul>
+                          {item.highlights.map((h: string, k: number) => (
+                            <li key={k}>{h}</li>
+                          ))}
+                        </ul>
+                      )}
+                    </div>
+                  ))}
+              </section>
+            ))}
+          </>
+        )}
+      </article>
+    </div>
+  );
+}

client/src/pages/admin/Admin.scss

@@ -0,0 +1,264 @@
+.admin-auth-error {
+  min-height: 100vh;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  gap: 0.75rem;
+  padding: 2rem;
+  color: var(--text-muted);
+
+  h1 {
+    color: var(--text);
+    margin: 0;
+  }
+
+  &__detail {
+    color: var(--danger);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+  }
+
+  a {
+    color: var(--accent);
+  }
+}
+
+.admin-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 240px 1fr;
+
+  @media (max-width: 900px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.admin-nav {
+  background: var(--bg-elevated);
+  border-right: 1px solid var(--border);
+  padding: 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  &__brand {
+    a {
+      display: block;
+      font-weight: 600;
+      color: var(--text);
+    }
+    span {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      color: var(--accent);
+    }
+  }
+
+  nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    a {
+      padding: 0.55rem 0.75rem;
+      border-radius: var(--radius-sm);
+      color: var(--text-muted);
+      font-size: 0.9rem;
+
+      &:hover {
+        background: var(--bg-hover);
+        color: var(--text);
+      }
+
+      &.active {
+        background: var(--accent-soft);
+        color: var(--accent);
+      }
+    }
+  }
+
+  &__user {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    color: var(--text-dim);
+  }
+}
+
+.admin-content {
+  padding: 1.75rem 2rem 3rem;
+  overflow-x: auto;
+}
+
+.admin-page {
+  h1 {
+    margin: 0 0 0.35rem;
+    font-size: 1.6rem;
+  }
+
+  &__sub {
+    color: var(--text-muted);
+    margin: 0 0 1.75rem;
+  }
+
+  &__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+    margin-bottom: 1.5rem;
+  }
+}
+
+.admin-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+
+  th,
+  td {
+    text-align: left;
+    padding: 0.75rem 0.65rem;
+    border-bottom: 1px solid var(--border);
+  }
+
+  th {
+    color: var(--text-dim);
+    font-weight: 500;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  tr:hover td {
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .thumb {
+    width: 48px;
+    height: 36px;
+    object-fit: cover;
+    border-radius: 4px;
+    background: #111;
+  }
+}
+
+.admin-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.admin-stat {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.15rem;
+
+  strong {
+    display: block;
+    font-size: 1.6rem;
+    margin-bottom: 0.25rem;
+  }
+
+  span {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+  }
+}
+
+.admin-form {
+  max-width: 720px;
+
+  &--wide {
+    max-width: 960px;
+  }
+}
+
+.admin-check-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  margin-bottom: 1rem;
+
+  label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    text-transform: none;
+    letter-spacing: 0;
+  }
+}
+
+.admin-media-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 0.75rem;
+  margin: 1rem 0;
+
+  figure {
+    margin: 0;
+    position: relative;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    background: #111;
+
+    img,
+    video {
+      width: 100%;
+      aspect-ratio: 1;
+      object-fit: cover;
+    }
+
+    figcaption {
+      display: flex;
+      gap: 0.25rem;
+      padding: 0.35rem;
+      background: var(--bg-elevated);
+    }
+  }
+}
+
+.vis-badge {
+  font-size: 0.72rem;
+  padding: 0.15rem 0.45rem;
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+
+  &--published {
+    background: rgba(74, 222, 128, 0.12);
+    color: var(--success);
+  }
+  &--draft {
+    background: rgba(161, 161, 170, 0.15);
+    color: var(--text-muted);
+  }
+  &--private {
+    background: rgba(248, 113, 113, 0.12);
+    color: var(--danger);
+  }
+}
+
+.admin-msg {
+  padding: 0.65rem 0.9rem;
+  border-radius: var(--radius-sm);
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+
+  &--ok {
+    background: rgba(74, 222, 128, 0.1);
+    color: var(--success);
+  }
+  &--err {
+    background: rgba(248, 113, 113, 0.1);
+    color: var(--danger);
+  }
+}

client/src/pages/admin/AdminCategories.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react";
+import { api, type Category, type Tag } from "../../lib/api";
+
+export function AdminCategories() {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [tags, setTags] = useState<Tag[]>([]);
+  const [name, setName] = useState("");
+  const [msg, setMsg] = useState<string | null>(null);
+
+  function load() {
+    api.adminCategories().then(setCategories);
+    api.adminTags().then(setTags);
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  async function addCategory(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+    await api.createCategory({ name: name.trim() });
+    setName("");
+    setMsg("Category created");
+    load();
+  }
+
+  async function removeCategory(id: string, n: string) {
+    if (!confirm(`Delete category “${n}”?`)) return;
+    await api.deleteCategory(id);
+    load();
+  }
+
+  async function removeTag(id: string, n: string) {
+    if (!confirm(`Delete tag “${n}”?`)) return;
+    await api.deleteTag(id);
+    load();
+  }
+
+  return (
+    <div className="admin-page">
+      <h1>Categories & Tags</h1>
+      <p className="admin-page__sub">
+        Categories are fixed taxonomy; tags are free-form labels on projects.
+      </p>
+      {msg && <div className="admin-msg admin-msg--ok">{msg}</div>}
+
+      <form className="admin-page__toolbar" onSubmit={addCategory}>
+        <input
+          placeholder="New category name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          style={{
+            background: "var(--bg-elevated)",
+            border: "1px solid var(--border)",
+            borderRadius: 8,
+            padding: "0.55rem 0.8rem",
+          }}
+        />
+        <button type="submit" className="btn btn--primary btn--sm">
+          Add category
+        </button>
+      </form>
+
+      <h2 style={{ fontSize: "1rem" }}>Categories</h2>
+      <table className="admin-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Slug</th>
+            <th>Order</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {categories.map((c) => (
+            <tr key={c.id}>
+              <td>{c.name}</td>
+              <td>
+                <code>{c.slug}</code>
+              </td>
+              <td>{c.sortOrder ?? 0}</td>
+              <td>
+                <button
+                  type="button"
+                  className="btn btn--danger btn--sm"
+                  onClick={() => removeCategory(c.id, c.name)}
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <h2 style={{ fontSize: "1rem", marginTop: "2rem" }}>Tags</h2>
+      <table className="admin-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Slug</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {tags.map((t) => (
+            <tr key={t.id}>
+              <td>{t.name}</td>
+              <td>
+                <code>{t.slug}</code>
+              </td>
+              <td>
+                <button
+                  type="button"
+                  className="btn btn--danger btn--sm"
+                  onClick={() => removeTag(t.id, t.name)}
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

client/src/pages/admin/AdminDashboard.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { api } from "../../lib/api";
+
+export function AdminDashboard() {
+  const [stats, setStats] = useState({
+    projects: 0,
+    published: 0,
+    drafts: 0,
+    categories: 0,
+    views: 0,
+  });
+  const [msg, setMsg] = useState<string | null>(null);
+
+  useEffect(() => {
+    Promise.all([
+      api.adminProjects({ perPage: 1 }),
+      api.adminProjects({ visibility: "published", perPage: 1 }),
+      api.adminProjects({ visibility: "draft", perPage: 1 }),
+      api.adminCategories(),
+      api.adminViews(),
+    ]).then(([all, pub, draft, cats, views]) => {
+      setStats({
+        projects: all.meta.total,
+        published: pub.meta.total,
+        drafts: draft.meta.total,
+        categories: cats.length,
+        views: views.length,
+      });
+    });
+  }, []);
+
+  async function reindex() {
+    try {
+      const r = await api.reindex();
+      setMsg(`Typesense reindexed ${r.indexed} projects`);
+    } catch (e) {
+      setMsg((e as Error).message);
+    }
+  }
+
+  return (
+    <div className="admin-page">
+      <h1>Dashboard</h1>
+      <p className="admin-page__sub">Manage portfolio content protected by Authelia SSO.</p>
+      {msg && <div className="admin-msg admin-msg--ok">{msg}</div>}
+      <div className="admin-cards">
+        <div className="admin-stat">
+          <strong>{stats.projects}</strong>
+          <span>Total projects</span>
+        </div>
+        <div className="admin-stat">
+          <strong>{stats.published}</strong>
+          <span>Published</span>
+        </div>
+        <div className="admin-stat">
+          <strong>{stats.drafts}</strong>
+          <span>Drafts</span>
+        </div>
+        <div className="admin-stat">
+          <strong>{stats.categories}</strong>
+          <span>Categories</span>
+        </div>
+        <div className="admin-stat">
+          <strong>{stats.views}</strong>
+          <span>Portfolio views</span>
+        </div>
+      </div>
+      <div className="admin-page__toolbar">
+        <Link to="/admin/projects/new" className="btn btn--primary">
+          New project
+        </Link>
+        <Link to="/admin/resume" className="btn btn--ghost">
+          Edit resume
+        </Link>
+        <button type="button" className="btn btn--ghost" onClick={reindex}>
+          Reindex search
+        </button>
+      </div>
+      <section>
+        <h2 style={{ fontSize: "1rem", color: "var(--text-muted)" }}>Quick links for audiences</h2>
+        <ul style={{ color: "var(--text-dim)", lineHeight: 1.9 }}>
+          <li>
+            <code>/portfolio/game-dev</code> — animation first, then modeling
+          </li>
+          <li>
+            <code>/portfolio/engineering</code> — CAD & product visualization first
+          </li>
+          <li>
+            <code>/portfolio/3d</code>, <code>/portfolio/cad</code>, <code>/portfolio/ai</code>
+          </li>
+          <li>
+            <code>/resume</code> — shareable resume URL
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+}

client/src/pages/admin/AdminLayout.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react";
+import { Link, NavLink, Outlet, useNavigate } from "react-router-dom";
+import { api } from "../../lib/api";
+import "./Admin.scss";
+
+export function AdminLayout() {
+  const [user, setUser] = useState<{ username: string; name?: string } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    api
+      .me()
+      .then(setUser)
+      .catch((e) => setError(e.message));
+  }, []);
+
+  if (error) {
+    return (
+      <div className="admin-auth-error">
+        <h1>Admin access required</h1>
+        <p>
+          This area is protected by Authelia SSO via the <code>Remote-User</code> header.
+        </p>
+        <p className="admin-auth-error__detail">{error}</p>
+        <p>
+          Sign in at{" "}
+          <a href="https://auth.jmartgraphix.com">auth.jmartgraphix.com</a>, then return here.
+        </p>
+        <Link to="/" className="btn btn--ghost">
+          Back to site
+        </Link>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return (
+      <div className="admin-auth-error">
+        <p>Checking authentication…</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="admin-shell">
+      <aside className="admin-nav">
+        <div className="admin-nav__brand">
+          <Link to="/admin">jmartgraphix</Link>
+          <span>Admin</span>
+        </div>
+        <nav>
+          <NavLink to="/admin" end>
+            Dashboard
+          </NavLink>
+          <NavLink to="/admin/projects">Projects</NavLink>
+          <NavLink to="/admin/categories">Categories & Tags</NavLink>
+          <NavLink to="/admin/views">Portfolio Views</NavLink>
+          <NavLink to="/admin/resume">Resume</NavLink>
+          <NavLink to="/admin/settings">Settings</NavLink>
+        </nav>
+        <div className="admin-nav__user">
+          <span>{user.name || user.username}</span>
+          <button type="button" className="btn btn--ghost btn--sm" onClick={() => navigate("/")}>
+            View site
+          </button>
+        </div>
+      </aside>
+      <div className="admin-content">
+        <Outlet />
+      </div>
+    </div>
+  );
+}

client/src/pages/admin/AdminProjectEdit.tsx

@@ -0,0 +1,367 @@
+import { useEffect, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import {
+  api,
+  type Category,
+  type Media,
+  type Project,
+  type Visibility,
+  mediaSrc,
+} from "../../lib/api";
+
+const empty = {
+  title: "",
+  description: "",
+  shortDescription: "",
+  date: "",
+  software: "",
+  externalLinksText: "",
+  featured: false,
+  displayPriority: 0,
+  visibility: "draft" as Visibility,
+  categoryIds: [] as string[],
+  tagNames: "",
+};
+
+export function AdminProjectEdit() {
+  const { id } = useParams();
+  const isNew = !id || id === "new";
+  const navigate = useNavigate();
+  const [form, setForm] = useState(empty);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [media, setMedia] = useState<Media[]>([]);
+  const [thumbnailId, setThumbnailId] = useState<string | null>(null);
+  const [videoUrl, setVideoUrl] = useState("");
+  const [msg, setMsg] = useState<string | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    api.adminCategories().then(setCategories);
+  }, []);
+
+  useEffect(() => {
+    if (isNew) return;
+    api.adminProject(id!).then((p: Project) => {
+      setForm({
+        title: p.title,
+        description: p.description,
+        shortDescription: p.shortDescription || "",
+        date: p.date ? p.date.slice(0, 10) : "",
+        software: (p.software || []).join(", "),
+        externalLinksText: (p.externalLinks || [])
+          .map((l) => `${l.label}|${l.url}`)
+          .join("\n"),
+        featured: p.featured,
+        displayPriority: p.displayPriority,
+        visibility: p.visibility,
+        categoryIds: p.categories.map((c) => c.id),
+        tagNames: p.tags.map((t) => t.name).join(", "),
+      });
+      setMedia(p.media || []);
+      setThumbnailId(p.thumbnailId || p.thumbnail?.id || null);
+    });
+  }, [id, isNew]);
+
+  function parseLinks() {
+    return form.externalLinksText
+      .split("\n")
+      .map((line) => line.trim())
+      .filter(Boolean)
+      .map((line) => {
+        const [label, ...rest] = line.split("|");
+        return { label: label.trim(), url: rest.join("|").trim() };
+      })
+      .filter((l) => l.label && l.url);
+  }
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    setErr(null);
+    setMsg(null);
+    const body = {
+      title: form.title,
+      description: form.description,
+      shortDescription: form.shortDescription || null,
+      date: form.date || null,
+      software: form.software
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean),
+      externalLinks: parseLinks(),
+      featured: form.featured,
+      displayPriority: Number(form.displayPriority) || 0,
+      visibility: form.visibility,
+      categoryIds: form.categoryIds,
+      tagNames: form.tagNames
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean),
+      thumbnailId,
+    };
+    try {
+      if (isNew) {
+        const p = await api.createProject(body);
+        setMsg("Created");
+        navigate(`/admin/projects/${p.id}`, { replace: true });
+      } else {
+        const p = await api.updateProject(id!, body);
+        setMedia(p.media || []);
+        setMsg("Saved");
+      }
+    } catch (e) {
+      setErr((e as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function onUpload(files: FileList | null) {
+    if (!files?.length || isNew) {
+      setErr("Save the project first, then upload media.");
+      return;
+    }
+    for (const file of Array.from(files)) {
+      const m = await api.uploadMedia(file, id);
+      setMedia((prev) => [...prev, m]);
+      if (!thumbnailId && m.type === "image") {
+        await api.setThumbnail(id!, m.id);
+        setThumbnailId(m.id);
+      }
+    }
+    setMsg("Upload complete");
+  }
+
+  async function addVideo() {
+    if (!videoUrl || isNew) return;
+    const m = await api.addVideoLink(videoUrl, id);
+    setMedia((prev) => [...prev, m]);
+    setVideoUrl("");
+    setMsg("Video link added");
+  }
+
+  async function removeMedia(mid: string) {
+    await api.deleteMedia(mid);
+    setMedia((prev) => prev.filter((m) => m.id !== mid));
+    if (thumbnailId === mid) setThumbnailId(null);
+  }
+
+  async function makeThumb(mid: string) {
+    if (isNew) return;
+    await api.setThumbnail(id!, mid);
+    setThumbnailId(mid);
+  }
+
+  return (
+    <div className="admin-page">
+      <h1>{isNew ? "New project" : "Edit project"}</h1>
+      <p className="admin-page__sub">
+        <Link to="/admin/projects">← Projects</Link>
+      </p>
+      {msg && <div className="admin-msg admin-msg--ok">{msg}</div>}
+      {err && <div className="admin-msg admin-msg--err">{err}</div>}
+
+      <form className="admin-form admin-form--wide" onSubmit={save}>
+        <div className="field">
+          <label htmlFor="title">Title</label>
+          <input
+            id="title"
+            required
+            value={form.title}
+            onChange={(e) => setForm({ ...form, title: e.target.value })}
+          />
+        </div>
+        <div className="field">
+          <label htmlFor="short">Short description</label>
+          <input
+            id="short"
+            value={form.shortDescription}
+            onChange={(e) => setForm({ ...form, shortDescription: e.target.value })}
+          />
+        </div>
+        <div className="field">
+          <label htmlFor="desc">Description</label>
+          <textarea
+            id="desc"
+            rows={8}
+            value={form.description}
+            onChange={(e) => setForm({ ...form, description: e.target.value })}
+          />
+        </div>
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1rem" }}>
+          <div className="field">
+            <label htmlFor="date">Date</label>
+            <input
+              id="date"
+              type="date"
+              value={form.date}
+              onChange={(e) => setForm({ ...form, date: e.target.value })}
+            />
+          </div>
+          <div className="field">
+            <label htmlFor="pri">Display priority</label>
+            <input
+              id="pri"
+              type="number"
+              value={form.displayPriority}
+              onChange={(e) =>
+                setForm({ ...form, displayPriority: parseInt(e.target.value, 10) || 0 })
+              }
+            />
+          </div>
+          <div className="field">
+            <label htmlFor="vis">Visibility</label>
+            <select
+              id="vis"
+              value={form.visibility}
+              onChange={(e) =>
+                setForm({ ...form, visibility: e.target.value as Visibility })
+              }
+            >
+              <option value="draft">Draft</option>
+              <option value="published">Published</option>
+              <option value="private">Private</option>
+            </select>
+          </div>
+        </div>
+        <div className="field">
+          <label>
+            <input
+              type="checkbox"
+              checked={form.featured}
+              onChange={(e) => setForm({ ...form, featured: e.target.checked })}
+            />{" "}
+            Featured
+          </label>
+        </div>
+        <div className="field">
+          <label>Categories</label>
+          <div className="admin-check-grid">
+            {categories.map((c) => (
+              <label key={c.id}>
+                <input
+                  type="checkbox"
+                  checked={form.categoryIds.includes(c.id)}
+                  onChange={(e) => {
+                    setForm({
+                      ...form,
+                      categoryIds: e.target.checked
+                        ? [...form.categoryIds, c.id]
+                        : form.categoryIds.filter((x) => x !== c.id),
+                    });
+                  }}
+                />
+                {c.name}
+              </label>
+            ))}
+          </div>
+        </div>
+        <div className="field">
+          <label htmlFor="tags">Tags (comma-separated)</label>
+          <input
+            id="tags"
+            value={form.tagNames}
+            onChange={(e) => setForm({ ...form, tagNames: e.target.value })}
+          />
+        </div>
+        <div className="field">
+          <label htmlFor="soft">Software / tools (comma-separated)</label>
+          <input
+            id="soft"
+            value={form.software}
+            onChange={(e) => setForm({ ...form, software: e.target.value })}
+          />
+        </div>
+        <div className="field">
+          <label htmlFor="links">External links (one per line: Label|https://…)</label>
+          <textarea
+            id="links"
+            rows={3}
+            value={form.externalLinksText}
+            onChange={(e) => setForm({ ...form, externalLinksText: e.target.value })}
+          />
+        </div>
+
+        <div className="admin-page__toolbar">
+          <button type="submit" className="btn btn--primary" disabled={saving}>
+            {saving ? "Saving…" : "Save project"}
+          </button>
+        </div>
+      </form>
+
+      {!isNew && (
+        <section style={{ marginTop: "2rem" }}>
+          <h2>Media</h2>
+          <div className="admin-page__toolbar">
+            <input
+              type="file"
+              accept="image/*,video/*"
+              multiple
+              onChange={(e) => onUpload(e.target.files)}
+            />
+            <input
+              placeholder="YouTube / Vimeo / video URL"
+              value={videoUrl}
+              onChange={(e) => setVideoUrl(e.target.value)}
+              style={{
+                flex: 1,
+                minWidth: 200,
+                background: "var(--bg-elevated)",
+                border: "1px solid var(--border)",
+                borderRadius: 8,
+                padding: "0.55rem 0.8rem",
+              }}
+            />
+            <button type="button" className="btn btn--ghost btn--sm" onClick={addVideo}>
+              Add video link
+            </button>
+          </div>
+          <div className="admin-media-grid">
+            {media.map((m) => (
+              <figure key={m.id}>
+                {m.type === "image" ? (
+                  <img src={mediaSrc(m.thumbnailUrl || m.url)} alt="" />
+                ) : (
+                  <div
+                    style={{
+                      aspectRatio: 1,
+                      display: "grid",
+                      placeItems: "center",
+                      color: "var(--text-dim)",
+                      fontSize: 12,
+                    }}
+                  >
+                    {m.videoSource || "video"}
+                  </div>
+                )}
+                <figcaption>
+                  {m.type === "image" && (
+                    <button
+                      type="button"
+                      className="btn btn--ghost btn--sm"
+                      onClick={() => makeThumb(m.id)}
+                      style={{
+                        opacity: thumbnailId === m.id ? 1 : 0.7,
+                        color: thumbnailId === m.id ? "var(--accent)" : undefined,
+                      }}
+                    >
+                      Thumb
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="btn btn--danger btn--sm"
+                    onClick={() => removeMedia(m.id)}
+                  >
+                    ×
+                  </button>
+                </figcaption>
+              </figure>
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}

client/src/pages/admin/AdminProjects.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { api, type Project, thumbOf, mediaSrc } from "../../lib/api";
+
+export function AdminProjects() {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [q, setQ] = useState("");
+  const [visibility, setVisibility] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  function load() {
+    setLoading(true);
+    api
+      .adminProjects({ q: q || undefined, visibility: visibility || undefined, perPage: 100 })
+      .then((r) => setProjects(r.data))
+      .finally(() => setLoading(false));
+  }
+
+  useEffect(() => {
+    load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visibility]);
+
+  async function remove(id: string, title: string) {
+    if (!confirm(`Delete “${title}”? This cannot be undone.`)) return;
+    await api.deleteProject(id);
+    load();
+  }
+
+  return (
+    <div className="admin-page">
+      <h1>Projects</h1>
+      <p className="admin-page__sub">Create, edit, publish, and reorder portfolio entries.</p>
+      <div className="admin-page__toolbar">
+        <Link to="/admin/projects/new" className="btn btn--primary">
+          New project
+        </Link>
+        <input
+          placeholder="Search…"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && load()}
+          style={{
+            background: "var(--bg-elevated)",
+            border: "1px solid var(--border)",
+            borderRadius: 8,
+            padding: "0.55rem 0.8rem",
+          }}
+        />
+        <select
+          value={visibility}
+          onChange={(e) => setVisibility(e.target.value)}
+          style={{
+            background: "var(--bg-elevated)",
+            border: "1px solid var(--border)",
+            borderRadius: 8,
+            padding: "0.55rem 0.8rem",
+          }}
+        >
+          <option value="">All visibility</option>
+          <option value="published">Published</option>
+          <option value="draft">Draft</option>
+          <option value="private">Private</option>
+        </select>
+        <button type="button" className="btn btn--ghost btn--sm" onClick={load}>
+          Refresh
+        </button>
+      </div>
+
+      {loading ? (
+        <p>Loading…</p>
+      ) : (
+        <table className="admin-table">
+          <thead>
+            <tr>
+              <th></th>
+              <th>Title</th>
+              <th>Status</th>
+              <th>Priority</th>
+              <th>Categories</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {projects.map((p) => (
+              <tr key={p.id}>
+                <td>
+                  {thumbOf(p) ? (
+                    <img className="thumb" src={mediaSrc(thumbOf(p))} alt="" />
+                  ) : (
+                    "—"
+                  )}
+                </td>
+                <td>
+                  <Link to={`/admin/projects/${p.id}`}>{p.title}</Link>
+                  {p.featured && (
+                    <span className="badge" style={{ marginLeft: 8 }}>
+                      Featured
+                    </span>
+                  )}
+                </td>
+                <td>
+                  <span className={`vis-badge vis-badge--${p.visibility}`}>{p.visibility}</span>
+                </td>
+                <td>{p.displayPriority}</td>
+                <td style={{ color: "var(--text-dim)", fontSize: "0.85rem" }}>
+                  {p.categories.map((c) => c.name).join(", ") || "—"}
+                </td>
+                <td style={{ whiteSpace: "nowrap" }}>
+                  <Link to={`/admin/projects/${p.id}`} className="btn btn--ghost btn--sm">
+                    Edit
+                  </Link>
+                  {p.visibility === "published" && (
+                    <a
+                      href={`/project/${p.slug}`}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="btn btn--ghost btn--sm"
+                    >
+                      View
+                    </a>
+                  )}
+                  <button
+                    type="button"
+                    className="btn btn--danger btn--sm"
+                    onClick={() => remove(p.id, p.title)}
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

client/src/pages/admin/AdminResume.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useState } from "react";
+import { api, type Resume } from "../../lib/api";
+
+export function AdminResume() {
+  const [form, setForm] = useState({
+    fullName: "",
+    title: "",
+    email: "",
+    phone: "",
+    location: "",
+    website: "",
+    summary: "",
+    sectionsJson: "[]",
+    htmlContent: "",
+  });
+  const [msg, setMsg] = useState<string | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.adminResume().then((r) => {
+      if (!r) return;
+      setForm({
+        fullName: r.fullName,
+        title: r.title || "",
+        email: r.email || "",
+        phone: r.phone || "",
+        location: r.location || "",
+        website: r.website || "",
+        summary: r.summary || "",
+        sectionsJson: JSON.stringify(r.sections ?? [], null, 2),
+        htmlContent: r.htmlContent || "",
+      });
+    });
+  }, []);
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault();
+    setErr(null);
+    setMsg(null);
+    let sections: unknown = [];
+    try {
+      sections = JSON.parse(form.sectionsJson || "[]");
+    } catch {
+      setErr("Sections JSON is invalid");
+      return;
+    }
+    try {
+      await api.saveResume({
+        fullName: form.fullName,
+        title: form.title,
+        email: form.email || null,
+        phone: form.phone || null,
+        location: form.location || null,
+        website: form.website || null,
+        summary: form.summary,
+        sections,
+        htmlContent: form.htmlContent || null,
+      });
+      setMsg("Resume saved");
+    } catch (e) {
+      setErr((e as Error).message);
+    }
+  }
+
+  return (
+    <div className="admin-page">
+      <h1>Resume</h1>
+      <p className="admin-page__sub">
+        Public at <a href="/resume">/resume</a> · PDF at{" "}
+        <a href="/api/v1/resume/pdf">/api/v1/resume/pdf</a>
+      </p>
+      {msg && <div className="admin-msg admin-msg--ok">{msg}</div>}
+      {err && <div className="admin-msg admin-msg--err">{err}</div>}
+
+      <form className="admin-form admin-form--wide" onSubmit={save}>
+        <div className="field">
+          <label>Full name</label>
+          <input
+            required
+            value={form.fullName}
+            onChange={(e) => setForm({ ...form, fullName: e.target.value })}
+          />
+        </div>
+        <div className="field">
+          <label>Title</label>
+          <input value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
+        </div>
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
+          <div className="field">
+            <label>Email</label>
+            <input
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+            />
+          </div>
+          <div className="field">
+            <label>Phone</label>
+            <input
+              value={form.phone}
+              onChange={(e) => setForm({ ...form, phone: e.target.value })}
+            />
+          </div>
+          <div className="field">
+            <label>Location</label>
+            <input
+              value={form.location}
+              onChange={(e) => setForm({ ...form, location: e.target.value })}
+            />
+          </div>
+          <div className="field">
+            <label>Website</label>
+            <input
+              value={form.website}
+              onChange={(e) => setForm({ ...form, website: e.target.value })}
+            />
+          </div>
+        </div>
+        <div className="field">
+          <label>Summary</label>
+          <textarea
+            rows={4}
+            value={form.summary}
+            onChange={(e) => setForm({ ...form, summary: e.target.value })}
+          />
+        </div>
+        <div className="field">
+          <label>Sections (JSON)</label>
+          <textarea
+            rows={16}
+            style={{ fontFamily: "ui-monospace, monospace", fontSize: 13 }}
+            value={form.sectionsJson}
+            onChange={(e) => setForm({ ...form, sectionsJson: e.target.value })}
+          />
+        </div>
+        <div className="field">
+          <label>Optional HTML override (replaces structured layout when set)</label>
+          <textarea
+            rows={6}
+            value={form.htmlContent}
+            onChange={(e) => setForm({ ...form, htmlContent: e.target.value })}
+          />
+        </div>
+        <button type="submit" className="btn btn--primary">
+          Save resume
+        </button>
+      </form>
+    </div>
+  );
+}

client/src/pages/admin/AdminSettings.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import { api } from "../../lib/api";
+
+export function AdminSettings() {
+  const [json, setJson] = useState("{}");
+  const [msg, setMsg] = useState<string | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.adminSettings().then((s) => {
+      setJson(JSON.stringify((s as { site?: unknown }).site ?? s.site ?? s, null, 2));
+    }).catch(async () => {
+      const site = await api.site();
+      setJson(JSON.stringify(site, null, 2));
+    });
+  }, []);
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault();
+    setErr(null);
+    setMsg(null);
+    try {
+      const body = JSON.parse(json);
+      await api.saveSiteSettings(body);
+      setMsg("Settings saved");
+    } catch (e) {
+      setErr((e as Error).message);
+    }
+  }
+
+  return (
+    <div className="admin-page">
+      <h1>Site settings</h1>
+      <p className="admin-page__sub">Hero text, about blurb, and social links.</p>
+      {msg && <div className="admin-msg admin-msg--ok">{msg}</div>}
+      {err && <div className="admin-msg admin-msg--err">{err}</div>}
+      <form className="admin-form admin-form--wide" onSubmit={save}>
+        <div className="field">
+          <label>Site JSON</label>
+          <textarea
+            rows={20}
+            style={{ fontFamily: "ui-monospace, monospace", fontSize: 13 }}
+            value={json}
+            onChange={(e) => setJson(e.target.value)}
+          />
+        </div>
+        <button type="submit" className="btn btn--primary">
+          Save
+        </button>
+      </form>
+    </div>
+  );
+}

client/src/pages/admin/AdminViews.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useState } from "react";
+import { api, type Category, type PortfolioView } from "../../lib/api";
+
+export function AdminViews() {
+  const [views, setViews] = useState<PortfolioView[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [description, setDescription] = useState("");
+  const [selected, setSelected] = useState<string[]>([]);
+  const [msg, setMsg] = useState<string | null>(null);
+
+  function load() {
+    api.adminViews().then(setViews);
+    api.adminCategories().then(setCategories);
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  async function create(e: React.FormEvent) {
+    e.preventDefault();
+    await api.createView({
+      name,
+      slug: slug || undefined,
+      description,
+      showOthers: true,
+      categories: selected.map((categoryId, priority) => ({ categoryId, priority })),
+    });
+    setName("");
+    setSlug("");
+    setDescription("");
+    setSelected([]);
+    setMsg("View created");
+    load();
+  }
+
+  async function remove(id: string, n: string) {
+    if (!confirm(`Delete view “${n}”?`)) return;
+    await api.deleteView(id);
+    load();
+  }
+
+  function toggleCat(id: string) {
+    setSelected((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    );
+  }
+
+  function move(id: string, dir: -1 | 1) {
+    setSelected((prev) => {
+      const i = prev.indexOf(id);
+      if (i < 0) return prev;
+      const j = i + dir;
+      if (j < 0 || j >= prev.length) return prev;
+      const next = [...prev];
+      [next[i], next[j]] = [next[j], next[i]];
+      return next;
+    });
+  }
+
+  return (
+    <div className="admin-page">
+      <h1>Portfolio views</h1>
+      <p className="admin-page__sub">
+        Human-readable URLs like <code>/portfolio/game-dev</code> that prioritize categories for
+        different audiences.
+      </p>
+      {msg && <div className="admin-msg admin-msg--ok">{msg}</div>}
+
+      <form className="admin-form" onSubmit={create}>
+        <div className="field">
+          <label>Name</label>
+          <input required value={name} onChange={(e) => setName(e.target.value)} />
+        </div>
+        <div className="field">
+          <label>Slug (URL path)</label>
+          <input
+            placeholder="game-dev"
+            value={slug}
+            onChange={(e) => setSlug(e.target.value)}
+          />
+        </div>
+        <div className="field">
+          <label>Description</label>
+          <textarea value={description} onChange={(e) => setDescription(e.target.value)} />
+        </div>
+        <div className="field">
+          <label>Category priority order (select, then reorder)</label>
+          <div className="admin-check-grid">
+            {categories.map((c) => (
+              <label key={c.id}>
+                <input
+                  type="checkbox"
+                  checked={selected.includes(c.id)}
+                  onChange={() => toggleCat(c.id)}
+                />
+                {c.name}
+              </label>
+            ))}
+          </div>
+          {selected.length > 0 && (
+            <ol style={{ color: "var(--text-muted)" }}>
+              {selected.map((id) => {
+                const c = categories.find((x) => x.id === id);
+                return (
+                  <li key={id} style={{ marginBottom: 6 }}>
+                    {c?.name}{" "}
+                    <button type="button" className="btn btn--ghost btn--sm" onClick={() => move(id, -1)}>
+                      ↑
+                    </button>
+                    <button type="button" className="btn btn--ghost btn--sm" onClick={() => move(id, 1)}>
+                      ↓
+                    </button>
+                  </li>
+                );
+              })}
+            </ol>
+          )}
+        </div>
+        <button type="submit" className="btn btn--primary">
+          Create view
+        </button>
+      </form>
+
+      <h2 style={{ fontSize: "1rem", marginTop: "2.5rem" }}>Existing views</h2>
+      <table className="admin-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>URL</th>
+            <th>Category order</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {views.map((v) => (
+            <tr key={v.id}>
+              <td>{v.name}</td>
+              <td>
+                <a href={`/portfolio/${v.slug}`} target="_blank" rel="noreferrer">
+                  /portfolio/{v.slug}
+                </a>
+              </td>
+              <td style={{ fontSize: "0.85rem", color: "var(--text-dim)" }}>
+                {(v.categoryPriorities || [])
+                  .map((cp) => cp.category?.name)
+                  .filter(Boolean)
+                  .join(" → ") || "—"}
+              </td>
+              <td>
+                <button
+                  type="button"
+                  className="btn btn--danger btn--sm"
+                  onClick={() => remove(v.id, v.name)}
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

client/src/styles/global.scss

@@ -0,0 +1,233 @@
+:root {
+  --bg: #0a0a0b;
+  --bg-elevated: #121214;
+  --bg-card: #161618;
+  --bg-hover: #1c1c1f;
+  --border: rgba(255, 255, 255, 0.08);
+  --border-strong: rgba(255, 255, 255, 0.14);
+  --text: #f4f4f5;
+  --text-muted: #a1a1aa;
+  --text-dim: #71717a;
+  --accent: #c9a87c;
+  --accent-soft: rgba(201, 168, 124, 0.15);
+  --accent-hover: #dbb98e;
+  --danger: #f87171;
+  --success: #4ade80;
+  --radius: 12px;
+  --radius-sm: 8px;
+  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
+  --font-serif: "Instrument Serif", Georgia, serif;
+  --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+  --header-h: 72px;
+  --max: 1280px;
+  color-scheme: dark;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img,
+video {
+  max-width: 100%;
+  display: block;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  line-height: 1.2;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+.container {
+  width: min(100% - 2.5rem, var(--max));
+  margin-inline: auto;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+// Buttons
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1.25rem;
+  border-radius: 999px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
+  border: 1px solid transparent;
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &--primary {
+    background: var(--accent);
+    color: #0a0a0b;
+    &:hover {
+      background: var(--accent-hover);
+    }
+  }
+
+  &--ghost {
+    border-color: var(--border-strong);
+    color: var(--text);
+    &:hover {
+      background: var(--bg-hover);
+      border-color: var(--text-dim);
+    }
+  }
+
+  &--danger {
+    background: rgba(248, 113, 113, 0.15);
+    color: var(--danger);
+    border-color: rgba(248, 113, 113, 0.3);
+  }
+
+  &--sm {
+    padding: 0.4rem 0.85rem;
+    font-size: 0.8rem;
+  }
+}
+
+// Forms
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-bottom: 1rem;
+
+  label {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  input,
+  select,
+  textarea {
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 0.7rem 0.9rem;
+    outline: none;
+    transition: border-color 0.15s;
+
+    &:focus {
+      border-color: var(--accent);
+    }
+  }
+
+  textarea {
+    min-height: 120px;
+    resize: vertical;
+  }
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  background: var(--accent-soft);
+  color: var(--accent);
+  border: 1px solid rgba(201, 168, 124, 0.25);
+}
+
+.page-enter {
+  animation: fadeUp 0.45s ease both;
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+// Focus visible for a11y
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+// Scrollbar
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+::-webkit-scrollbar-thumb {
+  background: #2a2a2e;
+  border-radius: 999px;
+  border: 2px solid var(--bg);
+}

client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

client/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": { "@/*": ["src/*"] }
+  },
+  "include": ["src"]
+}

client/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "node:path";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: { "@": path.resolve(__dirname, "src") },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": "http://localhost:3000",
+      "/uploads": "http://localhost:3000",
+      "/.well-known": "http://localhost:3000",
+    },
+  },
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+    sourcemap: true,
+  },
+});

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "jmartgraphix-com",
+  "version": "1.0.0",
+  "private": true,
+  "description": "jmartgraphix portfolio CMS — Fastify API + Vite SPA",
+  "workspaces": [
+    "server",
+    "client"
+  ],
+  "scripts": {
+    "dev": "concurrently -n server,client -c blue,green \"npm run dev -w server\" \"npm run dev -w client\"",
+    "build": "npm run build -w client && npm run build -w server",
+    "start": "npm run start -w server",
+    "db:generate": "npm run db:generate -w server",
+    "db:migrate": "npm run db:migrate -w server",
+    "db:seed": "npm run db:seed -w server",
+    "import:artstation": "npm run import:artstation -w server"
+  },
+  "devDependencies": {
+    "concurrently": "^9.1.2"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

public/.well-known/matrix/client

@@ -0,0 +1,14 @@
+{
+  "m.homeserver": {
+    "base_url": "https://synapse.jmartgraphix.com"
+  },
+  "m.identity_server": {
+    "base_url": "https://vector.im"
+  },
+  "org.matrix.msc4143.rtc_foci": [
+    {
+      "livekit_service_url": "https://synapse.jmartgraphix.com",
+      "type": "livekit"
+    }
+  ]
+}

public/.well-known/matrix/server

@@ -0,0 +1,3 @@
+{
+    "m.server": "synapse.jmartgraphix.com:443"
+}

public/.well-known/webfinger

@@ -0,0 +1,9 @@
+{
+    "subject": "acct:jmartgraphix.com",
+    "links": [
+      {
+        "rel": "http://openid.net/specs/connect/1.0/issuer",
+        "href": "https://auth.jmartgraphix.com"
+      }
+    ]
+  }

server/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "tsc && cp -r src/openapi dist/openapi 2>/dev/null || true",
+    "start": "node dist/index.js",
+    "db:generate": "prisma generate",
+    "db:migrate": "prisma migrate deploy && prisma db seed",
+    "db:migrate:dev": "prisma migrate dev",
+    "db:seed": "tsx prisma/seed.ts",
+    "db:push": "prisma db push",
+    "import:artstation": "tsx scripts/import-artstation.ts"
+  },
+  "prisma": {
+    "seed": "tsx prisma/seed.ts"
+  },
+  "dependencies": {
+    "@fastify/cors": "^10.0.2",
+    "@fastify/multipart": "^9.0.3",
+    "@fastify/static": "^8.1.0",
+    "@fastify/swagger": "^9.4.2",
+    "@fastify/swagger-ui": "^5.2.2",
+    "@prisma/client": "^6.5.0",
+    "dotenv": "^16.4.7",
+    "fastify": "^5.2.1",
+    "fastify-plugin": "^5.0.1",
+    "fastify-type-provider-zod": "^4.0.2",
+    "puppeteer": "^24.4.0",
+    "sharp": "^0.33.5",
+    "slugify": "^1.6.6",
+    "typesense": "^2.0.3",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.10",
+    "prisma": "^6.5.0",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.2"
+  }
+}

server/prisma/migrations/20260723100000_init/migration.sql

@@ -0,0 +1,168 @@
+-- CreateEnum
+CREATE TYPE "Visibility" AS ENUM ('published', 'draft', 'private');
+
+-- CreateEnum
+CREATE TYPE "MediaType" AS ENUM ('image', 'video', 'external');
+
+-- CreateEnum
+CREATE TYPE "VideoSource" AS ENUM ('youtube', 'vimeo', 'self_hosted', 'external');
+
+-- CreateTable
+CREATE TABLE "categories" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "description" TEXT,
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "categories_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "tags" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "tags_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "projects" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "description" TEXT NOT NULL DEFAULT '',
+    "short_description" TEXT,
+    "date" DATE,
+    "software" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "external_links" JSONB NOT NULL DEFAULT '[]',
+    "featured" BOOLEAN NOT NULL DEFAULT false,
+    "display_priority" INTEGER NOT NULL DEFAULT 0,
+    "visibility" "Visibility" NOT NULL DEFAULT 'draft',
+    "thumbnail_id" TEXT,
+    "source_url" TEXT,
+    "source_platform" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+    "published_at" TIMESTAMP(3),
+
+    CONSTRAINT "projects_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "project_categories" (
+    "project_id" TEXT NOT NULL,
+    "category_id" TEXT NOT NULL,
+
+    CONSTRAINT "project_categories_pkey" PRIMARY KEY ("project_id","category_id")
+);
+
+-- CreateTable
+CREATE TABLE "project_tags" (
+    "project_id" TEXT NOT NULL,
+    "tag_id" TEXT NOT NULL,
+
+    CONSTRAINT "project_tags_pkey" PRIMARY KEY ("project_id","tag_id")
+);
+
+-- CreateTable
+CREATE TABLE "media" (
+    "id" TEXT NOT NULL,
+    "project_id" TEXT,
+    "type" "MediaType" NOT NULL DEFAULT 'image',
+    "url" TEXT NOT NULL,
+    "thumbnail_url" TEXT,
+    "filename" TEXT,
+    "mime_type" TEXT,
+    "width" INTEGER,
+    "height" INTEGER,
+    "size_bytes" INTEGER,
+    "alt" TEXT,
+    "caption" TEXT,
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "video_source" "VideoSource",
+    "video_id" TEXT,
+    "external_url" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "media_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "portfolio_views" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "description" TEXT,
+    "default_sort" TEXT NOT NULL DEFAULT 'priority',
+    "show_others" BOOLEAN NOT NULL DEFAULT true,
+    "is_active" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "portfolio_views_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "portfolio_view_categories" (
+    "view_id" TEXT NOT NULL,
+    "category_id" TEXT NOT NULL,
+    "priority" INTEGER NOT NULL DEFAULT 0,
+
+    CONSTRAINT "portfolio_view_categories_pkey" PRIMARY KEY ("view_id","category_id")
+);
+
+-- CreateTable
+CREATE TABLE "resumes" (
+    "id" TEXT NOT NULL,
+    "is_active" BOOLEAN NOT NULL DEFAULT true,
+    "full_name" TEXT NOT NULL,
+    "title" TEXT NOT NULL DEFAULT '',
+    "email" TEXT,
+    "phone" TEXT,
+    "location" TEXT,
+    "website" TEXT,
+    "summary" TEXT NOT NULL DEFAULT '',
+    "sections" JSONB NOT NULL DEFAULT '[]',
+    "html_content" TEXT,
+    "theme" TEXT NOT NULL DEFAULT 'dark',
+    "updated_at" TIMESTAMP(3) NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "resumes_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "site_settings" (
+    "key" TEXT NOT NULL,
+    "value" JSONB NOT NULL,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "site_settings_pkey" PRIMARY KEY ("key")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "categories_name_key" ON "categories"("name");
+CREATE UNIQUE INDEX "categories_slug_key" ON "categories"("slug");
+CREATE UNIQUE INDEX "tags_name_key" ON "tags"("name");
+CREATE UNIQUE INDEX "tags_slug_key" ON "tags"("slug");
+CREATE UNIQUE INDEX "projects_slug_key" ON "projects"("slug");
+CREATE INDEX "projects_visibility_display_priority_idx" ON "projects"("visibility", "display_priority");
+CREATE INDEX "projects_featured_idx" ON "projects"("featured");
+CREATE INDEX "projects_date_idx" ON "projects"("date");
+CREATE INDEX "media_project_id_sort_order_idx" ON "media"("project_id", "sort_order");
+CREATE UNIQUE INDEX "portfolio_views_slug_key" ON "portfolio_views"("slug");
+
+-- AddForeignKeys
+ALTER TABLE "project_categories" ADD CONSTRAINT "project_categories_project_id_fkey" FOREIGN KEY ("project_id") REFERENCES "projects"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "project_categories" ADD CONSTRAINT "project_categories_category_id_fkey" FOREIGN KEY ("category_id") REFERENCES "categories"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "project_tags" ADD CONSTRAINT "project_tags_project_id_fkey" FOREIGN KEY ("project_id") REFERENCES "projects"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "project_tags" ADD CONSTRAINT "project_tags_tag_id_fkey" FOREIGN KEY ("tag_id") REFERENCES "tags"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "media" ADD CONSTRAINT "media_project_id_fkey" FOREIGN KEY ("project_id") REFERENCES "projects"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "projects" ADD CONSTRAINT "projects_thumbnail_id_fkey" FOREIGN KEY ("thumbnail_id") REFERENCES "media"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+ALTER TABLE "portfolio_view_categories" ADD CONSTRAINT "portfolio_view_categories_view_id_fkey" FOREIGN KEY ("view_id") REFERENCES "portfolio_views"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "portfolio_view_categories" ADD CONSTRAINT "portfolio_view_categories_category_id_fkey" FOREIGN KEY ("category_id") REFERENCES "categories"("id") ON DELETE CASCADE ON UPDATE CASCADE;

server/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

server/prisma/schema.prisma

@@ -0,0 +1,192 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+enum Visibility {
+  published
+  draft
+  private
+}
+
+enum MediaType {
+  image
+  video
+  external
+}
+
+enum VideoSource {
+  youtube
+  vimeo
+  self_hosted
+  external
+}
+
+model Category {
+  id          String   @id @default(cuid())
+  name        String   @unique
+  slug        String   @unique
+  description String?
+  sortOrder   Int      @default(0) @map("sort_order")
+  createdAt   DateTime @default(now()) @map("created_at")
+  updatedAt   DateTime @updatedAt @map("updated_at")
+
+  projects ProjectCategory[]
+  viewPriorities PortfolioViewCategory[]
+
+  @@map("categories")
+}
+
+model Tag {
+  id        String   @id @default(cuid())
+  name      String   @unique
+  slug      String   @unique
+  createdAt DateTime @default(now()) @map("created_at")
+
+  projects ProjectTag[]
+
+  @@map("tags")
+}
+
+model Project {
+  id              String     @id @default(cuid())
+  title           String
+  slug            String     @unique
+  description     String     @default("")
+  shortDescription String?   @map("short_description")
+  date            DateTime?  @db.Date
+  software        String[]   @default([])
+  externalLinks   Json       @default("[]") @map("external_links")
+  featured        Boolean    @default(false)
+  displayPriority Int        @default(0) @map("display_priority")
+  visibility      Visibility @default(draft)
+  thumbnailId     String?    @map("thumbnail_id")
+  sourceUrl       String?    @map("source_url")
+  sourcePlatform  String?    @map("source_platform")
+  createdAt       DateTime   @default(now()) @map("created_at")
+  updatedAt       DateTime   @updatedAt @map("updated_at")
+  publishedAt     DateTime?  @map("published_at")
+
+  thumbnail Media?           @relation("ProjectThumbnail", fields: [thumbnailId], references: [id], onDelete: SetNull)
+  media     Media[]          @relation("ProjectMedia")
+  categories ProjectCategory[]
+  tags      ProjectTag[]
+
+  @@index([visibility, displayPriority])
+  @@index([featured])
+  @@index([date])
+  @@map("projects")
+}
+
+model ProjectCategory {
+  projectId  String @map("project_id")
+  categoryId String @map("category_id")
+
+  project  Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
+  category Category @relation(fields: [categoryId], references: [id], onDelete: Cascade)
+
+  @@id([projectId, categoryId])
+  @@map("project_categories")
+}
+
+model ProjectTag {
+  projectId String @map("project_id")
+  tagId     String @map("tag_id")
+
+  project Project @relation(fields: [projectId], references: [id], onDelete: Cascade)
+  tag     Tag     @relation(fields: [tagId], references: [id], onDelete: Cascade)
+
+  @@id([projectId, tagId])
+  @@map("project_tags")
+}
+
+model Media {
+  id            String      @id @default(cuid())
+  projectId     String?     @map("project_id")
+  type          MediaType   @default(image)
+  url           String
+  thumbnailUrl  String?     @map("thumbnail_url")
+  filename      String?
+  mimeType      String?     @map("mime_type")
+  width         Int?
+  height        Int?
+  sizeBytes     Int?        @map("size_bytes")
+  alt           String?
+  caption       String?
+  sortOrder     Int         @default(0) @map("sort_order")
+  videoSource   VideoSource? @map("video_source")
+  videoId       String?     @map("video_id")
+  externalUrl   String?     @map("external_url")
+  createdAt     DateTime    @default(now()) @map("created_at")
+
+  project           Project?  @relation("ProjectMedia", fields: [projectId], references: [id], onDelete: Cascade)
+  thumbnailFor      Project[] @relation("ProjectThumbnail")
+
+  @@index([projectId, sortOrder])
+  @@map("media")
+}
+
+/// Named portfolio landing experiences e.g. game-dev, engineering
+model PortfolioView {
+  id          String   @id @default(cuid())
+  name        String
+  slug        String   @unique
+  description String?
+  /// Default sort when no category match: priority | date | title
+  defaultSort String   @default("priority") @map("default_sort")
+  /// Show projects outside configured categories after prioritized ones
+  showOthers  Boolean  @default(true) @map("show_others")
+  isActive    Boolean  @default(true) @map("is_active")
+  createdAt   DateTime @default(now()) @map("created_at")
+  updatedAt   DateTime @updatedAt @map("updated_at")
+
+  categoryPriorities PortfolioViewCategory[]
+
+  @@map("portfolio_views")
+}
+
+model PortfolioViewCategory {
+  viewId     String @map("view_id")
+  categoryId String @map("category_id")
+  priority   Int    @default(0)
+
+  view     PortfolioView @relation(fields: [viewId], references: [id], onDelete: Cascade)
+  category Category      @relation(fields: [categoryId], references: [id], onDelete: Cascade)
+
+  @@id([viewId, categoryId])
+  @@map("portfolio_view_categories")
+}
+
+model Resume {
+  id          String   @id @default(cuid())
+  /// Single active resume — only one should be isActive=true
+  isActive    Boolean  @default(true) @map("is_active")
+  fullName    String   @map("full_name")
+  title       String   @default("")
+  email       String?
+  phone       String?
+  location    String?
+  website     String?
+  summary     String   @default("")
+  /// Structured sections as JSON: experience, education, skills, etc.
+  sections    Json     @default("[]")
+  /// Optional raw HTML override for public render
+  htmlContent String?  @map("html_content") @db.Text
+  theme       String   @default("dark")
+  updatedAt   DateTime @updatedAt @map("updated_at")
+  createdAt   DateTime @default(now()) @map("created_at")
+
+  @@map("resumes")
+}
+
+model SiteSetting {
+  key       String   @id
+  value     Json
+  updatedAt DateTime @updatedAt @map("updated_at")
+
+  @@map("site_settings")
+}

server/prisma/seed.ts

@@ -0,0 +1,213 @@
+import { PrismaClient } from "@prisma/client";
+import slugify from "slugify";
+
+const prisma = new PrismaClient();
+
+const CATEGORIES = [
+  "3D Modeling",
+  "3D Animation",
+  "CAD",
+  "3D Sculpting",
+  "AI Generated Content",
+  "Video",
+  "Photography",
+  "Graphic Design",
+  "Illustration",
+];
+
+function slug(s: string) {
+  return slugify(s, { lower: true, strict: true });
+}
+
+async function main() {
+  console.log("Seeding categories…");
+  for (let i = 0; i < CATEGORIES.length; i++) {
+    const name = CATEGORIES[i];
+    await prisma.category.upsert({
+      where: { slug: slug(name) },
+      create: { name, slug: slug(name), sortOrder: i },
+      update: { name, sortOrder: i },
+    });
+  }
+
+  // Convenience slugs for URL filters (/portfolio/3d, /portfolio/ai, etc.)
+  const aliases: Record<string, string> = {
+    "3d-modeling": "3d",
+    "3d-animation": "animation",
+    "ai-generated-content": "ai",
+    "graphic-design": "design",
+  };
+  // We keep canonical slugs; PortfolioView can use short names
+
+  console.log("Seeding default portfolio views…");
+  const cats = await prisma.category.findMany();
+  const bySlug = Object.fromEntries(cats.map((c) => [c.slug, c]));
+
+  async function upsertView(
+    name: string,
+    viewSlug: string,
+    description: string,
+    orderedSlugs: string[]
+  ) {
+    const view = await prisma.portfolioView.upsert({
+      where: { slug: viewSlug },
+      create: { name, slug: viewSlug, description, showOthers: true },
+      update: { name, description },
+    });
+    await prisma.portfolioViewCategory.deleteMany({ where: { viewId: view.id } });
+    for (let i = 0; i < orderedSlugs.length; i++) {
+      const cat = bySlug[orderedSlugs[i]];
+      if (!cat) continue;
+      await prisma.portfolioViewCategory.create({
+        data: { viewId: view.id, categoryId: cat.id, priority: i },
+      });
+    }
+  }
+
+  await upsertView(
+    "Game Development",
+    "game-dev",
+    "Work prioritized for game studios and interactive media.",
+    ["3d-animation", "3d-modeling", "3d-sculpting", "ai-generated-content", "cad"]
+  );
+  await upsertView(
+    "Engineering",
+    "engineering",
+    "Work prioritized for engineering and product teams.",
+    ["cad", "3d-modeling", "illustration", "graphic-design"]
+  );
+  await upsertView(
+    "3D",
+    "3d",
+    "All 3D work front and center.",
+    ["3d-modeling", "3d-animation", "3d-sculpting", "cad"]
+  );
+  await upsertView("Animation", "animation", "Animation-focused portfolio.", [
+    "3d-animation",
+    "video",
+  ]);
+  await upsertView("CAD", "cad", "CAD and technical design.", ["cad", "3d-modeling"]);
+  await upsertView("AI", "ai", "AI-generated creative work.", [
+    "ai-generated-content",
+    "illustration",
+    "graphic-design",
+  ]);
+
+  // Shorter category filter aliases as views that just prioritize that category
+  for (const [canonical, short] of Object.entries(aliases)) {
+    if (short === "3d" || short === "animation" || short === "ai") continue;
+    await upsertView(bySlug[canonical]?.name ?? short, short, `Filter: ${short}`, [
+      canonical,
+    ]);
+  }
+
+  const existingResume = await prisma.resume.findFirst({ where: { isActive: true } });
+  if (!existingResume) {
+    console.log("Seeding sample resume…");
+    await prisma.resume.create({
+      data: {
+        isActive: true,
+        fullName: "J. Martin",
+        title: "3D Artist · Designer · Creative Technologist",
+        email: "contact@jmartgraphix.com",
+        website: "https://jmartgraphix.com",
+        location: "United States",
+        summary:
+          "Creative professional specializing in 3D modeling, CAD, animation, and visual design. Building polished digital experiences and production-ready assets for games, product visualization, and media.",
+        sections: [
+          {
+            type: "experience",
+            title: "Experience",
+            items: [
+              {
+                title: "Independent Creative / jmartgraphix",
+                organization: "Freelance",
+                location: "Remote",
+                startDate: "2018",
+                endDate: "Present",
+                description:
+                  "Delivered 3D models, animations, CAD designs, and graphic work for clients across game development, product design, and marketing.",
+                highlights: [
+                  "End-to-end 3D pipeline: modeling, sculpting, texturing, rendering",
+                  "CAD and product visualization for engineering collaborators",
+                  "Motion graphics and short-form video production",
+                ],
+              },
+            ],
+          },
+          {
+            type: "skills",
+            title: "Software & Tools",
+            items: [
+              {
+                group: "3D & CAD",
+                skills: [
+                  "Blender",
+                  "Maya",
+                  "ZBrush",
+                  "SolidWorks",
+                  "Fusion 360",
+                  "Substance Painter",
+                ],
+              },
+              {
+                group: "Design & Video",
+                skills: [
+                  "Photoshop",
+                  "Illustrator",
+                  "After Effects",
+                  "Premiere Pro",
+                  "DaVinci Resolve",
+                ],
+              },
+              {
+                group: "Other",
+                skills: ["AI image/video tools", "Git", "Web (HTML/CSS)"],
+              },
+            ],
+          },
+          {
+            type: "links",
+            title: "Links",
+            items: [
+              { label: "Portfolio", url: "https://jmartgraphix.com" },
+              { label: "ArtStation", url: "https://jmartgraphix.artstation.com/" },
+              { label: "YouTube", url: "https://www.youtube.com/@samuraijkm" },
+              { label: "Vimeo", url: "https://vimeo.com/jmartgraphix" },
+            ],
+          },
+        ],
+      },
+    });
+  }
+
+  await prisma.siteSetting.upsert({
+    where: { key: "site" },
+    create: {
+      key: "site",
+      value: {
+        name: "jmartgraphix",
+        tagline: "Creative Professional Portfolio",
+        about:
+          "I create 3D art, technical design, animation, and visual media — from concept through polished delivery.",
+        social: {
+          artstation: "https://jmartgraphix.artstation.com/",
+          youtube: "https://www.youtube.com/@samuraijkm",
+          vimeo: "https://vimeo.com/jmartgraphix",
+        },
+        heroTitle: "jmartgraphix",
+        heroSubtitle: "3D · Design · Motion · Craft",
+      },
+    },
+    update: {},
+  });
+
+  console.log("Seed complete.");
+}
+
+main()
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(() => prisma.$disconnect());

server/scripts/import-artstation.ts

@@ -0,0 +1,298 @@
+/**
+ * ArtStation project importer for jmartgraphix portfolio.
+ *
+ * Usage:
+ *   npm run import:artstation -- --user jmartgraphix
+ *   npm run import:artstation -- --user jmartgraphix --dry-run
+ *   npm run import:artstation -- --url https://www.artstation.com/artwork/XXXX
+ *
+ * Fetches public ArtStation JSON endpoints, downloads images, and creates
+ * draft projects so you can edit/publish from the admin panel afterward.
+ */
+import "dotenv/config";
+import { PrismaClient, Visibility } from "@prisma/client";
+import slugify from "slugify";
+import { downloadRemoteImage } from "../src/lib/media.js";
+
+const prisma = new PrismaClient();
+const USER_AGENT =
+  "Mozilla/5.0 (compatible; jmartgraphix-importer/1.0; +https://jmartgraphix.com)";
+
+function arg(name: string, fallback?: string): string | undefined {
+  const idx = process.argv.indexOf(`--${name}`);
+  if (idx >= 0 && process.argv[idx + 1]) return process.argv[idx + 1];
+  return fallback;
+}
+
+function hasFlag(name: string): boolean {
+  return process.argv.includes(`--${name}`);
+}
+
+async function fetchJson<T>(url: string): Promise<T> {
+  const res = await fetch(url, {
+    headers: { "User-Agent": USER_AGENT, Accept: "application/json" },
+    signal: AbortSignal.timeout(30_000),
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status} for ${url}`);
+  return res.json() as Promise<T>;
+}
+
+interface AsProjectListItem {
+  id: number;
+  title: string;
+  hash_id?: string;
+  permalink?: string;
+  cover?: { url?: string; small_square_url?: string };
+  mediums?: { name: string }[];
+  categories?: { name: string }[];
+  published_at?: string;
+}
+
+interface AsProjectDetail {
+  id: number;
+  title: string;
+  description?: string;
+  hash_id?: string;
+  permalink?: string;
+  published_at?: string;
+  tags?: string[];
+  mediums?: { name: string }[];
+  categories?: { name: string }[];
+  software_items?: { name: string }[];
+  assets?: {
+    id: number;
+    title?: string;
+    asset_type?: string;
+    image_url?: string;
+    has_image?: boolean;
+    width?: number;
+    height?: number;
+  }[];
+  cover?: { url?: string };
+  user?: { full_name?: string; username?: string };
+}
+
+// Map ArtStation medium/category names to our category slugs
+const CATEGORY_MAP: Record<string, string> = {
+  "3d": "3d-modeling",
+  "3d modeling": "3d-modeling",
+  modeling: "3d-modeling",
+  characters: "3d-modeling",
+  environments: "3d-modeling",
+  animation: "3d-animation",
+  "3d animation": "3d-animation",
+  cad: "cad",
+  product: "cad",
+  industrial: "cad",
+  sculpting: "3d-sculpting",
+  "digital sculpting": "3d-sculpting",
+  ai: "ai-generated-content",
+  "ai art": "ai-generated-content",
+  video: "video",
+  cinematography: "video",
+  photography: "photography",
+  "graphic design": "graphic-design",
+  design: "graphic-design",
+  illustration: "illustration",
+  concept: "illustration",
+};
+
+async function resolveCategoryIds(names: string[]): Promise<string[]> {
+  const all = await prisma.category.findMany();
+  const bySlug = Object.fromEntries(all.map((c) => [c.slug, c.id]));
+  const ids = new Set<string>();
+  for (const n of names) {
+    const key = n.toLowerCase().trim();
+    const mapped = CATEGORY_MAP[key];
+    if (mapped && bySlug[mapped]) ids.add(bySlug[mapped]);
+    const direct = all.find((c) => c.name.toLowerCase() === key || c.slug === slugify(key, { lower: true, strict: true }));
+    if (direct) ids.add(direct.id);
+  }
+  return [...ids];
+}
+
+async function uniqueSlug(title: string): Promise<string> {
+  const base = slugify(title, { lower: true, strict: true }) || "artwork";
+  let slug = base;
+  let n = 2;
+  while (await prisma.project.findUnique({ where: { slug } })) {
+    slug = `${base}-${n++}`;
+  }
+  return slug;
+}
+
+async function importProject(hashOrUrl: string, dryRun: boolean): Promise<void> {
+  let hash = hashOrUrl;
+  const m = hashOrUrl.match(/artstation\.com\/artwork\/([A-Za-z0-9]+)/);
+  if (m) hash = m[1];
+
+  const detail = await fetchJson<AsProjectDetail>(
+    `https://www.artstation.com/projects/${hash}.json`
+  );
+
+  const sourceUrl =
+    detail.permalink || `https://www.artstation.com/artwork/${detail.hash_id || hash}`;
+  const existing = await prisma.project.findFirst({
+    where: { sourceUrl },
+  });
+  if (existing) {
+    console.log(`  skip (exists): ${detail.title}`);
+    return;
+  }
+
+  const mediums = (detail.mediums || []).map((m) => m.name);
+  const cats = (detail.categories || []).map((c) => c.name);
+  const software = (detail.software_items || []).map((s) => s.name);
+  const tags = detail.tags || [];
+  const categoryIds = await resolveCategoryIds([...mediums, ...cats]);
+
+  console.log(`  import: ${detail.title} (${(detail.assets || []).length} assets)`);
+  if (dryRun) return;
+
+  const slug = await uniqueSlug(detail.title);
+  const project = await prisma.project.create({
+    data: {
+      title: detail.title,
+      slug,
+      description: stripHtml(detail.description || ""),
+      shortDescription: stripHtml(detail.description || "").slice(0, 280) || null,
+      date: detail.published_at ? new Date(detail.published_at) : null,
+      software,
+      externalLinks: [{ label: "ArtStation", url: sourceUrl }],
+      featured: false,
+      displayPriority: 100,
+      visibility: Visibility.draft,
+      sourceUrl,
+      sourcePlatform: "artstation",
+    },
+  });
+
+  for (const cid of categoryIds) {
+    await prisma.projectCategory.create({
+      data: { projectId: project.id, categoryId: cid },
+    });
+  }
+
+  for (const t of tags) {
+    const tslug = slugify(t, { lower: true, strict: true });
+    if (!tslug) continue;
+    const tag = await prisma.tag.upsert({
+      where: { slug: tslug },
+      create: { name: t, slug: tslug },
+      update: {},
+    });
+    await prisma.projectTag.upsert({
+      where: { projectId_tagId: { projectId: project.id, tagId: tag.id } },
+      create: { projectId: project.id, tagId: tag.id },
+      update: {},
+    });
+  }
+
+  let sortOrder = 0;
+  let thumbnailId: string | null = null;
+  const assets = detail.assets || [];
+  for (const asset of assets) {
+    if (asset.asset_type && asset.asset_type !== "image" && !asset.has_image) continue;
+    const imageUrl = asset.image_url || detail.cover?.url;
+    if (!imageUrl) continue;
+    const saved = await downloadRemoteImage(imageUrl);
+    if (!saved) {
+      console.warn(`    failed download: ${imageUrl}`);
+      continue;
+    }
+    const media = await prisma.media.create({
+      data: {
+        projectId: project.id,
+        type: "image",
+        url: saved.url,
+        thumbnailUrl: saved.thumbnailUrl,
+        filename: saved.filename,
+        mimeType: saved.mimeType,
+        width: saved.width || asset.width,
+        height: saved.height || asset.height,
+        sizeBytes: saved.sizeBytes,
+        alt: asset.title || detail.title,
+        sortOrder: sortOrder++,
+      },
+    });
+    if (!thumbnailId) thumbnailId = media.id;
+  }
+
+  if (thumbnailId) {
+    await prisma.project.update({
+      where: { id: project.id },
+      data: { thumbnailId },
+    });
+  }
+
+  console.log(`    created draft project ${project.slug}`);
+}
+
+function stripHtml(html: string): string {
+  return html
+    .replace(/<br\s*\/?>/gi, "\n")
+    .replace(/<\/p>/gi, "\n\n")
+    .replace(/<[^>]+>/g, "")
+    .replace(/&nbsp;/g, " ")
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+async function listUserProjects(username: string): Promise<AsProjectListItem[]> {
+  const all: AsProjectListItem[] = [];
+  let page = 1;
+  for (;;) {
+    // Public profile projects endpoint
+    const url = `https://www.artstation.com/users/${username}/projects.json?page=${page}`;
+    try {
+      const data = await fetchJson<{ data?: AsProjectListItem[] } | AsProjectListItem[]>(url);
+      const batch = Array.isArray(data) ? data : data.data || [];
+      if (batch.length === 0) break;
+      all.push(...batch);
+      if (batch.length < 50) break;
+      page++;
+      if (page > 20) break;
+    } catch (err) {
+      console.error(`Failed to list page ${page}:`, err);
+      break;
+    }
+  }
+  return all;
+}
+
+async function main() {
+  const dryRun = hasFlag("dry-run");
+  const user = arg("user", "jmartgraphix")!;
+  const singleUrl = arg("url");
+
+  console.log(`ArtStation import (user=${user}, dryRun=${dryRun})`);
+
+  if (singleUrl) {
+    await importProject(singleUrl, dryRun);
+  } else {
+    const list = await listUserProjects(user);
+    console.log(`Found ${list.length} projects`);
+    for (const item of list) {
+      const hash = item.hash_id || String(item.id);
+      try {
+        await importProject(hash, dryRun);
+        await new Promise((r) => setTimeout(r, 500)); // be polite
+      } catch (err) {
+        console.error(`  error importing ${item.title}:`, err);
+      }
+    }
+  }
+
+  console.log("Done. Review drafts in the admin panel and publish when ready.");
+}
+
+main()
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(() => prisma.$disconnect());

server/src/config.ts

@@ -0,0 +1,58 @@
+import "dotenv/config";
+import path from "node:path";
+
+function env(key: string, fallback = ""): string {
+  return process.env[key] ?? fallback;
+}
+
+function envBool(key: string, fallback: boolean): boolean {
+  const v = process.env[key];
+  if (v === undefined) return fallback;
+  return ["1", "true", "yes", "on"].includes(v.toLowerCase());
+}
+
+function envInt(key: string, fallback: number): number {
+  const v = process.env[key];
+  if (!v) return fallback;
+  const n = parseInt(v, 10);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+const dbHost = env("DB_HOST", "localhost");
+const dbPort = env("DB_PORT", "5432");
+const dbName = env("DB_NAME", "jmartgraphix-com");
+const dbUser = env("DB_USER", "jmartgraphix-com");
+const dbPass = env("DB_PASS", "");
+
+export const config = {
+  nodeEnv: env("NODE_ENV", "development"),
+  isProd: env("NODE_ENV", "development") === "production",
+  host: env("HOST", "0.0.0.0"),
+  port: envInt("PORT", 3000),
+  publicUrl: env("PUBLIC_URL", "http://localhost:3000").replace(/\/$/, ""),
+  databaseUrl:
+    env("DATABASE_URL") ||
+    `postgresql://${encodeURIComponent(dbUser)}:${encodeURIComponent(dbPass)}@${dbHost}:${dbPort}/${dbName}`,
+  typesense: {
+    host: env("TYPESENSE_HOST", "localhost"),
+    port: envInt("TYPESENSE_PORT", 8108),
+    protocol: env("TYPESENSE_PROTOCOL", "http") as "http" | "https",
+    apiKey: env("TYPESENSE_API_KEY", "typesense_dev_key"),
+  },
+  imgproxy: {
+    host: env("IMGPROXY_HOST", ""),
+    key: env("IMGPROXY_KEY", ""),
+    salt: env("IMGPROXY_SALT", ""),
+  },
+  adminGroups: env("ADMIN_GROUPS", "lldap_admin,admin,portfolio_admin")
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean),
+  requireRemoteUser: envBool("REQUIRE_REMOTE_USER", true),
+  uploadDir: env("UPLOAD_DIR", path.resolve(process.cwd(), "data/uploads")),
+  maxUploadMb: envInt("MAX_UPLOAD_MB", 50),
+  siteName: env("SITE_NAME", "jmartgraphix"),
+  siteTagline: env("SITE_TAGLINE", "Creative Professional Portfolio"),
+  publicDir: env("PUBLIC_DIR", path.resolve(process.cwd(), "public")),
+  clientDist: env("CLIENT_DIST", path.resolve(process.cwd(), "public")),
+};

server/src/index.ts

@@ -0,0 +1,176 @@
+import fs from "node:fs";
+import path from "node:path";
+import Fastify from "fastify";
+import cors from "@fastify/cors";
+import multipart from "@fastify/multipart";
+import fastifyStatic from "@fastify/static";
+import swagger from "@fastify/swagger";
+import swaggerUi from "@fastify/swagger-ui";
+import { config } from "./config.js";
+import { prisma } from "./lib/prisma.js";
+import { ensureUploadDirs } from "./lib/media.js";
+import { reindexAllProjects } from "./lib/typesense.js";
+import { healthRoutes } from "./routes/health.js";
+import { publicRoutes } from "./routes/public.js";
+import { adminProjectRoutes } from "./routes/admin-projects.js";
+import { adminMetaRoutes } from "./routes/admin-meta.js";
+import { resumePdfRoutes } from "./routes/resume-pdf.js";
+
+async function waitForDb(retries = 30): Promise<void> {
+  for (let i = 0; i < retries; i++) {
+    try {
+      await prisma.$queryRaw`SELECT 1`;
+      return;
+    } catch (err) {
+      console.warn(`Database not ready (${i + 1}/${retries})…`);
+      await new Promise((r) => setTimeout(r, 2000));
+    }
+  }
+  throw new Error("Database connection failed");
+}
+
+async function runMigrations(): Promise<void> {
+  // Prefer prisma migrate deploy when migrations exist
+  const { execSync } = await import("node:child_process");
+  try {
+    execSync("npx prisma migrate deploy", {
+      stdio: "inherit",
+      env: { ...process.env, DATABASE_URL: config.databaseUrl },
+      cwd: path.resolve(import.meta.dirname, ".."),
+    });
+    console.log("Database migrations applied");
+  } catch {
+    console.warn("migrate deploy failed, falling back to db push");
+    execSync("npx prisma db push --skip-generate", {
+      stdio: "inherit",
+      env: { ...process.env, DATABASE_URL: config.databaseUrl },
+      cwd: path.resolve(import.meta.dirname, ".."),
+    });
+    console.log("Database schema pushed");
+  }
+  try {
+    execSync("npx tsx prisma/seed.ts", {
+      stdio: "inherit",
+      env: { ...process.env, DATABASE_URL: config.databaseUrl },
+      cwd: path.resolve(import.meta.dirname, ".."),
+    });
+  } catch (err) {
+    console.warn("Seed skipped or failed:", err);
+  }
+}
+
+async function main() {
+  process.env.DATABASE_URL = config.databaseUrl;
+
+  await ensureUploadDirs();
+  await waitForDb();
+  await runMigrations();
+
+  try {
+    const n = await reindexAllProjects();
+    console.log(`Typesense index ready (${n} projects)`);
+  } catch (err) {
+    console.warn("Typesense index failed (search may be degraded):", err);
+  }
+
+  const app = Fastify({
+    logger: true,
+    trustProxy: true,
+    bodyLimit: config.maxUploadMb * 1024 * 1024,
+  });
+
+  await app.register(cors, { origin: true, credentials: true });
+  await app.register(multipart, {
+    limits: { fileSize: config.maxUploadMb * 1024 * 1024 },
+  });
+
+  await app.register(swagger, {
+    openapi: {
+      info: {
+        title: "jmartgraphix Portfolio API",
+        description: "Public and admin API for the jmartgraphix portfolio CMS",
+        version: "1.0.0",
+      },
+      servers: [{ url: config.publicUrl }],
+      tags: [
+        { name: "public", description: "Public read endpoints" },
+        { name: "admin", description: "Admin endpoints (Authelia Remote-User)" },
+      ],
+    },
+  });
+  await app.register(swaggerUi, {
+    routePrefix: "/api/docs",
+    uiConfig: { docExpansion: "list" },
+  });
+
+  await healthRoutes(app);
+  await publicRoutes(app);
+  await adminProjectRoutes(app);
+  await adminMetaRoutes(app);
+  await resumePdfRoutes(app);
+
+  // Uploads
+  await app.register(fastifyStatic, {
+    root: config.uploadDir,
+    prefix: "/uploads/",
+    decorateReply: false,
+  });
+
+  // .well-known (matrix, webfinger) + built SPA
+  const publicRoot = config.clientDist;
+  if (fs.existsSync(publicRoot)) {
+    // Explicit .well-known with correct content types
+    app.get("/.well-known/*", async (req, reply) => {
+      const sub = (req.params as { "*": string })["*"];
+      const filePath = path.join(publicRoot, ".well-known", sub);
+      if (!filePath.startsWith(path.join(publicRoot, ".well-known"))) {
+        return reply.code(403).send("Forbidden");
+      }
+      try {
+        const data = await fs.promises.readFile(filePath);
+        // matrix & webfinger are JSON without extension often
+        const isJson =
+          sub.includes("webfinger") ||
+          sub.includes("matrix") ||
+          filePath.endsWith(".json");
+        return reply
+          .type(isJson ? "application/json" : "application/octet-stream")
+          .header("Access-Control-Allow-Origin", "*")
+          .send(data);
+      } catch {
+        return reply.code(404).send({ error: "Not found" });
+      }
+    });
+
+    await app.register(fastifyStatic, {
+      root: publicRoot,
+      prefix: "/",
+      wildcard: false,
+      decorateReply: false,
+    });
+
+    // SPA fallback for client routes (not API, not uploads, not well-known)
+    app.setNotFoundHandler(async (req, reply) => {
+      if (
+        req.url.startsWith("/api/") ||
+        req.url.startsWith("/uploads/") ||
+        req.url.startsWith("/.well-known/")
+      ) {
+        return reply.code(404).send({ error: "Not found" });
+      }
+      const indexPath = path.join(publicRoot, "index.html");
+      if (fs.existsSync(indexPath)) {
+        return reply.type("text/html").send(await fs.promises.readFile(indexPath, "utf8"));
+      }
+      return reply.code(404).send("Not found");
+    });
+  }
+
+  await app.listen({ host: config.host, port: config.port });
+  console.log(`Server listening on http://${config.host}:${config.port}`);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

server/src/lib/auth.ts

@@ -0,0 +1,61 @@
+import type { FastifyRequest, FastifyReply } from "fastify";
+import { config } from "../config.js";
+
+export interface AuthUser {
+  username: string;
+  name?: string;
+  email?: string;
+  groups: string[];
+}
+
+function header(req: FastifyRequest, name: string): string | undefined {
+  const v = req.headers[name.toLowerCase()];
+  if (Array.isArray(v)) return v[0];
+  return v;
+}
+
+export function getRemoteUser(req: FastifyRequest): AuthUser | null {
+  const username = header(req, "remote-user") || header(req, "Remote-User");
+  if (!username) return null;
+  const groupsRaw =
+    header(req, "remote-groups") || header(req, "Remote-Groups") || "";
+  const groups = groupsRaw
+    .split(",")
+    .map((g) => g.trim())
+    .filter(Boolean);
+  return {
+    username,
+    name: header(req, "remote-name") || header(req, "Remote-Name"),
+    email: header(req, "remote-email") || header(req, "Remote-Email"),
+    groups,
+  };
+}
+
+export function isAdminUser(user: AuthUser): boolean {
+  if (config.adminGroups.length === 0) return true;
+  return user.groups.some((g) => config.adminGroups.includes(g));
+}
+
+/** Dev bypass when REQUIRE_REMOTE_USER=false */
+export function requireAdmin(req: FastifyRequest, reply: FastifyReply): AuthUser | null {
+  const user = getRemoteUser(req);
+  if (user) {
+    if (!isAdminUser(user)) {
+      reply.code(403).send({ error: "Forbidden", message: "Insufficient group membership" });
+      return null;
+    }
+    return user;
+  }
+  if (!config.requireRemoteUser) {
+    return {
+      username: "dev-admin",
+      name: "Dev Admin",
+      groups: config.adminGroups.length ? [config.adminGroups[0]] : ["admin"],
+    };
+  }
+  reply.code(401).send({
+    error: "Unauthorized",
+    message: "Missing Remote-User header. Authenticate via Authelia SSO.",
+  });
+  return null;
+}

server/src/lib/media.ts

@@ -0,0 +1,168 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import crypto from "node:crypto";
+import sharp from "sharp";
+import { config } from "../config.js";
+
+export async function ensureUploadDirs(): Promise<void> {
+  await fs.mkdir(path.join(config.uploadDir, "originals"), { recursive: true });
+  await fs.mkdir(path.join(config.uploadDir, "thumbs"), { recursive: true });
+  await fs.mkdir(path.join(config.uploadDir, "videos"), { recursive: true });
+}
+
+function extFromMime(mime: string, originalName?: string): string {
+  const map: Record<string, string> = {
+    "image/jpeg": ".jpg",
+    "image/png": ".png",
+    "image/webp": ".webp",
+    "image/gif": ".gif",
+    "image/avif": ".avif",
+    "video/mp4": ".mp4",
+    "video/webm": ".webm",
+    "video/quicktime": ".mov",
+  };
+  if (map[mime]) return map[mime];
+  if (originalName) {
+    const e = path.extname(originalName).toLowerCase();
+    if (e) return e;
+  }
+  return ".bin";
+}
+
+export async function saveImageUpload(
+  buffer: Buffer,
+  mimeType: string,
+  originalName?: string
+): Promise<{
+  url: string;
+  thumbnailUrl: string;
+  filename: string;
+  mimeType: string;
+  width: number;
+  height: number;
+  sizeBytes: number;
+}> {
+  await ensureUploadDirs();
+  const id = crypto.randomBytes(16).toString("hex");
+  const ext = extFromMime(mimeType, originalName);
+  const filename = `${id}${ext}`;
+  const originalPath = path.join(config.uploadDir, "originals", filename);
+  const thumbName = `${id}.webp`;
+  const thumbPath = path.join(config.uploadDir, "thumbs", thumbName);
+
+  const image = sharp(buffer, { failOn: "none" });
+  const meta = await image.metadata();
+  await fs.writeFile(originalPath, buffer);
+
+  await sharp(buffer, { failOn: "none" })
+    .rotate()
+    .resize(800, 800, { fit: "inside", withoutEnlargement: true })
+    .webp({ quality: 82 })
+    .toFile(thumbPath);
+
+  return {
+    url: `/uploads/originals/${filename}`,
+    thumbnailUrl: `/uploads/thumbs/${thumbName}`,
+    filename: originalName || filename,
+    mimeType,
+    width: meta.width ?? 0,
+    height: meta.height ?? 0,
+    sizeBytes: buffer.length,
+  };
+}
+
+export async function saveVideoUpload(
+  buffer: Buffer,
+  mimeType: string,
+  originalName?: string
+): Promise<{
+  url: string;
+  filename: string;
+  mimeType: string;
+  sizeBytes: number;
+}> {
+  await ensureUploadDirs();
+  const id = crypto.randomBytes(16).toString("hex");
+  const ext = extFromMime(mimeType, originalName);
+  const filename = `${id}${ext}`;
+  const videoPath = path.join(config.uploadDir, "videos", filename);
+  await fs.writeFile(videoPath, buffer);
+  return {
+    url: `/uploads/videos/${filename}`,
+    filename: originalName || filename,
+    mimeType,
+    sizeBytes: buffer.length,
+  };
+}
+
+export async function downloadRemoteImage(url: string): Promise<{
+  url: string;
+  thumbnailUrl: string;
+  filename: string;
+  mimeType: string;
+  width: number;
+  height: number;
+  sizeBytes: number;
+} | null> {
+  try {
+    const res = await fetch(url, {
+      headers: { "User-Agent": "jmartgraphix-importer/1.0" },
+      signal: AbortSignal.timeout(60_000),
+    });
+    if (!res.ok) return null;
+    const mime = res.headers.get("content-type")?.split(";")[0] || "image/jpeg";
+    if (!mime.startsWith("image/")) return null;
+    const buf = Buffer.from(await res.arrayBuffer());
+    const name = path.basename(new URL(url).pathname) || "import.jpg";
+    return saveImageUpload(buf, mime, name);
+  } catch (err) {
+    console.warn("downloadRemoteImage failed:", url, err);
+    return null;
+  }
+}
+
+/** Parse YouTube / Vimeo URLs into embed metadata */
+export function parseVideoUrl(input: string): {
+  videoSource: "youtube" | "vimeo" | "external";
+  videoId: string | null;
+  externalUrl: string;
+  embedUrl: string | null;
+} {
+  const url = input.trim();
+  try {
+    const u = new URL(url);
+    // YouTube
+    if (u.hostname.includes("youtube.com") || u.hostname === "youtu.be") {
+      let id: string | null = null;
+      if (u.hostname === "youtu.be") id = u.pathname.slice(1).split("/")[0];
+      else if (u.pathname.startsWith("/embed/")) id = u.pathname.split("/")[2];
+      else if (u.pathname.startsWith("/shorts/")) id = u.pathname.split("/")[2];
+      else id = u.searchParams.get("v");
+      return {
+        videoSource: "youtube",
+        videoId: id,
+        externalUrl: url,
+        embedUrl: id ? `https://www.youtube.com/embed/${id}` : null,
+      };
+    }
+    // Vimeo
+    if (u.hostname.includes("vimeo.com")) {
+      const parts = u.pathname.split("/").filter(Boolean);
+      const id = parts[parts.length - 1]?.match(/^\d+$/) ? parts[parts.length - 1] : null;
+      return {
+        videoSource: "vimeo",
+        videoId: id,
+        externalUrl: url,
+        embedUrl: id ? `https://player.vimeo.com/video/${id}` : null,
+      };
+    }
+  } catch {
+    /* fallthrough */
+  }
+  return {
+    videoSource: "external",
+    videoId: null,
+    externalUrl: url,
+    embedUrl: null,
+  };
+}

server/src/lib/prisma.ts

@@ -0,0 +1,5 @@
+import { PrismaClient } from "@prisma/client";
+
+export const prisma = new PrismaClient({
+  log: process.env.NODE_ENV === "development" ? ["error", "warn"] : ["error"],
+});

server/src/lib/project-include.ts

@@ -0,0 +1,21 @@
+export const projectPublicInclude = {
+  categories: { include: { category: true } },
+  tags: { include: { tag: true } },
+  thumbnail: true,
+  media: { orderBy: { sortOrder: "asc" as const } },
+} as const;
+
+export function serializeProject<
+  T extends {
+    categories: { category: unknown }[];
+    tags: { tag: unknown }[];
+    externalLinks: unknown;
+  },
+>(p: T) {
+  return {
+    ...p,
+    categories: p.categories.map((c) => c.category),
+    tags: p.tags.map((t) => t.tag),
+    externalLinks: p.externalLinks ?? [],
+  };
+}

server/src/lib/slug.ts

@@ -0,0 +1,39 @@
+import slugify from "slugify";
+import { prisma } from "./prisma.js";
+
+export function makeSlug(input: string): string {
+  return slugify(input, { lower: true, strict: true, trim: true }) || "item";
+}
+
+export async function uniqueProjectSlug(title: string, excludeId?: string): Promise<string> {
+  const base = makeSlug(title);
+  let slug = base;
+  let n = 2;
+  for (;;) {
+    const existing = await prisma.project.findUnique({ where: { slug } });
+    if (!existing || existing.id === excludeId) return slug;
+    slug = `${base}-${n++}`;
+  }
+}
+
+export async function uniqueCategorySlug(name: string, excludeId?: string): Promise<string> {
+  const base = makeSlug(name);
+  let slug = base;
+  let n = 2;
+  for (;;) {
+    const existing = await prisma.category.findUnique({ where: { slug } });
+    if (!existing || existing.id === excludeId) return slug;
+    slug = `${base}-${n++}`;
+  }
+}
+
+export async function uniqueTagSlug(name: string, excludeId?: string): Promise<string> {
+  const base = makeSlug(name);
+  let slug = base;
+  let n = 2;
+  for (;;) {
+    const existing = await prisma.tag.findUnique({ where: { slug } });
+    if (!existing || existing.id === excludeId) return slug;
+    slug = `${base}-${n++}`;
+  }
+}

server/src/lib/typesense.ts

@@ -0,0 +1,175 @@
+import Typesense from "typesense";
+import type { Client } from "typesense";
+import { config } from "../config.js";
+import { prisma } from "./prisma.js";
+
+const COLLECTION = "projects";
+
+let client: Client | null = null;
+
+export function getTypesense(): Client {
+  if (!client) {
+    client = new Typesense.Client({
+      nodes: [
+        {
+          host: config.typesense.host,
+          port: config.typesense.port,
+          protocol: config.typesense.protocol,
+        },
+      ],
+      apiKey: config.typesense.apiKey,
+      connectionTimeoutSeconds: 5,
+    });
+  }
+  return client;
+}
+
+const schema = {
+  name: COLLECTION,
+  fields: [
+    { name: "id", type: "string" as const },
+    { name: "title", type: "string" as const },
+    { name: "slug", type: "string" as const },
+    { name: "description", type: "string" as const },
+    { name: "shortDescription", type: "string" as const, optional: true },
+    { name: "categories", type: "string[]" as const, facet: true },
+    { name: "categorySlugs", type: "string[]" as const, facet: true },
+    { name: "tags", type: "string[]" as const, facet: true },
+    { name: "software", type: "string[]" as const, facet: true },
+    { name: "featured", type: "bool" as const, facet: true },
+    { name: "visibility", type: "string" as const, facet: true },
+    { name: "displayPriority", type: "int32" as const },
+    { name: "date", type: "int64" as const, optional: true },
+  ],
+  default_sorting_field: "displayPriority",
+};
+
+export async function ensureTypesenseCollection(): Promise<void> {
+  const ts = getTypesense();
+  try {
+    await ts.collections(COLLECTION).retrieve();
+  } catch {
+    await ts.collections().create(schema);
+  }
+}
+
+function toDoc(p: {
+  id: string;
+  title: string;
+  slug: string;
+  description: string;
+  shortDescription: string | null;
+  software: string[];
+  featured: boolean;
+  visibility: string;
+  displayPriority: number;
+  date: Date | null;
+  categories: { category: { name: string; slug: string } }[];
+  tags: { tag: { name: string; slug: string } }[];
+}) {
+  return {
+    id: p.id,
+    title: p.title,
+    slug: p.slug,
+    description: p.description,
+    shortDescription: p.shortDescription ?? "",
+    categories: p.categories.map((c) => c.category.name),
+    categorySlugs: p.categories.map((c) => c.category.slug),
+    tags: p.tags.map((t) => t.tag.name),
+    software: p.software,
+    featured: p.featured,
+    visibility: p.visibility,
+    displayPriority: p.displayPriority,
+    date: p.date ? Math.floor(p.date.getTime() / 1000) : undefined,
+  };
+}
+
+export async function reindexAllProjects(): Promise<number> {
+  await ensureTypesenseCollection();
+  const ts = getTypesense();
+  try {
+    await ts.collections(COLLECTION).delete();
+  } catch {
+    /* empty */
+  }
+  await ts.collections().create(schema);
+
+  const projects = await prisma.project.findMany({
+    include: {
+      categories: { include: { category: true } },
+      tags: { include: { tag: true } },
+    },
+  });
+
+  if (projects.length === 0) return 0;
+
+  const docs = projects.map(toDoc);
+  await ts.collections(COLLECTION).documents().import(docs, { action: "upsert" });
+  return docs.length;
+}
+
+export async function indexProject(projectId: string): Promise<void> {
+  const p = await prisma.project.findUnique({
+    where: { id: projectId },
+    include: {
+      categories: { include: { category: true } },
+      tags: { include: { tag: true } },
+    },
+  });
+  if (!p) {
+    await removeProjectFromIndex(projectId);
+    return;
+  }
+  try {
+    await ensureTypesenseCollection();
+    await getTypesense().collections(COLLECTION).documents().upsert(toDoc(p));
+  } catch (err) {
+    console.warn("Typesense indexProject failed:", err);
+  }
+}
+
+export async function removeProjectFromIndex(projectId: string): Promise<void> {
+  try {
+    await getTypesense().collections(COLLECTION).documents(projectId).delete();
+  } catch {
+    /* not found */
+  }
+}
+
+export async function searchProjects(opts: {
+  q?: string;
+  category?: string;
+  tag?: string;
+  featured?: boolean;
+  visibility?: string;
+  page?: number;
+  perPage?: number;
+  sortBy?: string;
+}) {
+  await ensureTypesenseCollection();
+  const filters: string[] = [];
+  if (opts.visibility) filters.push(`visibility:=${opts.visibility}`);
+  else filters.push("visibility:=published");
+  if (opts.category) filters.push(`categorySlugs:=[${opts.category}]`);
+  if (opts.tag) filters.push(`tags:=[${opts.tag}]`);
+  if (opts.featured !== undefined) filters.push(`featured:=${opts.featured}`);
+
+  let sortBy = "displayPriority:asc,date:desc";
+  if (opts.sortBy === "date") sortBy = "date:desc";
+  else if (opts.sortBy === "title") sortBy = "title:asc";
+  else if (opts.sortBy === "priority") sortBy = "displayPriority:asc,date:desc";
+
+  const result = await getTypesense()
+    .collections(COLLECTION)
+    .documents()
+    .search({
+      q: opts.q?.trim() || "*",
+      query_by: "title,description,shortDescription,tags,categories,software",
+      filter_by: filters.join(" && "),
+      sort_by: sortBy,
+      page: opts.page ?? 1,
+      per_page: opts.perPage ?? 24,
+    });
+
+  return result;
+}

server/src/routes/admin-meta.ts

@@ -0,0 +1,282 @@
+import type { FastifyInstance } from "fastify";
+import { z } from "zod";
+import { prisma } from "../lib/prisma.js";
+import { requireAdmin } from "../lib/auth.js";
+import { uniqueCategorySlug, uniqueTagSlug, makeSlug } from "../lib/slug.js";
+import { reindexAllProjects } from "../lib/typesense.js";
+
+export async function adminMetaRoutes(app: FastifyInstance) {
+  // Categories
+  app.get("/api/v1/admin/categories", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    return prisma.category.findMany({
+      orderBy: { sortOrder: "asc" },
+      include: { _count: { select: { projects: true } } },
+    });
+  });
+
+  app.post("/api/v1/admin/categories", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const body = z
+      .object({
+        name: z.string().min(1),
+        description: z.string().optional(),
+        sortOrder: z.number().int().optional(),
+        slug: z.string().optional(),
+      })
+      .parse(req.body);
+    const slug = body.slug || (await uniqueCategorySlug(body.name));
+    const cat = await prisma.category.create({
+      data: {
+        name: body.name,
+        slug,
+        description: body.description,
+        sortOrder: body.sortOrder ?? 0,
+      },
+    });
+    return reply.code(201).send(cat);
+  });
+
+  app.put<{ Params: { id: string } }>("/api/v1/admin/categories/:id", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const body = z
+      .object({
+        name: z.string().min(1).optional(),
+        description: z.string().optional().nullable(),
+        sortOrder: z.number().int().optional(),
+        slug: z.string().optional(),
+      })
+      .parse(req.body);
+    const existing = await prisma.category.findUnique({ where: { id: req.params.id } });
+    if (!existing) return reply.code(404).send({ error: "Not found" });
+    let slug = existing.slug;
+    if (body.slug) slug = body.slug;
+    else if (body.name) slug = await uniqueCategorySlug(body.name, existing.id);
+    return prisma.category.update({
+      where: { id: existing.id },
+      data: {
+        ...(body.name ? { name: body.name } : {}),
+        slug,
+        ...(body.description !== undefined ? { description: body.description } : {}),
+        ...(body.sortOrder !== undefined ? { sortOrder: body.sortOrder } : {}),
+      },
+    });
+  });
+
+  app.delete<{ Params: { id: string } }>("/api/v1/admin/categories/:id", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    await prisma.category.delete({ where: { id: req.params.id } });
+    return { ok: true };
+  });
+
+  // Tags
+  app.get("/api/v1/admin/tags", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    return prisma.tag.findMany({
+      orderBy: { name: "asc" },
+      include: { _count: { select: { projects: true } } },
+    });
+  });
+
+  app.post("/api/v1/admin/tags", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const body = z.object({ name: z.string().min(1) }).parse(req.body);
+    const slug = await uniqueTagSlug(body.name);
+    const tag = await prisma.tag.create({ data: { name: body.name, slug } });
+    return reply.code(201).send(tag);
+  });
+
+  app.delete<{ Params: { id: string } }>("/api/v1/admin/tags/:id", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    await prisma.tag.delete({ where: { id: req.params.id } });
+    return { ok: true };
+  });
+
+  // Portfolio views
+  app.get("/api/v1/admin/views", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    return prisma.portfolioView.findMany({
+      include: {
+        categoryPriorities: {
+          orderBy: { priority: "asc" },
+          include: { category: true },
+        },
+      },
+      orderBy: { name: "asc" },
+    });
+  });
+
+  app.post("/api/v1/admin/views", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const body = z
+      .object({
+        name: z.string().min(1),
+        slug: z.string().optional(),
+        description: z.string().optional(),
+        defaultSort: z.string().optional(),
+        showOthers: z.boolean().optional(),
+        isActive: z.boolean().optional(),
+        categories: z
+          .array(z.object({ categoryId: z.string(), priority: z.number().int() }))
+          .optional()
+          .default([]),
+      })
+      .parse(req.body);
+    const slug = body.slug || makeSlug(body.name);
+    const view = await prisma.portfolioView.create({
+      data: {
+        name: body.name,
+        slug,
+        description: body.description,
+        defaultSort: body.defaultSort ?? "priority",
+        showOthers: body.showOthers ?? true,
+        isActive: body.isActive ?? true,
+        categoryPriorities: {
+          create: body.categories.map((c) => ({
+            categoryId: c.categoryId,
+            priority: c.priority,
+          })),
+        },
+      },
+      include: {
+        categoryPriorities: { include: { category: true }, orderBy: { priority: "asc" } },
+      },
+    });
+    return reply.code(201).send(view);
+  });
+
+  app.put<{ Params: { id: string } }>("/api/v1/admin/views/:id", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const body = z
+      .object({
+        name: z.string().min(1).optional(),
+        slug: z.string().optional(),
+        description: z.string().optional().nullable(),
+        defaultSort: z.string().optional(),
+        showOthers: z.boolean().optional(),
+        isActive: z.boolean().optional(),
+        categories: z
+          .array(z.object({ categoryId: z.string(), priority: z.number().int() }))
+          .optional(),
+      })
+      .parse(req.body);
+    const existing = await prisma.portfolioView.findUnique({ where: { id: req.params.id } });
+    if (!existing) return reply.code(404).send({ error: "Not found" });
+
+    if (body.categories) {
+      await prisma.portfolioViewCategory.deleteMany({ where: { viewId: existing.id } });
+      await prisma.portfolioViewCategory.createMany({
+        data: body.categories.map((c) => ({
+          viewId: existing.id,
+          categoryId: c.categoryId,
+          priority: c.priority,
+        })),
+      });
+    }
+
+    return prisma.portfolioView.update({
+      where: { id: existing.id },
+      data: {
+        ...(body.name ? { name: body.name } : {}),
+        ...(body.slug ? { slug: body.slug } : {}),
+        ...(body.description !== undefined ? { description: body.description } : {}),
+        ...(body.defaultSort ? { defaultSort: body.defaultSort } : {}),
+        ...(body.showOthers !== undefined ? { showOthers: body.showOthers } : {}),
+        ...(body.isActive !== undefined ? { isActive: body.isActive } : {}),
+      },
+      include: {
+        categoryPriorities: { include: { category: true }, orderBy: { priority: "asc" } },
+      },
+    });
+  });
+
+  app.delete<{ Params: { id: string } }>("/api/v1/admin/views/:id", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    await prisma.portfolioView.delete({ where: { id: req.params.id } });
+    return { ok: true };
+  });
+
+  // Resume
+  app.get("/api/v1/admin/resume", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    return (
+      (await prisma.resume.findFirst({ where: { isActive: true } })) ||
+      (await prisma.resume.findFirst({ orderBy: { updatedAt: "desc" } }))
+    );
+  });
+
+  app.put("/api/v1/admin/resume", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const body = z
+      .object({
+        fullName: z.string().min(1),
+        title: z.string().optional().default(""),
+        email: z.string().optional().nullable(),
+        phone: z.string().optional().nullable(),
+        location: z.string().optional().nullable(),
+        website: z.string().optional().nullable(),
+        summary: z.string().optional().default(""),
+        sections: z.any().optional().default([]),
+        htmlContent: z.string().optional().nullable(),
+        theme: z.string().optional(),
+      })
+      .parse(req.body);
+
+    const existing = await prisma.resume.findFirst({ where: { isActive: true } });
+    if (existing) {
+      return prisma.resume.update({
+        where: { id: existing.id },
+        data: {
+          fullName: body.fullName,
+          title: body.title,
+          email: body.email,
+          phone: body.phone,
+          location: body.location,
+          website: body.website,
+          summary: body.summary,
+          sections: body.sections,
+          htmlContent: body.htmlContent,
+          theme: body.theme ?? existing.theme,
+        },
+      });
+    }
+    return prisma.resume.create({
+      data: {
+        isActive: true,
+        fullName: body.fullName,
+        title: body.title,
+        email: body.email,
+        phone: body.phone,
+        location: body.location,
+        website: body.website,
+        summary: body.summary,
+        sections: body.sections,
+        htmlContent: body.htmlContent,
+        theme: body.theme ?? "dark",
+      },
+    });
+  });
+
+  // Site settings
+  app.get("/api/v1/admin/settings", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const rows = await prisma.siteSetting.findMany();
+    return Object.fromEntries(rows.map((r) => [r.key, r.value]));
+  });
+
+  app.put("/api/v1/admin/settings/site", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const value = req.body as object;
+    return prisma.siteSetting.upsert({
+      where: { key: "site" },
+      create: { key: "site", value },
+      update: { value },
+    });
+  });
+
+  app.post("/api/v1/admin/reindex", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const count = await reindexAllProjects();
+    return { ok: true, indexed: count };
+  });
+}

server/src/routes/admin-projects.ts

@@ -0,0 +1,316 @@
+import type { FastifyInstance } from "fastify";
+import { Visibility } from "@prisma/client";
+import { z } from "zod";
+import { prisma } from "../lib/prisma.js";
+import { requireAdmin } from "../lib/auth.js";
+import { uniqueProjectSlug } from "../lib/slug.js";
+import { projectPublicInclude, serializeProject } from "../lib/project-include.js";
+import { indexProject, removeProjectFromIndex } from "../lib/typesense.js";
+import { parseVideoUrl, saveImageUpload, saveVideoUpload } from "../lib/media.js";
+
+const projectBody = z.object({
+  title: z.string().min(1),
+  description: z.string().optional().default(""),
+  shortDescription: z.string().optional().nullable(),
+  date: z.string().optional().nullable(),
+  software: z.array(z.string()).optional().default([]),
+  externalLinks: z
+    .array(z.object({ label: z.string(), url: z.string().url() }))
+    .optional()
+    .default([]),
+  featured: z.boolean().optional().default(false),
+  displayPriority: z.number().int().optional().default(0),
+  visibility: z.enum(["published", "draft", "private"]).optional().default("draft"),
+  categoryIds: z.array(z.string()).optional().default([]),
+  tagNames: z.array(z.string()).optional().default([]),
+  thumbnailId: z.string().optional().nullable(),
+  slug: z.string().optional(),
+});
+
+async function syncTags(projectId: string, tagNames: string[]) {
+  await prisma.projectTag.deleteMany({ where: { projectId } });
+  for (const raw of tagNames) {
+    const name = raw.trim();
+    if (!name) continue;
+    const { makeSlug } = await import("../lib/slug.js");
+    const slug = makeSlug(name);
+    const tag = await prisma.tag.upsert({
+      where: { slug },
+      create: { name, slug },
+      update: { name },
+    });
+    await prisma.projectTag.create({ data: { projectId, tagId: tag.id } });
+  }
+}
+
+async function syncCategories(projectId: string, categoryIds: string[]) {
+  await prisma.projectCategory.deleteMany({ where: { projectId } });
+  for (const categoryId of categoryIds) {
+    await prisma.projectCategory.create({ data: { projectId, categoryId } });
+  }
+}
+
+export async function adminProjectRoutes(app: FastifyInstance) {
+  app.get("/api/v1/admin/me", async (req, reply) => {
+    const user = requireAdmin(req, reply);
+    if (!user) return;
+    return user;
+  });
+
+  app.get<{
+    Querystring: { q?: string; visibility?: string; page?: string; perPage?: string };
+  }>("/api/v1/admin/projects", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const page = Math.max(1, parseInt(req.query.page || "1", 10) || 1);
+    const perPage = Math.min(100, parseInt(req.query.perPage || "50", 10) || 50);
+    const where = {
+      ...(req.query.visibility
+        ? { visibility: req.query.visibility as Visibility }
+        : {}),
+      ...(req.query.q
+        ? {
+            OR: [
+              { title: { contains: req.query.q, mode: "insensitive" as const } },
+              { description: { contains: req.query.q, mode: "insensitive" as const } },
+            ],
+          }
+        : {}),
+    };
+    const [total, projects] = await Promise.all([
+      prisma.project.count({ where }),
+      prisma.project.findMany({
+        where,
+        include: projectPublicInclude,
+        orderBy: [{ displayPriority: "asc" }, { updatedAt: "desc" }],
+        skip: (page - 1) * perPage,
+        take: perPage,
+      }),
+    ]);
+    return {
+      data: projects.map(serializeProject),
+      meta: { page, perPage, total, totalPages: Math.ceil(total / perPage) },
+    };
+  });
+
+  app.get<{ Params: { id: string } }>("/api/v1/admin/projects/:id", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const project = await prisma.project.findUnique({
+      where: { id: req.params.id },
+      include: projectPublicInclude,
+    });
+    if (!project) return reply.code(404).send({ error: "Not found" });
+    return serializeProject(project);
+  });
+
+  app.post("/api/v1/admin/projects", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const body = projectBody.parse(req.body);
+    const slug = body.slug || (await uniqueProjectSlug(body.title));
+    const project = await prisma.project.create({
+      data: {
+        title: body.title,
+        slug,
+        description: body.description,
+        shortDescription: body.shortDescription,
+        date: body.date ? new Date(body.date) : null,
+        software: body.software,
+        externalLinks: body.externalLinks,
+        featured: body.featured,
+        displayPriority: body.displayPriority,
+        visibility: body.visibility as Visibility,
+        thumbnailId: body.thumbnailId,
+        publishedAt: body.visibility === "published" ? new Date() : null,
+      },
+    });
+    await syncCategories(project.id, body.categoryIds);
+    await syncTags(project.id, body.tagNames);
+    await indexProject(project.id);
+    const full = await prisma.project.findUnique({
+      where: { id: project.id },
+      include: projectPublicInclude,
+    });
+    return reply.code(201).send(serializeProject(full!));
+  });
+
+  app.put<{ Params: { id: string } }>("/api/v1/admin/projects/:id", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const existing = await prisma.project.findUnique({ where: { id: req.params.id } });
+    if (!existing) return reply.code(404).send({ error: "Not found" });
+    const body = projectBody.partial().extend({ title: z.string().min(1).optional() }).parse(req.body);
+
+    let slug = existing.slug;
+    if (body.slug) slug = body.slug;
+    else if (body.title && body.title !== existing.title) {
+      slug = await uniqueProjectSlug(body.title, existing.id);
+    }
+
+    const visibility = (body.visibility as Visibility | undefined) ?? existing.visibility;
+    await prisma.project.update({
+      where: { id: existing.id },
+      data: {
+        ...(body.title !== undefined ? { title: body.title } : {}),
+        slug,
+        ...(body.description !== undefined ? { description: body.description } : {}),
+        ...(body.shortDescription !== undefined
+          ? { shortDescription: body.shortDescription }
+          : {}),
+        ...(body.date !== undefined
+          ? { date: body.date ? new Date(body.date) : null }
+          : {}),
+        ...(body.software !== undefined ? { software: body.software } : {}),
+        ...(body.externalLinks !== undefined ? { externalLinks: body.externalLinks } : {}),
+        ...(body.featured !== undefined ? { featured: body.featured } : {}),
+        ...(body.displayPriority !== undefined
+          ? { displayPriority: body.displayPriority }
+          : {}),
+        visibility,
+        ...(body.thumbnailId !== undefined ? { thumbnailId: body.thumbnailId } : {}),
+        ...(visibility === "published" && !existing.publishedAt
+          ? { publishedAt: new Date() }
+          : {}),
+      },
+    });
+    if (body.categoryIds) await syncCategories(existing.id, body.categoryIds);
+    if (body.tagNames) await syncTags(existing.id, body.tagNames);
+    await indexProject(existing.id);
+    const full = await prisma.project.findUnique({
+      where: { id: existing.id },
+      include: projectPublicInclude,
+    });
+    return serializeProject(full!);
+  });
+
+  app.delete<{ Params: { id: string } }>("/api/v1/admin/projects/:id", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const existing = await prisma.project.findUnique({ where: { id: req.params.id } });
+    if (!existing) return reply.code(404).send({ error: "Not found" });
+    await prisma.project.delete({ where: { id: existing.id } });
+    await removeProjectFromIndex(existing.id);
+    return { ok: true };
+  });
+
+  app.post("/api/v1/admin/projects/reorder", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const body = z.object({ ids: z.array(z.string()) }).parse(req.body);
+    await prisma.$transaction(
+      body.ids.map((id, i) =>
+        prisma.project.update({ where: { id }, data: { displayPriority: i } })
+      )
+    );
+    for (const id of body.ids) await indexProject(id);
+    return { ok: true };
+  });
+
+  // Media upload
+  app.post("/api/v1/admin/media/upload", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const file = await req.file();
+    if (!file) return reply.code(400).send({ error: "No file" });
+    const buffer = await file.toBuffer();
+    const projectId = (file.fields as Record<string, { value?: string }>)?.projectId?.value;
+    const isVideo = file.mimetype.startsWith("video/");
+
+    if (isVideo) {
+      const saved = await saveVideoUpload(buffer, file.mimetype, file.filename);
+      const media = await prisma.media.create({
+        data: {
+          projectId: projectId || null,
+          type: "video",
+          url: saved.url,
+          filename: saved.filename,
+          mimeType: saved.mimeType,
+          sizeBytes: saved.sizeBytes,
+          videoSource: "self_hosted",
+        },
+      });
+      return reply.code(201).send(media);
+    }
+
+    if (!file.mimetype.startsWith("image/")) {
+      return reply.code(400).send({ error: "Unsupported file type" });
+    }
+    const saved = await saveImageUpload(buffer, file.mimetype, file.filename);
+    const media = await prisma.media.create({
+      data: {
+        projectId: projectId || null,
+        type: "image",
+        url: saved.url,
+        thumbnailUrl: saved.thumbnailUrl,
+        filename: saved.filename,
+        mimeType: saved.mimeType,
+        width: saved.width,
+        height: saved.height,
+        sizeBytes: saved.sizeBytes,
+      },
+    });
+    return reply.code(201).send(media);
+  });
+
+  app.post("/api/v1/admin/media/video-link", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const body = z
+      .object({
+        url: z.string().url(),
+        projectId: z.string().optional(),
+        caption: z.string().optional(),
+      })
+      .parse(req.body);
+    const parsed = parseVideoUrl(body.url);
+    const media = await prisma.media.create({
+      data: {
+        projectId: body.projectId || null,
+        type: "video",
+        url: parsed.embedUrl || body.url,
+        externalUrl: parsed.externalUrl,
+        videoSource: parsed.videoSource,
+        videoId: parsed.videoId,
+        caption: body.caption,
+      },
+    });
+    return reply.code(201).send(media);
+  });
+
+  app.patch<{ Params: { id: string } }>("/api/v1/admin/media/:id", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    const body = z
+      .object({
+        projectId: z.string().optional().nullable(),
+        alt: z.string().optional().nullable(),
+        caption: z.string().optional().nullable(),
+        sortOrder: z.number().int().optional(),
+      })
+      .parse(req.body);
+    const media = await prisma.media.update({
+      where: { id: req.params.id },
+      data: body,
+    });
+    return media;
+  });
+
+  app.delete<{ Params: { id: string } }>("/api/v1/admin/media/:id", async (req, reply) => {
+    if (!requireAdmin(req, reply)) return;
+    await prisma.media.delete({ where: { id: req.params.id } });
+    return { ok: true };
+  });
+
+  app.post<{ Params: { id: string } }>(
+    "/api/v1/admin/projects/:id/thumbnail",
+    async (req, reply) => {
+      if (!requireAdmin(req, reply)) return;
+      const body = z.object({ mediaId: z.string() }).parse(req.body);
+      const media = await prisma.media.findUnique({ where: { id: body.mediaId } });
+      if (!media) return reply.code(404).send({ error: "Media not found" });
+      await prisma.media.update({
+        where: { id: media.id },
+        data: { projectId: req.params.id },
+      });
+      const project = await prisma.project.update({
+        where: { id: req.params.id },
+        data: { thumbnailId: media.id },
+        include: projectPublicInclude,
+      });
+      await indexProject(project.id);
+      return serializeProject(project);
+    }
+  );
+}

server/src/routes/health.ts

@@ -0,0 +1,28 @@
+import type { FastifyInstance } from "fastify";
+import { prisma } from "../lib/prisma.js";
+import { getTypesense } from "../lib/typesense.js";
+
+export async function healthRoutes(app: FastifyInstance) {
+  app.get("/api/v1/health", async () => {
+    let db = "ok";
+    let typesense = "ok";
+    try {
+      await prisma.$queryRaw`SELECT 1`;
+    } catch {
+      db = "error";
+    }
+    try {
+      await getTypesense().health.retrieve();
+    } catch {
+      typesense = "error";
+    }
+    const status = db === "ok" ? "ok" : "degraded";
+    return {
+      status,
+      service: "jmartgraphix-com",
+      db,
+      typesense,
+      time: new Date().toISOString(),
+    };
+  });
+}

server/src/routes/public.ts

@@ -0,0 +1,356 @@
+import type { FastifyInstance } from "fastify";
+import { Visibility } from "@prisma/client";
+import { prisma } from "../lib/prisma.js";
+import { projectPublicInclude, serializeProject } from "../lib/project-include.js";
+import { searchProjects } from "../lib/typesense.js";
+
+export async function publicRoutes(app: FastifyInstance) {
+  app.get("/api/v1/site", async () => {
+    const setting = await prisma.siteSetting.findUnique({ where: { key: "site" } });
+    return setting?.value ?? {};
+  });
+
+  app.get("/api/v1/categories", async () => {
+    const categories = await prisma.category.findMany({
+      orderBy: { sortOrder: "asc" },
+      include: {
+        _count: {
+          select: {
+            projects: {
+              where: { project: { visibility: Visibility.published } },
+            },
+          },
+        },
+      },
+    });
+    return categories.map((c) => ({
+      id: c.id,
+      name: c.name,
+      slug: c.slug,
+      description: c.description,
+      sortOrder: c.sortOrder,
+      projectCount: c._count.projects,
+    }));
+  });
+
+  app.get("/api/v1/tags", async () => {
+    const tags = await prisma.tag.findMany({
+      orderBy: { name: "asc" },
+      include: {
+        _count: {
+          select: {
+            projects: {
+              where: { project: { visibility: Visibility.published } },
+            },
+          },
+        },
+      },
+    });
+    return tags.map((t) => ({
+      id: t.id,
+      name: t.name,
+      slug: t.slug,
+      projectCount: t._count.projects,
+    }));
+  });
+
+  app.get<{
+    Querystring: {
+      q?: string;
+      category?: string;
+      tag?: string;
+      featured?: string;
+      sort?: string;
+      page?: string;
+      perPage?: string;
+      view?: string;
+    };
+  }>("/api/v1/projects", async (req) => {
+    const page = Math.max(1, parseInt(req.query.page || "1", 10) || 1);
+    const perPage = Math.min(100, Math.max(1, parseInt(req.query.perPage || "24", 10) || 24));
+    const sort = req.query.sort || "priority";
+    const category = req.query.category;
+    const tag = req.query.tag;
+    const featured =
+      req.query.featured === "true" ? true : req.query.featured === "false" ? false : undefined;
+    const q = req.query.q;
+    const viewSlug = req.query.view;
+
+    // Portfolio view prioritization
+    if (viewSlug && !category) {
+      const view = await prisma.portfolioView.findFirst({
+        where: { slug: viewSlug, isActive: true },
+        include: {
+          categoryPriorities: {
+            orderBy: { priority: "asc" },
+            include: { category: true },
+          },
+        },
+      });
+      if (view) {
+        const orderedCatIds = view.categoryPriorities.map((cp) => cp.categoryId);
+        const projects = await prisma.project.findMany({
+          where: {
+            visibility: Visibility.published,
+            ...(featured !== undefined ? { featured } : {}),
+            ...(tag
+              ? { tags: { some: { tag: { OR: [{ slug: tag }, { name: tag }] } } } }
+              : {}),
+            ...(q
+              ? {
+                  OR: [
+                    { title: { contains: q, mode: "insensitive" } },
+                    { description: { contains: q, mode: "insensitive" } },
+                  ],
+                }
+              : {}),
+          },
+          include: projectPublicInclude,
+          orderBy: [{ displayPriority: "asc" }, { date: "desc" }, { title: "asc" }],
+        });
+
+        const score = (p: (typeof projects)[0]) => {
+          const catIds = p.categories.map((c) => c.categoryId);
+          let best = 999;
+          for (const cid of catIds) {
+            const idx = orderedCatIds.indexOf(cid);
+            if (idx >= 0 && idx < best) best = idx;
+          }
+          if (best === 999 && !view.showOthers) return null;
+          return best;
+        };
+
+        const scored = projects
+          .map((p) => ({ p, s: score(p) }))
+          .filter((x): x is { p: (typeof projects)[0]; s: number } => x.s !== null)
+          .sort((a, b) => {
+            if (a.s !== b.s) return a.s - b.s;
+            if (a.p.displayPriority !== b.p.displayPriority)
+              return a.p.displayPriority - b.p.displayPriority;
+            const da = a.p.date?.getTime() ?? 0;
+            const db = b.p.date?.getTime() ?? 0;
+            return db - da;
+          });
+
+        const total = scored.length;
+        const slice = scored.slice((page - 1) * perPage, page * perPage);
+        return {
+          data: slice.map((x) => serializeProject(x.p)),
+          meta: {
+            page,
+            perPage,
+            total,
+            totalPages: Math.ceil(total / perPage),
+            view: {
+              slug: view.slug,
+              name: view.name,
+              description: view.description,
+              categories: view.categoryPriorities.map((cp) => ({
+                ...cp.category,
+                priority: cp.priority,
+              })),
+            },
+          },
+        };
+      }
+    }
+
+    // Typesense search when query present
+    if (q?.trim()) {
+      try {
+        const result = await searchProjects({
+          q,
+          category,
+          tag,
+          featured,
+          visibility: "published",
+          page,
+          perPage,
+          sortBy: sort,
+        });
+        const ids = (result.hits ?? []).map((h) => (h.document as { id: string }).id);
+        const projects = await prisma.project.findMany({
+          where: { id: { in: ids }, visibility: Visibility.published },
+          include: projectPublicInclude,
+        });
+        const byId = Object.fromEntries(projects.map((p) => [p.id, p]));
+        const ordered = ids.map((id) => byId[id]).filter(Boolean);
+        return {
+          data: ordered.map(serializeProject),
+          meta: {
+            page,
+            perPage,
+            total: result.found ?? ordered.length,
+            totalPages: Math.ceil((result.found ?? ordered.length) / perPage),
+            search: true,
+          },
+        };
+      } catch (err) {
+        console.warn("Typesense search fallback to SQL:", err);
+      }
+    }
+
+    const where = {
+      visibility: Visibility.published,
+      ...(featured !== undefined ? { featured } : {}),
+      ...(category
+        ? {
+            categories: {
+              some: { category: { OR: [{ slug: category }, { name: category }] } },
+            },
+          }
+        : {}),
+      ...(tag
+        ? { tags: { some: { tag: { OR: [{ slug: tag }, { name: tag }] } } } }
+        : {}),
+    };
+
+    let orderBy:
+      | { displayPriority: "asc" | "desc" }[]
+      | { date: "asc" | "desc" }[]
+      | { title: "asc" | "desc" }[]
+      | object[] = [{ displayPriority: "asc" }, { date: "desc" }];
+    if (sort === "date") orderBy = [{ date: "desc" }, { displayPriority: "asc" }];
+    else if (sort === "title" || sort === "alphabetical")
+      orderBy = [{ title: "asc" }, { displayPriority: "asc" }];
+    else if (sort === "priority") orderBy = [{ displayPriority: "asc" }, { date: "desc" }];
+
+    const [total, projects] = await Promise.all([
+      prisma.project.count({ where }),
+      prisma.project.findMany({
+        where,
+        include: projectPublicInclude,
+        orderBy: orderBy as never,
+        skip: (page - 1) * perPage,
+        take: perPage,
+      }),
+    ]);
+
+    return {
+      data: projects.map(serializeProject),
+      meta: {
+        page,
+        perPage,
+        total,
+        totalPages: Math.ceil(total / perPage),
+      },
+    };
+  });
+
+  app.get<{ Params: { slug: string } }>("/api/v1/projects/:slug", async (req, reply) => {
+    const project = await prisma.project.findFirst({
+      where: { slug: req.params.slug, visibility: Visibility.published },
+      include: projectPublicInclude,
+    });
+    if (!project) {
+      return reply.code(404).send({ error: "Not found" });
+    }
+    return serializeProject(project);
+  });
+
+  app.get("/api/v1/featured", async () => {
+    const projects = await prisma.project.findMany({
+      where: { visibility: Visibility.published, featured: true },
+      include: projectPublicInclude,
+      orderBy: [{ displayPriority: "asc" }, { date: "desc" }],
+      take: 12,
+    });
+    return projects.map(serializeProject);
+  });
+
+  app.get("/api/v1/views", async () => {
+    return prisma.portfolioView.findMany({
+      where: { isActive: true },
+      include: {
+        categoryPriorities: {
+          orderBy: { priority: "asc" },
+          include: { category: true },
+        },
+      },
+      orderBy: { name: "asc" },
+    });
+  });
+
+  app.get<{ Params: { slug: string } }>("/api/v1/views/:slug", async (req, reply) => {
+    const view = await prisma.portfolioView.findFirst({
+      where: { slug: req.params.slug, isActive: true },
+      include: {
+        categoryPriorities: {
+          orderBy: { priority: "asc" },
+          include: { category: true },
+        },
+      },
+    });
+    if (!view) return reply.code(404).send({ error: "Not found" });
+    return view;
+  });
+
+  app.get("/api/v1/resume", async (_req, reply) => {
+    const resume = await prisma.resume.findFirst({ where: { isActive: true } });
+    if (!resume) return reply.code(404).send({ error: "No resume published" });
+    return resume;
+  });
+
+  // SEO: sitemap
+  app.get("/sitemap.xml", async (_req, reply) => {
+    const projects = await prisma.project.findMany({
+      where: { visibility: Visibility.published },
+      select: { slug: true, updatedAt: true },
+    });
+    const base = process.env.PUBLIC_URL?.replace(/\/$/, "") || "https://jmartgraphix.com";
+    const urls = [
+      "",
+      "/portfolio",
+      "/resume",
+      "/about",
+      ...projects.map((p) => `/project/${p.slug}`),
+    ];
+    const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls
+  .map(
+    (u) => `  <url><loc>${base}${u}</loc><changefreq>weekly</changefreq></url>`
+  )
+  .join("\n")}
+</urlset>`;
+    return reply.type("application/xml").send(xml);
+  });
+
+  app.get("/rss.xml", async (_req, reply) => {
+    const projects = await prisma.project.findMany({
+      where: { visibility: Visibility.published },
+      orderBy: { date: "desc" },
+      take: 30,
+      select: {
+        title: true,
+        slug: true,
+        shortDescription: true,
+        description: true,
+        date: true,
+        updatedAt: true,
+      },
+    });
+    const base = process.env.PUBLIC_URL?.replace(/\/$/, "") || "https://jmartgraphix.com";
+    const items = projects
+      .map(
+        (p) => `    <item>
+      <title><![CDATA[${p.title}]]></title>
+      <link>${base}/project/${p.slug}</link>
+      <guid>${base}/project/${p.slug}</guid>
+      <description><![CDATA[${p.shortDescription || p.description.slice(0, 300)}]]></description>
+      <pubDate>${(p.date || p.updatedAt).toUTCString()}</pubDate>
+    </item>`
+      )
+      .join("\n");
+    const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+  <channel>
+    <title>jmartgraphix Portfolio</title>
+    <link>${base}</link>
+    <description>Creative professional portfolio updates</description>
+${items}
+  </channel>
+</rss>`;
+    return reply.type("application/rss+xml").send(xml);
+  });
+}

server/src/routes/resume-pdf.ts

@@ -0,0 +1,159 @@
+import type { FastifyInstance } from "fastify";
+import { prisma } from "../lib/prisma.js";
+import { config } from "../config.js";
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function renderResumeHtml(resume: any): string {
+  if (resume.htmlContent) {
+    return `<!DOCTYPE html><html><head><meta charset="utf-8"><title>${escapeHtml(
+      resume.fullName
+    )} — Resume</title>
+<style>
+  body{font-family:Georgia,serif;max-width:800px;margin:40px auto;padding:0 24px;color:#111;line-height:1.5}
+  @media print{body{margin:0}}
+</style></head><body>${resume.htmlContent}</body></html>`;
+  }
+
+  const sections = Array.isArray(resume.sections) ? resume.sections : [];
+  let sectionsHtml = "";
+  for (const sec of sections) {
+    sectionsHtml += `<section class="sec"><h2>${escapeHtml(sec.title || sec.type || "")}</h2>`;
+    if (sec.type === "skills" && Array.isArray(sec.items)) {
+      for (const g of sec.items) {
+        sectionsHtml += `<p><strong>${escapeHtml(g.group || "")}</strong> — ${(g.skills || [])
+          .map((s: string) => escapeHtml(s))
+          .join(", ")}</p>`;
+      }
+    } else if (sec.type === "links" && Array.isArray(sec.items)) {
+      sectionsHtml += `<ul>${sec.items
+        .map(
+          (i: { label: string; url: string }) =>
+            `<li><a href="${escapeHtml(i.url)}">${escapeHtml(i.label)}</a></li>`
+        )
+        .join("")}</ul>`;
+    } else if (Array.isArray(sec.items)) {
+      for (const item of sec.items) {
+        sectionsHtml += `<div class="item">
+          <h3>${escapeHtml(item.title || "")}${
+          item.organization ? ` · ${escapeHtml(item.organization)}` : ""
+        }</h3>
+          <div class="meta">${[item.location, [item.startDate, item.endDate].filter(Boolean).join(" – ")]
+            .filter(Boolean)
+            .map(escapeHtml)
+            .join(" · ")}</div>
+          ${item.description ? `<p>${escapeHtml(item.description)}</p>` : ""}
+          ${
+            item.highlights
+              ? `<ul>${item.highlights.map((h: string) => `<li>${escapeHtml(h)}</li>`).join("")}</ul>`
+              : ""
+          }
+        </div>`;
+      }
+    }
+    sectionsHtml += `</section>`;
+  }
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>${escapeHtml(resume.fullName)} — Resume</title>
+<style>
+  *{box-sizing:border-box}
+  body{font-family:"Segoe UI",system-ui,sans-serif;max-width:820px;margin:0 auto;padding:48px 32px;color:#0f0f0f;line-height:1.55;background:#fff}
+  h1{font-size:2rem;margin:0 0 4px;letter-spacing:-0.02em}
+  .title{color:#444;font-size:1.1rem;margin-bottom:8px}
+  .contact{color:#555;font-size:0.9rem;margin-bottom:24px}
+  .summary{font-size:1rem;margin-bottom:28px;border-left:3px solid #111;padding-left:16px}
+  h2{font-size:0.85rem;text-transform:uppercase;letter-spacing:0.12em;border-bottom:1px solid #ddd;padding-bottom:6px;margin:28px 0 14px;color:#222}
+  h3{font-size:1.05rem;margin:0 0 4px}
+  .meta{color:#666;font-size:0.85rem;margin-bottom:8px}
+  .item{margin-bottom:18px}
+  ul{margin:6px 0 0 18px;padding:0}
+  li{margin-bottom:4px}
+  a{color:#111}
+  @media print{body{padding:24px}}
+</style>
+</head>
+<body>
+  <header>
+    <h1>${escapeHtml(resume.fullName)}</h1>
+    ${resume.title ? `<div class="title">${escapeHtml(resume.title)}</div>` : ""}
+    <div class="contact">
+      ${[
+        resume.email,
+        resume.phone,
+        resume.location,
+        resume.website,
+      ]
+        .filter(Boolean)
+        .map(escapeHtml)
+        .join(" · ")}
+    </div>
+  </header>
+  ${resume.summary ? `<p class="summary">${escapeHtml(resume.summary)}</p>` : ""}
+  ${sectionsHtml}
+</body>
+</html>`;
+}
+
+export async function resumePdfRoutes(app: FastifyInstance) {
+  app.get("/api/v1/resume/html", async (_req, reply) => {
+    const resume = await prisma.resume.findFirst({ where: { isActive: true } });
+    if (!resume) return reply.code(404).send({ error: "No resume" });
+    return reply.type("text/html").send(renderResumeHtml(resume));
+  });
+
+  app.get("/api/v1/resume/pdf", async (_req, reply) => {
+    const resume = await prisma.resume.findFirst({ where: { isActive: true } });
+    if (!resume) return reply.code(404).send({ error: "No resume" });
+
+    const html = renderResumeHtml(resume);
+    try {
+      // Dynamic import so local dev without chromium still works for HTML
+      const puppeteer = await import("puppeteer");
+      const browser = await puppeteer.default.launch({
+        headless: true,
+        args: ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"],
+        executablePath: process.env.PUPPETEER_EXECUTABLE_PATH || undefined,
+      });
+      try {
+        const page = await browser.newPage();
+        await page.setContent(html, { waitUntil: "load" });
+        const pdf = await page.pdf({
+          format: "A4",
+          printBackground: true,
+          margin: { top: "16mm", bottom: "16mm", left: "14mm", right: "14mm" },
+        });
+        const filename = `${(resume.fullName || "resume").replace(/\s+/g, "_")}_Resume.pdf`;
+        return reply
+          .header("Content-Type", "application/pdf")
+          .header("Content-Disposition", `attachment; filename="${filename}"`)
+          .send(Buffer.from(pdf));
+      } finally {
+        await browser.close();
+      }
+    } catch (err) {
+      console.error("PDF generation failed:", err);
+      // Fallback: return HTML with print hint
+      return reply
+        .code(503)
+        .type("application/json")
+        .send({
+          error: "PDF generation unavailable",
+          htmlUrl: `${config.publicUrl}/api/v1/resume/html`,
+          message: "Open the HTML version and use Print → Save as PDF",
+        });
+    }
+  });
+}
+
+export { renderResumeHtml };

server/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}