top-round projects with clip-path

Author: vaaski

components/app/hero.vue

@@ -18,8 +18,6 @@ const { width, height } = useElementSize(hero)
 		</div>
 		<div class="backdrop" />
 		<StarryBackdrop class="starry-backdrop" :width="width" :height="height" />
-
-		<div class="bottom-rounder" />
 	</div>
 </template>
 
@@ -175,30 +173,6 @@ const { width, height } = useElementSize(hero)
 	animation-delay: var(--tagline-animation-delay);
 }
 
-.bottom-rounder {
-	--curve-height: 20px;
-	--extra-height: 10px;
-	--curve-color: hsla(0, 0%, 0.25%, 1);
-
-	z-index: 3;
-	position: absolute;
-	bottom: var(--extra-height);
-	width: 100%;
-	height: var(--curve-height);
-	background: var(--curve-color);
-	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
-	box-shadow: 0 0 75px hsla(0, 0%, 100%, 0.25);
-
-	&::after {
-		position: absolute;
-		content: "";
-		top: var(--curve-height);
-		height: var(--extra-height);
-		width: 100%;
-		background: var(--curve-color);
-	}
-}
-
 @media (max-width: 900px) {
 	.content {
 		margin-top: 4rem;

components/app/projects.vue

@@ -98,7 +98,7 @@ const projects: Project[] = [
 			</li>
 		</ul>
 
-		<div class="backdrop" />
+		<div class="backdrop"></div>
 	</div>
 </template>
 
@@ -110,6 +110,9 @@ const projects: Project[] = [
 	background: black;
 	z-index: 3;
 	position: relative;
+	margin-top: -30px;
+
+	clip-path: ellipse(3000px 50% at 50% 50%);
 }
 
 h1 {
@@ -196,7 +199,7 @@ li.project-item a {
 
 	background: radial-gradient(
 		357.3% 137.24% at 50% 100%,
-		rgba(255, 255, 255, 0.1) 0%,
+		rgba(200, 0, 50, 0.1) 0%,
 		rgba(0, 0, 0, 0) 100%
 	);
 	opacity: 0.6;