generate a responsive hero section with splitted img and about me

.hero {
      display: flex;
      align-content: center;
      justify-content: center;
    }
    .hero img {
      width: 400px;
    }
    .hero p {
      width: 400px;
    }
    .hero img, .hero p {
      margin: 0 auto;
    }
    .hero img {
      border-radius: 100%;
    }