63 lines
3.1 KiB
TypeScript
63 lines
3.1 KiB
TypeScript
import { Server, Database, Shield, Gauge } from "lucide-react"
|
|
|
|
const highlights = [
|
|
{ icon: Server, label: "Backend Architecture" },
|
|
{ icon: Database, label: "Database Design" },
|
|
{ icon: Shield, label: "Security" },
|
|
{ icon: Gauge, label: "Performance" },
|
|
]
|
|
|
|
export function About() {
|
|
return (
|
|
<section id="about" 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">About</h2>
|
|
<div className="mt-2 w-12 h-px bg-primary" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="space-y-6">
|
|
<p className="text-lg text-foreground leading-relaxed">
|
|
I'm a backend developer who cares about what happens after the request hits the server. My work is focused
|
|
on building reliable, maintainable systems. APIs that don't break, databases that stay fast, infrastructure
|
|
that handles real-world load.
|
|
</p>
|
|
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
As co-founder of{" "}
|
|
<a
|
|
href="https://crowware.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline"
|
|
>
|
|
crowware.com
|
|
</a>
|
|
, I've learnt that good engineering isn't about using the newest tools.
|
|
It's about making pragmatic choices that serve the product and the team.
|
|
I prefer boring technology that works over shiny frameworks that don't.
|
|
</p>
|
|
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
When I write code, I think about the person who has to maintain it at 2am. I optimize for clarity,
|
|
readability and the ability to debug production issues without losing sleep. (also for my own sanity)
|
|
</p>
|
|
|
|
{/* Highlight badges */}
|
|
<div className="flex flex-wrap gap-3 pt-4">
|
|
{highlights.map((item) => (
|
|
<div key={item.label} className="flex items-center gap-2 px-3 py-1.5 bg-secondary rounded-md">
|
|
<item.icon size={14} className="text-primary" />
|
|
<span className="text-sm text-secondary-foreground">{item.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |