JSFiddle - React, Tailwind, and code Playground

HTML

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
        integrity="sha512-doJrC/ocU8VGVRx3O9981+2aYUn3fuWVWvqLi1U+tA2MWVzsw+NVKq1PrENF03M+TYBP92PnYUlXFH1ZW0FpLw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://kit.fontawesome.com/1aca141b14.js" crossorigin="anonymous"></script>
    <title>Portfolio</title>
</head>

<body>

    <nav class="navbar navbar-expand-lg fixed-top navbar-custom" style="padding: 1%;">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
            </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 justify-content-center" id="navbarNav">
                <ul class="navbar-nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading1">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"...

CSS

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");

* {
  font-family: "Times New Roman";
}

.grisclaire {
  color: rgb(117, 111, 111);
}
/* Modify the background color */


.navbar-nav .nav-link.active {
  color: cyan;
}

.navbar-custom {
  background-color: rgba(255, 255, 255, 0.37);
}

.navbar-nav .nav-item {
  padding-left: 3%;
  width: 100px;
  text-align: center;
}

.nav-link .navbar-nav .nav-item {
  font-size: 39px;
}

.navbar-nav .nav-item .nav-link.active {
  color: cyan;
  box-shadow: inset 0 -2.5px 0 0 cyan;
}

.navbar-nav .nav-item .nav-link {
  color: white;
}

.navbar-nav .nav-item .nav-link:hover {
  color: cyan;
  box-shadow: inset 0 -2.5px 0 0 cyan;
}

.nav-item a:hover {
  color: cyan;
  box-shadow: inset 0 -2.5px 0 0 cyan;
}

/* .navbar-nav .nav-item .nav-link:hover::after {
  width: 100%;
  transition: width .3s;
}


.navbar-nav .nav-item .nav-link::after {
  content: '';
  display: block;
  width: 0;
  transition: width .3s;
}

.nav-item:hover::after {
  width: 100%;
  transition: width .3s;
}


.nav-item::after {
  content: '';
  display: block;
  width: 0;
  transition: width .3s;
} */

.cool-link:hover::after {
  width: 100%;
  /* transition: width .3s; */
}

/**/


.caseservices {
  /* background-image: url('114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg'); */
  background-repeat: no-repeat;
  background-size: 80%;
}

/* .carousel-item {
  height: auto;
  
} */

.carousel-item {
    height: 100vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

.carousel-inner .carousel-item>img {
  -webkit-animation: thing 20s;
  -o-animation: thing 20s;
  animation: thing 20s;
}

@keyframes thing {
  from {
    transform: scale(1, 1);
  }

  to {
    transform: scale(1.5, 1.5);
  }
}

.skills-bar {
  width: 600px;
  background-color: rgb(247,...

JavaScript

$(document).ready(function(){
    $(window).scroll(function(){
        var scroll = $(window).scrollTop();
        if (scroll > 300) {
          $(".navbar-custom").css("background" , "blue");
        }
    })
  })