Portfolio

Monica Auditore


# Natours

<div className="project-card">
  <div className="project-image">
    <img src="/images/natours.png" alt="Natours" />
  </div>

  <div className="project-content">
    <h2>Natours</h2>

    <div className="project-description">
      <div className="description-text">
        Natours è una landing page completamente responsive progettata per un'agenzia di viaggi immaginaria. Il progetto è stato sviluppato utilizzando tecniche avanzate di CSS e SASS, con un focus particolare su animazioni fluide, layout moderni e un design visivamente accattivante. Questo lavoro dimostra la padronanza di preprocessori CSS e la capacità di creare interfacce utente dinamiche e adattabili.
      </div>

      <div className="description-text">
        Le principali caratteristiche includono:
      </div>

      <ul>
        <li>
          <strong>Design Responsive e Mobile-First:</strong> Il sito si adatta perfettamente a diversi dispositivi e risoluzioni, garantendo un'esperienza utente ottimale sia su desktop che su dispositivi mobili.
        </li>
         <li>
          <strong>Animazioni CSS Avanzate:</strong> Utilizzo di transizioni e animazioni per creare effetti visivi coinvolgenti, migliorando l'interattività e l'estetica del sito.
        </li>
        <li>
          <strong>Struttura Scalabile con SASS:</strong> Implementazione di SASS per una gestione efficiente e modulare degli stili, facilitando la manutenzione e l'espansione futura del progetto.
        </li>
      </ul>

</div>

    <div className="project-links">
      <a
        href="https://github.com/MonicaAuditore/website-natours"
        className="github-link"
        target="_blank"
        rel="noopener noreferrer"
      >

        Codice su GitHub
      </a>
      <a
        href="https://natourswebsiteresp.netlify.app/"
        className="demo-link"
        target="_blank"
        rel="noopener noreferrer"
      >

        Demo Live su Netlify
      </a>
    </div>

  </div>
</div>

<style jsx>{`
  .project-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
  }

  .project-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .project-content {
    padding: 1.5rem;
  }

  .project-description {
    margin: 1rem 0;
  }

  .description-text {
    margin-bottom: 1rem;
    line-height: 1.6;
  }

  .project-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .project-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .logo-icon {
    margin-right: 0.5rem;
  }

  .github-link {
    background-color: #24292e;
    color: white;
  }

  .demo-link {
    background-color: #00ad9f;
    color: white;
  }

  .project-links a:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }

  @media (min-width: 768px) {
    .project-card {
      flex-direction: row;
    }

    .project-image {
      flex: 0 0 40%;
    }

    .project-content {
      flex: 1;
    }
  }
`}</style>


Sito web completamente responsive creato con css e sass avanzati.

Natours


# Space Adventure

<div className="project-card">
  <div className="project-image">
    <img src="/images/space-adventure.png" alt="Space Adventure" />
  </div>

  <div className="project-content">
    <h2>Space Adventure</h2>

    <div className="project-description">
      <div className="description-text">
        Space Adventure è un gioco web interattivo sviluppato con HTML, CSS, JavaScript e Vue.js. Il progetto sfrutta la potenza di Vue.js per una gestione reattiva dello stato, combinata con una base solida di HTML per la struttura e CSS per un design accattivante e responsivo.
      </div>

      <div className="description-text">
        Le principali caratteristiche includono:
      </div>

      <ul>

  <li><strong>Interattività con JavaScript e Vue.js:</strong> La logica di gioco è gestita con JavaScript e Vue.js, creando un'esperienza fluida e dinamica dove il gioco si aggiorna in tempo reale in risposta alle azioni del giocatore. Vue.js permette di gestire lo stato del gioco in modo efficiente, con componenti modulari e reattivi.</li>
  
  <li><strong>Design responsive con CSS:</strong> Il gioco utilizza CSS per creare un design reattivo che si adatta perfettamente a diversi dispositivi, offrendo un'esperienza ottimale su desktop, tablet e dispositivi mobili.</li>
  
</ul>

    </div>

    <div className="project-links">
      <a
        href="https://github.com/MonicaAuditore/space-adventure"
        className="github-link"
        target="_blank"
        rel="noopener noreferrer"
      >

        Codice su GitHub
      </a>
      <a
        href="https://spaceadventuregamevue.netlify.app"
        className="demo-link"
        target="_blank"
        rel="noopener noreferrer"
      >

        Demo Live su Netlify
      </a>
    </div>

  </div>
</div>

