Portfolio | DFD Design by @Darkness977 - Codewith.it

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

References

<label>Mostrare un testo di etichetta per un elemento di input.
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<th>Definisce una cella di intestazione di una tabella HTML.
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML

Users

Log in to search for users

Explore

Find inspiration

JavaScript Debug Console

es riepilogativo da correggere

JS Istruzioni condizionali es1

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>