Portfolio | DFD Design by @Darkness977 - Codewith.it

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

Referenze

_selfApre collegamenti ipertestuali nella stessa pagina del browser
<head>Tag primario di un documento HTML
<ul>Usato per la creazione di liste non ordinate.
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
Inserisce un commento nel codice
<h1>Titolo di intestazione di primo livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Inserimento immagini in un testo

esercitazione8.html

Esercizi lezione 19-11-20

Form per il torneo misto disfo

menu a comparsa Jquery

Heads Or Tails Random Tally

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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>