Simo/src/components/aboutme.astro

<script is:inline>
  function closeWindow() {
    document.getElementById("aboutme").style.display = "none";
  }

  function raiseUp() {
    let els = document.getElementsByClassName("window");

    let elArray = Array.from(els);

    // find the highest z-index
    let highestIndex = 0;

    for (let element in elArray) {
      let zindex = parseInt(elArray[element].style.zIndex);
      if (zindex > highestIndex) {
        highestIndex = zindex;
      }
    }

    // set the highest z-index plus one
    document.getElementById("aboutme").style.zIndex = (
      highestIndex + 1
    ).toString();
  }
</script>

<div
  id="aboutme"
  class="window"
  style="width: 70%; height: 45%; position: absolute; left: 15%; top: 22%; display: none;"
  onclick="raiseUp()"
>
  <div id="aboutmeheader" class="title-bar">
    <div class="title-bar-text">About Me</div>
    <div class="title-bar-controls">
      <button onclick="closeWindow()" aria-label="Minimize"></button>
      <button onclick="closeWindow()" aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body">
    <div class="field-row-stacked">
      <!-- prettier-ignore -->
      <textarea
        readonly
        id="text20"
        style="font-size: 25px; resize: none; padding: 10px; height: 37vh;"
        >I'm Simon, a self taught programmer 
        
My programming skills include proficiency in Javascript, Typescript, Html, Css My 

Web Framework knowlage includes Sveltekit, React, Astro 

Although not entirely proficient, I also write in Python and Golang from time to time
      </textarea>
    </div>
  </div>
</div>

<script is:inline>
  dragElement(document.getElementById("aboutme"));

  function dragElement(elmnt) {
    var pos1 = 0,
      pos2 = 0,
      pos3 = 0,
      pos4 = 0;

    if (document.getElementById(elmnt.id + "header")) {
      // If present, the header is where you move the DIV from:
      document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
      document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown;
    } else {
      // Otherwise, move the DIV from anywhere inside the DIV:
      elmnt.onmousedown = dragMouseDown;
      elmnt.ontouchstart = dragMouseDown;
    }

    function dragMouseDown(e) {
      // e.preventDefault();
      raiseUp();
      // Get the initial touch point for touch events
      if (e.type == "touchstart") {
        pos3 = e.touches[0].clientX;
        pos4 = e.touches[0].clientY;
      } else {
        pos3 = e.clientX;
        pos4 = e.clientY;
      }
      document.onmouseup = closeDragElement;
      document.ontouchend = closeDragElement;
      document.onmousemove = elementDrag;
      document.ontouchmove = elementDrag;
    }

    function elementDrag(e) {
      // e.preventDefault();
      if (e.type == "touchmove") {
        // Calculate the new cursor position for touch
        pos1 = pos3 - e.touches[0].clientX;
        pos2 = pos4 - e.touches[0].clientY;
        pos3 = e.touches[0].clientX;
        pos4 = e.touches[0].clientY;
      } else {
        // Calculate the new cursor position for mouse
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
      }
      // Set the element's new position
      elmnt.style.top = elmnt.offsetTop - pos2 + "px";
      elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
    }

    function closeDragElement() {
      // Stop moving when mouse button or touch is released
      document.onmouseup = null;
      document.ontouchend = null;
      document.onmousemove = null;
      document.ontouchmove = null;
    }
  }
</script>