<style jsx>{`
  .project-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
  }

  .project-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .project-content {
    padding: 1.5rem;
  }

  .project-description {
    margin: 1rem 0;
  }

  .description-text {
    margin-bottom: 1rem;
    line-height: 1.6;
  }

  .project-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .project-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .logo-icon {
    margin-right: 0.5rem;
  }

  .github-link {
    background-color: #24292e;
    color: white;
  }

  .demo-link {
    background-color: #00ad9f;
    color: white;
  }

  .project-links a:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }

  @media (min-width: 768px) {
    .project-card {
      flex-direction: row;
    }

    .project-image {
      flex: 0 0 40%;
    }

    .project-content {
      flex: 1;
    }
  }
`}</style>


Space Adventure è un gioco web interattivo sviluppato con HTML, CSS, JavaScript e Vue.js.

Space Adventure


# Spotify

<div className="project-card">
  <div className="project-image">
    <img src="/images/spotify.png" alt="Spotify" />
  </div>

  <div className="project-content">
    <h2>Spotify</h2>

    <div className="project-description">
      <div className="description-text">
        Spotify Web è una replica responsive dell'interfaccia utente di Spotify, sviluppata con HTML e CSS. Questo progetto si concentra sulla riproduzione fedele del layout e del design dell'applicazione desktop di Spotify, offrendo un'esperienza utente coerente e adattabile su diversi dispositivi. L'obiettivo principale è stato quello di esercitarsi nella creazione di interfacce complesse e responsive, mantenendo l'aspetto e la sensazione dell'applicazione originale.​
      </div>

      <div className="description-text">
        Le principali caratteristiche includono:
      </div>

      <ul> <li><strong>Replica fedele dell'interfaccia di Spotify:</strong> Il progetto riproduce accuratamente l'aspetto visivo dell'applicazione desktop di Spotify, inclusi layout, colori e tipografia.</li> <li><strong>Design responsive:</strong> Utilizzando tecniche avanzate di CSS, l'interfaccia si adatta perfettamente a diverse dimensioni di schermo, garantendo un'esperienza utente ottimale su desktop, tablet e dispositivi mobili.</li></ul>
    </div>

    <div className="project-links">
      <a
        href="https://github.com/MonicaAuditore/spotify-web"
        className="github-link"
        target="_blank"
        rel="noopener noreferrer"
      >
        Codice su GitHub
      </a>
      <a
        href="https://spotifywebresp.netlify.app/"
        className="demo-link"
        target="_blank"
        rel="noopener noreferrer"
      >
        Demo Live su Netlify
      </a>
    </div>

  </div>
</div>

<style jsx>{`
  .project-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
  }

  .project-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .project-content {
    padding: 1.5rem;
  }

  .project-description {
    margin: 1rem 0;
  }

  .description-text {
    margin-bottom: 1rem;
    line-height: 1.6;
  }

  .project-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .project-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .logo-icon {
    margin-right: 0.5rem;
  }

  .github-link {
    background-color: #24292e;
    color: white;
  }

  .demo-link {
    background-color: #00ad9f;
    color: white;
  }

  .project-links a:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }

  @media (min-width: 768px) {
    .project-card {
      flex-direction: row;
    }

    .project-image {
      flex: 0 0 40%;
    }

    .project-content {
      flex: 1;
    }
  }
`}</style>


Spotify Web è una replica responsive di Spotify, sviluppata con HTML e CSS, che riproduce fedelmente il design originale adattandosi perfettamente a qualsiasi dispositivo.

Spotiy


# WhatsApp Web

<div className="project-card">
  <div className="project-image">
    <img src="/images/whatsapp-web.png" alt="WhatsApp Web" />
  </div>

  <div className="project-content">
    <h2>WhatsApp Web</h2>

    <div className="project-description">
      <div className="description-text">
        WhatsApp Web è una replica responsive dell'interfaccia web di WhatsApp, sviluppata con Vue.js, JavaScript, HTML e CSS. Il progetto simula un'applicazione di messaggistica, consentendo agli utenti di visualizzare una lista di contatti, selezionare una conversazione e inviare o ricevere messaggi.
      </div>

      <div className="description-text">
        Le principali caratteristiche includono:
      </div>

      <ul> <li><strong>Gestione dinamica dei contatti:</strong> Utilizzando la direttiva <code>v-for</code> di Vue.js, l'applicazione genera dinamicamente la lista dei contatti, permettendo una facile scalabilità e manutenzione del codice.</li> <li><strong>Barra di ricerca reattiva:</strong> La barra di ricerca permette di filtrare i contatti in tempo reale mentre l'utente digita, offrendo un'esperienza fluida e interattiva grazie al binding reattivo di Vue. </li> <li><strong>Simulazione di messaggistica:</strong> L'app consente l'invio e la ricezione di messaggi, replicando le funzionalità base di un client di messaggistica come WhatsApp.</li> </ul>
    </div>

    <div className="project-links">
      <a
        href="https://github.com/MonicaAuditore/vue-whatsapp"
        className="github-link"
        target="_blank"
        rel="noopener noreferrer"
      >
        Codice su GitHub
      </a>
      <a
        href="https://whatappwebvue.netlify.app/"
        className="demo-link"
        target="_blank"
        rel="noopener noreferrer"
      >

        Demo Live su Netlify
      </a>
    </div>

  </div>
