Merge branch 'fix/portrait-overflow'

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

@@ -42,6 +42,53 @@ 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,17 +468,34 @@ const projects: Project[] = [
 }
 
 .hero__portrait-frame {
-  width: clamp(180px, 22vw, 320px);
-  aspect-ratio: 1;
+  --portrait-frame-size: clamp(180px, 22vw, 320px);
+
+  width: var(--portrait-frame-size);
+  height: var(--portrait-frame-size);
+  position: relative;
   border-radius: 50%;
-  background: var(--color-slate);
-  overflow: hidden;
+  overflow: visible;
   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;