frontend/rabbi_gerzi/cypress/e2e/home.cy.ts

@@ -42,53 +42,6 @@ describe('homepage hero', () => {
       .and('have.attr', 'alt')
       .and('match', /Rabbi Yehoshua Gerzi/i)
   })
-
-  it('lets the rabbi portrait rise above the circular frame', () => {
-    cy.get<HTMLImageElement>('[data-cy="hero-portrait"]').then(
-      (portraitElements) => {
-        const portraitImage = portraitElements[0]
-        const frameElement = portraitImage.parentElement
-
-        if (frameElement === null) {
-          throw new Error('Portrait frame is missing')
-        }
-
-        const frameStyle = getComputedStyle(frameElement)
-
-        expect(frameStyle.overflowX).to.equal('visible')
-        expect(frameStyle.overflowY).to.equal('visible')
-        expect(portraitImage.getBoundingClientRect().top).to.be.lessThan(
-          frameElement.getBoundingClientRect().top,
-        )
-      },
-    )
-  })
-
-  it('extends the circular background to the portrait base edges', () => {
-    cy.get<HTMLImageElement>('[data-cy="hero-portrait"]').then(
-      (portraitElements) => {
-        const portraitImage = portraitElements[0]
-        const frameElement = portraitImage.parentElement
-
-        if (frameElement === null) {
-          throw new Error('Portrait frame is missing')
-        }
-
-        const portraitBounds = portraitImage.getBoundingClientRect()
-        const frameBounds = frameElement.getBoundingClientRect()
-        const backgroundStyle = getComputedStyle(frameElement, '::before')
-        const backgroundWidth = Number.parseFloat(backgroundStyle.width)
-        const backgroundLeft =
-          frameBounds.left + (frameBounds.width - backgroundWidth) / 2
-        const backgroundRight = backgroundLeft + backgroundWidth
-
-        expect(backgroundStyle.content).to.not.equal('none')
-        expect(backgroundWidth).to.be.closeTo(portraitBounds.width, 1)
-        expect(backgroundLeft).to.be.closeTo(portraitBounds.left, 1)
-        expect(backgroundRight).to.be.closeTo(portraitBounds.right, 1)
-      },
-    )
-  })
 })
 
 describe('homepage discover path section', () => {

frontend/rabbi_gerzi/src/views/HomePage.vue

@@ -468,34 +468,17 @@ const projects: Project[] = [
 }
 
 .hero__portrait-frame {
-  --portrait-frame-size: clamp(180px, 22vw, 320px);
+  width: clamp(180px, 22vw, 320px);
-
+  aspect-ratio: 1;
-  width: var(--portrait-frame-size);
-  height: var(--portrait-frame-size);
-  position: relative;
   border-radius: 50%;
-  overflow: visible;
+  background: var(--color-slate);
+  overflow: hidden;
   display: flex;
   align-items: flex-end;
   justify-content: center;
 }
 
-.hero__portrait-frame::before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  z-index: 0;
-  width: 110%;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  background: var(--color-slate);
-  transform: translateX(-50%);
-}
-
 .hero__portrait {
-  position: relative;
-  z-index: 1;
   width: 110%;
   height: auto;
   display: block;