</div>

<style jsx>{`
  .project-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
  }

  .project-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .project-content {
    padding: 1.5rem;
  }

  .project-description {
    margin: 1rem 0;
  }

  .description-text {
    margin-bottom: 1rem;
    line-height: 1.6;
  }

  .project-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .project-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .logo-icon {
    margin-right: 0.5rem;
  }

  .github-link {
    background-color: #24292e;
    color: white;
  }

  .demo-link {
    background-color: #00ad9f;
    color: white;
  }

  .project-links a:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }

  @media (min-width: 768px) {
    .project-card {
      flex-direction: row;
    }

    .project-image {
      flex: 0 0 40%;
    }

    .project-content {
      flex: 1;
    }
  }
`}</style>


WhatsApp Web è una replica dell’interfaccia di WhatsApp Web, sviluppata con Vue.js, HTML, CSS e JavaScript, che simula un’esperienza realistica di chat.

WhatsApp Web


<div className="project-card">
  <div className="project-image">
    <img src="/images/aeroplanino_di_carta_img.jpg" alt="Aeroplanino di Carta" />
  </div>

  <div className="project-content">
    <h2>Aeroplanino di Carta</h2>

    <div className="project-description">
      <div className="description-text">
        Ho creato un progetto di storytelling interattivo che racconta i miei valori personali attraverso la metafora di un viaggio. Dare forma a un'idea è sempre emozionante, 𝘮𝘢 𝘲𝘶𝘦𝘴𝘵𝘰 𝘱𝘳𝘰𝘨𝘦𝘵𝘵𝘰 𝘭𝘰 è 𝘴𝘵𝘢𝘵𝘰 𝘪𝘯 𝘮𝘰𝘥𝘰 𝘱𝘢𝘳𝘵𝘪𝘤𝘰𝘭𝘢𝘳𝘦 ❤️.

𝗟'𝗲𝘀𝗽𝗲𝗿𝗶𝗲𝗻𝘇𝗮
Ho voluto creare qualcosa che andasse oltre la semplice presentazione. L'utente non legge passivamente la storia, ma la esplora, si immerge nel mio mondo. Ogni elemento - dalle animazioni ai suoni, dal design alle parole - è pensato per accompagnare in questo viaggio interiore.

𝗜𝗹 𝗽𝗿𝗼𝗰𝗲𝘀𝘀𝗼

<ul>
  <li>📝 Giorno 1: Storytelling - prima le storie, poi la forma</li>
  <li>🎨 Giorno 2: Ricerca visiva e prototipazione in Figma</li>
  <li>💻 Giorno 3: Sviluppo con Vue.js 3</li>
  <li>🖼️ Giorno 4: Editing immagini AI e ottimizzazione codice</li>
  <li>✨ Giorno 5: Rifiniture e effetti sonori custom</li>
  <li>🎯 Giorno 6: Sezione enigma finale.</li>
</ul>

𝗜𝗹 𝗰𝗼𝗻𝗰𝗲𝗽𝘁: Un aeroplanino di carta che attraversa sei "venti", ognuno rappresenta un valore personale raccontato attraverso alcuni episodi.

</div>

      𝗦𝘁𝗮𝗰𝗸: Vue.js 3, Vite, CSS3, Figma, Photoshop, Pro Tools per gli audio.

</div>

    <div className="project-links">
      <a
        href="https://github.com/MonicaAuditore/aeroplanino_di_carta"
        className="github-link"
        target="_blank"
        rel="noopener noreferrer"
      >

        Codice su GitHub
      </a>
      <a
        href="https://aeroplaninodicarta.netlify.app/"
        className="demo-link"
        target="_blank"
        rel="noopener noreferrer"
      >

        Demo Live su Netlify
      </a>
    </div>

  </div>
</div>

<style jsx>{`
  .project-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
  }

  .project-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .project-content {
    padding: 1.5rem;
  }

  .project-description {
    margin: 1rem 0;
  }

  .description-text {
    margin-bottom: 1rem;
    line-height: 1.6;
  }

  .project-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .project-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .logo-icon {
    margin-right: 0.5rem;
  }

  .github-link {
    background-color: #24292e;
    color: white;
  }

  .demo-link {
    background-color: #00ad9f;
    color: white;
  }

  .project-links a:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }

  @media (min-width: 768px) {
    .project-card {
      flex-direction: row;
    }

    .project-image {
      flex: 0 0 40%;
    }

    .project-content {
      flex: 1;
    }
  }
`}</style>


Il mio viaggio di crescita personale raccontato attraverso esperienze, riflessioni e momenti che mi hanno formata.