From 26eb9b6352707d9b8e17b5e172c825cec903c098 Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sat, 6 Jun 2026 21:32:54 +0300
Subject: [PATCH 1/4] test portrait overflow

---
 frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
index 3a29014..3fd34ee 100644
--- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
+++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
@@ -42,6 +42,27 @@ 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,
+        )
+      },
+    )
+  })
 })
 
 describe('homepage discover path section', () => {

From 6b004c144af177af51e3aeea4e0ebaa00df31003 Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sat, 6 Jun 2026 21:35:37 +0300
Subject: [PATCH 2/4] fix portrait overflow

---
 frontend/rabbi_gerzi/src/views/HomePage.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue
index d202d11..3791459 100644
--- a/frontend/rabbi_gerzi/src/views/HomePage.vue
+++ b/frontend/rabbi_gerzi/src/views/HomePage.vue
@@ -468,11 +468,13 @@ 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);
   border-radius: 50%;
   background: var(--color-slate);
-  overflow: hidden;
+  overflow: visible;
   display: flex;
   align-items: flex-end;
   justify-content: center;

From 5e2d1a362b1ebc2a3821b1a1e237ae6211bc2278 Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sat, 6 Jun 2026 21:39:43 +0300
Subject: [PATCH 3/4] test portrait background

---
 frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 26 +++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
index 3fd34ee..2e9e197 100644
--- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
+++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
@@ -63,6 +63,32 @@ describe('homepage hero', () => {
       },
     )
   })
+
+  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', () => {

From 7ea37a94235953df3e87313b0e88eddb9d534af1 Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sat, 6 Jun 2026 21:40:59 +0300
Subject: [PATCH 4/4] extend portrait background

---
 frontend/rabbi_gerzi/src/views/HomePage.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue
index 3791459..9afeea6 100644
--- a/frontend/rabbi_gerzi/src/views/HomePage.vue
+++ b/frontend/rabbi_gerzi/src/views/HomePage.vue
@@ -472,15 +472,30 @@ const projects: Project[] = [
 
   width: var(--portrait-frame-size);
   height: var(--portrait-frame-size);
+  position: relative;
   border-radius: 50%;
-  background: var(--color-slate);
   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;