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.
Also, I faced box shadow bug when I placed clip path on overlay. It used to look like this.
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