openvibers/afresume Commits

fix: portrait glow clipping, nav scroll transparency, better hero sizing

OP OpenVibers committed 21 May 2026 · 6b2bb50ff7 · 2 files, +36 −12

Hero:
- Remove overflow:hidden from .hero__right — was clipping portrait glow
- Portrait glow: inset:-22%, blur:32px, stronger accent for visible effect
- Portrait size: min(400px, 44vw) on desktop for better presence
- Portrait floats above text (order:-1) on mobile, size min(220px, 55vw)
- Hero padding responsive: clamp(80px,12vh,120px) top/clamp(20px,4vh,60px) bottom

Nav:
- Transparent by default (no bg, no border, no blur)
- .nav--scrolled adds frosted glass (blur 14px + 78% bg + border) on scroll >40px
- Transition: smooth 0.35s ease on background/border
- JS: checks for .hero on page — non-hero pages start scrolled state immediately
- Mobile drawer gets its own solid bg so menu stays legible over hero

Changes

ddiff --git a/src/components/Hero.astro b/src/components/Hero.astro
iindex 170b9bd..888a23e 100644
---- a/src/components/Hero.astro
++++ b/src/components/Hero.astro
@@@ -68,7 +68,7 @@
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
--    padding: 100px 0 40px;
++    padding: clamp(80px, 12vh, 120px) 0 clamp(20px, 4vh, 60px);
      overflow: hidden;
      isolation: isolate;
    }
@@@ -98,16 +98,19 @@
      align-items: center;
      min-height: 70svh;
    }
--  /* min-width:0 prevents grid cells from overflowing their track */
--  .hero__left, .hero__right { min-width: 0; overflow: hidden; }
++  /* min-width:0 prevents grid cells overflowing their track.
++     overflow:hidden ONLY on left — right needs visible overflow so portrait glow shows */
++  .hero__left { min-width: 0; overflow: hidden; }
++  .hero__right { display: grid; place-items: center; min-width: 0; }
    @media (max-width: 880px) {
      .hero__grid {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-bottom: 32px;
      }
++    .hero__right { order: -1; }
      .hero__portrait-frame { animation: none; }
--    .hero__portrait { width: min(260px, 65vw); }
++    .hero__portrait { width: min(220px, 55vw); margin-bottom: 8px; }
    }
  
    .hero__title {
@@@ -141,17 +144,18 @@
    .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 1.5rem 0; }
    .hero__chips { display: flex; gap: 8px; flex-wrap: wrap; }
  
--  .hero__right { display: grid; place-items: center; }
++  .hero__right { display: grid; place-items: center; min-width: 0; }
    .hero__portrait {
      position: relative;
--    width: min(360px, 80vw);
++    width: min(400px, 44vw);
      aspect-ratio: 5 / 6;
    }
    .hero__portrait-glow {
--    position: absolute; inset: -10%;
--    background: radial-gradient(closest-side, rgba(76,201,176,.35), transparent 70%);
--    filter: blur(20px);
++    position: absolute; inset: -22%;
++    background: radial-gradient(closest-side, rgba(76,201,176,.42), transparent 70%);
++    filter: blur(32px);
      animation: breathe 8s ease-in-out infinite;
++    pointer-events: none;
    }
    .hero__portrait-frame {
      position: relative;
ddiff --git a/src/components/Nav.astro b/src/components/Nav.astro
iindex a41b9a3..a527d2d 100644
---- a/src/components/Nav.astro
++++ b/src/components/Nav.astro
@@@ -50,9 +50,17 @@ const links = [
  <style>
    .nav {
      position: sticky; top: 0; z-index: 50;
--    backdrop-filter: blur(12px);
--    -webkit-backdrop-filter: blur(12px);
--    background: color-mix(in oklab, var(--bg) 70%, transparent);
++    background: transparent;
++    border-bottom: 1px solid transparent;
++    backdrop-filter: none;
++    -webkit-backdrop-filter: none;
++    transition: background .35s ease, border-color .35s ease;
++    will-change: background;
++  }
++  .nav--scrolled {
++    backdrop-filter: blur(14px);
++    -webkit-backdrop-filter: blur(14px);
++    background: color-mix(in oklab, var(--bg) 78%, transparent);
      border-bottom: 1px solid var(--border);
    }
    .nav__row {
@@@ -128,6 +136,9 @@ const links = [
      max-height: 0;
      transition: max-height 0.3s var(--ease);
      border-top: 1px solid transparent;
++    background: color-mix(in oklab, var(--bg) 94%, transparent);
++    backdrop-filter: blur(16px);
++    -webkit-backdrop-filter: blur(16px);
    }
    .nav__drawer.is-open {
      max-height: 360px;
@@@ -182,4 +193,13 @@ const links = [
        drawer.setAttribute('aria-hidden', 'true');
      });
    });
++
++  // Scroll-linked transparent → frosted glass
++  const navEl = document.querySelector('.nav') as HTMLElement | null;
++  const updateNav = () => {
++    const hero = document.querySelector('.hero');
++    navEl?.classList.toggle('nav--scrolled', window.scrollY > 40 || !hero);
++  };
++  window.addEventListener('scroll', updateNav, { passive: true });
++  updateNav();
  </script>