Added projects tab; first project

2026-05-25 10:05:58 -04:00
parent 014b1836c0
commit 581f888218
11 changed files with 562 additions and 0 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -265,6 +265,146 @@ a {
  font-weight: 600;
 }

+.graph-project {
+  --graph-paper: #f4f1e8;
+  --graph-panel: #fffdf6;
+  --graph-ink: #161512;
+  --graph-soft: #39362d;
+  --graph-muted: #6d675a;
+  --graph-line: rgba(22, 21, 18, 0.16);
+  --graph-accent: #0f6f77;
+  --graph-accent-strong: #0c4f58;
+  --graph-warm: #e28f45;
+  --graph-code: #171813;
+  --graph-code-text: #f2ead9;
+  background:
+    linear-gradient(90deg, rgba(22, 21, 18, 0.04) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(22, 21, 18, 0.035) 1px, transparent 1px),
+    var(--graph-paper);
+  background-size: 4.5rem 4.5rem;
+  color: var(--graph-ink);
+}
+
+:root[data-theme="dark"] .graph-project {
+  --graph-paper: #111315;
+  --graph-panel: #181c1d;
+  --graph-ink: #f5f0e6;
+  --graph-soft: #ddd5c5;
+  --graph-muted: #a9a091;
+  --graph-line: rgba(245, 240, 230, 0.15);
+  --graph-accent: #78c7cf;
+  --graph-accent-strong: #93dbe2;
+  --graph-warm: #e3a15f;
+  --graph-code: #0d0f10;
+  --graph-code-text: #f5f0e6;
+}
+
+.graph-project .text-graph-ink {
+  color: var(--graph-ink);
+}
+
+.graph-project .text-graph-soft {
+  color: var(--graph-soft);
+}
+
+.graph-project .text-graph-muted {
+  color: var(--graph-muted);
+}
+
+.graph-project .text-graph-accent {
+  color: var(--graph-accent);
+}
+
+.graph-project .text-graph-code-text {
+  color: var(--graph-code-text);
+}
+
+.graph-project .bg-graph-paper {
+  background-color: var(--graph-paper);
+}
+
+.graph-project .bg-graph-panel {
+  background-color: var(--graph-panel);
+}
+
+.graph-project .bg-graph-line {
+  background-color: var(--graph-line);
+}
+
+.graph-project .bg-graph-code {
+  background-color: var(--graph-code);
+}
+
+.graph-project .border-graph-line {
+  border-color: var(--graph-line);
+}
+
+.graph-project .bg-graph-accent {
+  background-color: var(--graph-accent);
+}
+
+.graph-project .hover\:text-graph-accent:hover {
+  color: var(--graph-accent);
+}
+
+.graph-project .hover\:border-graph-accent:hover {
+  border-color: var(--graph-accent);
+}
+
+.graph-hero {
+  background:
+    radial-gradient(42rem 24rem at 16% 18%, rgba(226, 143, 69, 0.18), transparent 70%),
+    radial-gradient(38rem 24rem at 82% 10%, rgba(15, 111, 119, 0.16), transparent 72%);
+}
+
+.graph-hero-card {
+  overflow: hidden;
+  border: 1px solid var(--graph-line);
+  border-radius: 0.5rem;
+  background: var(--graph-panel);
+  box-shadow: 0 34px 80px rgba(22, 21, 18, 0.12);
+}
+
+.graph-card-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid var(--graph-line);
+  padding: 0.85rem 1rem;
+  color: var(--graph-muted);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  text-transform: uppercase;
+}
+
+.graph-matrix {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  width: min(17rem, 58vw);
+  overflow: hidden;
+  border: 1px solid var(--graph-line);
+  background: #202f33;
+}
+
+.graph-matrix span {
+  aspect-ratio: 1;
+  border-right: 1px solid rgba(244, 241, 232, 0.14);
+  border-bottom: 1px solid rgba(244, 241, 232, 0.14);
+  background: #275b63;
+}
+
+.graph-matrix span.is-hot {
+  background: #f0d83a;
+}
+
+.graph-kicker {
+  color: var(--graph-muted);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.72rem;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
@media (min-width: 1280px) {
  .side-note {
    float: right;