portfolio tech

This commit is contained in:
2026-03-27 22:06:53 +01:00
parent 37fd64c986
commit 76b13bcd85
4 changed files with 415 additions and 95 deletions

View File

@@ -0,0 +1,94 @@
const CARDS = [
{
title: 'Clean REST APIs',
detail: 'Spring Boot, OpenAPI, tested endpoints',
icon: (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
<path d="M8 9l3 3-3 3M13 15h3" stroke="#22d3ee" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<rect x="3" y="3" width="18" height="18" rx="3" stroke="#22d3ee" strokeWidth="2"/>
</svg>
),
},
{
title: 'Docker-Ready Deployments',
detail: 'Containerized services, Docker Compose',
icon: (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
<rect x="3" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
<rect x="6.5" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
<rect x="10" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
<rect x="10" y="6" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
<rect x="13.5" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
<rect x="6.5" y="6" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
<path d="M21 11c-.5-1-2-1.25-2.75-1.25-.15-1.25-1-2.25-2-2.25h-.5c.25.5.25 1 .25 1.5H16V11h-3V9.5h-.5V8H9v1H8.5V7H6v2h-.5C4.5 9 4 9.5 4 10.5c0 2.5 1.75 4.5 4.25 4.5h9c2 0 3.75-1.25 4.25-3 .75 0 1.25 0 1.5-1z" fill="#22d3ee"/>
</svg>
),
},
{
title: 'CI/CD From Day One',
detail: 'GitLab pipelines, automated builds and deploys',
icon: (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
<circle cx="12" cy="12" r="2" fill="#22d3ee"/>
<circle cx="5" cy="7" r="2" fill="#22d3ee"/>
<circle cx="19" cy="7" r="2" fill="#22d3ee"/>
<circle cx="5" cy="17" r="2" fill="#22d3ee"/>
<circle cx="19" cy="17" r="2" fill="#22d3ee"/>
<path d="M7 7h10M7 17h10M12 10v4" stroke="#22d3ee" strokeWidth="1.5" strokeLinecap="round"/>
<path d="M12 10L5 7M12 10L19 7M12 14L5 17M12 14L19 17" stroke="#22d3ee" strokeWidth="1.5" strokeLinecap="round"/>
</svg>
),
},
{
title: 'Production Infrastructure',
detail: 'VPS, Nginx, SSL, monitoring',
icon: (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
<rect x="3" y="4" width="18" height="5" rx="1.5" stroke="#22d3ee" strokeWidth="2"/>
<rect x="3" y="11" width="18" height="5" rx="1.5" stroke="#22d3ee" strokeWidth="2"/>
<circle cx="7" cy="6.5" r="1" fill="#22d3ee"/>
<circle cx="7" cy="13.5" r="1" fill="#22d3ee"/>
<path d="M9 19c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="#22d3ee" strokeWidth="2" strokeLinecap="round"/>
<circle cx="12" cy="21" r="1" fill="#22d3ee"/>
</svg>
),
},
]
export function DeliverSection() {
return (
<section id="deliver" className="py-24 px-6">
<div className="max-w-6xl mx-auto">
<div className="mb-14">
<p className="font-mono text-xs text-accent tracking-widest mb-3 uppercase">
Deliverables
</p>
<h2 className="font-heading font-bold text-4xl md:text-5xl text-white tracking-tight">
What I Deliver
</h2>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{CARDS.map(({ title, detail, icon }) => (
<div
key={title}
className="flex flex-col gap-4 p-6 bg-zinc-900 border border-zinc-800 rounded-lg hover:border-zinc-600 hover:bg-zinc-800/70 transition-all duration-200 group"
>
<div className="w-10 h-10 flex items-center justify-center rounded-md bg-zinc-800 group-hover:bg-zinc-700 transition-colors duration-200">
{icon}
</div>
<div className="flex flex-col gap-1.5">
<span className="font-heading font-semibold text-white text-sm leading-snug">
{title}
</span>
<span className="font-mono text-xs text-zinc-500 leading-relaxed">
{detail}
</span>
</div>
</div>
))}
</div>
</div>
</section>
)
}