Set up Siteforge container deployment and registry publishing

src/App.css

@@ -0,0 +1,419 @@
+.shell {
+  width: min(1080px, 100% - 2rem);
+  margin: 0 auto;
+  padding: 3rem 0 4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.hero {
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  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%);
+  animation: reveal 480ms ease-out both;
+}
+
+.eyebrow {
+  margin: 0;
+  font-family: var(--display);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.85rem;
+  color: var(--ink-muted);
+}
+
+h1 {
+  margin: 0.5rem 0;
+  font-family: var(--display);
+  font-size: clamp(2rem, 4vw, 3.4rem);
+  line-height: 1.08;
+  color: var(--ink);
+}
+
+.intro {
+  margin: 0;
+  max-width: 62ch;
+  color: var(--ink-muted);
+}
+
+.filters {
+  margin-top: 1.2rem;
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.filters button {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.8);
+  color: var(--ink);
+  padding: 0.45rem 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 180ms ease, background-color 180ms ease;
+}
+
+.filters a {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.8);
+  color: var(--ink);
+  padding: 0.45rem 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.filters button:hover {
+  transform: translateY(-1px);
+}
+
+.filters button.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.8rem;
+}
+
+.stats article {
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 0.9rem 1rem;
+  background: var(--surface);
+}
+
+.stats p {
+  margin: 0;
+  color: var(--ink-muted);
+  font-size: 0.85rem;
+}
+
+.stats strong {
+  font-size: 1.6rem;
+  color: var(--ink);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.25;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.9rem;
+}
+
+.card {
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  padding: 1rem;
+  background: var(--surface);
+  animation: reveal 500ms ease-out both;
+}
+
+.card h2 {
+  margin: 0.65rem 0 0.4rem;
+  font-family: var(--display);
+  color: var(--ink);
+}
+
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.project-icon {
+  width: 1.55rem;
+  height: 1.55rem;
+  border-radius: 0.4rem;
+  object-fit: cover;
+  border: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.project-icon.fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--body);
+  font-weight: 700;
+  color: var(--ink-muted);
+  background: var(--chip-bg);
+}
+
+.card p {
+  margin: 0;
+  color: var(--ink-muted);
+}
+
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.pill,
+.status {
+  font-size: 0.72rem;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  border-radius: 999px;
+  padding: 0.3rem 0.55rem;
+  font-weight: 700;
+}
+
+.pill {
+  background: var(--pill-bg);
+  color: var(--pill-ink);
+}
+
+.status {
+  background: #ececec;
+  color: #434343;
+}
+
+.status.live {
+  background: #d5f3e0;
+  color: #145a32;
+}
+
+.status.in-progress {
+  background: #fde6bf;
+  color: #7a4e00;
+}
+
+.status.archived {
+  background: #ebebeb;
+  color: #4a4a4a;
+}
+
+.stack {
+  list-style: none;
+  padding: 0;
+  margin: 0.85rem 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.stack li {
+  padding: 0.28rem 0.5rem;
+  background: var(--chip-bg);
+  border-radius: 8px;
+  font-size: 0.8rem;
+}
+
+.card footer {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.actions {
+  display: flex;
+  gap: 0.45rem;
+}
+
+.card footer a {
+  text-decoration: none;
+  display: inline-block;
+  border-radius: 10px;
+  padding: 0.45rem 0.75rem;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+}
+
+.card footer a:hover {
+  filter: brightness(1.05);
+}
+
+.notes {
+  border: 1px dashed var(--line);
+  border-radius: 12px;
+  padding: 1rem;
+  background: var(--surface-soft);
+}
+
+.notes h3 {
+  margin: 0 0 0.4rem;
+  font-family: var(--display);
+}
+
+.notes p {
+  margin: 0;
+  color: var(--ink-muted);
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.9rem;
+}
+
+.detail-card {
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--surface);
+  padding: 1rem;
+}
+
+.detail-card h3 {
+  margin: 0 0 0.45rem;
+  font-family: var(--display);
+}
+
+.detail-card p {
+  margin: 0;
+  color: var(--ink-muted);
+}
+
+.update-tip {
+  margin-top: 0.8rem;
+  font-size: 0.9rem;
+}
+
+.admin-panel {
+  background: var(--surface);
+}
+
+.admin-grid {
+  margin-top: 0.8rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.55rem;
+}
+
+.admin-label {
+  font-weight: 700;
+  color: var(--ink);
+  font-size: 0.9rem;
+}
+
+.admin-input {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.55rem 0.7rem;
+  font: inherit;
+  color: var(--ink);
+  background: var(--input-bg);
+}
+
+.admin-textarea {
+  min-height: 90px;
+  resize: vertical;
+}
+
+.scan-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.scan-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;
+}
+
+.scan-status {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.scan-status.success {
+  color: #1f7a46;
+}
+
+.scan-status.error {
+  color: #a33b1f;
+}
+
+.scan-status.loading,
+.scan-status.idle {
+  color: var(--ink-muted);
+}
+
+.admin-actions {
+  margin-top: 1rem;
+}
+
+.admin-actions 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;
+}
+
+.admin-actions button:first-child {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  background: #f0ece6;
+  padding: 0.15rem 0.4rem;
+  border-radius: 6px;
+}
+
+@keyframes reveal {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 760px) {
+  .shell {
+    width: min(1080px, 100% - 1rem);
+    padding-top: 1rem;
+  }
+
+  .hero {
+    padding: 1.2rem;
+  }
+
+  .stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stats article:last-child {
+    grid-column: auto;
+  }
+}

