project init

2025-12-01 02:29:08 +01:00
commit 78a0f6c646
106 changed files with 13132 additions and 0 deletions
--- a/frontend/components/techstack.tsx
+++ b/frontend/components/techstack.tsx
@@ -0,0 +1,72 @@
+"use client"
+
+import { useDataStore } from "@/lib/data-store"
+
+const stackCategories = [
+  {
+    title: "Backend",
+    items: ["Go", "Python", "Node.js", "Rust"],
+  },
+  {
+    title: "Databases",
+    items: ["PostgreSQL", "Redis", "SQLite", "ClickHouse"],
+  },
+  {
+    title: "Infrastructure",
+    items: ["Docker", "Kubernetes", "Terraform", "AWS"],
+  },
+  {
+    title: "APIs & Protocols",
+    items: ["REST", "GraphQL", "gRPC", "WebSockets"],
+  },
+  {
+    title: "Observability",
+    items: ["Prometheus", "Grafana", "OpenTelemetry", "Sentry"],
+  },
+  {
+    title: "Tooling",
+    items: ["Git", "CI/CD", "Make", "Nix"],
+  },
+]
+
+export function TechStack() {
+  const { stackCategories } = useDataStore()
+
+  return (
+    <section id="stack" className="py-24 border-t border-border">
+      <div className="max-w-4xl mx-auto px-6">
+        <div className="grid md:grid-cols-[200px_1fr] gap-8 md:gap-12">
+          {/* Section label */}
+          <div>
+            <h2 className="font-mono text-sm text-muted-foreground uppercase tracking-wider">Tech Stack</h2>
+            <div className="mt-2 w-12 h-px bg-primary" />
+          </div>
+
+          {/* Content */}
+          <div className="space-y-8">
+            <p className="text-muted-foreground">
+              Tools I reach for regularly. I'm not religious about any of them—the right choice depends on the problem.
+            </p>
+
+            {/* Stack grid */}
+            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {stackCategories.map((category) => (
+                <div key={category.id} className="space-y-3">
+                  <h3 className="font-mono text-xs text-primary uppercase tracking-wider">{category.title}</h3>
+                  <ul className="space-y-1.5">
+                    {category.items.map((item) => (
+                      <li key={item} className="text-sm text-muted-foreground font-mono flex items-center gap-2">
+                        <span className="w-1 h-1 bg-muted-foreground rounded-full" />
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}