我怎么能把这些脚本写在头上，这样它们就不会；不要压碎？

/* Navbar - change on scroll */
const nav = document.querySelector("nav");
const sectionOne = document.querySelector(".hero-section");

const sectionOneOptions = {
    rootMargin: "-200px 0px 0px 0px"
};

const sectionOneObserver = new IntersectionObserver(function(
  entries, 
  sectionOneObserver
) {
  entries.forEach(entry => {
    if(!entry.isIntersecting) {
      nav.classList.add("nav-scrolled");
    } else {
      nav.classList.remove("nav-scrolled");
    }
  })
}, 
sectionOneOptions);

sectionOneObserver.observe(sectionOne);

/* Hero - text animation */
let typed = new Typed(".auto-type", {
    strings: ["Developer.", "Freelancer."],
    typeSpeed: 150,
    backSpeed: 150,
    startDelay: 900,
    loop: true
})

/* Progress bar - scroll animation */
let elements_to_watch = document.querySelectorAll(".watch");

// callback
let callback = function(items) {
    items.forEach((item) => {
        if(item.isIntersecting) {
            item.target.classList.add("active");

        } /*else {
            item.target.classList.remove("active");
        }*/
    });
}

// observer 
let observer = new IntersectionObserver(callback, { threshold : 0.5 } );

// apply
elements_to_watch.forEach((element) => {
    observer.observe(element);
});

/* Porfolio isotope and filter */

 /* Easy selector helper function */
const select = (el, all = false) => {
    el = el.trim()
    if (all) {
      return [...document.querySelectorAll(el)]
    } else {
      return document.querySelector(el)
    }
  }

/* Easy event listener function */
const on = (type, el, listener, all = false) => {
    let selectEl = select(el, all)

  if (selectEl) {
    if (all) {
      selectEl.forEach(e => e.addEventListener(type, listener))
    } else {
        selectEl.addEventListener(type, listener)
    }
  }
 }

  window.addEventListener('load', () => {
    let portfolioContainer = select('.portfolio-container');
    if (portfolioContainer) {
      let portfolioIsotope = new Isotope(portfolioContainer, {
        itemSelector: '.portfolio-item',
        layoutMode: 'fitRows'
      });

      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);
    }

  });

/* Glightbox */
 
// Initiate portfolio lightbox   
const portfolioLightbox = GLightbox({
    selector: '.portfolio-lightbox'
});

//Initiate portfolio details lightbox 
const portfolioDetailsLightbox = GLightbox({
    selector: '.portfolio-details-lightbox',
    width: '90%',
    height: '90vh'
});


/* Form - Email JS*/
(function(){
    emailjs.init("8PWNKMuO5773e7X7P");
})();

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        } else {
          event.preventDefault();
          sendEmail();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

function sendEmail() {
  emailjs.sendForm('service_b7zg4dy', 'template_8ccl4fd', '.needs-validation')
    .then(function() {
      document.getElementById("messageSuccess").style.display = "block";
      setTimeout(function() {
        resetForm();
      }, 3000);
    }, function(error) {
      console.error('Failed to send email:', error);
    });
}

function resetForm() {
  var form = document.querySelector('.needs-validation');
  form.reset();
  form.classList.remove('was-validated');
  document.getElementById("messageSuccess").style.display = "none";
}

/* Copyright */
function updateCopyrightYear() {
    var d = new Date();
    var currentYear = d.getFullYear();
    document.getElementById("year").innerHTML = currentYear;
  }
  
window.requestAnimationFrame(updateCopyrightYear);


/* Scroll to top button */
const scrollTopBtn = document.querySelector(".scrollToTop-btn");

window.addEventListener("scroll", function(){
    scrollTopBtn.classList.toggle("active", window.scrollY > 500);
});

ScrollReveal().reveal('.reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600});

ScrollReveal().reveal('.left-reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600, origin: 'left'});

ScrollReveal().reveal('.right-reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600, origin: 'right'});

ScrollReveal().reveal('.top-reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600, origin: 'top'});

ScrollReveal().reveal('.zoom', { duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 200, scale: 0.65});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Personal Portfolio | Alessandra Casole </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Alessandra Casole" />
    <meta name="description" content="Esplora il mio portfolio professionale online, le mie abilità, i progetti che ho realizzato e come contattarmi. Scopri come posso aiutarti a raggiungere i tuoi obiettivi attraverso le mie competenze."/>
    <meta property="og:title" content="Alessandra Casole | Personal Portfolio"/>
    <meta property="og:description" content="Esplora il mio portfolio professionale online, le mie abilità, i progetti che ho realizzato e come contattarmi. Scopri come posso aiutarti a raggiungere i tuoi obiettivi attraverso le mie competenze."/>
    <meta property="og:image" content="./assets/img/og-image.jpg"/>
    <meta property="og:url" content="URL della tua pagina"/>
    <meta property="og:type" content="profile"/>

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="./assets/img/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon-16x16.png" />
    <link rel="icon" href="./assets/img/favicon.ico" type="image/x-icon" />
    <link rel="manifest" href="./assets/img/site.webmanifest" />

    <!-- Bootstrap v.5.2.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />

    <!-- Font Awesome v.6.2.1 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />

    <!-- Glightbox -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/css/glightbox.css" />

    <!-- Swiper -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.6/swiper-bundle.css" />

    <!-- CSS -->
    <link rel="stylesheet" href="./assets/css/style.css" />

    <!-- Scripts -->

    <!-- Bootstrap -->
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>

    <!--Text Animation -->
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>

    <!-- Isotope layout -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>

    <!-- Glightbox -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/js/glightbox.min.js"></script>

    <!--Swiper -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.6/swiper-bundle.min.js"></script>

    <!-- Email JS -->
    <script defer src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>

    <!-- Scroll Reveal -->
    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>

    <!-- JS -->
    <script defer src="./assets/js/script.js"></script>
</head>