primo commit

src/components/Projects.jsx

@@ -0,0 +1,70 @@
+import { React } from "react";
+
+const projectsData = [
+    {
+      title: "Assist Senza Danni",
+      description: "Piattaforma web dedicata all'assistenza e alla tutela, sviluppata con un'interfaccia pulita e incentrata sull'esperienza utente.",
+      link: "https://assistasenzadanni.it",
+      tags: ["React", "Web App", "UI/UX"]
+    },
+    {
+      title: "PWSCam",
+      description: "Applicazione web interattiva ospitata su Vercel, orientata a soluzioni tecnologiche e di streaming/visualizzazione.",
+      link: "https://pwscam.vercel.app",
+      tags: ["Vercel", "Frontend", "React"]
+    },
+    {
+      title: "Magri Cambi Hub",
+      description: "Gestionale e portale dedicato ai ricambi, integrato con container Docker dedicati e database relazionali sul server.",
+      link: "https://magricambi.andreavillari.it",
+      tags: ["Docker", "MySQL", "Full Stack"]
+    }
+  ];
+  
+  export default function Projects() {
+    return (
+      <section id="projects" className="py-20 px-6 max-w-5xl mx-auto">
+        <div className="mb-12">
+          <h2 className="text-2xl md:text-3xl font-bold tracking-tight">Progetti in Evidenza</h2>
+          <p className="text-slate-400 mt-2">Una selezione delle mie realizzazioni web e infrastrutturali.</p>
+        </div>
+  
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {projectsData.map((project, index) => (
+            <div 
+              key={index} 
+              className="group bg-slate-900/50 border border-slate-800/80 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 flex flex-col justify-between hover:-translate-y-1"
+            >
+              <div>
+                <h3 className="text-xl font-semibold text-slate-100 group-hover:text-cyan-400 transition-colors">
+                  {project.title}
+                </h3>
+                <p className="text-slate-400 text-sm mt-3 leading-relaxed">
+                  {project.description}
+                </p>
+              </div>
+              
+              <div className="mt-6">
+                <div className="flex flex-wrap gap-2 mb-6">
+                  {project.tags.map((tag, i) => (
+                    <span key={i} className="text-xs px-2.5 py-1 bg-slate-800 text-slate-300 rounded-md font-mono">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+                <a 
+                  href={project.link} 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 text-sm font-medium text-cyan-400 hover:text-cyan-300 transition-colors"
+                >
+                  Visita il sito 
+                  <span className="group-hover:translate-x-1 transition-transform">→</span>
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  }

src/components/Skills.jsx

@@ -0,0 +1,36 @@
+import { React } from "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>
+    );
+  }