src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/data/projects.ts

@@ -0,0 +1,268 @@
+export type Ownership = 'built' | 'hosted'
+
+export type Project = {
+  slug: string
+  title: string
+  domain: string
+  url: string
+  category: string
+  access: 'Public' | 'Login required' | 'Mixed'
+  iconUrl?: string
+  ownership: Ownership
+  status: 'Live'
+  summary: string
+  details: string
+  features: string[]
+  scanSource: 'scanned' | 'manual'
+  featured: {
+    headline: string
+    problem: string
+    solution: string
+    stack: string[]
+    highlights: string[]
+    nextSteps: string[]
+    updateNote: string
+  }
+}
+
+export const projects: Project[] = [
+  {
+    slug: 'weather',
+    title: 'NeCloud Weather',
+    domain: 'weather.necloud.us',
+    url: 'https://weather.necloud.us',
+    category: 'Weather',
+    access: 'Public',
+    ownership: 'built',
+    status: 'Live',
+    summary: 'Weather dashboard with hourly forecasts, radar, and practical daily details.',
+    details:
+      'The homepage highlights Open-Meteo and RainViewer data, current conditions, high/low, daylight windows, and quick bring-along suggestions.',
+    features: ['Hourly forecast', 'Radar view', 'Wind and atmosphere panel'],
+    scanSource: 'scanned',
+    featured: {
+      headline: 'Fast weather checks with useful details at a glance.',
+      problem:
+        'Most weather tools either feel too basic or too noisy when you only want quick, actionable updates.',
+      solution:
+        'NeCloud Weather combines clean current conditions, practical recommendation blocks, and rapid forecast scanning in one view.',
+      stack: ['React', 'TypeScript', 'Open-Meteo', 'RainViewer'],
+      highlights: ['Location search', 'Hero weather card', '24-hour timeline', 'Radar shortcut'],
+      nextSteps: ['Add severe weather alerts', 'Save favorite locations', 'Add sunrise trend charts'],
+      updateNote: 'Edit this content in src/data/projects.ts under the weather project.',
+    },
+  },
+  {
+    slug: 'capsule',
+    title: 'Capsule',
+    domain: 'capsule.necloud.us',
+    url: 'https://capsule.necloud.us',
+    category: 'Finance',
+    access: 'Mixed',
+    iconUrl: 'https://capsule.necloud.us/images/capsule-logo.svg',
+    ownership: 'built',
+    status: 'Live',
+    summary: 'Smart envelope budgeting app focused on planning and income allocation.',
+    details:
+      'The site presents guided setup, envelope-based spending controls, and paycheck auto-allocation to keep budgets structured.',
+    features: ['Envelope budgeting', 'Income auto-allocation', 'Offline-ready data'],
+    scanSource: 'scanned',
+    featured: {
+      headline: 'A practical budgeting workflow built around envelope control.',
+      problem:
+        'Traditional budget tools can feel rigid or overwhelming for everyday spending decisions.',
+      solution:
+        'Capsule uses guided setup and smart allocation so users can organize spending with clear envelope categories.',
+      stack: ['React', 'TypeScript', 'Local-first storage'],
+      highlights: ['Guided setup wizard', 'Envelope categories', 'Auto-allocation rules'],
+      nextSteps: ['Add recurring bill templates', 'Import transaction feeds', 'Monthly budget snapshots'],
+      updateNote: 'Edit this content in src/data/projects.ts under the capsule project.',
+    },
+  },
+  {
+    slug: 'nexusbible',
+    title: 'Nexus Bible',
+    domain: 'nexusbible.necloud.us',
+    url: 'https://nexusbible.necloud.us',
+    category: 'Study',
+    access: 'Mixed',
+    ownership: 'built',
+    status: 'Live',
+    summary: 'Bible reader for reading, comparison, and study using Free Use Bible API data.',
+    details:
+      'The app exposes navigation, reader controls, bookmarks, and daily-focus tooling to support regular scripture study.',
+    features: ['Reader modes', 'Bookmarks', 'Daily focus workflow'],
+    scanSource: 'scanned',
+    featured: {
+      headline: 'Scripture reading designed for depth, rhythm, and clarity.',
+      problem:
+        'Switching between apps for reading, comparison, and planning breaks study flow.',
+      solution:
+        'Nexus Bible unifies reader tools, bookmarks, and daily focus controls for a single focused study experience.',
+      stack: ['React', 'TypeScript', 'Free Use Bible API'],
+      highlights: ['Reader mode', 'Passage navigation', 'Bookmarks', 'Daily focus entry points'],
+      nextSteps: ['Add multi-translation compare view', 'Personal note collections', 'Reading streak tracking'],
+      updateNote: 'Edit this content in src/data/projects.ts under the nexusbible project.',
+    },
+  },
+  {
+    slug: 'prayer',
+    title: 'Haver',
+    domain: 'prayer.necloud.us',
+    url: 'https://prayer.necloud.us',
+    category: 'Faith',
+    access: 'Mixed',
+    ownership: 'built',
+    status: 'Live',
+    summary: 'Prayer journal app for daily entries, requests, and answered-prayer tracking.',
+    details:
+      'Landing content emphasizes a minimalist prayer workflow with dashboards, calendar history, and Google Calendar reminder sync.',
+    features: ['Prayer journal', 'Prayer dashboard', 'Calendar integration'],
+    scanSource: 'scanned',
+    featured: {
+      headline: 'A calm daily prayer workflow with meaningful tracking.',
+      problem:
+        'Prayer journaling often lives across scattered notes and reminders, making consistency difficult.',
+      solution:
+        'Haver centralizes requests, daily entries, answered prayers, and reminder sync into one simple interface.',
+      stack: ['React', 'Firebase', 'Google Calendar integration'],
+      highlights: ['Prayer composer', 'Answered prayer tracking', 'Calendar view', 'Reminder sync'],
+      nextSteps: ['Add shared prayer groups', 'Voice prayer entry', 'Weekly summary digest'],
+      updateNote: 'Edit this content in src/data/projects.ts under the prayer project.',
+    },
+  },
+  {
+    slug: 'skywatch',
+    title: 'Skywatch',
+    domain: 'skywatch.necloud.us',
+    url: 'https://skywatch.necloud.us',
+    category: 'Sky and Space',
+    access: 'Public',
+    ownership: 'built',
+    status: 'Live',
+    summary: 'Skywatch project in your NeCloud stack.',
+    details:
+      'Live page content could not be scanned automatically because the endpoint responded with 401; this entry is currently a manual placeholder.',
+    features: ['Manual metadata fallback', 'Live endpoint available via domain'],
+    scanSource: 'manual',
+    featured: {
+      headline: 'Skywatch project overview placeholder.',
+      problem: 'Automated scanning could not access this project because the endpoint returned 401.',
+      solution:
+        'This featured page is intentionally editable so you can replace placeholder copy with your exact app details.',
+      stack: ['Update manually'],
+      highlights: ['Placeholder content', 'Manual metadata fallback'],
+      nextSteps: ['Add full description', 'Add stack details', 'Add feature highlights'],
+      updateNote: 'Edit this content in src/data/projects.ts under the skywatch project.',
+    },
+  },
+  {
+    slug: 'spellinghub',
+    title: 'Spelling Hub',
+    domain: 'spellinghub.necloud.us',
+    url: 'https://spellinghub.necloud.us',
+    category: 'Education',
+    access: 'Mixed',
+    ownership: 'built',
+    status: 'Live',
+    summary: 'Modern spelling practice application with account-based learning flows.',
+    details:
+      'Homepage messaging presents a clean practice platform with login and registration for user progress.',
+    features: ['Practice workflows', 'User auth', 'Simple home dashboard'],
+    scanSource: 'scanned',
+    featured: {
+      headline: 'Focused spelling practice with lightweight account flow.',
+      problem:
+        'Many spelling tools are cluttered and do not support structured, repeatable daily practice.',
+      solution:
+        'Spelling Hub keeps onboarding simple and centers the product on practical, repeatable learning loops.',
+      stack: ['React', 'TypeScript', 'Auth-backed workflow'],
+      highlights: ['Login/register flow', 'Practice-first design', 'Simple navigation'],
+      nextSteps: ['Add custom word lists', 'Teacher/student modes', 'Progress analytics dashboard'],
+      updateNote: 'Edit this content in src/data/projects.ts under the spellinghub project.',
+    },
+  },
+  {
+    slug: 'mealie',
+    title: 'Mealie',
+    domain: 'mealie.necloud.us',
+    url: 'https://mealie.necloud.us',
+    category: 'Self-hosted Tools',
+    access: 'Mixed',
+    ownership: 'hosted',
+    status: 'Live',
+    summary: 'Self-hosted recipe manager with categories, tags, and kitchen planning tools.',
+    details:
+      'Scanned content confirms a full Mealie interface with home feed, recipe browsing, and account login flow.',
+    features: ['Recipe library', 'Tags and categories', 'User login'],
+    scanSource: 'scanned',
+    featured: {
+      headline: 'Recipe organization and planning through your self-hosted stack.',
+      problem:
+        'Recipe collections get scattered across browser bookmarks and notes without centralized organization.',
+      solution:
+        'Your Mealie instance provides structured categories, tags, and searchable recipes for day-to-day meal planning.',
+      stack: ['Mealie', 'Self-hosted deployment'],
+      highlights: ['Recipe catalog', 'Category and tag views', 'Account login'],
+      nextSteps: ['Add meal plan snapshots', 'Import bookmark recipes', 'Shopping list workflows'],
+      updateNote: 'Edit this content in src/data/projects.ts under the mealie project.',
+    },
+  },
+  {
+    slug: 'music',
+    title: 'Swing Music',
+    domain: 'music.necloud.us',
+    url: 'https://music.necloud.us',
+    category: 'Self-hosted Tools',
+    access: 'Mixed',
+    ownership: 'hosted',
+    status: 'Live',
+    summary: 'Self-hosted music streaming interface with folders, playlists, and favorites.',
+    details:
+      'Homepage scan identifies Swing Music with library navigation, playlists, favorites, and guest/standard access options.',
+    features: ['Library browsing', 'Playlists', 'Guest mode'],
+    scanSource: 'scanned',
+    featured: {
+      headline: 'Swing Music streaming from your own infrastructure.',
+      problem:
+        'Centralized music services can limit control over personal libraries and hosting preferences.',
+      solution:
+        'Your Swing Music instance provides library browsing, playlists, and favorites with local hosting control.',
+      stack: ['Swing Music', 'Self-hosted deployment'],
+      highlights: ['Library navigation', 'Playlist support', 'Favorites', 'Guest mode'],
+      nextSteps: ['Improve mobile now-playing UI', 'Add listening history', 'Playlist sharing links'],
+      updateNote: 'Edit this content in src/data/projects.ts under the music project.',
+    },
+  },
+  {
+    slug: 'seafile',
+    title: 'Seafile Instance',
+    domain: 'seafile.necloud.us',
+    url: 'https://seafile.necloud.us',
+    category: 'Self-hosted Tools',
+    access: 'Login required',
+    iconUrl: 'https://seafile.necloud.us/media/custom/mylogo.png',
+    ownership: 'hosted',
+    status: 'Live',
+    summary: 'Your self-hosted Seafile instance for secure sync, sharing, and account-based access.',
+    details:
+      'Scanned landing view exposes the Seafile login portal with account signup and password reset features.',
+    features: ['File sync platform', 'Account login', 'Password recovery'],
+    scanSource: 'scanned',
+    featured: {
+      headline: 'A private file sync and sharing system you host yourself.',
+      problem:
+        'Cloud storage options often reduce control over data location and account governance.',
+      solution:
+        'Your Seafile instance gives you direct ownership of file sync, sharing access, and user account management.',
+      stack: ['Seafile', 'Self-hosted deployment'],
+      highlights: ['Secure login', 'Account management', 'Password reset flow'],
+      nextSteps: ['Add team spaces', 'Automated backup checks', 'Storage usage dashboard'],
+      updateNote: 'Edit this content in src/data/projects.ts under the seafile project.',
+    },
+  },
+]
+
+export function getProjectBySlug(slug: string): Project | undefined {
+  return projects.find((project) => project.slug === slug)
+}

