DDF2025 - CV & Contatti Profession by @Darkness977 - Codewith.it

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

References

<q>Indica una parte di testo come citazione breve
<title>Definisce il titolo della pagina web.
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
heightDetermina l'altezza di un elemento HTML in pixel
<a>Inserisce link e collegamenti ipertestuali
dirnameInvia informazioni sulla direzione di scrittura da un elemento input

Users

Log in to search for users

Explore

Find inspiration

Primo laboratorio di program

La ricetta della torta della nonn

Heads Or Tails Random Tally

Review of Functions I

Calcolo Codice Fiscale

spotify dashboard

Pagina di esempio

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: 10px;
      margin-top: 2rem;
    }
    section {
      padding: 2rem;
      max-width: 960px;
      margin: auto;
    }
    h2 {
      font-weight: 600;
      color: #bb86fc;
      border-bottom: 1px solid #333;
      padding-bottom: 0.3rem;
    }
    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;
    }
    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: 5px;
      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: 30px;
      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;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Di Fazio Dario / WebDeveloper</h1>
    <p>Professionista | Problem Solver | [La tua area di competenza]</p>
    <a href="immagine-presentazione.jpg" data-lightbox="profilo" data-title="[Il Tuo Nome] - Professionista nel settore [settore]">
      <img src="immagine-presentazione.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">tuo@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</a></li>
    </ul>
  </section>

  <section>
    <h2>Chi sono e di cosa mi occupo</h2>
    <p>Professionista con esperienza in [settore] 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>

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

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

  <section id="portfolio">
    <h2>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>
    </div>
  </section>

  <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>Contattami</h2>
    <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>
</body>
</html>