Portfolio | DFD Design by @Darkness977 - Codewith.it

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

Referenze

checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
<b>Formatta il testo in grassetto
<nav>Definisce un menu di navigazione
<tbody>Definisce il contenuto principale di una tabella.
<aside>Definisce un contenuto separato dal testo perincipale

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercizio 2 esame

pagina America(2)

Il Fiume dell\\\\

Review of Functions I

Informazioni Cliente - Quiz a Rami

tedesco ad ita sito canzo

Costruzione di tabella con html5

tabella mio esame

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>