index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>💻 Alessio Leodori's Portfolio</title>
    <link rel="icon" type="image/x-icon" href="Assets/favicon-16x16.png" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
      crossorigin="anonymous"
    />
    <script
      src="https://kit.fontawesome.com/b1e024117b.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- navbar -->
    <nav class="navbar navbar-expand-lg sticky-top nav">
      <div class="container-fluid" id="navbar">
        <a class="navbar-brand" href="#" style="font-size: 2.1rem">Portfolio</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#front-end">Front-end</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#programs" 
              data-original-text="Programs"
              id="nav1">Programs</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#full-stack" 
              data-original-text="Full Stack Applications"
              id="nav2"
                >Full Stack Applications</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#personal-projects" 
              data-original-text="Personal Projects"
              id="nav3"
                >Personal Projects</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#faq">FAQ</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact" 
              data-original-text="Contact me"
              id="nav4">Contact me</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- navbar end -->
    <div class="container-fluid" id="logo">
      <img src="Assets/italy.png" alt="italian" title="Italian" id="language"></img>
      <i class="fa-solid fa-circle-half-stroke btn-toggle" title="Dark mode"></i>
      <img class="img-fluid" src="Assets/Alessio_Leodori_logo.png" alt="logo-green" />
    </div>
    <!-- Jumbotron -->
    <div class="container jumbotron rounded-3">
      <p class="p" id="jumbo-section" data-original-text="Welcome to my portfolio! My name is Alessio and I am a bilingual Python Developer passionate about about AI, Machine Learning and building modern applications. My Tech Stack includes: HTML, CSS, Javascript, MongoDB, ExpressJS, React, NodeJS, PHP, Java and Python. 
      I am someone who enjoys wearing different hats and taking on various responsibilities in my work. In my career I have held various roles that have given me a solid foundation in problem solving and communication.
      I am confident that I can apply these skills to any programming project and deliver high-quality
      results. I am always open to new challenges and opportunities to learn
      from others.">
      Welcome to my portfolio! My name is Alessio and I am a bilingual Python Developer passionate about about AI, Machine Learning and building modern applications. My Tech Stack includes: HTML, CSS, Javascript, MongoDB, ExpressJS, React, NodeJS, PHP, Java and Python. 
      I am someone who enjoys wearing different hats and taking on various responsibilities in my work. In my career I have held various roles that have given me a solid foundation in problem solving and communication.
      I am confident that I can apply these skills to any programming project and deliver high-quality
      results. I am always open to new challenges and opportunities to learn
      from others.
      </p>
    </div>
    <!-- Front end -->
    <div
      id="front-end"
      class="container  g-0 rounded-3 justify-content-center"
    >
      <div class="row">
        <div class="front-end">Front-end</div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/netflix-clone" target="_blank">
              <img src="Assets/netflix.png" class="card-img-top" alt="netflix-clone" loading="lazy"/>
            </a>
            <div class="card-body">
              <h5 class="card-title" id="card1" data-original-text="Netflix clone">Netflix clone</h5>
              <p class="card-text" id="card-text1" data-original-text="A web page that mimics the Netflix homepage">
                A web page that mimics the Netflix homepage
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container btn-container">
                <div class="skills">#HTML</div><div class="skills">#CSS</div><div class="skills">#JavaScript</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/netflix-clone"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/travelwise" target="_blank">
              <img src="Assets/travelwise.jpg" class="card-img-top" alt="travelwise" loading="lazy"/>
            </a>
            <div class="card-body">
              <h5 class="card-title">Travelwise</h5>
              <p class="card-text" id="card-text2" data-original-text="A fully responsive Travel Agency website">
                A fully responsive Travel Agency website
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#HTML</div><div class="skills">#CSS</div><div class="skills">#JavaScript</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/Travelwise"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/Jobby" target="_blank">
              <img src="Assets/Jobby.png" class="card-img-top" alt="jobby" loading="lazy"/>
            </a>
            <div class="card-body">
              <h5 class="card-title">Jobby</h5>
              <p class="card-text" id="card-text3" data-original-text="A job search portal with filtering capabilities">
                A job search portal with filtering capabilities
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#HTML</div><div class="skills">#CSS</div><div class="skills">#JavaScript</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/Jobby"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/pizzeria-app-react" target="_blank">
              <img src="Assets/pizza.jpg" class="card-img-top" alt="pizzeria" loading="lazy"/>
            </a>
            <div class="card-body">
              <h5 class="card-title">Pizzeria Forbici</h5>
              <p class="card-text" id="card-text4" data-original-text="A simple Pizzeria landing page created with React">
                A simple Pizzeria landing page created with React
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#React</div><div class="skills">#JavaScript</div><div class="skills">#CSS</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/pizzeria-app-react"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- front-end end -->
    <!-- Programs -->
    <div id="programs" class="container  welcome g-0 rounded-3">
      <div class="row">
        <div class="programs" data-original-text="Programs">Programs</div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/CorsoPython/tree/master/MySQL/Restaurant_GUI" target="_blank" >
              <img
              src="https://images.pexels.com/photos/984888/pexels-photo-984888.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" 
              class="card-img-top"
              alt="restaurant2"
              loading="lazy"
              />
            </a>
            <div class="card-body">
              <h5 class="card-title" id="card8" data-original-text="Restaurant with GUI">Restaurant with GUI</h5>
              <p class="card-text" id="card-text11" data-original-text="A Tkinter Restaurant program">
                A Tkinter Restaurant program
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Python</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/CorsoPython/tree/master/MySQL/Restaurant_GUI"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/CorsoPython/tree/master/Tkinter/Car%20Dealer" target="_blank">
              <img
                src="https://images.pexels.com/photos/7144181/pexels-photo-7144181.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                class="card-img-top"
                alt="car-dealer"
                loading="lazy"
              />
            </a>
            <div class="card-body">
              <h5 class="card-title" id="card9" data-original-text="Car Dealership">Car Dealership</h5>
              <p class="card-text" id="card-text12" data-original-text="A Tkinter GUI car dealership program">
                A tkinter GUI car dealership program
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Python</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/CorsoPython/tree/master/Tkinter/Car%20Dealer"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/CorsoPython/tree/master/Tkinter/Slot%20Machine" target="_blank">
              <img
                src="https://images.pexels.com/photos/3021120/pexels-photo-3021120.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                class="card-img-top"
                alt="slot-machines"
                loading="lazy"
              />
            </a>
            <div class="card-body">
              <h5 class="card-title">Slot Machine</h5>
              <p class="card-text" id="card-text13" data-original-text="A Tkinter slot machine program">
                A Tkinter slot machine program
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Python</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/CorsoPython/tree/master/Tkinter/Slot%20Machine"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/CorsoPython/tree/master/Tkinter/Vending%20Machine" target="_blank">
              <img
                src="https://images.pexels.com/photos/2338113/pexels-photo-2338113.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                class="card-img-top"
                alt="vending-machines"
                loading="lazy"
              />
            </a>
            <div class="card-body">
              <h5 class="card-title" id="card10" data-original-text="Vending Machine">Vending Machine</h5>
              <p class="card-text" id="card-text14" data-original-text="A GUI vending machine">A GUI vending machine</p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Python</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/CorsoPython/tree/master/Tkinter/Vending%20Machine"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/Java-and-PHP/tree/main/src/Game_CardGame" target="_blank">
              <img
                src="https://images.pexels.com/photos/7689420/pexels-photo-7689420.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                class="card-img-top"
                alt="card_game"
                loading="lazy"
              />
            </a>
            <div class="card-body">
              <h5 class="card-title" id="card11" data-original-text="Card Game">Card Game</h5>
              <p class="card-text" id="card-text15" data-original-text="A fun representation of Interfaces in Java">A fun representation of Interfaces in Java</p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Java</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/Java-and-PHP/tree/main/src/Game_CardGame"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/Java-and-PHP/tree/main/src/Swing_Graphics" target="_blank">
              <img
                src="https://images.pexels.com/photos/4342124/pexels-photo-4342124.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                class="card-img-top"
                alt="blockchain"
                loading="lazy"
              />
            </a>
            <div class="card-body">
              <h5 class="card-title" id="card13" data-original-text="HR Solutions">HR Solutions</h5>
              <p class="card-text" id="card-text16" data-original-text="An HR information System built with Java Swing">
                An HR information System built with Java Swing
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Java</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/Java-and-PHP/tree/main/src/Swing_Graphics"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end Programs -->
    <!-- Full Stack Applications -->
    <div
      id="full-stack"
      class="container g-0 rounded-3 justify-content-center"
    >
      <div class="row">
        <div class="full-stack" data-original-text="Full Stack Applications">Full Stack Applications</div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/E-Commerce" target="_blank">
              <img src="Assets/DigitalDojo.png" class="card-img-top" alt="digital-dojo" loading="lazy"/>
            </a>
            <div class="card-body">
              <h5 class="card-title">Digital Dojo</h5>
              <p class="card-text" id="card-text17" data-original-text="An electronics store E-Commerce web app">
                An electronics store E-Commerce web app
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#JavaScript</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/E-Commerce/tree/main"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/training-school-Django" target="_blank">
              <img src="Assets/training.png" class="card-img-top" alt="training-school" loading="lazy" />
            </a>
            <div class="card-body">
              <h5 class="card-title" id="card12" data-original-text="Training school">Training school</h5>
              <p class="card-text" id="card-text18" data-original-text="A training school built with Django">
                A training school built with Django
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Python</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/training-school-Django"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/CorsoPython/tree/master/Flask/La%20Bella%20Roma%20-%20Restaurant" target="_blank">
              <img
                src="Assets/bella roma.png"
                class="card-img-top"
                alt="la-bella-roma-logo"
                loading="lazy"
              />
            </a>
            <div class="card-body">
              <h5 class="card-title">La Bella Roma</h5>
              <p class="card-text" id="card-text20" data-original-text="A Flask restaurant application">
                A Flask restaurant application
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Python</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/CorsoPython/tree/master/Flask/La%20Bella%20Roma%20-%20Restaurant"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <img
              src="Assets/supermarket-logo.png"
              class="card-img-top"
              alt="flask_supermarket"
            />
            <div class="card-body">
              <h5 class="card-title" id="card16" data-original-text="Flask supermarket">Flask Supermarket</h5>
              <p class="card-text" id="card-text26" data-original-text="A Flask supermarket application">
                A Flask supermarket application
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Python</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/CorsoPython/tree/master/Flask/Flask%20Supermarket"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/Java-and-PHP/tree/main/PHP" target="_blank">
              <img
                src="Assets/hr_management_solutions_logo.jpeg"
                class="card-img-top"
                alt="HR Management Platform"
                loading="lazy"
              />
            </a>
            <div class="card-body">
              <h5 class="card-title" id="card17" data-original-text="HR Management Platform">HR Management Platform</h5>
              <p class="card-text" id="card-text19" data-original-text="An HR Management application built with PHP">
                An HR Management application built with PHP
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#PHP</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/Java-and-PHP/tree/main/PHP"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-3 col-xxl-2">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/PetPals" target="_blank">
              <img
                src="Assets/david-moynihan-BT_QM4CpnNE-unsplash.jpg"
                class="card-img-top"
                alt="pet-pals"
                loading="lazy"
              />
            </a>
            <div class="card-body">
              <h5 class="card-title" id="card18">Pet Pals</h5>
              <p class="card-text" id="card-text25" data-original-text="A social media app for pet lovers ">
                A social media app for pet lovers 
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#MERN</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/PetPals"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Full Stack Applications -->
    <!-- Personal Projects -->
    <div
      id="personal-projects"
      class="container g-0 rounded-3 justify-content-center"
    >
      <div class="row">
        <div class="personal-projects" data-original-text="Personal Projects">Personal Projects</div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/QRCodeGenerator" target="_blank">
              <img src="Assets/Alessio's_Github.png" class="card-img-top" alt="qrcode" loading="lazy" />
            </a>
            <div class="card-body">
              <h5 class="card-title" id="card14" data-original-text="QR Code Generator">QR Code Generator</h5>
              <p class="card-text" id="card-text21" data-original-text="A simple, yet effective QR code generator">
                A simple, yet effective QR code generator
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Python</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/QRCodeGenerator"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/WebScraping" target="_blank">
              <img src="Assets/WebScraping.png" class="card-img-top" alt="webscraping" loading="lazy" />
            </a>
            <div class="card-body">
              <h5 class="card-title">Web Scraping</h5>
              <p class="card-text" id="card-text22" data-original-text="A Python script that collects links from a website">
                A Python script that collects links from a website
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Python</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/WebScraping"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/article-sentiment-analysis" target="_blank">
              <img
                src="Assets/SentimentAnalysis.png"
                class="card-img-top"
                alt="sentiment-analysis"
                loading="lazy"
              />
            </a>
            <div class="card-body">
              <h5 class="card-title">Sentiment Analysis</h5>
              <p class="card-text" id="card-text23" data-original-text="A Python script for article sentiment analysis">
                A Python script for article sentiment analysis
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Python</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/article-sentiment-analysis"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card" style="width: auto">
            <a href="https://github.com/Alex188dot/WeatherApp" target="_blank">
              <img src="Assets/WeatherApp.png" class="card-img-top" alt="weather-app" loading="lazy" />
            </a>
            <div class="card-body">
              <h5 class="card-title" id="card15" data-original-text="Weather App">Weather App</h5>
              <p class="card-text" id="card-text24" data-original-text="A Weather App built with Tkinter">
                A Weather App built with Tkinter
              </p>
              <div class="d-flex justify-content-evenly mb-3 p btn-container">
                <div class="skills">#Python</div>
              </div>
              <div class="btn-container">
                <a
                  href="https://github.com/Alex188dot/WeatherApp"
                  class="btn"
                  target="_blank"
                  >Learn more</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Personal-projects end -->
    <!-- FAQ -->
    <div class="container faq-container">
      <div class="row">
        <div
          class="faq"
          id="faq"
          style="text-align: center; margin-bottom: 2rem"
        >
          FAQ
        </div>
        <div class="accordion" id="accordionPanelsStayOpen">
          <div class="accordion-item">
            <h2 class="accordion-header first-accordion-header">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#panelsStayOpen-collapseOne"
                aria-expanded="false"
                aria-controls="panelsStayOpen-collapseOne"
                id="accordion-button-one"
                data-original-text="What languages and frameworks do you use?"
              >
                What languages and frameworks do you use?
              </button>
            </h2>
            <div
              id="panelsStayOpen-collapseOne"
              class="accordion-collapse collapse"
            >
              <div class="accordion-body" id="accordion-body-one" data-original-text="I use Python, JavaScript, HTML and CSS on a daily basis. As per
              frameworks and libraries I use React, either Flask or Django and Bootstrap.">
                I use Python, JavaScript, HTML and CSS on a daily basis. As per
                frameworks and libraries I use React, either Flask or Django and Bootstrap.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#panelsStayOpen-collapseTwo"
                aria-expanded="false"
                aria-controls="panelsStayOpen-collapseTwo"
                id="accordion-button-two"
                data-original-text="What is your favourite programming language?"
              >
                What is your favourite programming language?
              </button>
            </h2>
            <div
              id="panelsStayOpen-collapseTwo"
              class="accordion-collapse collapse"
            >
              <div class="accordion-body" id="accordion-body-two" data-original-text="Python by far! I love its simplicity and its flexibility.">
                Python by far! I love its simplicity and its flexibility.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#panelsStayOpen-collapseThree"
                aria-expanded="false"
                aria-controls="panelsStayOpen-collapseThree"
                id="accordion-button-three"
                data-original-text="Why have you chosen to pursue programming and become a developer?"
              >
                Why have you chosen to pursue programming and become a
                developer?
              </button>
            </h2>
            <div
              id="panelsStayOpen-collapseThree"
              class="accordion-collapse collapse"
            >
              <div class="accordion-body" id="accordion-body-three" data-original-text="I have always been interested in technology in general and I
              thought that because I didn't study Computer Science at
              university this career wasn't viable for me. However, I
              discovered that by both attending courses and studying by
              myself, becoming a developer is absolutely possible.">
                I have always been interested in technology in general and I
                thought that because I didn't study Computer Science at
                university this career wasn't viable for me. However, I
                discovered that by both attending courses and studying by
                myself, becoming a developer is absolutely possible.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header last-accordion-header">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#panelsStayOpen-collapseFive"
                aria-expanded="false"
                aria-controls="panelsStayOpen-collapseFive"
                id="accordion-button-five"
                data-original-text="What else are you passionate about?"
              >
                What else are you passionate about?
              </button>
            </h2>
            <div
              id="panelsStayOpen-collapseFive"
              class="accordion-collapse collapse"
            >
              <div class="accordion-body" id="accordion-body-five" data-original-text="I am interested in cryptocurrencies and blockchain, both for the
              utility this technology could one day bring to the world and for
              its potential for growth.">
                I am interested in cryptocurrencies and blockchain, both for the
                utility this technology could one day bring to the world and for
                its potential for growth.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- FAQ end -->
    <!-- Contact me -->
    <div class="container contact-container" id="contact">
      <div class="row">
        <div class="contact" style="text-align: center; font-size: 1.3rem">
          <h1 style="margin-bottom: 2rem" id="contact-title" data-original-text="Contact me" >Contact me</h1>
          <p id="contact-text1" data-original-text="You found my portfolio interesting and want to know more. What's
          next?">
            You found my portfolio interesting and want to know more. What's
            next?
          </p>
          <p id="contact-text2">
            Feel free to contact me either by sending me an
            <a class="social-links email" href="mailto:alessio.leodori@gmail.com"
              >email</a
            >
            or via
            <a
              class="social-links linkedin"
              href="https://www.linkedin.com/in/alessio-leodori-a04276280/"
              target="_blank"
              >Linkedin</a
            >
            <i class="fa-brands fa-linkedin"></i>
          </p>
          <p id="contact-text3">
            You can also check out my
            <a
              class="social-links github"
              href="https://github.com/Alex188dot"
              target="_blank"
              >Github</a
            >
            <i class="fa-brands fa-github"></i>
          </p>
        </div>
      </div>
    </div>
    <!-- Contact me end -->
    <script src="script.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>