How to stop Image from overlapping text when the screen shrinks CSS/JSX?

Question

I've been building my portfolio site and I'm now at the stage of making it more responsive. I built the site while using my monitors, but when the screen shrinks down to a standard laptop (i.e Macbook Pro), the div with my image overlaps with my "text-zone" div/class which contains the headings and information etc. Moving the image div outside of the container with the use of a fragment does not help either so I'm a bit stuck. My intended vision/goal is to have the image next to the text at all times but if the screen gets to small, it will shift under or over the text.

Here is the JSX:

const Home = () => {
   return (
       <div className="container home-page">
           <div className = "text-zone">
               <h1>My Name</h1>
               <h2>Intern at xxx  | Greater xxx Area</h2>
               <Link to = "/about" className="flat-button">Learn More</Link>
           </div>
           <div class = "profile-img">
             <img src = {Headshot} alt = "Headshot"/>
           </div>
       </div>
   ) 
}

Here is the SCSS

.home-page {
  .text-zone {
    position: absolute;
    left: 30%;
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
    max-height: 90%;
  }

    h1 {
        color: white;
        font-size: 80px;
        margin: 0;
        font-family: 'Roboto Mono';
        font-weight: 400;
        animation: fadeIn 1s 1.7s backwards;
    }

    .profile-img {
      position: absolute;
      top: 30%;
      right: 20%;
      z-index: -1;
      box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);


      &:hover {
          outline:2px solid darkgoldenrod;
          outline-offset: 2rem;
          transition: all .2s;
          border-radius: 2px;
          object-fit: cover;
      }
     
    }
}

h2 {
  font-family: 'Roboto Mono';
  color: #8d8d8d;
  animation: fadeIn 1s 1.8s backwards ;
}

.flat-button {
  background-color: white;
  color: black;
  font-size: 1.6rem;
  border-radius: 6rem;
  text-decoration: none;
  padding: 1.5rem 4rem;
  display: inline-block;
  margin-top: 10px;
  animation: fadeIn 1s 1.8s backwards;
  letter-spacing: 2px;
  
  &:hover {
    background-color: #8d8d8d;
    outline:2px solid darkgoldenrod;
    color: white;
  }
}

Answer 1

In my opinion, if you try it using flexbox (disply: flex), (instead of position: absolute) like following method in SCSS, you can make it sooner and easier:

.home-page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  .text-zone {
    text-align: center;
    @media (min-width: 768px) {
      width: 40%;
      text-align: left;
    }
    max-height: 90%;
    padding: 0 16px;
  }
    h1 {
        color: white;
        font-size: 80px;
        margin: 0;
        font-family: 'Roboto Mono';
        font-weight: 400;
        animation: fadeIn 1s 1.7s backwards;
    }

    .profile-img {
      margin-top: 140px;
      padding: 0 16px;
      z-index: -1;
      box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);
      @media (min-width: 1200px) {
        margin-right: -180px;
      }


      &:hover {
          outline:2px solid darkgoldenrod;
          outline-offset: 2rem;
          transition: all .2s;
          border-radius: 2px;
          object-fit: cover;
      }

    }
}

h2 {
  font-family: 'Roboto Mono';
  color: #8d8d8d;
  animation: fadeIn 1s 1.8s backwards ;
}

.flat-button {
  background-color: white;
  color: black;
  font-size: 1.6rem;
  border-radius: 6rem;
  text-decoration: none;
  padding: 1.5rem 4rem;
  display: inline-block;
  margin-top: 10px;
  animation: fadeIn 1s 1.8s backwards;
  letter-spacing: 2px;

  &:hover {
    background-color: #8d8d8d;
    outline:2px solid darkgoldenrod;
    color: white;
  }
}