我正在努力使軟件工程師這個詞上當前突出顯示的橙色降低，這樣頂部邊緣在文本上方40%的地方結束，突出顯示的底部延伸到這個詞的下方并稍微向右延伸。

window.addEventListener("DOMContentLoaded", function() {
  const welcomeText = document.getElementById("welcome-text");
  const container = document.querySelector(".welcome-container");
  const welcomeScreen = document.getElementById("welcome-screen");
  const portfolio = document.getElementById("portfolio");
  const characters = welcomeText.textContent.split("");

  welcomeText.textContent = ""; // Clear the original text

  characters.forEach(function(char, index) {
    const span = document.createElement("span");
    span.textContent = char;
    span.style.transitionDelay = index * 0.125 + "s"; // Delay each character's transition
    welcomeText.appendChild(span);
  });

  setTimeout(function() {
    welcomeText.classList.add("animate-color");
    setTimeout(function() {
      welcomeText.classList.add("animate-slide");
      container.style.height = welcomeText.offsetHeight + "px"; // Adjust container height dynamically
      setTimeout(function() {
        welcomeText.style.opacity = "0"; // Set opacity to 0 to fade out the text
        setTimeout(function() {
          welcomeText.textContent = ""; // Clear the text content
          welcomeText.style.opacity = "1"; // Set opacity back to 1
          welcomeText.style.color = "rgb(57, 55, 55)"; // Change color back to the original color
          welcomeScreen.style.zIndex = "-2"; // Hide the welcome screen
          welcomeScreen.style.backgroundColor = "none"; // Hide the welcome screen
          portfolio.style.display = "block"; // Show the hidden content
        }, 600); // Delay for 0.3 seconds to complete the fading effect
      }, 500); // Delay the fading animation for 1 second
    }, characters.length * 0.125 * 1000); // Delay the slide animation until color transition is complete
  }, 0);
});

body {
  background-color: white;
  font-family: 'Dosis', sans-serif;
  margin: 0;
}


/* Welcome Screen */

#welcome-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.welcome-container {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#welcome-text {
  font-size: 86px;
  color: rgb(57, 55, 55);
  position: relative;
  opacity: 1;
  transition: opacity 0.3s linear;
}

.animate-color span {
  transition: color 0.3s linear;
  color: white;
}

.animate-slide {
  animation: slide-animation 1s 0.5s forwards;
  animation-fill-mode: both;
}

@keyframes slide-animation {
  0% {
    transform: translateY(0);
  }
  99% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

.hidden {
  display: none;
}


/* Portfolio */

#portfolio {
  position: relative;
  background-color: white;
  color: black;
  width: 100%;
  height: 100%;
}


/* Header */

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: black;
  color: white;
  padding: 20px;
  font-size: 1.25rem;
  height: auto;
}

header p {
  margin-top: 0;
}

header ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

header ul li {
  margin: 0 10px;
}

.underline {
  position: relative;
}

.underline::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: rgb(255, 98, 0);
  border-radius: 6px;
}


/* Page Hero */

.page-hero {
  background-color: black;
  height: 825px;
  color: white;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  flex-wrap: wrap;
}

#writing-container {
  margin-left: 200px;
  margin-bottom: 175px;
}

#ph-p-container {
  width: 40%;
}

#ph-h1-container {
  width: 50%;
  position: relative;
  overflow: visible;
}

#ph-h1-container h1 {
  font-size: 70px;
  margin-bottom: 33px;
  position: relative;
  z-index: 1;
  display: inline-block;
}

#ph-h1-container h1 .highlight {
  background-color: rgb(255, 98, 0);
}

#page-hero-svgs {
  height: 50px;
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-bottom: 33px;
}

.svg-icon {
  width: 50px;
  height: 50px;
  margin-right: 20px;
  filter: invert(1) grayscale(100%);
}

<link rel="preconnect"  preload>
<link rel="preconnect"  crossorigin preload>
<link rel='preload'  as='style'>
<!-- Welcome Screen -->

<div id="welcome-screen">
  <div class="welcome-container">
    <h1 id="welcome-text">Welcome</h1>
  </div>
</div>

<!-- Portfolio -->

<div id="portfolio">

  <!-- Header -->

  <div class="header">
    <header>
      <p>Jake Matthews</p>
      <ul>
        <li class="underline">About</li>
        <li class="underline">Projects</li>
        <li class="underline">Future Plans</li>
        <li class="underline">Contact</li>
      </ul>
    </header>
  </div>

  <!-- Page Hero -->

  <div class="page-hero">
    <div id="writing-container">
      <div id="ph-h1-container">
        <h1>Hi, I'm Jake | <span class="highlight">Software Engineer</span></h1>
      </div>
      <div id="page-hero-svgs">
        <img src="./images/github-svg.svg" alt="" id="github" class="svg-icon">
        <img src="./images/linkedin-svg.svg" alt="" id="linkedin" class="svg-icon">
        <img src="./images/email-svg.svg" alt="" id="email" class="svg-icon">
      </div>
      <div id="ph-p-container">
        <p>I am passionate about creating beautiful, immersive & interactive websites – whilst implementing the latest, most powerful/ capable libraries and frameworks. I have a thirst for pushing my capability ceiling. I am also passionate about forex trading
          – I have had live funded accounts provided by proprietary trading companies after passing evaluation tests.
        </p>
      </div>
    </div>
  </div>

  <!-- Rest of Site -->

  <div id="rest-of-site">
    <h1>Test</h1>
  </div>

</div>