Dario Di Fazio - Portfolio CV & Co by @Darkness977 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

text/plainDefinisce un metodo di non codifica dei valori di un form
<select>Usato per creare un menu a tendina.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto

Users

Log in to search for users

Explore

Find inspiration

Map System using Leaflet

Ethical hacking

Web Design Final 2024

Heads Or Tails Random Tally

Scheda Tecnica Google Pixel 8 Pro

Prima Coccola ebay

Eleganza Gioielli

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Benvenuti nel profilo di Dario Di Fazio, esperto in Digital, UX-Design e Blogger, con esperienze verificate, portfolio online e contatti diretti. Curriculum digitale e pagina personale responsive, ottimizzata per recruiters e aziende.">
  <meta name="keywords" content="Curriculum, Lavoro, Portfolio, Competenze, Esperienza,  Wordpress, Elementor, GPT, SviluppatoreWeb, WebDev, Contatti, SEO, Mobile, CV Digitale">
  <meta name="author" content="Dario Di Fazio">
<title>Dario Di Fazio - CV & Contatti Professionali</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
  <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: 'Inter', sans-serif;
      margin: 0;
      background-color: #121212;
      color: #e0e0e0;
      line-height: 1.6;
      scroll-behavior: smooth;
    }
    header {
      background: linear-gradient(-45deg, #3a1c71, #d76d77, #ffaf7b, #3a1c71);
      background-size: 600% 600%;
      animation: gradientShift 15s ease infinite;
      color: #ffffff;
      padding: 4rem 2rem;
      text-align: center;
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    header img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      border-radius: 115px;
      margin-top: 2rem;
    }
    section {
      padding: 2rem;
      max-width: 960px;
      margin: 2rem auto;
      background-color: #1a1a1a;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    h2 {
      font-weight: 600;
      color: #bb86fc;
      border-bottom: 1px solid #333;
      padding-bottom: 0.3rem;
      margin-top: 0;
    }
    a { color: #03dac5; text-decoration: none; }
    a:hover { text-decoration: underline; }
    .contact-info, .social-links { margin-bottom: 2rem; }
    .social-links ul {
      list-style: none;
      padding: 0;
      display: flex;
      gap: 1rem;
      justify-content: center;
    }
    .social-links li { margin: 0; }
    .social-links i {
      margin-right: 0.5rem;
      font-size: 1.2rem;
      vertical-align: middle;
    }
    .form-container {
      background-color: #1f1f1f;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.4);
      margin-top: 2rem;
      position: relative;
      overflow: hidden;
    }
    input, textarea {
      width: 100%;
      padding: 0.8rem;
      margin: 0.5rem 0;
      background-color: #2c2c2c;
      color: #e0e0e0;
      border: 1px solid #444;
      border-radius: 5px;
    }
    button {
      background-color: #bb86fc;
      color: white;
      padding: 0.8rem 1.2rem;
      border: none;
      border-radius: 15px;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
    }
    button:hover {
      background-color: #9b6ede;
      transform: scale(1.05);
    }
    .download-links {
      text-align: center;
      margin-top: 2rem;
    }
    .download-links a {
      display: inline-block;
      margin: 1rem;
      padding: 0.8rem 1.5rem;
      background: #03dac5;
      color: #121212;
      border-radius: 18px;
      font-weight: bold;
    }
    .download-links a:hover {
      background: #02c1b1;
    }
    #portfolio {
      padding: 2rem;
    }
    #portfolio div {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
    }
    #portfolio img {
      width: 200px;
      height: 150px;
      object-fit: cover;
      border-radius: 6px;
    }
    footer {
      background-color: #0a0a0a;
      color: #bbb;
      text-align: center;
      padding: 4rem 1rem;
      margin-top: 3rem;
    }
    footer .footer-links {
      margin-top: 1rem;
    }
    footer a {
      color: #bbb;
      margin: 0 1rem;
      font-size: 0.9rem;
    }
    footer a:hover {
      color: #fff;
    }
    footer .credits {
      margin-top: 1.5rem;
      font-size: 0.85rem;
    }
    @media (max-width: 768px) {
      header, section { padding: 1.5rem; }
      .social-links ul {
        flex-direction: column;
        align-items: center;
      }
    }

    /* --- STILI PER EFFETTO GEOMETRICO SFONDO --- */
    .particle-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .shape {
      position: absolute;
      opacity: 0.1;
    }

    .shape-1 {
      width: 80px;
      height: 80px;
      background-color: #bb86fc;
      top: 10%;
      left: 5%;
      border-radius: 5px;
      animation: float 8s infinite ease-in-out;
    }

    .shape-2 {
      width: 60px;
      height: 60px;
      background-color: #03dac5;
      top: 70%;
      right: 10%;
      border-radius: 50%;
      animation: float 10s infinite ease-in-out reverse;
    }

    .shape-3 {
      width: 100px;
      height: 100px;
      background: linear-gradient(45deg, #d76d77, #ffaf7b);
      bottom: 10%;
      left: 15%;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      animation: rotate 20s infinite linear;
    }

    .shape-4 {
      width: 40px;
      height: 40px;
      background-color: #ffaf7b;
      top: 40%;
      right: 25%;
      border-radius: 5px;
      animation: float 7s infinite ease-in-out;
    }

    .shape-5 {
      width: 70px;
      height: 70px;
      background-color: #d76d77;
      top: 20%;
      right: 5%;
      border-radius: 50%;
      animation: float 12s infinite ease-in-out reverse;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0) translateX(0); }
      33% { transform: translateY(-20px) translateX(10px); }
      66% { transform: translateY(10px) translateX(-10px); }
    }

    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Stili Specifici per la Sezione FAQ Accordion */
    .faq-section {
      background-color: #1a1a1a;
      border-radius: 10px;
      padding: 2rem;
      margin-top: 2rem;
    }

    .faq-container {
      margin-top: 2rem;
    }

    .faq-item {
      background-color: #1f1f1f;
      border: 1px solid #333;
      border-radius: 8px;
      margin-bottom: 1rem;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      overflow: hidden;
    }

    .faq-item:hover {
      box-shadow: 0 4px 15px rgba(187, 134, 252, 0.1);
      transform: translateY(-2px);
    }

    .faq-question-trigger {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem;
      cursor: pointer;
      font-weight: 600;
      color: #e0e0e0;
      transition: color 0.3s ease;
    }

    .faq-question-trigger:hover {
      color: #bb86fc;
    }

    .faq-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      position: relative;
      transition: transform 0.3s ease;
    }

    /* Crea l'icona 'chevron' con CSS */
    .faq-icon::before,
    .faq-icon::after {
      content: '';
      position: absolute;
      background-color: #bb86fc;
      transition: transform 0.3s ease;
    }

    .faq-icon::before {
      top: 50%;
      left: 0;
      width: 12px;
      height: 2px;
      transform: translateY(-50%);
    }

    .faq-icon::after {
      top: 0;
      left: 50%;
      width: 2px;
      height: 12px;
      transform: translateX(-50%);
    }

    /* Stato Attivo: l'icona diventa un 'meno' */
    .faq-item.active .faq-icon {
      transform: rotate(45deg);
    }

    .faq-item.active .faq-icon::after {
      transform: translateX(-50%) rotate(90deg);
    }

    .faq-answer {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.5s ease, opacity 0.4s ease, padding 0.4s ease;
      padding: 0 1.5rem;
      color: #ccc;
      line-height: 1.7;
    }

    .faq-item.active .faq-answer {
      max-height: 500px;
      opacity: 1;
      padding: 0 1.5rem 1.5rem 1.5rem;
    }

    .faq-answer p {
      margin: 0;
    }

    .faq-answer strong {
      color: #03dac5;
    }
  </style>
</head>
<body>
  <header>
    <h1>Di Fazio Dario / Web Developer</h1>
    <p>Freelance | Problem Solver | UX/UI Designer</p>
    <a href="immagine-presentazione.jpg" data-lightbox="profilo" data-title="Dario Di Fazio - Professionista nel settore Digital">
      <img src="https://www.medicaleyecenter.com/wp-content/uploads/2022/01/EMP3-B.jpg" alt="Foto profilo 400x400">
    </a>
  </header>

  <section class="contact-info">
    <h2>Contatti</h2>
    <p><i class="fas fa-envelope"></i> Email: <a href="mailto:tuo@email.com">iltuosito@email.com</a></p>
    <p><i class="fas fa-phone"></i> Cellulare: <a href="tel:+391234567890">+39 123 456 7890</a></p>
  </section>

  <section class="social-links">
    <h2>Social Media</h2>
    <ul>
      <li><i class="fab fa-linkedin" style="color:#0e76a8;"></i><a href="https://linkedin.com/in/iltuonome" target="_blank">LinkedIn</a></li>
      <li><i class="fab fa-github" style="color:#ffffff;"></i><a href="https://github.com/iltuonome" target="_blank">GitHub</a></li>
      <li><i class="fab fa-x-twitter" style="color:#1da1f2;"></i><a href="https://twitter.com/iltuonome" target="_blank">Twitter/X</a></li>
      <li><i class="fab fa-instagram" style="color:#E1306C;"></i><a href="https://instagram.com/iltuonome" target="_blank">Instagram</a></li>
    </ul>
  </section>


  <section>
    <h2>Chi sono e di cosa mi occupo</h2>
    <p>Sono uno sviluppatore indipendente con 5 anni di esperienza nel settore digitale e una comprovata attitudine al problem solving. Ho collaborato con aziende locali e internazionali su progetti complessi, maturando competenze trasversali e capacità di leadership. Tra le mie qualità principali: organizzazione, comunicazione e orientamento ai risultati.</p>
  </section>

  <!-- INIZIO SEZIONE AGGIUNTA: SERVIZI -->
  <section>
    <h2>Servizi Offerti</h2>
    <p>Trasformo le tue idee in progetti digitali efficaci, concentrandomi sull'esperienza utente e su risultati concreti.</p>
    <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem;">
      <div style="flex: 1; min-width: 250px; background-color: #1f1f1f; padding: 1.5rem; border-radius: 8px; border-left: 3px solid #bb86fc;">
        <h3 style="color: #03dac5; margin-top: 0;">UX/UI Design</h3>
        <p>Progettazione di interfacce intuitive e user-friendly. Dalla ricerca utente al wireframing, fino al prototipo finale in produzione.</p>
      </div>
      <div style="flex: 1; min-width: 250px; background-color: #1f1f1f; padding: 1.5rem; border-radius: 8px; border-left: 3px solid #03dac5;">
        <h3 style="color: #bb86fc; margin-top: 0;">Sviluppo Web</h3>
        <p>Creo siti web e applicazioni moderne, responsive e performanti utilizzando le migliori tecnologie come WordPress e strumenti semi-custom.</p>
      </div>
      <div style="flex: 1; min-width: 250px; background-color: #1f1f1f; padding: 1.5rem; border-radius: 8px; border-left: 3px solid #ffaf7b;">
        <h3 style="color: #ffaf7b; margin-top: 0;">Consulenza SEO</h3>
        <p>Ottimizzazione della visibilità online per migliorare il posizionamento sui motori di ricerca e aumentare il traffico organico.</p>
      </div>
    </div>
  </section>
  <!-- FINE SEZIONE AGGIUNTA: SERVIZI -->

  <section>
    <h2>Competenze (digitali, attrezzatura)</h2>
    <ul>
      <li>Gestione progetti</li>
      <li>Problem Solving avanzato</li>
      <li>Lingue: Italiano, Inglese, [altre]</li>
      <li>Strumenti: Office, Adobe, GIMP, Mage AI, GPT, Wordpress, Elementor, KadenceAI, Stackable, 10Web, Durable, SEO Surfer, SEO Audit, Rankister, MailerLite, LogoDesign, Figma, VSCode, [altri software di settore]</li>
    </ul>
  </section>

  <!-- INIZIO SEZIONE AGGIUNTA: PROCESSO -->
  <section>
    <h2>Il Mio Processo di Lavoro</h2>
    <p>Ogni progetto è unico, ma la mia metodologia è sempre basata su alcuni passaggi fondamentali per garantire il massimo risultato.</p>
    <div style="margin-top: 2rem;">
      <div style="display: flex; align-items: flex-start; margin-bottom: 1.5rem;">
        <div style="background-color: #bb86fc; color: #121212; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 1rem; flex-shrink: 0;">1</div>
        <div>
          <h3 style="margin-top: 0; color: #bb86fc;">Discovery & Analisi</h3>
          <p>Ascolto le tue esigenze, analizzo il mercato e gli utenti per definire obiettivi chiari e una strategia solida.</p>
        </div>
      </div>
      <div style="display: flex; align-items: flex-start; margin-bottom: 1.5rem;">
        <div style="background-color: #03dac5; color: #121212; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 1rem; flex-shrink: 0;">2</div>
        <div>
          <h3 style="margin-top: 0; color: #03dac5;">Ideazione & Design</h3>
          <p>Creo wireframe e prototipi interattivi per visualizzare la struttura e il flusso dell'esperienza utente, prima di passare al design grafico.</p>
        </div>
      </div>
      <div style="display: flex; align-items: flex-start; margin-bottom: 1.5rem;">
        <div style="background-color: #ffaf7b; color: #121212; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 1rem; flex-shrink: 0;">3</div>
        <div>
          <h3 style="margin-top: 0; color: #ffaf7b;">Sviluppo & Lancio</h3>
          <p>Trasformo il design in un prodotto funzionale e performante, curando ogni dettaglio tecnico per prepararlo al lancio in pre-produzione.</p>
        </div>
      </div>
    </div>
  </section>
  <!-- FINE SEZIONE AGGIUNTA: PROCESSO -->

  <section>
    <h2>Esperienze</h2>
    <p><strong>Azienda XYZ</strong> – Project Manager (2020–2024)</p>
    <p>Gestione di team interfunzionali, sviluppo soluzioni digitali, ottimizzazione dei processi aziendali.</p>
    <p><strong>Azienda ABC</strong> – Analista (2017–2020)</p>
    <p>Analisi dati, supporto decisionale strategico, collaborazione con i reparti IT e marketing.</p>
  </section>

  <!-- INIZIO SEZIONE AGGIUNTA: PortfolioLavori -->
  <section id="portfolio">
    <h2>Il Mio Portfolio</h2>
    <div>
      <a href="img/progetto1.jpg" data-lightbox="portfolio" data-title="Progetto UX App Mobile - Design intuitivo e responsive">
        <img src="img/progetto1.jpg" alt="Progetto 1">
      </a>
      <a href="img/progetto2.jpg" data-lightbox="portfolio" data-title="Sito Web Aziendale - Fullstack con CMS">
        <img src="img/progetto2.jpg" alt="Progetto 2">
      </a>
      <a href="img/progetto3.jpg" data-lightbox="portfolio" data-title="Logo e Identità Visiva per Brand Digitale">
        <img src="img/progetto3.jpg" alt="Progetto 3">
      </a>
      <a href="img/progetto4.jpg" data-lightbox="portfolio" data-title="E-commerce Design con UX Ottimizzata">
        <img src="img/progetto4.jpg" alt="Progetto 4">
      </a>
      <a href="img/progetto5.jpg" data-lightbox="portfolio" data-title="Progetto Branding completo e strategie digitali">
        <img src="img/progetto5.jpg" alt="Progetto 5">
      </a>
      <a href="img/sito-ecommerce.jpg" data-lightbox="portfolio" data-title="Sito E-commerce - Piattaforma completa per vendita online">
        <img src="img/sito-ecommerce.jpg" alt="Sito E-commerce">
      </a>
      <a href="img/sito-ristorante.jpg" data-lightbox="portfolio" data-title="Sito Ristorante - Sistema prenotazioni e menu digitale">
        <img src="img/sito-ristorante.jpg" alt="Sito Ristorante">
      </a>
      <a href="img/sito-portfolio.jpg" data-lightbox="portfolio" data-title="Portfolio Creativo - Galleria multimediale e sezione contatti">
        <img src="img/sito-portfolio.jpg" alt="Portfolio Creativo">
      </a>
      <a href="img/sito-blog.jpg" data-lightbox="portfolio" data-title="Blog Personale - Piattaforma di pubblicazione articoli">
        <img src="img/sito-blog.jpg" alt="Blog Personale">
      </a>
    </div>
  </section>

  <!-- INIZIO SEZIONE FAQ ACCORDION -->
  <section class="faq-section">
    <h2>Domande Frequenti</h2>
    <p>Trasparenza e dialogo sono la base di ogni progetto. Ecco le risposte alle domande che i miei clienti si pongono più spesso, per aiutarti a prendere una decisione informata.</p>

    <div class="faq-container">
      <!-- FAQ Item 1 -->
      <div class="faq-item">
        <div class="faq-question-trigger">
          <span>Quali sono i principali vantaggi di assumere uno sviluppatore indipendente?</span>
          <i class="faq-icon"></i>
        </div>
        <div class="faq-answer">
          <p>Assolutamente sì. Il primo passo è sempre una <strong>consulenza gratuita e senza impegno</strong>. In questa chiamata analizziamo insieme le tue esigenze, gli obiettivi di business e la visione del progetto. È un'opportunità per conoscerci e capire se sono la persona giusta per aiutarti a crescere.</p>
        </div>
      </div>

      <!-- FAQ Item 2 -->
      <div class="faq-item">
        <div class="faq-question-trigger">
          <span>Oltre a un bel sito, come assicuri che il progetto porti risultati e un ritorno d'investimento (ROI)?</span>
          <i class="faq-icon"></i>
        </div>
        <div class="faq-answer">
          <p>Il mio approccio non è solo estetico, ma strategico. Ogni scelta di design e sviluppo è mirata a generare <strong>contatti qualificati e a favorire la crescita del tuo brand</strong>. Mi concentro sull'esperienza utente (UX) per convertire i visitatori in clienti e applico le migliori pratiche SEO per garantire visibilità a lungo termine, misurando insieme i risultati.</p>
        </div>
      </div>

      <!-- FAQ Item 3 -->
      <div class="faq-item">
        <div class="faq-question-trigger">
          <span>La mia attività ha esigenze specifiche. Il progetto sarà sviluppato su misura per me?</span>
          <i class="faq-icon"></i>
        </div>
        <div class="faq-answer">
          <p>Certamente. Non credo nelle soluzioni "standard". Il mio processo parte da un <strong>ascolto pro-attivo</strong> delle tue necessità per sviluppare una soluzione completamente su misura. Il progetto verrà costruito attorno ai tuoi obiettivi specifici, non il contrario, garantendoti un prodotto unico e perfettamente funzionale.</p>
        </div>
      </div>

      <!-- FAQ Item 4 -->
      <div class="faq-item">
        <div class="faq-question-trigger">
          <span>Come vengono gestiti i costi? Temo ci possano essere sorprese o spese impreviste.</span>
          <i class="faq-icon"></i>
        </div>
        <div class="faq-answer">
          <p>La trasparenza è fondamentale. Riceverai un preventivo dettagliato e chiaro, con <strong>costi definiti senza sorprese</strong>. Lavoro principalmente a progetto con prezzo concordato, così sai esattamente cosa stai pagando. Qualsiasi eventuale extra verrà sempre discusso e approvato da te in anticipo.</p>
        </div>
      </div>

      <!-- FAQ Item 5 -->
      <div class="faq-item">
        <div class="faq-question-trigger">
          <span>Ho un'idea chiara ma vorrei vederla "in azione" il prima possibile. Offri un servizio di prototipazione?</span>
          <i class="faq-icon"></i>
        </div>
        <div class="faq-answer">
          <p>Sì, la <strong>prototipazione veloce</strong> è una fase cruciale del mio metodo. Prima di scrivere una sola riga di codice, creo un prototipo interattivo del tuo progetto. Questo ci permette di testare l'idea, raccogliere feedback e apportare modifiche in modo rapido ed economico, risparmiando tempo e risorse.</p>
        </div>
      </div>

      <!-- FAQ Item 6 -->
      <div class="faq-item">
        <div class="faq-question-trigger">
          <span>Una volta online, che tipo di assistenza offri per la manutenzione e la crescita nel tempo?</span>
          <i class="faq-icon"></i>
        </div>
        <div class="faq-answer">
          <p>Il nostro rapporto non finisce con il lancio. Offro <strong>supporto tecnico qualificato</strong> per la manutenzione, gli aggiornamenti e la sicurezza del tuo sito. Inoltre, resto a tua disposizione come partner strategico per analizzare le performance e pianificare nuove evoluzioni, assicurando che il tuo progetto cresca insieme alla tua attività.</p>
        </div>
      </div>
            <!-- FAQ Item 7 -->
      <div class="faq-item">
        <div class="faq-question-trigger">
          <span>Quali sono i metodi pagamento accettati? </span>
          <i class="faq-icon"></i>
        </div>
        <div class="faq-answer">
          <p>Sostanzialmente 3 metodi (sicuri):<strong>  Paypal e Postepay. Carte di Credito (Visa, Matercard, AmericanExpress, Fineco)</strong>. Lavoro principalmente a progetto con prezzo concordato, così sai esattamente cosa stai pagando. Qualsiasi eventuale extra verrà sempre discusso e approvato da te in anticipo.</p>
        </div>
      </div>
 
    </div>
  </section>
  <!-- FINE SEZIONE FAQ ACCORDION -->

  <!-- INIZIO SEZIONE AGGIUNTA: TESTIMONIANZE -->
  <section>
    <h2>Dicono di Me</h2>
    <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem;">
      <blockquote style="flex: 1; min-width: 280px; background-color: #1f1f1f; padding: 1.5rem; border-radius: 8px; border-left: 3px solid #03dac5; font-style: italic; margin: 0;">
        <p>"Dario è un professionista eccezionale. Ha capito subito le nostre necessità e ha trasformato la nostra idea in un sito web perfetto, sia dal punto di vista estetico che funzionale.⭐⭐⭐⭐"</p>
        <cite style="display: block; text-align: right; margin-top: 1rem; font-style: normal; color: #bb86fc;">- Marco Rossi, CEO Azienda XYZ</cite>
      </blockquote>
      <blockquote style="flex: 1; min-width: 280px; background-color: #1f1f1f; padding: 1.5rem; border-radius: 8px; border-left: 3px solid #bb86fc; font-style: italic; margin: 0;">
        <p>"La sua attenzione ai dettagli e la sua competenza in UX Design hanno fatto la differenza nel nostro ultimo progetto. Lo consiglio vivamente.⭐⭐⭐"</p>
        <cite style="display: block; text-align: right; margin-top: 1rem; font-style: normal; color: #03dac5;">- Laura Bianchi, Project Manager</cite>
      </blockquote>
    </div>
  </section>
  <!-- FINE SEZIONE AGGIUNTA: TESTIMONIANZE -->

  <!-- SEZIONE RISERVATA: DOWNLOAD+PSW -->
  <section class="download-links">
    <a href="CV_IlTuoNome.pdf" download>Scarica il CV</a>
    <a href="https://iltuoportfolio.com" target="_blank">Portfolio Online</a>
  </section>

  <section class="form-container">
    <h2>Mettiamoci in Contatto</h2>
    <!-- INIZIO EFFETTO SFONDO AGGIUNTO -->
    <div class="particle-background">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
      <div class="shape shape-5"></div>
    </div>
    <!-- FINE EFFETTO SFONDO AGGIUNTO -->
    <form action="mailto:tuo_nome@email.com" method="post" enctype="text/plain">
      <input type="text" name="name" placeholder="Il tuo nome" required>
      <input type="email" name="email" placeholder="La tua email" required>
      <textarea name="message" rows="5" placeholder="Scrivi il tuo messaggio qui..." required></textarea>
      <button type="submit">Invia Ora</button>
    </form>
  </section>

  <footer>
    <div class="footer-links">
      <a href="#">Privacy</a> |
      <a href="#">Condizioni di Garanzia</a> |
      <a href="#">GDPR</a>
    </div>
    <div class="credits">
      Creato con ❤️ da <strong style="color:#bb86fc;">JustDesign.com</strong>
    </div>
    <p>&copy; 2025 creato da DiFazioDesign (@Moebyus). Tutti i diritti riservati.</p>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
    
    // Script per l'accordion FAQ
    document.addEventListener('DOMContentLoaded', function() {
      const faqItems = document.querySelectorAll('.faq-item');

      faqItems.forEach(item => {
        const trigger = item.querySelector('.faq-question-trigger');

        trigger.addEventListener('click', () => {
          const isActive = item.classList.contains('active');

          // Chiudi tutti gli altri item
          faqItems.forEach(otherItem => {
            if (otherItem !== item) {
              otherItem.classList.remove('active');
            }
          });

          // Apri/Chiudi l'item cliccato
          if (!isActive) {
            item.classList.add('active');
          } else {
            item.classList.remove('active');
          }
        });
      });
    });
  </script>
</body>
</html>