Portfolio | DFD Design 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
<h4>Titolo di intestazione di quarto livello
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
getDefinisce un metodo di invio di dati al server
<em>Formatta il testo in corsivo/italico enfatizzato
heightDetermina l'altezza di un elemento HTML in pixel

Users

Log in to search for users

Explore

Find inspiration

Titolo della pagina

Template Wheel Stripes

Sito scolastico – Template base

Curriculum definitivo

Idee background personaggio

meraviglieItalia

round - social bar

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="Portfolio personale di Francesco Di Fazio, sviluppatore web e creativo. Scopri competenze, esperienze e contattami facilmente!" />
  <meta name="keywords" content="portfolio, sviluppatore, web developer, competenze, esperienze, contatto" />
  <meta name="author" content="Francesco Di Fazio" />
  <title>Portfolio | Francesco Di Fazio</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
  <style>
    :root {
      --primary: #4f46e5;
      --light-bg: #f9f9f9;
      --dark-text: #e2e8f0;
      --text-color: #f1f5f9;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Poppins', sans-serif;
      line-height: 1.6;
      background: linear-gradient(to bottom right, #0b0f1d, #0c1020);
      color: var(--text-color);
    }

    .welcome {
      height: 900px;
      max-width: 1300px;
      width: 90%;
      margin: 2rem auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: linear-gradient(to bottom right, #4f46e5, #6d28d9);
      color: white;
      padding: 2rem;
      border-radius: 24px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .welcome h1 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .welcome p {
      font-size: 1rem;
      max-width: 700px;
      margin-bottom: 2rem;
    }

    .profile-pic {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid white;
      cursor: pointer;
      transition: transform 0.3s;
    }

    .profile-pic:hover {
      transform: scale(1.05);
    }

    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 999;
    }

    .modal img {
      max-width: 90%;
      max-height: 80vh;
      border-radius: 16px;
    }

    header,
    section {
      max-width: 900px;
      margin: 3rem auto;
      background: #1e293b;
      padding: 2rem;
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
      text-align: center;
      color: var(--text-color);
    }

    h2 {
      color: var(--primary);
      margin-bottom: 1rem;
      font-weight: 700;
    }

    ul {
      list-style: none;
      padding-left: 0;
    }

    li {
      margin: 0.5rem 0;
    }

    .skills-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }

    .vscode-extensions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
      justify-items: center;
    }

    .vscode-extensions li {
      background: #334155;
      padding: 1rem;
      border-radius: 12px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
      width: 100%;
      color: white;
    }

    .contact-form label {
      display: block;
      margin: 0.5rem 0 0.2rem;
      font-weight: bold;
    }

    .contact-form input,
    .contact-form textarea {
      width: 90%;
      padding: 0.5rem;
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      border-radius: 8px;
    }


    section.contact {
      background: linear-gradient(135deg, #6366f1, #ec4899, #10b981);
      color: white;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }

    .contact-form button {
      background: linear-gradient(135deg, #f59e0b, #ef4444);
      color: white;
      border: none;
      padding: 0.9rem 2rem;
      border-radius: 12px;
      font-weight: normal;
      font-size: 1.1rem;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
      transition: all 0.3s ease;
    }

    .contact-form button:hover {
      background: linear-gradient(135deg, #eab308, #dc2626);
      transform: scale(1.05);
    }


    footer {
      text-align: center;
      padding: 5rem 2rem;
      font-size: 1.4rem;
      background: #0f172a;
      color: #f8fafc;
      font-weight: 700;
      box-shadow: inset 0 2px 16px rgba(0, 0, 0, 0.5);
    }

    footer p {
      margin: 0.5rem 0;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    section {
      animation: fadeIn 0.8s ease-in-out both;
    }

    @media (max-width: 768px) {

      .skills-columns,
      .vscode-extensions {
        grid-template-columns: 1fr;
      }
    }
  </style>
  <script>
    function toggleModal(show) {
      const modal = document.getElementById('photoModal');
      modal.style.display = show ? 'flex' : 'none';
    }
  </script>
</head>

<body>
  <section class="welcome">
    <img src="foto-profilo.jpg" alt="Francesco Di Fazio" class="profile-pic" onclick="toggleModal(true)" />
    <h1>Ciao! Sono Francesco Di Fazio</h1>
    <p>Sviluppatore Web & Creativo Digitale. Scopri il mio mondo tra codice e design.</p>
  </section>

  <div id="photoModal" class="modal" onclick="toggleModal(false)">
    <img src="foto-profilo.jpg" alt="Ingrandimento foto" />
  </div>

  <section>
    <h2>Chi Sono</h2>
    <p>Appassionato di tecnologia, con una solida esperienza nello sviluppo di soluzioni web moderne, accessibili e
      orientate al design creativo. Credo nel potere delle idee ben realizzate.</p>
  </section>

  <section>
    <h2>Esperienze</h2>
    <p>Più di 5 anni di esperienza tra progetti freelance, blog, startup e aziende. <p/>Esperto nell’unire funzionalità e design per creare esperienze web coinvolgenti.</p>
  </section>

  <section>
    <h2>Competenze Web</h2>
    <div class="skills-columns">
      <ul>
        <li><strong>⚡ WordPress</strong></li>
        <li>Elementor</li>
        <li>Gutenberg</li>
        <li>Kadence AI</li>
        <li>Stackable</li>
      </ul>
      <ul>
        <li><strong>? Frontend</strong></li>
        <li>HTML & CSS</li>
        <li>JavaScript</li>
        <li>Django (framework)</li>
        <li>Python, GPT</li>
      </ul>
      <ul>
        <li><strong>☁️ Hosting & Sicurezza</strong></li>
        <li>Gestione dominio</li>
        <li>Hosting Web</li>
        <li>Migrazione & Backup (Wordpress)</li>
        <li>Cloud (es. Vercel, Netlify)</li>
        <li>Sicurezza base e certificati SSL</li>
      </ul>
    </div>
  </section>

  <section>
    <h2>? Qualifiche Conseguite</h2>
    <ul>
      <li>Certificazione Full Stack Web Developer (*)</li>
      <li>Corso UX/UI Design</li>
      <li>Diploma Tecnico Informatico</li>
      <li>Workshop su AI Generativa</li>
      <li>WordPress & WooCommerce Expert</li>
    </ul>
  </section>

  <section>
    <h2>? Interessi</h2>
    <p>Mi appassionano il design minimalista, la musica elettronica, la fotografia digitale e le intelligenze
      artificiali creative. Amo scoprire nuove tecnologie e condividerle.</p>
  </section>

  <section>
    <h2>? Siti & Blog da Seguire</h2>
    <ul>
      <li><a href="#">Blog personale su Medium target="_blank"></a></li>
      <li><a href="#">CodiceCreativo.it target="_blank"></a></li>
      <li><a href="#">AI-Tech Studio target="_blank"></a></li>
      <li><a href="#">DesignInspire.it target="_blank"></a></li>
    </ul>
  </section>

  <!-- Risorse dal web (utili) -->
  <section>
    <h2>Ecco alcune risorse dal Web<i class="fas fa-rss"></i></h2>
    <ul>
      <li><a href="https://css-tricks.com" target="_blank">CSS-Tricks</a></li>
      <li><a href="https://smashingmagazine.com" target="_blank">Smashing Magazine</a></li>
      <li><a href="https://dev.to" target="_blank">DEV Community</a></li>
    </ul>
  </section>



  <section>
    <h2>❓ FAQ</h2>
    <ul>
      <li><strong>Quali servizi offri?</strong> Sviluppo web, design UI/UX, siti WordPress e consulenza AI.</li>
      <li><strong>Come posso contattarti?</strong> Usa il modulo nella sezione "Contattami" qui sotto.
        <p /> Mi trovi anche su Linkedin, Instagram e Substack
      </li>
      <li><strong>Fai anche e-commerce?</strong> Certo, sviluppo soluzioni complete WooCommerce e Shopify.</li>
      <li><strong>Gestisci e Gateway di pagamento?</strong> Si, sviluppo soluzioni sicure ed efficienti <p/> per la gestione avanzata dei sistemi di addebito</li>
    </ul>
  </section>


  <!-- Contatti -->
  <section class="contact" id="contatti">
    <h2>Contattami</h2>
    <p>Hai bisogno di un consiglio, assistenza, supporto o vuoi semplicemente salutarmi?
      <p /> Compila il modulo e rispondo entro 24h!
    </p>
    <form class="contact-form">
      <label for="name">Nome</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>

      <label for="message">Messaggio</label>
      <textarea id="message" name="message" rows="5" required></textarea>

      <div class="gdpr-checkbox">
        <input type="checkbox" id="gdpr" name="gdpr" required>
        <label for="gdpr">Acconsento al trattamento dei dati personali <a href="#">privacy policy</a></label>
      </div>

      <button type="submit">Invia Messaggio</button>
    </form>
  </section>



  <footer>
    <p>Realizzato con ❤️ da Francesco Di Fazio</p>
    <p>Contatti: tuo@email.com | IG: @iltuoProfilo</p>
    <p>© 2025 - Tutti i diritti riservati</p>
  </footer>
</body>

</html>