72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { Code } from "lucide-react"
|
|
|
|
const principles = [
|
|
{
|
|
title: "Reliability over cleverness",
|
|
description:
|
|
"Clever code is fun to write and painful to debug. I optimize for systems that fail gracefully and recover quickly.",
|
|
},
|
|
{
|
|
title: "Measure before optimizing",
|
|
description:
|
|
"Intuition about performance is usually wrong. Profile first, optimize the actual bottleneck, verify the improvement.",
|
|
},
|
|
{
|
|
title: "Boring technology",
|
|
description:
|
|
"New tools have unknown failure modes. I prefer proven solutions unless there's a compelling reason to experiment.",
|
|
},
|
|
{
|
|
title: "Make it debuggable",
|
|
description:
|
|
"Good logs, clear error messages, and observability aren't afterthoughts. They're how you survive production.",
|
|
},
|
|
]
|
|
|
|
export function Philosophy() {
|
|
return (
|
|
<section id="philosophy" 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">How I Build</h2>
|
|
<div className="mt-2 w-12 h-px bg-primary" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="space-y-8">
|
|
{/* Code block syle quote */}
|
|
<div className="bg-card border border-border rounded-lg p-4 font-mono text-sm">
|
|
<div className="flex items-center gap-2 text-muted-foreground mb-3">
|
|
<Code size={14} className="text-primary" />
|
|
<span>philosophy.md</span>
|
|
</div>
|
|
<pre className="text-muted-foreground whitespace-pre-wrap">
|
|
<code>
|
|
{`# Engineering principles
|
|
|
|
The best code is code you don't have to think about.
|
|
It handles edge cases, logs what matters, and
|
|
fails in predictable ways.
|
|
|
|
Ship small, ship often, and always have a rollback plan.`}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
{/* Principles grid */}
|
|
<div className="grid sm:grid-cols-2 gap-6">
|
|
{principles.map((principle) => (
|
|
<div key={principle.title} className="space-y-2">
|
|
<h3 className="font-medium text-foreground">{principle.title}</h3>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">{principle.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |