0

I am making my personal portfolio and faced big issue. As you can on the picture black overlay have to "catch up" picture, to be precise, it has to be same height. If I increase only height of black overlay, It won't be responsive. Any suggestion what should I do here. enter image description here

Also, I faced box shadow bug when I placed clip path on overlay. It used to look like this.

enter image description here

I hope you can see clear difference in overlay corners. I will leave you code here and also I will leve github repository if anyone willing to help.

This is HTML (Next/React component to be precise)

const MainPage = () => {
  return (
    <main className={classes["main-page"]}>
      <img src={background.src} />
      <div className={classes["main-page__blur"]}></div>
      <div className={classes["main-page__label"]}>
        <h1>NIJAZ</h1>
        <h2>ANDELIĆ</h2>
        <h3>
          <Typical
            loop={Infinity}
            steps={[
              "JUNIOR FRONTEND DEVELOPER",
              1500,
              "REACT DEVELOPER",
              1500,
              "COMPUTER SCIENCE STUDENT",
              1500,
              "DISCIPLINED, CHARISMATIC, CREATIVE",
              1500,
              "...",
            ]}
          />
        </h3>
      </div>
    </main>
  );
};

This is css module

.main-page {
  height: 100vh;
  width: 100vw;
  /* background-size: 100vw 100vh; */
  /* background-repeat: no-repeat; */
  /* background-image: url("../../assets/main-background.svg"); */
  /* overflow: hidden; */
  position: relative;
}

.main-page > img {
  top: 0px;
  left: 0px;
  position: absolute;
  min-width: 100%;
  /* max-height: auto; */
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 87%);
}

.main-page__blur {
  width: 48%;
  height: 100%;
  /* height: auto; */
  z-index: 1;
  background-color: #111111dd;
  backdrop-filter: blur(3px);
  /* box-shadow: 0 0 5px 10px #1d1d1daa; */
  box-shadow: 0 0 10px 20px #111111dd;
  clip-path: polygon(0 0, 100% 0, 100% 93.5%, 0 87%);
}

Github link: https://github.com/AndNijaz/nijaz-portfolio

2
  • 1
    Since this boils down to a CSS issue, it would be worth creating a minimal reproducing example with just the output HTML/CSS in a snippet. People are much more likely to help if they don't have to set up a React environment just to see the problem.
    – DBS
    Commented Jul 22, 2022 at 10:17
  • Thank you for advice. I will do it asap when I got home.
    – Nijaz
    Commented Jul 22, 2022 at 10:21

0

Browse other questions tagged or ask your own question.