src/index.css

@@ -0,0 +1,76 @@
+:root {
+  --bg: #f6f0e8;
+  --ink: #1f1d1a;
+  --ink-muted: #5d584f;
+  --line: #d8cdbf;
+  --accent: #b04a1f;
+  --hero-glow: #f7d8a6;
+  --bg-radial: #fff5de;
+  --bg-bottom: #efe4d6;
+  --surface: #fff;
+  --surface-soft: #fffcf7;
+  --chip-bg: #f6f3ef;
+  --pill-bg: #f1e7da;
+  --pill-ink: #694627;
+  --input-bg: #fffdf9;
+  --display: 'Rockwell', 'Bookman Old Style', 'Georgia', serif;
+  --body: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
+
+  font-family: var(--body);
+  line-height: 1.45;
+  color: var(--ink);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:root[data-theme='ocean'] {
+  --bg: #eaf4f5;
+  --ink: #122227;
+  --ink-muted: #3d5b64;
+  --line: #b7d4d9;
+  --accent: #0f7f8c;
+  --hero-glow: #8ed6df;
+  --bg-radial: #d7eef2;
+  --bg-bottom: #d8e9ec;
+  --surface: #ffffff;
+  --surface-soft: #f4fbfc;
+  --chip-bg: #ecf5f7;
+  --pill-bg: #dceef1;
+  --pill-ink: #1f5a63;
+  --input-bg: #f8fcfd;
+}
+
+:root[data-theme='midnight'] {
+  --bg: #0f1722;
+  --ink: #ecf0f6;
+  --ink-muted: #a6b4c6;
+  --line: #2a3a4d;
+  --accent: #e06c2f;
+  --hero-glow: #2f4663;
+  --bg-radial: #1b2939;
+  --bg-bottom: #111d2c;
+  --surface: #172332;
+  --surface-soft: #1a2737;
+  --chip-bg: #26384c;
+  --pill-bg: #31445b;
+  --pill-ink: #d9e5f3;
+  --input-bg: #121d2b;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background:
+    radial-gradient(circle at 20% 0%, var(--bg-radial) 0%, rgba(255, 245, 222, 0) 38%),
+    linear-gradient(180deg, var(--bg) 0%, var(--bg-bottom) 100%);
+  min-height: 100vh;
+}
+
+#root {
+  min-height: 100vh;
+}

src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+)