34 lines
1.5 KiB
React
34 lines
1.5 KiB
React
|
const skills = [
|
||
|
|
{ category: "Frontend", items: ["React", "Vite", "JavaScript (ES6+)", "Tailwind CSS", "HTML5 / CSS3"] },
|
||
|
|
{ category: "Backend & Database", items: ["Node.js", "Express", "MySQL", "MongoDB"] },
|
||
|
|
{ category: "DevOps & SysAdmin", items: ["Docker & Compose", "Nginx (Reverse Proxy)", "Linux (Ubuntu Server)", "Git / Forgejo"] }
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function Skills() {
|
||
|
|
return (
|
||
|
|
<section id="skills" className="py-20 px-6 max-w-5xl mx-auto border-t border-slate-900">
|
||
|
|
<div className="mb-12">
|
||
|
|
<h2 className="text-2xl md:text-3xl font-bold tracking-tight">Competenze & Tecnologie</h2>
|
||
|
|
<p className="text-slate-400 mt-2">Gli strumenti che utilizzo per trasformare le idee in prodotti reali.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
|
|
{skills.map((group, index) => (
|
||
|
|
<div key={index} className="bg-slate-900/30 border border-slate-800/50 rounded-xl p-6">
|
||
|
|
<h3 className="text-lg font-semibold text-cyan-400 mb-4 font-mono">
|
||
|
|
// {group.category}
|
||
|
|
</h3>
|
||
|
|
<ul className="space-y-2.5">
|
||
|
|
{group.items.map((skill, i) => (
|
||
|
|
<li key={i} className="text-slate-300 text-sm flex items-center gap-2">
|
||
|
|
<span className="w-1.5 h-1.5 rounded-full bg-cyan-500"></span>
|
||
|
|
{skill}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|