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.
2026-07-23 17:01:34 -04:00
commit 43928f7a49
61 changed files with 13218 additions and 0 deletions
@@ -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);
+  }
+}