about-photo-quote

Summary

Two-column About block: left holds heading, two body paragraphs and a founder quote with circular avatar (with a decorative quote-mark badge in the accent color); right column hosts a tall portrait inside a 160% padding-bottom frame that scroll-zooms from 1.0 to 1.2.

HTML structure (minimal)

<section id="about">
  <div class="container mil-p-120-30">
    <div class="row justify-content-between align-items-center">
      <div class="col-lg-6 col-xl-5">
        <h2 class="mil-up mil-mb-60">Discover <br>Our <span class="mil-thin">Studio</span></h2>
        <p class="mil-up mil-mb-30">At our design studio, we are a collective of talented individuals…</p>
        <p class="mil-up mil-mb-60">Collaboration is at the heart of what we do…</p>
        <div class="mil-about-quote">
          <div class="mil-avatar mil-up"><img src="img/faces/customers/2.jpg" alt="Founder"></div>
          <h6 class="mil-quote mil-up">Passionately Creating <span class="mil-thin">Design Wonders</span></h6>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="mil-about-photo">
          <div class="mil-lines-place"></div>
          <div class="mil-up mil-img-frame" style="padding-bottom: 160%;">
            <img src="img/photo/1.jpg" alt="img" class="mil-scale" data-value-1="1" data-value-2="1.2">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.mil-about-quote {
  display: flex; align-items: center;
  & .mil-avatar {
    width: 90px; height: 90px; border-radius: 50%; position: relative;
    &:after {
      content: ' " '; color: $dark;
      width: 30px; height: 30px; border-radius: 50%;
      background-color: $accent;
      position: absolute; bottom: 0; right: 0;
      display: flex; padding-top: 12px; justify-content: center;
      font-size: 36px;
    }
    & img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
  }
  & .mil-quote { padding-left: 30px; width: calc(100% - 90px); }
}
.mil-about-photo {
  position: relative;
  & .mil-lines-place { position: absolute; top: -120px; left: -27%; }
}

Animation logic

// the portrait participates in the global scale-on-scroll primitive
// data-value-1="1" data-value-2="1.2" — slow zoom while the section passes the viewport
gsap.fromTo(img, { scale: 1 }, { scale: 1.2,
  scrollTrigger: { trigger: img, scrub: true } });

Notable details

• The quote badge is generated entirely with a CSS ::after pseudo-element holding a literal " character — no extra markup needed for the visual flourish.
• The portrait frame uses padding-bottom: 160% for a stable aspect ratio, so the image scales fluidly without layout shift.
• Decorative line SVG is placed as a sibling absolute element offset 27% off-screen left — adds editorial structure to the column without competing with text.

Use when

• Studio/agency about sections that combine narrative copy with a single owner-quote.
• Brand pages where you want a portrait to feel like a magazine plate rather than a stock headshot.
• Layouts that need the founder presence to read as authoritative without a grid of team members.

Caveats

• Portrait crop relies on object-position: top indirectly via mil-img-frame global; verify on photos where the subject's head sits low.
• Lines decoration is cloned from .mil-hidden-elements on document ready — server-rendered first paint won't include it.