arthurdanjou.fr/components/Home/about/about.scss

#about {
  background-color: #1c1c1c;
  height: 80vh;
  width: 100%;

  @media screen and (max-width: 700px) {
    height: 100vh;
  }

  .about-content {
    padding: 40px;
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-content: center;
    position: absolute;
    flex-direction: row-reverse;

    @media screen and (max-width: 700px) {
      flex-direction: column;
      height: 100vh;
    }

    .about-left {
      height: 100%;
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-self: center;

      @media screen and (max-width: 700px) {
        width: 100%;
      }

      .left-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;

        h1 {
          font-size: 3rem;
          color: white;
          margin-left: 30px;
          margin-bottom: 30px;

          @media screen and (max-width: 700px) {
            margin-bottom: 30px;
            margin-left: 0;
            text-align: center;
          }

        }
        p {
          text-align: justify;
          color: rgba(255, 255, 255, 0.3);
          font-size: 1.3rem;

          .color {
            color: #fa7878;
          }
        }
      }

      .page-button {
        margin-top: 40px;
        width: 50%;
        background-color: #4d4d4d;
        color: white;
        border-radius: 7px;
        padding: 20px 15px;
        transition: .3s;
        text-align: center;
        font-size: 1.2rem;
        display: flex;
        justify-content: center;
        align-self: center;

        @media screen and (max-width: 700px) {
          width: 60%;
        }

        &:hover {
          cursor: pointer;
          background-color: #313030;
        }
      }
    }

    .about-right {
      height: 100%;
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-self: center;

      img {
        margin: 0 auto;
        width: 50%;
        animation: infinite linear imgAnimation 10s;

        @media screen and (max-width: 700px) {
          width: 70%;
        }
      }
    }
  }
}

@keyframes imgAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}