updated cv

and can be expanded)

assets/js/main.js

@@ -1,254 +1,355 @@
 /**
-* Template Name: Laura
+ * Template Name: Laura
-* Updated: Jul 27 2023 with Bootstrap v5.3.1
+ * Updated: Jul 27 2023 with Bootstrap v5.3.1
-* Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
+ * Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
-* Author: BootstrapMade.com
+ * Author: BootstrapMade.com
-* License: https://bootstrapmade.com/license/
+ * License: https://bootstrapmade.com/license/
-*/
+ */
-(function() {
+(function () {
-  "use strict";
+  "use strict";
-
+
-  /**
+  /**
-   * Easy selector helper function
+   * Easy selector helper function
-   */
+   */
-  const select = (el, all = false) => {
+  const select = (el, all = false) => {
-    el = el.trim()
+    el = el.trim();
-    if (all) {
+    if (all) {
-      return [...document.querySelectorAll(el)]
+      return [...document.querySelectorAll(el)];
-    } else {
+    } else {
-      return document.querySelector(el)
+      return document.querySelector(el);
-    }
+    }
-  }
+  };
-
+
-  /**
+  /**
-   * Easy event listener function
+   * Easy event listener function
-   */
+   */
-  const on = (type, el, listener, all = false) => {
+  const on = (type, el, listener, all = false) => {
-    let selectEl = select(el, all)
+    let selectEl = select(el, all);
-    if (selectEl) {
+    if (selectEl) {
-      if (all) {
+      if (all) {
-        selectEl.forEach(e => e.addEventListener(type, listener))
+        selectEl.forEach((e) => e.addEventListener(type, listener));
-      } else {
+      } else {
-        selectEl.addEventListener(type, listener)
+        selectEl.addEventListener(type, listener);
-      }
+      }
-    }
+    }
-  }
+  };
-
+
-  /**
+  /**
-   * Easy on scroll event listener 
+   * Easy on scroll event listener
-   */
+   */
-  const onscroll = (el, listener) => {
+  const onscroll = (el, listener) => {
-    el.addEventListener('scroll', listener)
+    el.addEventListener("scroll", listener);
-  }
+  };
-
+
-  /**
+  /**
-   * Navbar links active state on scroll
+   * Navbar links active state on scroll
-   */
+   */
-  let navbarlinks = select('#navbar .scrollto', true)
+  let navbarlinks = select("#navbar .scrollto", true);
-  const navbarlinksActive = () => {
+  const navbarlinksActive = () => {
-    let position = window.scrollY + 200
+    let position = window.scrollY + 200;
-    navbarlinks.forEach(navbarlink => {
+    navbarlinks.forEach((navbarlink) => {
-      if (!navbarlink.hash) return
+      if (!navbarlink.hash) return;
-      let section = select(navbarlink.hash)
+      let section = select(navbarlink.hash);
-      if (!section) return
+      if (!section) return;
-      if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
+      if (
-        navbarlink.classList.add('active')
+        position >= section.offsetTop &&
-      } else {
+        position <= section.offsetTop + section.offsetHeight
-        navbarlink.classList.remove('active')
+      ) {
-      }
+        navbarlink.classList.add("active");
-    })
+      } else {
-  }
+        navbarlink.classList.remove("active");
-  window.addEventListener('load', navbarlinksActive)
+      }
-  onscroll(document, navbarlinksActive)
+    });
-
+  };
-  /**
+  window.addEventListener("load", navbarlinksActive);
-   * Scrolls to an element with header offset
+  onscroll(document, navbarlinksActive);
-   */
+
-  const scrollto = (el) => {
+  /**
-    let header = select('#header')
+   * Scrolls to an element with header offset
-    let offset = header.offsetHeight
+   */
-
+  const scrollto = (el) => {
-    if (!header.classList.contains('header-scrolled')) {
+    let header = select("#header");
-      offset -= 20
+    let offset = header.offsetHeight;
-    }
+
-
+    if (!header.classList.contains("header-scrolled")) {
-    let elementPos = select(el).offsetTop
+      offset -= 20;
-    window.scrollTo({
+    }
-      top: elementPos - offset,
+
-      behavior: 'smooth'
+    let elementPos = select(el).offsetTop;
-    })
+    window.scrollTo({
-  }
+      top: elementPos - offset,
-
+      behavior: "smooth",
-  /**
+    });
-   * Toggle .header-scrolled class to #header when page is scrolled
+  };
-   */
+
-  let selectHeader = select('#header')
+  /**
-  if (selectHeader) {
+   * Toggle .header-scrolled class to #header when page is scrolled
-    const headerScrolled = () => {
+   */
-      if (window.scrollY > 100) {
+  let selectHeader = select("#header");
-        selectHeader.classList.add('header-scrolled')
+  if (selectHeader) {
-      } else {
+    const headerScrolled = () => {
-        selectHeader.classList.remove('header-scrolled')
+      if (window.scrollY > 100) {
-      }
+        selectHeader.classList.add("header-scrolled");
-    }
+      } else {
-    window.addEventListener('load', headerScrolled)
+        selectHeader.classList.remove("header-scrolled");
-    onscroll(document, headerScrolled)
+      }
-  }
+    };
-
+    window.addEventListener("load", headerScrolled);
-  /**
+    onscroll(document, headerScrolled);
-   * Back to top button
+  }
-   */
+
-  let backtotop = select('.back-to-top')
+  /**
-  if (backtotop) {
+   * Back to top button
-    const toggleBacktotop = () => {
+   */
-      if (window.scrollY > 100) {
+  let backtotop = select(".back-to-top");
-        backtotop.classList.add('active')
+  if (backtotop) {
-      } else {
+    const toggleBacktotop = () => {
-        backtotop.classList.remove('active')
+      if (window.scrollY > 100) {
-      }
+        backtotop.classList.add("active");
-    }
+      } else {
-    window.addEventListener('load', toggleBacktotop)
+        backtotop.classList.remove("active");
-    onscroll(document, toggleBacktotop)
+      }
-  }
+    };
-
+    window.addEventListener("load", toggleBacktotop);
-  /**
+    onscroll(document, toggleBacktotop);
-   * Mobile nav toggle
+  }
-   */
+
-  on('click', '.mobile-nav-toggle', function(e) {
+  /**
-    select('#navbar').classList.toggle('navbar-mobile')
+   * Mobile nav toggle
-    this.classList.toggle('bi-list')
+   */
-    this.classList.toggle('bi-x')
+  on("click", ".mobile-nav-toggle", function (e) {
-  })
+    select("#navbar").classList.toggle("navbar-mobile");
-
+    this.classList.toggle("bi-list");
-  /**
+    this.classList.toggle("bi-x");
-   * Mobile nav dropdowns activate
+  });
-   */
+
-  on('click', '.navbar .dropdown > a', function(e) {
+  /**
-    if (select('#navbar').classList.contains('navbar-mobile')) {
+   * Mobile nav dropdowns activate
-      e.preventDefault()
+   */
-      this.nextElementSibling.classList.toggle('dropdown-active')
+  on(
-    }
+    "click",
-  }, true)
+    ".navbar .dropdown > a",
-
+    function (e) {
-  /**
+      if (select("#navbar").classList.contains("navbar-mobile")) {
-   * Scrool with ofset on links with a class name .scrollto
+        e.preventDefault();
-   */
+        this.nextElementSibling.classList.toggle("dropdown-active");
-  on('click', '.scrollto', function(e) {
+      }
-    if (select(this.hash)) {
+    },
-      e.preventDefault()
+    true
-
+  );
-      let navbar = select('#navbar')
+
-      if (navbar.classList.contains('navbar-mobile')) {
+  /**
-        navbar.classList.remove('navbar-mobile')
+   * Scrool with ofset on links with a class name .scrollto
-        let navbarToggle = select('.mobile-nav-toggle')
+   */
-        navbarToggle.classList.toggle('bi-list')
+  on(
-        navbarToggle.classList.toggle('bi-x')
+    "click",
-      }
+    ".scrollto",
-      scrollto(this.hash)
+    function (e) {
-    }
+      if (select(this.hash)) {
-  }, true)
+        e.preventDefault();
-
+
-  /**
+        let navbar = select("#navbar");
-   * Scroll with ofset on page load with hash links in the url
+        if (navbar.classList.contains("navbar-mobile")) {
-   */
+          navbar.classList.remove("navbar-mobile");
-  window.addEventListener('load', () => {
+          let navbarToggle = select(".mobile-nav-toggle");
-    if (window.location.hash) {
+          navbarToggle.classList.toggle("bi-list");
-      if (select(window.location.hash)) {
+          navbarToggle.classList.toggle("bi-x");
-        scrollto(window.location.hash)
+        }
-      }
+        scrollto(this.hash);
-    }
+      }
-  });
+    },
-
+    true
-  /**
+  );
-   * Skills animation
+
-   */
+  on("click", "#resume-toggle", e => {
-  let skilsContent = select('.skills-content');
+      console.log("sup")
-  if (skilsContent) {
+      const sec = select("#resume-section");
-    new Waypoint({
+      const btn = e.target;
-      element: skilsContent,
+      sec.classList.toggle("expanded");
-      offset: '80%',
+      select(".resume-fade").classList.toggle("expanded");
-      handler: function(direction) {
+      if (sec.classList.contains("expanded"))
-        let progress = select('.progress .progress-bar', true);
+          btn.innerHTML = 'Hide <i class="bi bi-chevron-up"></i>';
-        progress.forEach((el) => {
+      else
-          el.style.width = el.getAttribute('aria-valuenow') + '%'
+          btn.innerHTML = 'Expand <i class="bi bi-chevron-down"></i>';
-        });
+      AOS.refresh();
-      }
+  })
-    })
+
-  }
+  /**
-
+   * Scroll with ofset on page load with hash links in the url
-  /**
+   */
-   * Testimonials slider
+  window.addEventListener("load", () => {
-   */
+    if (window.location.hash) {
-  new Swiper('.testimonials-slider', {
+      if (select(window.location.hash)) {
-    speed: 600,
+        scrollto(window.location.hash);
-    loop: true,
+      }
-    autoplay: {
+    }
-      delay: 5000,
+  });
-      disableOnInteraction: false
+
-    },
+  /**
-    slidesPerView: 'auto',
+   * Skills animation
-    pagination: {
+   */
-      el: '.swiper-pagination',
+  let skillsContent = select(".progress", true);
-      type: 'bullets',
+  if (skillsContent) {
-      clickable: true
+    skillsContent.forEach((skill) => {
-    }
+      new Waypoint({
-  });
+        element: skill,
-
+        offset: "100%",
-  /**
+        handler: function (direction) {
-   * Porfolio isotope and filter
+          let progress = skill.querySelectorAll(".progress-bar");
-   */
+          progress.forEach((el) => {
-  window.addEventListener('load', () => {
+            let percent =
-    let portfolioContainer = select('.portfolio-container');
+              100 *
-    if (portfolioContainer) {
+              (+el.getAttribute("aria-valuenow") /
-      let portfolioIsotope = new Isotope(portfolioContainer, {
+                (+el.getAttribute("aria-valuemax") -
-        itemSelector: '.portfolio-item'
+                  +el.getAttribute("aria-valuemin")));
-      });
+            el.style.width = percent + "%";
-
+          });
-      let portfolioFilters = select('#portfolio-flters li', true);
+        },
-
+      });
-      on('click', '#portfolio-flters li', function(e) {
+    });
-        e.preventDefault();
+  }
-        portfolioFilters.forEach(function(el) {
+
-          el.classList.remove('filter-active');
+  /**
-        });
+   * Testimonials slider
-        this.classList.add('filter-active');
+   */
-
+  new Swiper(".testimonials-slider", {
-        portfolioIsotope.arrange({
+    speed: 600,
-          filter: this.getAttribute('data-filter')
+    loop: true,
-        });
+    autoplay: {
-
+      delay: 10000,
-      }, true);
+      disableOnInteraction: false,
-    }
+    },
-
+    slidesPerView: "auto",
-  });
+    pagination: {
-
+      el: ".swiper-pagination",
-  /**
+      type: "bullets",
-   * Initiate portfolio lightbox 
+      clickable: true,
-   */
+    },
-  const portfolioLightbox = GLightbox({
+  });
-    selector: '.portfolio-lightbox'
+
-  });
+  window.addEventListener("load", () => {
-
+    /**
-  /**
+     * Skills isotope and filter
-   * Portfolio details slider
+     */
-   */
+    let skillsContainer = select(".skills-container");
-  new Swiper('.portfolio-details-slider', {
+    if (skillsContainer) {
-    speed: 400,
+      let skillsIsotope = new Isotope(skillsContainer, {
-    loop: true,
+        itemSelector: ".skill-item",
-    autoplay: {
+      });
-      delay: 5000,
+
-      disableOnInteraction: false
+      let skillsFilters = select("#skills-filters li", true);
-    },
+
-    pagination: {
+      on(
-      el: '.swiper-pagination',
+        "click",
-      type: 'bullets',
+        "#skills-filters li",
-      clickable: true
+        function (e) {
-    }
+          e.preventDefault();
-  });
+          skillsFilters.forEach(function (el) {
-
+            el.classList.remove("filter-active");
-  /**
+          });
-   * Initiate Pure Counter 
+          this.classList.add("filter-active");
-   */
+
-  new PureCounter();
+          skillsIsotope.arrange({
-
+            filter: this.getAttribute("data-filter"),
-})()
+          });
+        },
+        true
+      );
+    }
+
+    /**
+     * Porfolio isotope and filter
+     */
+    let portfolioContainer = select(".portfolio-container");
+    if (portfolioContainer) {
+      let portfolioIsotope = new Isotope(portfolioContainer, {
+        itemSelector: ".portfolio-item",
+      });
+
+      let portfolioFilters = select("#portfolio-flters li", true);
+
+      on(
+        "click",
+        "#portfolio-flters li",
+        function (e) {
+          e.preventDefault();
+          portfolioFilters.forEach(function (el) {
+            el.classList.remove("filter-active");
+          });
+          this.classList.add("filter-active");
+
+          portfolioIsotope.arrange({
+            filter: this.getAttribute("data-filter"),
+          });
+        },
+        true
+      );
+    }
+    // let horizontal_aoss = document.querySelectorAll("[data-aos~='left'], [data-aos~='right']")
+    if (window.matchMedia("(max-width: 768px)").matches) {
+      let horizontal_aoss = document.querySelectorAll(
+        `[data-aos$="left"], [data-aos$="right"]`
+      );
+      horizontal_aoss.forEach((el) => el.setAttribute("data-aos", "fade-up"));
+    }
+    AOS.init();
+  });
+
+  /**
+   * Initiate portfolio lightbox
+   */
+  const portfolioLightbox = GLightbox({
+    selector: ".portfolio-lightbox",
+  });
+
+  /**
+   * Portfolio details slider
+   */
+  new Swiper(".portfolio-details-slider", {
+    speed: 400,
+    loop: true,
+    autoplay: {
+      delay: 5000,
+      disableOnInteraction: false,
+    },
+    pagination: {
+      el: ".swiper-pagination",
+      type: "bullets",
+      clickable: true,
+    },
+  });
+  if (localStorage.getItem("theme") == "light") {
+    toggleDarkMode();
+  }
+
+    // Set age correctly (cuz sbatti farlo ogni
+    // anno, toi meme tu sais)
+    let age_span = document.querySelector("#age");
+    age_span.textContent = calculateAge("1999-10-15");
+})();
+
+function toggleDarkMode() {
+  let dark_indicator = document.querySelector("#navbar i");
+  dark_indicator.classList.toggle("bi-moon-stars-fill");
+  dark_indicator.classList.toggle("bi-sun-fill");
+
+  document.body.classList.toggle("dark");
+
+  let theme = document.body.classList.contains("dark") ? "dark" : "light";
+  document.documentElement.style.setProperty("color-scheme", theme);
+  localStorage.setItem("theme", theme);
+}
+
+function calculateAge(birthDate) {
+    const today = new Date();
+    const birth = new Date(birthDate);
+    let age = today.getFullYear() - birth.getFullYear();
+    const monthDifference = today.getMonth() - birth.getMonth();
+
+    // Check if the birthday has not occurred yet this year
+    if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birth.getDate())) {
+        age--;
+    }
+
+    return age;
+}

