site-footer

Summary

Compact sitemap footer split into a "Working globally" tag, a Sitemap column, a Socials column, then a giant agency-name image strip below. A dividing line separates the top row, and a "© DAVIES'S PERSONAL PORTFOLIO" / "BACK TO TOP" pair anchors the bottom.

HTML structure (minimal)

<footer class="tf-footer">
  <div class="container"><div class="br-line"></div></div>
  <div class="footer-inner">
    <div class="container"><div class="row">
      <div class="col-md-4">
        <p class="title text-has-dot text-caption fw-medium">
          <span class="br-dot"></span>
          WORKING GLOBALLY
        </p>
      </div>
      <div class="col-6 col-sm-2 col-md-1"><p class="footer-heading text-caption text-white-64">SITEMAP</p></div>
      <div class="col-6 col-sm-4 col-md-3">
        <ul class="footer-menu-list">
          <li><a href="#aboutScroll" class="link h5">About</a></li>
          <li><a href="#workScroll" class="link h5">Works</a></li>
          <li><a href="#serviceScroll" class="link h5">Services</a></li>
          <li><a href="#contactScroll" class="link h5">Contact</a></li>
        </ul>
      </div>
      <div class="col-6 col-sm-2 col-md-1"><p class="footer-heading text-caption text-white-64">SOCIALS</p></div>
      <div class="col-6 col-sm-4 col-md-3">
        <ul class="footer-menu-list">
          <li><a href="#" class="link h5">Twitter (X)</a></li>
          <li><a href="#" class="link h5">Dribbble</a></li>
          <li><a href="#" class="link h5">LinkedIn</a></li>
        </ul>
      </div>
    </div></div>
  </div>
  <div class="footer-bottom">
    <div class="container">
      <div class="img-agency">
        <img class="effectFade fadeZoom" src="assets/images/logo/agency.png" alt="">
      </div>
      <div class="bottom">
        <p class="text-nocopy text-caption">© DAVIES'S PERSONAL PORTFOLIO</p>
        <a href="#" class="action-go-top tf-link-icon link text-caption">BACK TO TOP <i class="icon icon-arrow-long-right"></i></a>
      </div>
    </div>
  </div>
</footer>

Key SCSS tokens

.tf-footer {
  padding-top: 40px;

  .br-line { height: 1px; background: var(--white-16); margin-bottom: 40px; }

  .text-has-dot .br-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--primary);
    margin-right: 8px;
    animation: pulse 1.5s ease-in-out infinite;
  }

  .footer-bottom {
    .img-agency img { width: 100%; height: auto; }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 0;
    }
  }
}

Animation logic

// .effectFade.fadeZoom on the agency wordmark image is handled by scrollEffectFade()
// which scales it from 0.7 to 1 once it crosses the viewport threshold.
// `.action-go-top` smooth-scrolls to top via gsap ScrollToPlugin in main.js.

Notable details

• Giant agency wordmark image sized at width:100% — fills full container width, telegraphs scale, fades up on scroll.
• Pulsing primary dot next to "WORKING GLOBALLY" mirrors the "AVAILABLE FOR WORK" dot in the hero — same .br-dot element.
• "BACK TO TOP" is a sibling action separate from the floating #goTop button; both use ScrollToPlugin behind the scenes.

Use when

• Personal-brand footers where a giant signature wordmark is more on-brand than a logo grid.
• Pages that want to mirror status indicators (dot + caption) between header and footer.

Caveats

• The agency wordmark image is a 1293×269 PNG — at full container width it will appear pixelated on >1920 displays. Replace with SVG for crisp scaling.
• BACK TO TOP href is # — relies on the action-go-top JS handler.