73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
"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>
|
|
)
|
|
}
|