inner-page.html

@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta content="width=device-width, initial-scale=1.0" name="viewport">
-
-  <title>Inner Page - Laura Bootstrap Template</title>
-  <meta content="" name="description">
-  <meta content="" name="keywords">
-
-  <!-- Favicons -->
-  <link href="assets/img/favicon.png" rel="icon">
-  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
-
-  <!-- Google Fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Satisfy" rel="stylesheet">
-
-  <!-- Vendor CSS Files -->
-  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
-  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
-  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
-  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
-
-  <!-- Template Main CSS File -->
-  <link href="assets/css/style.css" rel="stylesheet">
-
-  <!-- =======================================================
-  * Template Name: Laura
-  * Updated: Jul 27 2023 with Bootstrap v5.3.1
-  * Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
-  * Author: BootstrapMade.com
-  * License: https://bootstrapmade.com/license/
-  ======================================================== -->
-</head>
-
-<body>
-
-  <!-- ======= Header ======= -->
-  <header id="header" class="fixed-top d-flex justify-content-center align-items-center ">
-
-    <nav id="navbar" class="navbar">
-      <ul>
-        <li><a class="nav-link scrollto " href="#hero">Home</a></li>
-        <li><a class="nav-link scrollto" href="#about">About</a></li>
-        <li><a class="nav-link scrollto" href="#resume">Resume</a></li>
-        <li><a class="nav-link scrollto" href="#services">Services</a></li>
-        <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
-        <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
-          <ul>
-            <li><a href="#">Drop Down 1</a></li>
-            <li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
-              <ul>
-                <li><a href="#">Deep Drop Down 1</a></li>
-                <li><a href="#">Deep Drop Down 2</a></li>
-                <li><a href="#">Deep Drop Down 3</a></li>
-                <li><a href="#">Deep Drop Down 4</a></li>
-                <li><a href="#">Deep Drop Down 5</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Drop Down 2</a></li>
-            <li><a href="#">Drop Down 3</a></li>
-            <li><a href="#">Drop Down 4</a></li>
-          </ul>
-        </li>
-        <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
-      </ul>
-      <i class="bi bi-list mobile-nav-toggle"></i>
-    </nav><!-- .navbar -->
-
-  </header><!-- End Header -->
-
-  <main id="main">
-
-    <!-- ======= Breadcrumbs ======= -->
-    <section class="breadcrumbs">
-      <div class="container">
-
-        <div class="d-flex justify-content-between align-items-center">
-          <h2>Inner Page</h2>
-          <ol>
-            <li><a href="index.html">Home</a></li>
-            <li>Inner Page</li>
-          </ol>
-        </div>
-
-      </div>
-    </section><!-- End Breadcrumbs -->
-
-    <section class="inner-page">
-      <div class="container">
-        <p>
-          Example inner page template
-        </p>
-      </div>
-    </section>
-
-  </main><!-- End #main -->
-
-  <!-- ======= Footer ======= -->
-  <footer id="footer">
-    <div class="container">
-      <h3>Laura Thomson</h3>
-      <p>Et aut eum quis fuga eos sunt ipsa nihil. Labore corporis magni eligendi fuga maxime saepe commodi placeat.</p>
-      <div class="social-links">
-        <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
-        <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
-        <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
-        <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
-        <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
-      </div>
-      <div class="copyright">
-        &copy; Copyright <strong><span>Laura</span></strong>. All Rights Reserved
-      </div>
-      <div class="credits">
-        <!-- All the links in the footer should remain intact. -->
-        <!-- You can delete the links only if you purchased the pro version. -->
-        <!-- Licensing information: https://bootstrapmade.com/license/ -->
-        <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/ -->
-        Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
-      </div>
-    </div>
-  </footer><!-- End Footer -->
-
-  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
-
-  <!-- Vendor JS Files -->
-  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
-  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
-  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
-  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
-  <script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
-  <script src="assets/vendor/php-email-form/validate.js"></script>
-
-  <!-- Template Main JS File -->
-  <script src="assets/js/main.js"></script>
-
-</body>
-
-</html>

