From a06830281dbb6679b494147ce47f0e6e47fa0e47 Mon Sep 17 00:00:00 2001
From: Nate Emmert <nate.emmert@trbc.org>
Date: Wed, 18 Mar 2026 14:33:21 -0400
Subject: [PATCH] Add robust themes, drag-drop layout, and manual screenshot
 controls

---
 server.js            |    2 +-
 src/App.css          |  308 +++++++++++-
 src/App.tsx          | 1077 +++++++++++++++++++++++++++++++++++++-----
 src/data/projects.ts |    1 +
 src/index.css        |  108 +++++
 5 files changed, 1375 insertions(+), 121 deletions(-)

diff --git a/server.js b/server.js
index 0e94c65..2fba5b0 100644
--- a/server.js
+++ b/server.js
@@ -11,7 +11,7 @@ const DIST_DIR = path.join(__dirname, 'dist')
 const INDEX_FILE = path.join(DIST_DIR, 'index.html')
 
 const app = express()
-app.use(express.json({ limit: '2mb' }))
+app.use(express.json({ limit: '10mb' }))
 
 app.get('/api/admin-content', async (_req, res) => {
   try {
diff --git a/src/App.css b/src/App.css
index 82f012e..b47ed3c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,11 +9,12 @@
 
 .hero {
   border: 1px solid var(--line);
-  border-radius: 24px;
+  border-radius: var(--radius-panel);
   padding: 2rem;
   background:
     radial-gradient(circle at 90% 0%, var(--hero-glow) 0%, rgba(247, 216, 166, 0) 46%),
     linear-gradient(135deg, var(--surface-soft) 0%, var(--bg-bottom) 100%);
+  box-shadow: var(--shadow-elevated);
   animation: reveal 480ms ease-out both;
 }
 
@@ -86,9 +87,10 @@ h1 {
 
 .stats article {
   border: 1px solid var(--line);
-  border-radius: 14px;
+  border-radius: var(--radius-tile);
   padding: 0.9rem 1rem;
   background: var(--surface);
+  box-shadow: var(--shadow);
 }
 
 .stats p {
@@ -105,6 +107,29 @@ h1 {
   line-height: 1.25;
 }
 
+.home-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.9fr);
+  gap: 1rem;
+  align-items: start;
+}
+
+.home-main,
+.home-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.home-block {
+  margin: 0;
+}
+
+.home-sidebar .grid,
+.home-sidebar .stats {
+  grid-template-columns: 1fr;
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -113,12 +138,29 @@ h1 {
 
 .card {
   border: 1px solid var(--line);
-  border-radius: 18px;
+  border-radius: var(--radius-card);
   padding: 1rem;
   background: var(--surface);
+  box-shadow: var(--shadow);
+  transition: box-shadow 220ms ease, transform 220ms ease;
   animation: reveal 500ms ease-out both;
 }
 
+.card:hover {
+  box-shadow: var(--shadow-elevated);
+  transform: translateY(-2px);
+}
+
+.project-thumbnail {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-note);
+  background: var(--surface-soft);
+  margin-bottom: 0.75rem;
+}
+
 .card h2 {
   margin: 0.65rem 0 0.4rem;
   font-family: var(--display);
@@ -209,7 +251,7 @@ h1 {
 .stack li {
   padding: 0.28rem 0.5rem;
   background: var(--chip-bg);
-  border-radius: 8px;
+  border-radius: var(--radius-chip);
   font-size: 0.8rem;
 }
 
@@ -242,7 +284,7 @@ h1 {
 
 .notes {
   border: 1px dashed var(--line);
-  border-radius: 12px;
+  border-radius: var(--radius-note);
   padding: 1rem;
   background: var(--surface-soft);
 }
@@ -257,6 +299,40 @@ h1 {
   color: var(--ink-muted);
 }
 
+.downloads-grid {
+  margin-top: 0.9rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 0.8rem;
+}
+
+.download-card {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-note);
+  padding: 0.9rem;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.download-card h4 {
+  margin: 0;
+  font-family: var(--display);
+}
+
+.download-card a {
+  width: fit-content;
+  text-decoration: none;
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.download-card a:hover {
+  text-decoration: underline;
+}
+
 .readme-panel a {
   margin-top: 0.7rem;
   display: inline-block;
@@ -323,9 +399,10 @@ h1 {
 
 .detail-card {
   border: 1px solid var(--line);
-  border-radius: 14px;
+  border-radius: var(--radius-tile);
   background: var(--surface);
   padding: 1rem;
+  box-shadow: var(--shadow);
 }
 
 .detail-card h3 {
@@ -343,6 +420,52 @@ h1 {
   font-size: 0.9rem;
 }
 
+.admin-notice {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-tile);
+  padding: 0.9rem 1rem;
+  background: var(--surface);
+}
+
+.admin-notice p {
+  margin: 0;
+  font-weight: 600;
+}
+
+.admin-notice.success {
+  border-color: #9fd0ae;
+  background: #edf8f0;
+  color: #145a32;
+}
+
+.admin-notice.error {
+  border-color: #d9a69a;
+  background: #fff1ec;
+  color: #8c2c13;
+}
+
+.admin-tabs {
+  display: flex;
+  gap: 0.55rem;
+  flex-wrap: wrap;
+}
+
+.admin-tab {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 0.55rem 0.95rem;
+  background: var(--surface);
+  color: var(--ink);
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.admin-tab.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
 .admin-panel {
   background: var(--surface);
 }
@@ -363,7 +486,7 @@ h1 {
 .admin-input {
   width: 100%;
   border: 1px solid var(--line);
-  border-radius: 10px;
+  border-radius: var(--radius-input);
   padding: 0.55rem 0.7rem;
   font: inherit;
   color: var(--ink);
@@ -375,6 +498,87 @@ h1 {
   resize: vertical;
 }
 
+.admin-checkbox-row {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  color: var(--ink);
+}
+
+.layout-manager {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+}
+
+.layout-manager h4 {
+  margin: 0;
+  font-family: var(--display);
+}
+
+.layout-manager p {
+  margin: 0;
+}
+
+.layout-row {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.85rem;
+  background: var(--surface-soft);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 0.75rem;
+  align-items: center;
+  cursor: grab;
+}
+
+.layout-row:active {
+  cursor: grabbing;
+}
+
+.layout-row strong {
+  display: block;
+  color: var(--ink);
+}
+
+.layout-row p {
+  margin-top: 0.2rem;
+}
+
+.layout-select {
+  min-width: 10rem;
+}
+
+.layout-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.drag-hint {
+  display: inline-block;
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.drag-pill {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 0.35rem 0.65rem;
+  background: var(--surface);
+  color: var(--ink-muted);
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
 .scan-row {
   display: flex;
   flex-direction: column;
@@ -430,6 +634,84 @@ h1 {
   border-color: var(--accent);
 }
 
+.downloads-editor {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.downloads-editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.8rem;
+  flex-wrap: wrap;
+}
+
+.downloads-editor-header h4 {
+  margin: 0;
+  font-family: var(--display);
+}
+
+.download-editor-card {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.9rem;
+  background: var(--surface-soft);
+  display: grid;
+  gap: 0.5rem;
+}
+
+.admin-secondary-button {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.5rem 0.8rem;
+  background: var(--surface);
+  color: var(--ink);
+  font-weight: 600;
+  cursor: pointer;
+  width: fit-content;
+}
+
+.admin-secondary-button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.thumbnail-actions {
+  display: flex;
+  gap: 0.55rem;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.thumbnail-file-input {
+  width: min(100%, 320px);
+}
+
+.admin-thumbnail-preview {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-note);
+  padding: 0.6rem;
+  background: var(--surface);
+}
+
+.admin-thumbnail-preview img {
+  width: 100%;
+  max-width: 420px;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border-radius: var(--radius-note);
+  border: 1px solid var(--line);
+}
+
+.thumbnail-mode-note {
+  margin-top: 0.45rem;
+  font-size: 0.85rem;
+  color: var(--ink-muted);
+}
+
 code {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   background: #f0ece6;
@@ -471,6 +753,18 @@ code {
     grid-template-columns: 1fr;
   }
 
+  .home-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .layout-row {
+    grid-template-columns: 1fr;
+  }
+
+  .layout-actions {
+    justify-content: flex-start;
+  }
+
   .stats article:last-child {
     grid-column: auto;
   }
diff --git a/src/App.tsx b/src/App.tsx
index 90ec1d1..9f26245 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
+import type { ChangeEvent } from 'react'
 import { Link, Navigate, Route, Routes, useParams } from 'react-router-dom'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -9,7 +10,22 @@ import type { Project } from './data/projects'
 const THEME_STORAGE_KEY = 'portfolio-theme-v1'
 const ADMIN_CONTENT_API = '/api/admin-content'
 
-type ThemeName = 'sand' | 'ocean' | 'midnight' | 'forest' | 'sunset'
+type ThemeName = 'sand' | 'ocean' | 'midnight' | 'forest' | 'sunset' | 'rose' | 'slate' | 'aurora' | 'amethyst'
+
+type HomeSectionId = 'summary' | 'projects' | 'quickTips' | 'downloads'
+
+type HomeSectionPlacement = 'main' | 'sidebar'
+
+type HomeSectionConfig = {
+  id: HomeSectionId
+  placement: HomeSectionPlacement
+}
+
+type DownloadItem = {
+  title: string
+  url: string
+  description: string
+}
 
 type SiteContent = {
   theme: ThemeName
@@ -19,6 +35,25 @@ type SiteContent = {
   projectEyebrow: string
   quickTipsTitle: string
   quickTipsBody: string
+  downloadsTitle: string
+  downloadsIntro: string
+  downloads: DownloadItem[]
+  showSidebar: boolean
+  homeSections: HomeSectionConfig[]
+}
+
+const DEFAULT_HOME_SECTIONS: HomeSectionConfig[] = [
+  { id: 'summary', placement: 'main' },
+  { id: 'projects', placement: 'main' },
+  { id: 'quickTips', placement: 'main' },
+  { id: 'downloads', placement: 'main' },
+]
+
+const HOME_SECTION_LABELS: Record<HomeSectionId, string> = {
+  summary: 'Project summary',
+  projects: 'Project cards',
+  quickTips: 'Quick tips',
+  downloads: 'Downloads',
 }
 
 const defaultSiteContent: SiteContent = {
@@ -31,6 +66,18 @@ const defaultSiteContent: SiteContent = {
   quickTipsTitle: 'Quick edit tips',
   quickTipsBody:
     'Open /admin to update card and featured page content. Changes are saved in your project data file via the API server.',
+  downloadsTitle: 'Downloads',
+  downloadsIntro:
+    'Add shared files, installers, or documents here. Seafile share links work well for this section.',
+  downloads: [
+    {
+      title: 'Shared File',
+      url: 'https://seafile.necloud.us',
+      description: 'Replace this with a direct Seafile share link or another download URL.',
+    },
+  ],
+  showSidebar: false,
+  homeSections: DEFAULT_HOME_SECTIONS,
 }
 
 type ScanResult = {
@@ -89,6 +136,7 @@ function createEmptyProject(existing: Project[]): Project {
     title: 'New Project',
     domain: 'new-project.necloud.us',
     url: 'https://new-project.necloud.us',
+    thumbnailUrl: '',
     readmeUrl: '',
     category: 'Custom',
     access: 'Public',
@@ -110,6 +158,87 @@ function createEmptyProject(existing: Project[]): Project {
   }
 }
 
+function getAutoThumbnailUrl(input: string): string {
+  const normalized = normalizeUrl(input)
+  return `https://image.thum.io/get/width/1200/noanimate/${normalized}`
+}
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result)
+        return
+      }
+
+      reject(new Error('Could not read image data'))
+    }
+    reader.onerror = () => reject(new Error('Could not read image data'))
+    reader.readAsDataURL(file)
+  })
+}
+
+function createDownloadItem(existing: DownloadItem[]): DownloadItem {
+  return {
+    title: `Download ${existing.length + 1}`,
+    url: 'https://seafile.necloud.us',
+    description: 'What this file is for and who should use it.',
+  }
+}
+
+function normalizeHomeSections(value: unknown): HomeSectionConfig[] {
+  if (!Array.isArray(value)) {
+    return DEFAULT_HOME_SECTIONS
+  }
+
+  const seen = new Set<HomeSectionId>()
+  const normalized: HomeSectionConfig[] = []
+
+  for (const item of value) {
+    const id = item?.id
+    const placement = item?.placement
+
+    if (
+      (id === 'summary' || id === 'projects' || id === 'quickTips' || id === 'downloads') &&
+      !seen.has(id)
+    ) {
+      normalized.push({
+        id,
+        placement: placement === 'sidebar' ? 'sidebar' : 'main',
+      })
+      seen.add(id)
+    }
+  }
+
+  for (const item of DEFAULT_HOME_SECTIONS) {
+    if (!seen.has(item.id)) {
+      normalized.push(item)
+    }
+  }
+
+  return normalized
+}
+
+function reorderItemsById<T>(
+  items: T[],
+  draggedId: string,
+  targetId: string,
+  getId: (item: T) => string,
+): T[] {
+  const draggedIndex = items.findIndex((item) => getId(item) === draggedId)
+  const targetIndex = items.findIndex((item) => getId(item) === targetId)
+
+  if (draggedIndex === -1 || targetIndex === -1 || draggedIndex === targetIndex) {
+    return items
+  }
+
+  const copy = [...items]
+  const [draggedItem] = copy.splice(draggedIndex, 1)
+  copy.splice(targetIndex, 0, draggedItem)
+  return copy
+}
+
 function readStoredTheme(): ThemeName {
   const saved = localStorage.getItem(THEME_STORAGE_KEY)
   if (
@@ -117,7 +246,11 @@ function readStoredTheme(): ThemeName {
     saved === 'midnight' ||
     saved === 'sand' ||
     saved === 'forest' ||
-    saved === 'sunset'
+    saved === 'sunset' ||
+    saved === 'rose' ||
+    saved === 'slate' ||
+    saved === 'aurora' ||
+    saved === 'amethyst'
   ) {
     return saved
   }
@@ -155,7 +288,11 @@ async function fetchAdminContent(): Promise<
           payload.siteContent.theme === 'midnight' ||
           payload.siteContent.theme === 'sand' ||
           payload.siteContent.theme === 'forest' ||
-          payload.siteContent.theme === 'sunset'
+          payload.siteContent.theme === 'sunset' ||
+          payload.siteContent.theme === 'rose' ||
+          payload.siteContent.theme === 'slate' ||
+          payload.siteContent.theme === 'aurora' ||
+          payload.siteContent.theme === 'amethyst'
             ? payload.siteContent.theme
             : defaultSiteContent.theme,
         homeEyebrow: payload.siteContent.homeEyebrow ?? defaultSiteContent.homeEyebrow,
@@ -164,6 +301,28 @@ async function fetchAdminContent(): Promise<
         projectEyebrow: payload.siteContent.projectEyebrow ?? defaultSiteContent.projectEyebrow,
         quickTipsTitle: payload.siteContent.quickTipsTitle ?? defaultSiteContent.quickTipsTitle,
         quickTipsBody: payload.siteContent.quickTipsBody ?? defaultSiteContent.quickTipsBody,
+        downloadsTitle: payload.siteContent.downloadsTitle ?? defaultSiteContent.downloadsTitle,
+        downloadsIntro: payload.siteContent.downloadsIntro ?? defaultSiteContent.downloadsIntro,
+        downloads:
+          Array.isArray(payload.siteContent.downloads) && payload.siteContent.downloads.length > 0
+            ? payload.siteContent.downloads.map((item) => ({
+                title:
+                  typeof item?.title === 'string' && item.title.trim()
+                    ? item.title
+                    : 'Download',
+                url:
+                  typeof item?.url === 'string' && item.url.trim()
+                    ? item.url
+                    : 'https://seafile.necloud.us',
+                description:
+                  typeof item?.description === 'string' ? item.description : '',
+              }))
+            : defaultSiteContent.downloads,
+        showSidebar:
+          typeof payload.siteContent.showSidebar === 'boolean'
+            ? payload.siteContent.showSidebar
+            : defaultSiteContent.showSidebar,
+        homeSections: normalizeHomeSections(payload.siteContent.homeSections),
       },
     }
   } catch {
@@ -172,11 +331,15 @@ async function fetchAdminContent(): Promise<
 }
 
 async function persistAdminContent(projects: Project[], siteContent: SiteContent) {
-  await fetch(ADMIN_CONTENT_API, {
+  const response = await fetch(ADMIN_CONTENT_API, {
     method: 'PUT',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ projects, siteContent }),
   })
+
+  if (!response.ok) {
+    throw new Error('Failed to save admin content')
+  }
 }
 
 function normalizeUrl(input: string): string {
@@ -378,6 +541,132 @@ function HomePage({
     return projectList.filter((project) => project.ownership === activeFilter)
   }, [activeFilter, projectList])
 
+  const getProjectThumbnailUrl = (project: Project): string => {
+    if (project.thumbnailUrl?.trim()) {
+      return project.thumbnailUrl
+    }
+
+    try {
+      return getAutoThumbnailUrl(project.url)
+    } catch {
+      return ''
+    }
+  }
+
+  const renderHomeSection = (sectionId: HomeSectionId) => {
+    if (sectionId === 'summary') {
+      return (
+        <section className="stats home-block" aria-label="Project summary" key="summary">
+          <article>
+            <p>Total</p>
+            <strong>{projectList.length}</strong>
+          </article>
+          <article>
+            <p>Built</p>
+            <strong>{projectList.filter((project) => project.ownership === 'built').length}</strong>
+          </article>
+          <article>
+            <p>Hosted</p>
+            <strong>{projectList.filter((project) => project.ownership === 'hosted').length}</strong>
+          </article>
+        </section>
+      )
+    }
+
+    if (sectionId === 'projects') {
+      return (
+        <section className="grid home-block" aria-label="Project cards" key="projects">
+          {filteredProjects.map((project) => (
+            <article className="card" key={project.slug}>
+              {getProjectThumbnailUrl(project) ? (
+                <img
+                  className="project-thumbnail"
+                  src={getProjectThumbnailUrl(project)}
+                  alt={`${project.title} preview`}
+                  loading="lazy"
+                  referrerPolicy="no-referrer"
+                  onError={(event) => {
+                    event.currentTarget.style.display = 'none'
+                  }}
+                />
+              ) : null}
+
+              <div className="card-top">
+                <span className="pill">{project.domain}</span>
+                <span className="status live">{project.status}</span>
+              </div>
+
+              <h2 className="title-row">
+                {project.iconUrl ? (
+                  <img className="project-icon" src={project.iconUrl} alt="" />
+                ) : (
+                  <span className="project-icon fallback" aria-hidden="true">
+                    {project.title[0]}
+                  </span>
+                )}
+                {project.title}
+              </h2>
+              <p>{project.summary}</p>
+
+              <ul className="stack" aria-label={`${project.title} tags`}>
+                <li>{project.ownership === 'built' ? 'Built' : 'Hosted'}</li>
+                <li>{project.category}</li>
+                <li>{project.access}</li>
+                <li>NeCloud</li>
+                {project.scanSource === 'manual' ? <li>Manual metadata</li> : null}
+              </ul>
+
+              <footer>
+                <span>{project.ownership === 'built' ? 'Built by me' : 'Hosted by me'}</span>
+                <div className="actions">
+                  <Link to={`/projects/${project.slug}`}>About</Link>
+                  <a href={project.url} target="_blank" rel="noreferrer">
+                    Open Site
+                  </a>
+                </div>
+              </footer>
+            </article>
+          ))}
+        </section>
+      )
+    }
+
+    if (sectionId === 'quickTips') {
+      return (
+        <section className="notes home-block" key="quickTips">
+          <h3>{siteContent.quickTipsTitle}</h3>
+          <p>{siteContent.quickTipsBody}</p>
+        </section>
+      )
+    }
+
+    return (
+      <section className="notes home-block" key="downloads">
+        <h3>{siteContent.downloadsTitle}</h3>
+        <p>{siteContent.downloadsIntro}</p>
+        <div className="downloads-grid" aria-label="Downloads">
+          {siteContent.downloads.map((item, index) => (
+            <article className="download-card" key={`${item.title}-${index}`}>
+              <h4>{item.title}</h4>
+              <p>{item.description}</p>
+              <a href={item.url} target="_blank" rel="noreferrer">
+                Open download
+              </a>
+            </article>
+          ))}
+        </div>
+      </section>
+    )
+  }
+
+  const orderedSections = normalizeHomeSections(siteContent.homeSections)
+  const mainSections = siteContent.showSidebar
+    ? orderedSections.filter((section) => section.placement === 'main')
+    : orderedSections
+  const sidebarSections = siteContent.showSidebar
+    ? orderedSections.filter((section) => section.placement === 'sidebar')
+    : []
+
   return (
     <main className="shell">
       <section className="hero">
@@ -411,66 +700,16 @@ function HomePage({
         </div>
       </section>
 
-      <section className="stats" aria-label="Project summary">
-        <article>
-          <p>Total</p>
-          <strong>{projectList.length}</strong>
-        </article>
-        <article>
-          <p>Built</p>
-          <strong>{projectList.filter((project) => project.ownership === 'built').length}</strong>
-        </article>
-        <article>
-          <p>Hosted</p>
-          <strong>{projectList.filter((project) => project.ownership === 'hosted').length}</strong>
-        </article>
-      </section>
-
-      <section className="grid" aria-label="Project cards">
-        {filteredProjects.map((project) => (
-          <article className="card" key={project.title}>
-            <div className="card-top">
-              <span className="pill">{project.domain}</span>
-              <span className="status live">{project.status}</span>
-            </div>
-
-            <h2 className="title-row">
-              {project.iconUrl ? (
-                <img className="project-icon" src={project.iconUrl} alt="" />
-              ) : (
-                <span className="project-icon fallback" aria-hidden="true">
-                  {project.title[0]}
-                </span>
-              )}
-              {project.title}
-            </h2>
-            <p>{project.summary}</p>
-
-            <ul className="stack" aria-label={`${project.title} tags`}>
-              <li>{project.ownership === 'built' ? 'Built' : 'Hosted'}</li>
-              <li>{project.category}</li>
-              <li>{project.access}</li>
-              <li>NeCloud</li>
-              {project.scanSource === 'manual' ? <li>Manual metadata</li> : null}
-            </ul>
-
-            <footer>
-              <span>{project.ownership === 'built' ? 'Built by me' : 'Hosted by me'}</span>
-              <div className="actions">
-                <Link to={`/projects/${project.slug}`}>About</Link>
-                <a href={project.url} target="_blank" rel="noreferrer">
-                  Open Site
-                </a>
-              </div>
-            </footer>
-          </article>
-        ))}
-      </section>
-
-      <section className="notes">
-        <h3>{siteContent.quickTipsTitle}</h3>
-        <p>{siteContent.quickTipsBody}</p>
-      </section>
+      {siteContent.showSidebar && sidebarSections.length > 0 ? (
+        <div className="home-layout">
+          <div className="home-main">{mainSections.map((section) => renderHomeSection(section.id))}</div>
+          <aside className="home-sidebar">
+            {sidebarSections.map((section) => renderHomeSection(section.id))}
+          </aside>
+        </div>
+      ) : (
+        orderedSections.map((section) => renderHomeSection(section.id))
+      )}
     </main>
   )
 }
@@ -641,6 +880,7 @@ function ProjectPage({
 function AdminPage({
   projectList,
   onSave,
+  onReorderProjects,
   onResetProject,
   onResetAll,
   onDeleteProject,
@@ -652,24 +892,37 @@ function AdminPage({
   onResetSiteContent,
 }: {
   projectList: Project[]
-  onSave: (sourceSlug: string, project: Project) => void
-  onResetProject: (slug: string) => void
-  onResetAll: () => void
-  onDeleteProject: (slug: string) => void
-  onCreateProject: () => Project
+  onSave: (sourceSlug: string, project: Project) => Promise<string>
+  onReorderProjects: (draggedSlug: string, targetSlug: string) => Promise<void>
+  onResetProject: (slug: string) => Promise<void>
+  onResetAll: () => Promise<void>
+  onDeleteProject: (slug: string) => Promise<void>
+  onCreateProject: () => Promise<Project>
   theme: ThemeName
-  onThemeChange: (theme: ThemeName) => void
+  onThemeChange: (theme: ThemeName) => Promise<void>
   siteContent: SiteContent
-  onSaveSiteContent: (siteContent: SiteContent) => void
-  onResetSiteContent: () => void
+  onSaveSiteContent: (siteContent: SiteContent) => Promise<void>
+  onResetSiteContent: () => Promise<void>
 }) {
+  type AdminTab = 'global' | 'downloads' | 'layout' | 'project' | 'featured'
+
   const [selectedSlug, setSelectedSlug] = useState(projectList[0]?.slug ?? '')
   const [draft, setDraft] = useState<Project | null>(projectList[0] ?? null)
+  const [activeTab, setActiveTab] = useState<AdminTab>('global')
   const [scanState, setScanState] = useState<'idle' | 'loading' | 'error' | 'success'>(
     'idle',
   )
   const [scanMessage, setScanMessage] = useState('')
   const [siteDraft, setSiteDraft] = useState<SiteContent>(siteContent)
+  const [thumbnailMode, setThumbnailMode] = useState<'auto' | 'manual'>(
+    projectList[0]?.thumbnailUrl?.trim() ? 'manual' : 'auto',
+  )
+  const [draggedSectionId, setDraggedSectionId] = useState<HomeSectionId | null>(null)
+  const [draggedProjectSlug, setDraggedProjectSlug] = useState<string | null>(null)
+  const [saveNotice, setSaveNotice] = useState<{
+    tone: 'success' | 'error'
+    message: string
+  } | null>(null)
 
   const selectedProject = useMemo(
     () => projectList.find((project) => project.slug === selectedSlug),
@@ -685,6 +938,7 @@ function AdminPage({
 
     if (selectedProject) {
       setDraft(structuredClone(selectedProject))
+      setThumbnailMode(selectedProject.thumbnailUrl?.trim() ? 'manual' : 'auto')
       setScanState('idle')
       setScanMessage('')
     }
@@ -694,6 +948,25 @@ function AdminPage({
     setSiteDraft(siteContent)
   }, [siteContent])
 
+  const setSuccessNotice = (message: string) => {
+    setSaveNotice({ tone: 'success', message })
+  }
+
+  const setErrorNotice = (message: string) => {
+    setSaveNotice({ tone: 'error', message })
+  }
+
+  const reorderHomeSections = (draggedId: HomeSectionId, targetId: HomeSectionId) => {
+    if (draggedId === targetId) {
+      return
+    }
+
+    setSiteDraft({
+      ...siteDraft,
+      homeSections: reorderItemsById(siteDraft.homeSections, draggedId, targetId, (item) => item.id),
+    })
+  }
+
   const handleScanFromUrl = async () => {
     if (!draft) {
       return
@@ -718,6 +991,7 @@ function AdminPage({
         category: result.category,
         access: result.access,
         iconUrl: result.iconUrl,
+        thumbnailUrl: getAutoThumbnailUrl(result.url),
         scanSource: 'scanned',
         summary: result.summary,
         details: result.summary,
@@ -737,6 +1011,26 @@ function AdminPage({
     }
   }
 
+  const handleThumbnailUpload = async (
+    event: ChangeEvent<HTMLInputElement>,
+    currentDraft: Project,
+  ) => {
+    const file = event.target.files?.[0]
+    if (!file) {
+      return
+    }
+
+    try {
+      const dataUrl = await readFileAsDataUrl(file)
+      setDraft({ ...currentDraft, thumbnailUrl: dataUrl })
+      setSuccessNotice('Thumbnail uploaded. Save project to persist it.')
+    } catch {
+      setErrorNotice('Could not read the selected image file.')
+    } finally {
+      event.target.value = ''
+    }
+  }
+
   if (!draft) {
     return (
       <main className="shell">
@@ -751,32 +1045,102 @@ function AdminPage({
     )
   }
 
+  const isManualThumbnail = thumbnailMode === 'manual'
+  let autoThumbnailPreview = ''
+  try {
+    autoThumbnailPreview = getAutoThumbnailUrl(draft.url)
+  } catch {
+    autoThumbnailPreview = ''
+  }
+
   return (
     <main className="shell">
       <section className="hero">
         <p className="eyebrow">Admin</p>
         <h1>Edit Cards and About Pages</h1>
         <p className="intro">
-          Select a project, edit content, then click Save project. Edits persist in your
-          browser and immediately update both cards and featured pages.
+          Use tabs to move between global settings, downloads, project basics, and project
+          content. Saved changes are written through the API and update the live portfolio.
         </p>
         <div className="filters">
           <Link to="/">Back to portfolio</Link>
           <button
             type="button"
-            onClick={() => {
-              const created = onCreateProject()
-              setSelectedSlug(created.slug)
+            onClick={async () => {
+              try {
+                const created = await onCreateProject()
+                setSelectedSlug(created.slug)
+                setActiveTab('project')
+                setSuccessNotice(`Created ${created.title}.`)
+              } catch {
+                setErrorNotice('Could not create a new project.')
+              }
             }}
           >
             Create new entry
           </button>
-          <button type="button" onClick={onResetAll}>
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                await onResetAll()
+                setActiveTab('project')
+                setSuccessNotice('All projects were reset to the default data.')
+              } catch {
+                setErrorNotice('Could not reset all projects.')
+              }
+            }}
+          >
             Reset all
           </button>
         </div>
       </section>
 
+      {saveNotice ? (
+        <section className={`admin-notice ${saveNotice.tone}`} aria-live="polite">
+          <p>{saveNotice.message}</p>
+        </section>
+      ) : null}
+
+      <section className="admin-tabs" aria-label="Admin sections">
+        <button
+          type="button"
+          className={activeTab === 'global' ? 'admin-tab active' : 'admin-tab'}
+          onClick={() => setActiveTab('global')}
+        >
+          Global
+        </button>
+        <button
+          type="button"
+          className={activeTab === 'downloads' ? 'admin-tab active' : 'admin-tab'}
+          onClick={() => setActiveTab('downloads')}
+        >
+          Downloads
+        </button>
+        <button
+          type="button"
+          className={activeTab === 'layout' ? 'admin-tab active' : 'admin-tab'}
+          onClick={() => setActiveTab('layout')}
+        >
+          Layout
+        </button>
+        <button
+          type="button"
+          className={activeTab === 'project' ? 'admin-tab active' : 'admin-tab'}
+          onClick={() => setActiveTab('project')}
+        >
+          Project Basics
+        </button>
+        <button
+          type="button"
+          className={activeTab === 'featured' ? 'admin-tab active' : 'admin-tab'}
+          onClick={() => setActiveTab('featured')}
+        >
+          Project Content
+        </button>
+      </section>
+
+      {activeTab === 'global' ? (
       <section className="notes admin-panel">
         <h3>Global Settings</h3>
         <div className="admin-grid">
@@ -787,13 +1151,24 @@ function AdminPage({
             id="theme-select"
             className="admin-input"
             value={theme}
-            onChange={(event) => onThemeChange(event.target.value as ThemeName)}
+            onChange={async (event) => {
+              try {
+                await onThemeChange(event.target.value as ThemeName)
+                setSuccessNotice('Theme saved.')
+              } catch {
+                setErrorNotice('Could not save the selected theme.')
+              }
+            }}
           >
             <option value="sand">Sandstone</option>
             <option value="ocean">Ocean</option>
             <option value="midnight">Midnight</option>
             <option value="forest">Forest</option>
             <option value="sunset">Sunset</option>
+            <option value="rose">Rose</option>
+            <option value="slate">Slate</option>
+            <option value="aurora">Aurora</option>
+            <option value="amethyst">Amethyst</option>
           </select>
 
           <label className="admin-label" htmlFor="homeEyebrow">
@@ -863,21 +1238,329 @@ function AdminPage({
               setSiteDraft({ ...siteDraft, quickTipsBody: event.target.value })
             }
           />
-
         </div>
 
         <div className="actions admin-actions">
-          <button type="button" onClick={() => onSaveSiteContent(siteDraft)}>
-            Save headers and tips
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                await onSaveSiteContent(siteDraft)
+                setSuccessNotice('Global settings saved.')
+              } catch {
+                setErrorNotice('Could not save global settings.')
+              }
+            }}
+          >
+            Save global settings
           </button>
-          <button type="button" onClick={onResetSiteContent}>
-            Reset headers
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                await onResetSiteContent()
+                setSuccessNotice('Global settings were reset.')
+              } catch {
+                setErrorNotice('Could not reset global settings.')
+              }
+            }}
+          >
+            Reset global settings
           </button>
         </div>
       </section>
+      ) : null}
 
+      {activeTab === 'layout' ? (
       <section className="notes admin-panel">
-        <h3>Project Settings</h3>
+        <h3>Homepage Layout</h3>
+        <div className="admin-grid">
+          <label className="admin-label" htmlFor="showSidebar">
+            Sidebar layout
+          </label>
+          <label className="admin-checkbox-row" htmlFor="showSidebar">
+            <input
+              id="showSidebar"
+              type="checkbox"
+              checked={siteDraft.showSidebar}
+              onChange={(event) =>
+                setSiteDraft({ ...siteDraft, showSidebar: event.target.checked })
+              }
+            />
+            <span>Enable sidebar on the home page</span>
+          </label>
+        </div>
+
+        <div className="layout-manager">
+          <h4>Section order and placement</h4>
+          <p>
+            Drag sections into the order you want and choose whether each one sits in the
+            main column or the sidebar. When the sidebar is off, everything falls back into a
+            single column.
+          </p>
+          {siteDraft.homeSections.map((section) => (
+            <div
+              className="layout-row"
+              key={section.id}
+              draggable
+              onDragStart={() => setDraggedSectionId(section.id)}
+              onDragEnd={() => setDraggedSectionId(null)}
+              onDragOver={(event) => event.preventDefault()}
+              onDrop={(event) => {
+                event.preventDefault()
+                if (!draggedSectionId) {
+                  return
+                }
+
+                reorderHomeSections(draggedSectionId, section.id)
+                setDraggedSectionId(null)
+              }}
+            >
+              <div>
+                <span className="drag-hint">Drag to reorder</span>
+                <strong>{HOME_SECTION_LABELS[section.id]}</strong>
+              </div>
+              <select
+                className="admin-input layout-select"
+                value={section.placement}
+                onChange={(event) => {
+                  const homeSections = siteDraft.homeSections.map((item) =>
+                    item.id === section.id
+                      ? {
+                          ...item,
+                          placement: event.target.value as HomeSectionPlacement,
+                        }
+                      : item,
+                  )
+                  setSiteDraft({ ...siteDraft, homeSections })
+                }}
+              >
+                <option value="main">Main column</option>
+                <option value="sidebar">Sidebar</option>
+              </select>
+              <div className="layout-actions">
+                <span className="drag-pill">Drop above or below another row</span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="layout-manager">
+          <h4>Project card order</h4>
+          <p>Drag projects into the order you want for the cards on the home page.</p>
+          {projectList.map((project) => (
+            <div
+              className="layout-row"
+              key={project.slug}
+              draggable
+              onDragStart={() => setDraggedProjectSlug(project.slug)}
+              onDragEnd={() => setDraggedProjectSlug(null)}
+              onDragOver={(event) => event.preventDefault()}
+              onDrop={async (event) => {
+                event.preventDefault()
+                if (!draggedProjectSlug || draggedProjectSlug === project.slug) {
+                  return
+                }
+
+                try {
+                  await onReorderProjects(draggedProjectSlug, project.slug)
+                  setSuccessNotice('Project order updated.')
+                } catch {
+                  setErrorNotice('Could not reorder this project.')
+                } finally {
+                  setDraggedProjectSlug(null)
+                }
+              }}
+            >
+              <div>
+                <span className="drag-hint">Drag to reorder</span>
+                <strong>{project.title}</strong>
+                <p>{project.domain}</p>
+              </div>
+              <div className="layout-actions">
+                <span className="drag-pill">Drop onto another project row</span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="actions admin-actions">
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                await onSaveSiteContent(siteDraft)
+                setSuccessNotice('Layout settings saved.')
+              } catch {
+                setErrorNotice('Could not save layout settings.')
+              }
+            }}
+          >
+            Save layout
+          </button>
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                await onResetSiteContent()
+                setSuccessNotice('Layout settings were reset with the rest of global settings.')
+              } catch {
+                setErrorNotice('Could not reset layout settings.')
+              }
+            }}
+          >
+            Reset layout
+          </button>
+        </div>
+      </section>
+      ) : null}
+
+      {activeTab === 'downloads' ? (
+      <section className="notes admin-panel">
+        <h3>Downloads</h3>
+        <div className="admin-grid">
+          <label className="admin-label" htmlFor="downloadsTitle">
+            Downloads title
+          </label>
+          <input
+            id="downloadsTitle"
+            className="admin-input"
+            value={siteDraft.downloadsTitle}
+            onChange={(event) =>
+              setSiteDraft({ ...siteDraft, downloadsTitle: event.target.value })
+            }
+          />
+
+          <label className="admin-label" htmlFor="downloadsIntro">
+            Downloads intro
+          </label>
+          <textarea
+            id="downloadsIntro"
+            className="admin-input admin-textarea"
+            value={siteDraft.downloadsIntro}
+            onChange={(event) =>
+              setSiteDraft({ ...siteDraft, downloadsIntro: event.target.value })
+            }
+          />
+        </div>
+
+        <div className="downloads-editor">
+          <div className="downloads-editor-header">
+            <h4>Download items</h4>
+            <button
+              type="button"
+              className="admin-secondary-button"
+              onClick={() =>
+                setSiteDraft({
+                  ...siteDraft,
+                  downloads: [...siteDraft.downloads, createDownloadItem(siteDraft.downloads)],
+                })
+              }
+            >
+              Add download
+            </button>
+          </div>
+
+          {siteDraft.downloads.map((item, index) => (
+            <div className="download-editor-card" key={`${item.title}-${index}`}>
+              <label className="admin-label" htmlFor={`download-title-${index}`}>
+                Title
+              </label>
+              <input
+                id={`download-title-${index}`}
+                className="admin-input"
+                value={item.title}
+                onChange={(event) => {
+                  const downloads = siteDraft.downloads.map((entry, entryIndex) =>
+                    entryIndex === index ? { ...entry, title: event.target.value } : entry,
+                  )
+                  setSiteDraft({ ...siteDraft, downloads })
+                }}
+              />
+
+              <label className="admin-label" htmlFor={`download-url-${index}`}>
+                URL
+              </label>
+              <input
+                id={`download-url-${index}`}
+                className="admin-input"
+                value={item.url}
+                onChange={(event) => {
+                  const downloads = siteDraft.downloads.map((entry, entryIndex) =>
+                    entryIndex === index ? { ...entry, url: event.target.value } : entry,
+                  )
+                  setSiteDraft({ ...siteDraft, downloads })
+                }}
+              />
+
+              <label className="admin-label" htmlFor={`download-description-${index}`}>
+                Description
+              </label>
+              <textarea
+                id={`download-description-${index}`}
+                className="admin-input admin-textarea"
+                value={item.description}
+                onChange={(event) => {
+                  const downloads = siteDraft.downloads.map((entry, entryIndex) =>
+                    entryIndex === index
+                      ? { ...entry, description: event.target.value }
+                      : entry,
+                  )
+                  setSiteDraft({ ...siteDraft, downloads })
+                }}
+              />
+
+              <button
+                type="button"
+                className="admin-secondary-button"
+                onClick={() =>
+                  setSiteDraft({
+                    ...siteDraft,
+                    downloads: siteDraft.downloads.filter((_, entryIndex) => entryIndex !== index),
+                  })
+                }
+                disabled={siteDraft.downloads.length === 1}
+              >
+                Remove download
+              </button>
+            </div>
+          ))}
+        </div>
+
+        <div className="actions admin-actions">
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                await onSaveSiteContent(siteDraft)
+                setSuccessNotice('Downloads saved.')
+              } catch {
+                setErrorNotice('Could not save downloads.')
+              }
+            }}
+          >
+            Save downloads
+          </button>
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                await onResetSiteContent()
+                setSuccessNotice('Downloads were reset with the rest of global settings.')
+              } catch {
+                setErrorNotice('Could not reset downloads.')
+              }
+            }}
+          >
+            Reset downloads
+          </button>
+        </div>
+      </section>
+      ) : null}
+
+      {activeTab === 'project' ? (
+      <section className="notes admin-panel">
+        <h3>Project Basics</h3>
         <label className="admin-label" htmlFor="project-select">
           Project
         </label>
@@ -1012,6 +1695,75 @@ function AdminPage({
             ) : null}
           </div>
 
+        </div>
+
+        <div className="actions admin-actions">
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                const savedSlug = await onSave(selectedSlug, draft)
+                setSelectedSlug(savedSlug)
+                setSuccessNotice(`Saved ${draft.title}.`)
+              } catch {
+                setErrorNotice('Could not save this project.')
+              }
+            }}
+          >
+            Save project
+          </button>
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                await onResetProject(selectedSlug)
+                setSuccessNotice('Project was reset to its default data.')
+              } catch {
+                setErrorNotice('Could not reset this project.')
+              }
+            }}
+          >
+            Reset project
+          </button>
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                await onDeleteProject(selectedSlug)
+                setActiveTab('project')
+                setSuccessNotice('Project removed.')
+              } catch {
+                setErrorNotice('Could not remove this project.')
+              }
+            }}
+          >
+            Remove project
+          </button>
+        </div>
+      </section>
+      ) : null}
+
+      {activeTab === 'featured' ? (
+      <section className="notes admin-panel">
+        <h3>Project Content</h3>
+        <label className="admin-label" htmlFor="project-select-featured">
+          Project
+        </label>
+        <select
+          id="project-select-featured"
+          className="admin-input"
+          value={selectedSlug}
+          onChange={(event) => setSelectedSlug(event.target.value)}
+        >
+          {projectList.map((project) => (
+            <option key={project.slug} value={project.slug}>
+              {project.title}
+            </option>
+          ))}
+        </select>
+
+        <div className="admin-grid">
+
           <label className="admin-label" htmlFor="iconUrl">
             Icon URL
           </label>
@@ -1022,6 +1774,89 @@ function AdminPage({
             onChange={(event) => setDraft({ ...draft, iconUrl: event.target.value || undefined })}
           />
 
+          <label className="admin-label" htmlFor="thumbnailUrl">
+            Screenshot mode
+          </label>
+          <select
+            id="thumbnailUrl"
+            className="admin-input"
+            value={thumbnailMode}
+            onChange={(event) => {
+              if (event.target.value === 'manual') {
+                setThumbnailMode('manual')
+                setDraft({ ...draft, thumbnailUrl: draft.thumbnailUrl ?? '' })
+              } else {
+                setThumbnailMode('auto')
+                setDraft({ ...draft, thumbnailUrl: undefined })
+              }
+            }}
+          >
+            <option value="auto">Automatic screenshot from URL</option>
+            <option value="manual">Manual screenshot URL or upload</option>
+          </select>
+          <p className="thumbnail-mode-note">
+            To upload your own screenshot: set mode to Manual, choose an image file below, then
+            click Save project.
+          </p>
+
+          {isManualThumbnail ? (
+            <>
+              <label className="admin-label" htmlFor="manualThumbnailUrl">
+                Manual screenshot URL
+              </label>
+              <input
+                id="manualThumbnailUrl"
+                className="admin-input"
+                value={draft.thumbnailUrl ?? ''}
+                onChange={(event) =>
+                  setDraft({ ...draft, thumbnailUrl: event.target.value || undefined })
+                }
+              />
+
+              <div className="thumbnail-actions">
+                <label className="admin-label" htmlFor="thumbnailUpload">
+                  Upload screenshot image
+                </label>
+                <input
+                  id="thumbnailUpload"
+                  type="file"
+                  accept="image/*"
+                  className="admin-input thumbnail-file-input"
+                  onChange={(event) => {
+                    void handleThumbnailUpload(event, draft)
+                  }}
+                />
+                <button
+                  type="button"
+                  className="admin-secondary-button"
+                  onClick={() => {
+                    setThumbnailMode('auto')
+                    setDraft({ ...draft, thumbnailUrl: undefined })
+                    setSuccessNotice('Switched to automatic screenshot mode.')
+                  }}
+                >
+                  Use automatic mode
+                </button>
+              </div>
+            </>
+          ) : (
+            <p className="thumbnail-mode-note">
+              Automatic mode uses the project URL to generate a live screenshot preview.
+            </p>
+          )}
+
+          {(isManualThumbnail && draft.thumbnailUrl) || (!isManualThumbnail && autoThumbnailPreview) ? (
+            <div className="admin-thumbnail-preview">
+              <img
+                src={isManualThumbnail ? draft.thumbnailUrl : autoThumbnailPreview}
+                alt={`${draft.title} thumbnail preview`}
+              />
+              <p className="thumbnail-mode-note">
+                {isManualThumbnail ? 'Manual screenshot preview' : 'Automatic screenshot preview'}
+              </p>
+            </div>
+          ) : null}
+
           <label className="admin-label" htmlFor="headline">
             Project page subtitle
           </label>
@@ -1116,26 +1951,34 @@ function AdminPage({
         <div className="actions admin-actions">
           <button
             type="button"
-            onClick={() => {
-              onSave(selectedSlug, draft)
-              setSelectedSlug(draft.slug)
+            onClick={async () => {
+              try {
+                const savedSlug = await onSave(selectedSlug, draft)
+                setSelectedSlug(savedSlug)
+                setSuccessNotice(`Saved ${draft.title}.`)
+              } catch {
+                setErrorNotice('Could not save this project.')
+              }
             }}
           >
             Save project
           </button>
-          <button type="button" onClick={() => onResetProject(selectedSlug)}>
-            Reset project
-          </button>
           <button
             type="button"
-            onClick={() => {
-              onDeleteProject(selectedSlug)
+            onClick={async () => {
+              try {
+                await onResetProject(selectedSlug)
+                setSuccessNotice('Project was reset to its default data.')
+              } catch {
+                setErrorNotice('Could not reset this project.')
+              }
             }}
           >
-            Remove project
+            Reset project
           </button>
         </div>
       </section>
+      ) : null}
     </main>
   )
 }
@@ -1163,7 +2006,7 @@ function App() {
     document.documentElement.setAttribute('data-theme', theme)
   }, [theme])
 
-  const handleSaveProject = (sourceSlug: string, project: Project) => {
+  const handleSaveProject = async (sourceSlug: string, project: Project) => {
     const safeSlug = createUniqueSlug(
       project.slug,
       managedProjects.filter((item) => item.slug !== sourceSlug),
@@ -1181,62 +2024,69 @@ function App() {
       item.slug === sourceSlug ? normalizedProject : item,
     )
 
+    await persistAdminContent(updated, siteContent)
     setManagedProjects(updated)
-    void persistAdminContent(updated, siteContent)
+    return safeSlug
   }
 
-  const handleResetProject = (slug: string) => {
+  const handleResetProject = async (slug: string) => {
     const original = baseProjects.find((project) => project.slug === slug)
     if (!original) {
-      return
+      throw new Error('Project not found')
     }
 
     const updated = managedProjects.map((item) =>
       item.slug === slug ? structuredClone(original) : item,
     )
 
+    await persistAdminContent(updated, siteContent)
     setManagedProjects(updated)
-    void persistAdminContent(updated, siteContent)
   }
 
-  const handleResetAll = () => {
+  const handleResetAll = async () => {
     const updated = structuredClone(baseProjects)
+    await persistAdminContent(updated, siteContent)
     setManagedProjects(updated)
-    void persistAdminContent(updated, siteContent)
   }
 
-  const handleCreateProject = () => {
+  const handleCreateProject = async () => {
     const created = createEmptyProject(managedProjects)
     const updated = [...managedProjects, created]
+    await persistAdminContent(updated, siteContent)
     setManagedProjects(updated)
-    void persistAdminContent(updated, siteContent)
     return created
   }
 
-  const handleDeleteProject = (slug: string) => {
-    const updated = managedProjects.filter((item) => item.slug !== slug)
+  const handleReorderProjects = async (draggedSlug: string, targetSlug: string) => {
+    const updated = reorderItemsById(managedProjects, draggedSlug, targetSlug, (item) => item.slug)
+    await persistAdminContent(updated, siteContent)
     setManagedProjects(updated)
-    void persistAdminContent(updated, siteContent)
   }
 
-  const handleResetSiteContent = () => {
+  const handleDeleteProject = async (slug: string) => {
+    const updated = managedProjects.filter((item) => item.slug !== slug)
+    await persistAdminContent(updated, siteContent)
+    setManagedProjects(updated)
+  }
+
+  const handleResetSiteContent = async () => {
     const updatedSiteContent = structuredClone(defaultSiteContent)
+    await persistAdminContent(managedProjects, updatedSiteContent)
     setSiteContent(updatedSiteContent)
     setTheme(updatedSiteContent.theme)
-    void persistAdminContent(managedProjects, updatedSiteContent)
   }
 
-  const handleSaveSiteContent = (updatedSiteContent: SiteContent) => {
+  const handleSaveSiteContent = async (updatedSiteContent: SiteContent) => {
+    await persistAdminContent(managedProjects, updatedSiteContent)
     setSiteContent(updatedSiteContent)
     setTheme(updatedSiteContent.theme)
-    void persistAdminContent(managedProjects, updatedSiteContent)
   }
 
-  const handleThemeChange = (nextTheme: ThemeName) => {
-    setTheme(nextTheme)
+  const handleThemeChange = async (nextTheme: ThemeName) => {
     const updatedSiteContent = { ...siteContent, theme: nextTheme }
+    await persistAdminContent(managedProjects, updatedSiteContent)
+    setTheme(nextTheme)
     setSiteContent(updatedSiteContent)
-    void persistAdminContent(managedProjects, updatedSiteContent)
   }
 
   return (
@@ -1255,6 +2105,7 @@ function App() {
           <AdminPage
             projectList={managedProjects}
             onSave={handleSaveProject}
+            onReorderProjects={handleReorderProjects}
             onResetProject={handleResetProject}
             onResetAll={handleResetAll}
             onDeleteProject={handleDeleteProject}
diff --git a/src/data/projects.ts b/src/data/projects.ts
index 8369f1f..76c23ff 100644
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -5,6 +5,7 @@ export type Project = {
   title: string
   domain: string
   url: string
+  thumbnailUrl?: string
   readmeUrl?: string
   category: string
   access: 'Public' | 'Login required' | 'Mixed'
diff --git a/src/index.css b/src/index.css
index afe6367..41bf030 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,6 +15,14 @@
   --input-bg: #fffdf9;
   --display: 'Rockwell', 'Bookman Old Style', 'Georgia', serif;
   --body: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
+  --radius-card: 18px;
+  --radius-tile: 14px;
+  --radius-panel: 24px;
+  --radius-note: 12px;
+  --radius-input: 10px;
+  --radius-chip: 8px;
+  --shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
+  --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.06);
 
   font-family: var(--body);
   line-height: 1.45;
@@ -57,6 +65,8 @@
   --pill-bg: #31445b;
   --pill-ink: #d9e5f3;
   --input-bg: #121d2b;
+  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+  --shadow-elevated: 0 6px 24px rgba(0, 0, 0, 0.6);
 }
 
 :root[data-theme='forest'] {
@@ -93,6 +103,104 @@
   --input-bg: #fff9f4;
 }
 
+:root[data-theme='rose'] {
+  --bg: #fcf0f4;
+  --ink: #2d1825;
+  --ink-muted: #7d4b63;
+  --line: #f0c4d8;
+  --accent: #b8325a;
+  --hero-glow: #f4aec8;
+  --bg-radial: #fde3ec;
+  --bg-bottom: #f8dde8;
+  --surface: #ffffff;
+  --surface-soft: #fff7fa;
+  --chip-bg: #fdeef3;
+  --pill-bg: #fbd6e5;
+  --pill-ink: #8a2444;
+  --input-bg: #fffcfd;
+  --radius-card: 22px;
+  --radius-tile: 18px;
+  --radius-panel: 32px;
+  --radius-note: 16px;
+  --radius-input: 12px;
+  --radius-chip: 10px;
+  --shadow: 0 2px 10px rgba(184, 50, 90, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
+  --shadow-elevated: 0 6px 28px rgba(184, 50, 90, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
+  --display: 'Georgia', 'Book Antiqua', 'Palatino', serif;
+}
+
+:root[data-theme='slate'] {
+  --bg: #f0f2f6;
+  --ink: #181d28;
+  --ink-muted: #49556e;
+  --line: #cdd3e0;
+  --accent: #3455e0;
+  --hero-glow: #b5c1f5;
+  --bg-radial: #e2e7f4;
+  --bg-bottom: #e4e8f0;
+  --surface: #ffffff;
+  --surface-soft: #f5f7fb;
+  --chip-bg: #edf0f8;
+  --pill-bg: #dce2f8;
+  --pill-ink: #1e38be;
+  --input-bg: #f9fafc;
+  --radius-card: 8px;
+  --radius-tile: 6px;
+  --radius-panel: 12px;
+  --radius-note: 8px;
+  --radius-input: 6px;
+  --radius-chip: 4px;
+  --shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(52, 85, 224, 0.06);
+  --shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(52, 85, 224, 0.08);
+  --display: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
+}
+
+:root[data-theme='aurora'] {
+  --bg: #0c1220;
+  --ink: #e5edf8;
+  --ink-muted: #8096bb;
+  --line: #263050;
+  --accent: #00c9a7;
+  --hero-glow: #0a4040;
+  --bg-radial: #121d38;
+  --bg-bottom: #090f1c;
+  --surface: #131e34;
+  --surface-soft: #192438;
+  --chip-bg: #1e2e50;
+  --pill-bg: #0e3040;
+  --pill-ink: #7ef0d8;
+  --input-bg: #0c1625;
+  --shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 201, 167, 0.06);
+  --shadow-elevated: 0 6px 28px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 201, 167, 0.12);
+  --display: 'Courier New', Courier, monospace;
+}
+
+:root[data-theme='amethyst'] {
+  --bg: #f2eff9;
+  --ink: #1c1435;
+  --ink-muted: #5e4e90;
+  --line: #d4c8f0;
+  --accent: #7c3aed;
+  --hero-glow: #c4b0e8;
+  --bg-radial: #e8e1f8;
+  --bg-bottom: #e2d9f5;
+  --surface: #ffffff;
+  --surface-soft: #f8f6fc;
+  --chip-bg: #f0ecfa;
+  --pill-bg: #e6dbf8;
+  --pill-ink: #5a28b5;
+  --input-bg: #fbfafe;
+  --radius-card: 24px;
+  --radius-tile: 18px;
+  --radius-panel: 32px;
+  --radius-note: 18px;
+  --radius-input: 14px;
+  --radius-chip: 10px;
+  --shadow: 0 2px 10px rgba(124, 58, 237, 0.10), 0 1px 4px rgba(0, 0, 0, 0.04);
+  --shadow-elevated: 0 6px 28px rgba(124, 58, 237, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
+  --display: 'Georgia', 'Book Antiqua', 'Palatino', serif;
+}
+
 * {
   box-sizing: border-box;
 }