portfolio-details.html

@@ -1,185 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta content="width=device-width, initial-scale=1.0" name="viewport">
-
-  <title>Portfolio Details - Laura Bootstrap Template</title>
-  <meta content="" name="description">
-  <meta content="" name="keywords">
-
-  <!-- Favicons -->
-  <link href="assets/img/favicon.png" rel="icon">
-  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
-
-  <!-- Google Fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Satisfy" rel="stylesheet">
-
-  <!-- Vendor CSS Files -->
-  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
-  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
-  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
-  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
-
-  <!-- Template Main CSS File -->
-  <link href="assets/css/style.css" rel="stylesheet">
-
-  <!-- =======================================================
-  * Template Name: Laura
-  * Updated: Jul 27 2023 with Bootstrap v5.3.1
-  * Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
-  * Author: BootstrapMade.com
-  * License: https://bootstrapmade.com/license/
-  ======================================================== -->
-</head>
-
-<body>
-
-  <!-- ======= Header ======= -->
-  <header id="header" class="fixed-top d-flex justify-content-center align-items-center ">
-
-    <nav id="navbar" class="navbar">
-      <ul>
-        <li><a class="nav-link scrollto " href="#hero">Home</a></li>
-        <li><a class="nav-link scrollto" href="#about">About</a></li>
-        <li><a class="nav-link scrollto" href="#resume">Resume</a></li>
-        <li><a class="nav-link scrollto" href="#services">Services</a></li>
-        <li><a class="nav-link scrollto active" href="#portfolio">Portfolio</a></li>
-        <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
-          <ul>
-            <li><a href="#">Drop Down 1</a></li>
-            <li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
-              <ul>
-                <li><a href="#">Deep Drop Down 1</a></li>
-                <li><a href="#">Deep Drop Down 2</a></li>
-                <li><a href="#">Deep Drop Down 3</a></li>
-                <li><a href="#">Deep Drop Down 4</a></li>
-                <li><a href="#">Deep Drop Down 5</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Drop Down 2</a></li>
-            <li><a href="#">Drop Down 3</a></li>
-            <li><a href="#">Drop Down 4</a></li>
-          </ul>
-        </li>
-        <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
-      </ul>
-      <i class="bi bi-list mobile-nav-toggle"></i>
-    </nav><!-- .navbar -->
-
-  </header><!-- End Header -->
-
-  <main id="main">
-
-    <!-- ======= Breadcrumbs Section ======= -->
-    <section class="breadcrumbs">
-      <div class="container">
-
-        <div class="d-flex justify-content-between align-items-center">
-          <h2>Portfolio Details</h2>
-          <ol>
-            <li><a href="index.html">Home</a></li>
-            <li><a href="portfolio.html">Portfolio</a></li>
-            <li>Portfolio Details</li>
-          </ol>
-        </div>
-
-      </div>
-    </section><!-- Breadcrumbs Section -->
-
-    <!-- ======= Portfolio Details Section ======= -->
-    <section id="portfolio-details" class="portfolio-details">
-      <div class="container">
-
-        <div class="row gy-4">
-
-          <div class="col-lg-8">
-            <div class="portfolio-details-slider swiper">
-              <div class="swiper-wrapper align-items-center">
-
-                <div class="swiper-slide">
-                  <img src="assets/img/portfolio/portfolio-details-1.jpg" alt="">
-                </div>
-
-                <div class="swiper-slide">
-                  <img src="assets/img/portfolio/portfolio-details-2.jpg" alt="">
-                </div>
-
-                <div class="swiper-slide">
-                  <img src="assets/img/portfolio/portfolio-details-3.jpg" alt="">
-                </div>
-
-              </div>
-              <div class="swiper-pagination"></div>
-            </div>
-          </div>
-
-          <div class="col-lg-4">
-            <div class="portfolio-info">
-              <h3>Project information</h3>
-              <ul>
-                <li><strong>Category</strong>: Web design</li>
-                <li><strong>Client</strong>: ASU Company</li>
-                <li><strong>Project date</strong>: 01 March, 2020</li>
-                <li><strong>Project URL</strong>: <a href="#">www.example.com</a></li>
-              </ul>
-            </div>
-            <div class="portfolio-description">
-              <h2>This is an example of portfolio detail</h2>
-              <p>
-                Autem ipsum nam porro corporis rerum. Quis eos dolorem eos itaque inventore commodi labore quia quia. Exercitationem repudiandae officiis neque suscipit non officia eaque itaque enim. Voluptatem officia accusantium nesciunt est omnis tempora consectetur dignissimos. Sequi nulla at esse enim cum deserunt eius.
-              </p>
-            </div>
-          </div>
-
-        </div>
-
-      </div>
-    </section><!-- End Portfolio Details Section -->
-
-  </main><!-- End #main -->
-
-  <!-- ======= Footer ======= -->
-  <footer id="footer">
-    <div class="container">
-      <h3>Laura Thomson</h3>
-      <p>Et aut eum quis fuga eos sunt ipsa nihil. Labore corporis magni eligendi fuga maxime saepe commodi placeat.</p>
-      <div class="social-links">
-        <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
-        <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
-        <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
-        <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
-        <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
-      </div>
-      <div class="copyright">
-        &copy; Copyright <strong><span>Laura</span></strong>. All Rights Reserved
-      </div>
-      <div class="credits">
-        <!-- All the links in the footer should remain intact. -->
-        <!-- You can delete the links only if you purchased the pro version. -->
-        <!-- Licensing information: https://bootstrapmade.com/license/ -->
-        <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/ -->
-        Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
-      </div>
-    </div>
-  </footer><!-- End Footer -->
-
-  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
-
-  <!-- Vendor JS Files -->
-  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
-  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
-  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
-  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
-  <script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
-  <script src="assets/vendor/php-email-form/validate.js"></script>
-
-  <!-- Template Main JS File -->
-  <script src="assets/js/main.js"></script>
-
-</body>
-
-</html>