www/src/layouts/index.html

{{ define "main" }}

<!-- Hero Section -->

<style>

  .comment{
    background-color: #ff4100;
    border-radius: 5px;
  }

  .comment-success{
    background-color: #00ffd0;
    border-radius: 5px;
  }

  .comment-process{
    background-color: #ffff00;
    border-radius: 5px;
  }

  .comment-success code{
    color: #1a1a1a;
  }
  .hero{
    background-image: url("/Images/tea-hero-background.jpg") !important;
    background-attachment: scroll;
    background-position: left;
    background-repeat: repeat-y;
    background-size: cover !important;
  }
  @media only screen and (max-width: 992px) {

    .hero{
      background-image: none !important;
    }

  }

  code{
    color:white;
    font-size: 14px;
  }

  .inner-glow{
    color: #1a1a1a;
    text-shadow: 0 0px 18px rgba(255, 255, 255, 0.5);
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .code-box{
    border: 1px solid #ff4100;
    position: relative;
    padding: 2px;
    border-radius: 2px;
    color: #ff4100;
  }

  #copy-button{
    height: 40px;
    width: 120px;
    font-family: "inter", sans-serif !important;
    text-transform: uppercase;
  }

  @media only screen and (max-width: 768px) {
    .mobile-ctas,
    .mobile-term-loc{
      visibility: visible;
    }
    .desktop-ctas,
    .boilerplate,
    .hero-description,
    .hero-lead,
    .desktop-term-loc,
    .too-much{
      display:none;
    }
    .hero-text,
    .mobile-lead{
      text-align:center;
    }
    .mbtn{
      height:50px;
    }
    .hero-col{
      padding-top: 16vw;
      padding-bottom: 16vw;
    }
    .email{
      height: 50px !important;
    }
    .install-label{
      text-align: center;
    }
  }

  @media only screen and (min-width: 768px) {
    .mobile-ctas,
    .mobile-lead,
    .mobile-term-loc,
    .mobile-disclaimer,
    .section-divider{
      display:none;
    }
    .desktop-ctas,
    .desktop-term-loc{
      visibility: visible;
    }
    .bottom-cta{
      display: block;
      width:50%;
      margin-left:auto;
      margin-right:auto;
    }
  }

</style>

<section class="hero one-box">
  <div class="container">
    <div class="row gx-5 mb-5">
      <div class="hero-col col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 my-auto">
        <h1 class="display-1 hero-text" style="z-index:3; position: relative;"><span class="inner-glow ">Invisible</span> yet <span class="callout white">powerful</span></h1>
          <p class="lead hero-lead">Introducing tea - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth. From the creator of Brew.</p>
          <p class="lead mobile-lead mb-5">tea... from the creator of <a href="https://brew.sh/" target="_blank">brew</a></p>
          <p class="mb-5 hero-description">With tea, simply type commands and it takes care of the rest. Get the latest versions of open source tools and support specific tool versions for different projects. Experience better package management with tea.</p>

          <div class="mobile-ctas">
            {{- partial "mobile-ctas.html" -}}
          </div>

          {{- partial "desktop-ctas.html" -}}

      </div>
      <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="terminal-animation mb-3">
          {{- partial "hero-terminal-animation.html" -}}
        </div>
      </div>
    </div>
    <hr class="mb-3">
    <div class="row">
      <div class="col">
        {{- partial "click-to-copy.html" . -}}
      </div>
    </div>
  </div>
</section>

<style>

    .term-icon{
      position: relative;
      top: 3px;
    }

    .term-btn{
      text-transform: uppercase;
    }

    .traffic-light{
      height: 16px;
      width: 16px;
      border: 1px solid gray;
      border-radius: 100px;
      display: inline-block;
      margin-right: 5px;
    }

    .terminal{
      height: auto;
      min-height: 40%;
      width: 100%;
      display: block;
      border-radius: 10px;
      background-color: #1a1a1a;
      border: 1px solid gray;
      box-shadow: 0px 10px 18px rgba(10, 05, 05, .5);
      animation: float 3s ease-in-out infinite;
    }

    .terminal-bar{
      height: 30px;
      border-radius: 8px 8px 0px 0px;
      border-bottom: 1px solid gray;
    }

    #terminal-input:after {
      content: "|";
      color: green;
      position: absolute;
      left: 0;
      animation: blink 1s linear infinite;
    }

    @keyframes blink {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    #terminal-output {
      white-space: pre;
      display: inline-block;
      width: 100%;
    }
    #terminal-input {
      position: relative;
      display: inline-block;
      witdth: 100%;
    }
    .terminal-content{
      overflow: hidden;
      width: 100%;
    }

</style>

<section>
  <div class="container">
    <div class="row one-box">
      <div class="col">
        <p class="text-uppercase text-center small mb-5 grid-gray">As featured on</p>
        <div class="row logos" style="width:60%;margin-left:auto;margin-right:auto;">
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 p-3 text-center">
            <a href="https://www.binance.com/en/blog/ecosystem/binance-labs-leads-$8-million-seed-funding-round-for-tea-421499824684903608" target="_blank">
              <img src="/Images/binance.svg" alt="Binance Labs" style="width:140px;">
            </a>
          </div>
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 p-3 text-center">
            <a href="https://techcrunch.com/2022/03/23/open-source-project-tea-is-brew2-for-web3/" target="_blank">
              <img src="/Images/tech-crunch-tea-xyz.svg" alt="Binance Labs" style="width:140px;">
            </a>
          </div>
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 p-3 text-center">
            <a href="https://stackoverflow.blog/2022/11/18/the-creator-of-homebrew-has-a-plan-to-get-open-source-contributors-paid-ep-506/" target="_blank">
              <img src="/Images/stackoverflow-logo.svg" alt="Binance Labs" style="width:140px;">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Teal Impact Section -->
<div class="section-divider teal-bg">
  <img src="/Images/pixel-section-divider.svg" style="pointer-events:none;" alt="">
</div>
<section class="teal-bg impact-section two-boxes">
  <div class="container">
    <div class="row">
      <div class="col">
          <div>
            <h2 class="black display-5 text-xl-center text-lg-center text-md-left text-sm-left text-left" style="z-index:2;">THIS ISN’T A PACKAGE MANAGER. TEA IS UNIFIED PACKAGING INFRASTRUCTURE.</h2>
            <p class="lead black text-left">And through that packaging infrastructure, we have plans of leveraging blockchain to help remunerate devs for their contributions to OSS. You can learn more about our grand ambitions for web3 by checking out our white paper <a href="/white-paper/">here</a>.</p>
          </div>
      </div>
    </div>
    <div class="row one-box-up">
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="too-much">NO. OF </span>REPOS</p>
        <h1 class="display-2 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span id="stat-one">56,987</span></h1>
      </div>
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="too-much">NO. OF </span>MAINTAINERS</p>
        <h1 class="display-2 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span id="stat-two">56,987</span></h1>
      </div>
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black">STAR COUNT</p>
        <a href="https://github.com/teaxyz/cli/stargazers" target="_blank"><h1 class="display-2 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="stargazers">56,987</span></h1></a>
      </div>
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black">CURRENT RELEASE</p>
        <a href="https://github.com/teaxyz/cli/releases" target="_blank"><h1 class="display-2 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="release" style="text-transform:lowercase;">56,987</span></h1></a>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="section-divider">
    <img src="/Images/pixel-section-divider-teal.svg" style="pointer-events:none;" alt="">
  </div>
  <div class="container two-boxes">
    <div class="row one-box-down">
      <div class="col">
        <h2 class="display-5 text-center">features</h2>
        <p class="text-center">We're currently on tea <span class="release"></span> and our tea'm and community are working hard to make tea the most powerful package manager that the world has ever seen. From our revolutionary `magic` to powerful scripts that draw upon the entire open-source ecosystem, we’re fundamentally reimagining what a package manager can be.  If you have suggestions or thoughts on how tea could be improved even further, we'd love for you to join the discussion!</p>
      </div>
    </div>
    <hr>
    <div class="row one-box-up">
      <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 flex order-2">
          <div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
            <h2 class="display-5">tea magic</h2>
            <p>Easily access the entire open source ecosystem with tea. Simply prefix your commands with "tea" and if the tool isn't installed, tea will install it for you. Add magic to your shell scripts and use developer environments to enhance your workflow. magic is optional; if you don’t enable it, then just prefix your commands with `tea`.</p>
          </div>
        </div>
      <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3">
        <div class="feature-terminal" id="start-btn" style="cursor:pointer;">
          <div class="terminal-bar feature-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
          <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
            <code id="terminal-output-2">
              <div style="margin-top: 15%;">
                {{- partial "play-btn.html" -}}
              </div>
            </code>
          </div>
        </div>
      </div>
    </div>

    {{- partial "animation-1.html" . -}}

    <section>
      <div class="container">
        <div class="row">
          <div class="col">
            <img src="/Images/lg-screen-grid.svg" alt="grid-element">
          </div>
        </div>
      </div>
    </section>

    <!-- Second -->

    <div class="row">
      <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 order-xl-1 order-lg-1 order-md-2 order-sm-2 order-2 flex">
          <div class="feature-content pe-xl-5 pe-lg-3 pe-md-0 pe-sm-0 pe-0">
            <h2 class="display-5">Developer Environments</h2>
            <p>Simplify your development environment setup with tea by automatically fetching the specific versions of tools your project needs. With a range of specifications, tea provides a seamless solution to manage project dependencies. Debug changes, supplement your environment, and see the full environment with ease.</p>
          </div>
        </div>
      <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3 order-xl-2 order-lg-2 order-md-1 order-sm-1 order-1">
        <div class="feature-terminal" id="start-button" style="cursor:pointer;">
          <div class="terminal-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
          <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
            <code id="terminal-output-3">
              <div style="margin-top: 15%;">
                {{- partial "play-btn.html" -}}
              </div>
            </code>
          </div>
        </div>
      </div>
    </div>

    {{- partial "animation-2.html" . -}}

    <section>
      <div class="container">
        <div class="row">
          <div class="col">
            <img src="/Images/lg-screen-grid.svg" alt="grid-element">
          </div>
        </div>
      </div>
    </section>

    <!-- Third -->

    <div class="row one-box-down">
      <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 flex order-2">
          <div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
            <h2 class="display-5">tea scripts</h2>
            <p>Scripting is so powerful, but has been left in the dark ages because there’s no easy way to install the packages you need. tea can transform your scripts by leveraging the entire open source ecosystem.</p>
          </div>
        </div>
      <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3">
        <div class="feature-terminal" id="start-animation-4" style="cursor:pointer;">
          <div class="terminal-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
          <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
            <code id="terminal-output-4">
              <div style="margin-top: 15%;">
                {{- partial "play-btn.html" -}}
              </div>
            </code>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    {{- partial "animation-3.html" . -}}

<!--
<hr>
-->

<style>

  .btn-icon{
    position: relative;
    top:2px;
  }
  .feature-row{
    border: 2px solid gray;
    position: fixed;
    width: 100%;
  }
  @media only screen and (max-width: 768px) {
    .feature-terminal{
      width: 100%;
      min-height: 250px;
      border: 2px solid gray;
      background-color: #1a1a1a;
      border-radius: 10px;
      box-shadow: 0px 10px 18px #121212;
      animation: float 3s ease-in-out infinite;
    }
    .terminal-content{
      height: 250px;
      overflow-y: auto;
    }
    .horizon-img{
      height: 200px;
    }
  }
  @media only screen and (min-width: 768px) {
    .terminal-content{
      overflow-y: auto;
      min-height:400px;
      max-height: 400px;
    }
    .feature-terminal{
      width: 100%;
      min-height: 400px;
      border: 2px solid gray;
      background-color: #1a1a1a;
      border-radius: 10px;
      box-shadow: 0px 10px 18px #121212;
      animation: float 3s ease-in-out infinite;
    }
  }
  .speed-terminal{
    width: 100%;
    height: auto;
    min-height: 50%;
    border: 2px solid gray;
    background-color: #1a1a1a;
    border-radius: 10px;
    animation: float 3s ease-in-out infinite;
  }
  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
    100% {
      transform: translateY(0);
    }
  }
</style>

<section class="two-boxes-down">
  <div class="container">
    <div class="row">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <h2 class="display-5">Getting started with tea!</h2>
        <p class="mb-5">tea is a standalone binary for all platforms. You can curl it by itself or, if you want magic, use our installer. We provide a docker image and GitHub action for easier CI/CD.</p>
      </div>
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-3">
        <div class="terminal flex term-getting-started term-lead">
          <div class="terminal-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
            <div class="p-5">
              <div class="terminal-content-gs">
                <code>sh <(curl https://tea.xyz)</code>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-3 ">
        <p class="mb-4 light-gray">This will confirm before setting up ~/.tea and adding to your ~/.shellrc. Our one-liner even abstracts installing tea itself:</p>

        <div class="terminal flex term-getting-started">
          <div class="terminal-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
            <div class="p-5">
              <div class="terminal-content-gs">
                <code>sh <(curl tea.xyz) bun run start</code>
              </div>
          </div>
        </div>
      </div>
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <p class="mb-4 light-gray">This will confirm before setting up ~/.tea and adding to your ~/.shellrc. Our one-liner even abstracts installing tea itself:</p>

        <div class="terminal flex term-getting-started">
          <div class="terminal-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
            <div class="p-5">
              <div class="terminal-content-gs">
                <code>sh <(curl tea.xyz) bun run start</code>
              </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>


<style>

  .top-bar{
    border-bottom: 2px solid #1a1a1a;
  }

</style>


<section class="teal-bg">
  <div class="container one-box-up two-boxes two-boxes-down">
    <div class="row one-box-down">
      <div class="col">
        <h2 class="display-5 black text-center">Don't just take our word for it; everybody's liking the new brew</h2>
      </div>
    </div>
    <div class="row twitter-desktop">
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        <div class="twitter-card mb-4">
          <div class="top-bar flex p-1 ps-3">
            <i class="icon-github black lead"></i>
          </div>
          <div class="twitter-content p-xl-5 p-lg-5 p-md-3 p-sm-4 p-4">
            <div class="">

            </div>
            <p class="black">when i did ran <code class="orange">./pantry.core/scripts/<br>build.ts yarnpkg.com</code>, it was the amazing moment, i realized I have not setup deno yet but tea does it for me.
            I know we have this feature but when I unintentionally experienced it. its just wow. just wow</p>
            <hr class="mb-3" style="border-bottom: 1px solid black !important;">
            <div class="flex-start">
              <img class="avatar" src="/Images/neil-m.png" alt="">
              <p class="small test-name black">Neil M</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        <div class="twitter-card mb-4">
          <div class="top-bar flex p-1 ps-3">
            <i class="icon-twitter black lead"></i>
          </div>
          <div class="twitter-content p-xl-5 p-lg-5 p-md-3 p-sm-4 p-4">
            <p class="black">It is hard to think of a more perfect use for blockchain technology than coordinating package releases for opensource software. What @teaxyz_ is embarking on will improve security, maintenance, and reliability, while providing much-needed incentive for independent developers. 🙌🏼</p>
            <hr class="mb-3" style="border-bottom: 1px solid black !important;">
            <div class="flex-start">
              <img class="avatar" src="/Images/jcinis-eth.jpeg" alt="">
              <p class="small test-name black">jcinis.eth</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        <div class="twitter-card mb-4">
          <div class="top-bar flex p-1 ps-3">
            <i class="icon-discord black lead"></i>
          </div>
          <div class="twitter-content p-xl-5 p-lg-5 p-md-3 p-sm-4 p-4">
            <p class="black">You guys are really onto something with <a href="https://github.com/teaxyz/cli#magic" style="color:#1a1a1a !important;">magics</a> – it's so awesome. I've been using it all day and I am hooked.</p>
            <hr class="mb-3" style="border-bottom: 1px solid black !important;">
            <div class="flex-start">
              <img class="avatar" src="/Images/dd.png" alt="">
              <p class="small test-name black">David D</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row two-boxes-down">
      <div class="col">
        <h2 class="display-5 text-center">Ready to start building?<br>All you need is tea.</h2>
        <p class="lead text-center mb-5">tea’s +pkg syntax embodies our core belief that good tools should just get out of the way so that you can keep making the internet a better place. Access your entire ecosystem with one command, compose and combine everything, and enjoy an all-around more delightful dev experience.</p>
        <div class="bottom-cta">{{- partial "desktop-ctas.html" -}}</div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <img src="/Images/lg-screen-grid.svg" alt="grid-element">
      </div>
    </div>
  </div>
</section>

<!--
<hr>
-->

<style>

  .twitter-card{
    border: 2px solid #1a1a1a;
    background-color: #33ffd9 !important;
  }
  .title-bar{
    height:30px;
  }
  .avatar{
    height: 24px;
    width: 24px;
    border-radius: 30px;
    background-color: gray;
    display: inline-block;
  }
  .test-name{
    display: inline-block;
    position: relative;
    margin-left: 5px;
  }
  .top-bar i{
    position: relative;
    top: 2px;
  }

</style>

<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<script>

  var mySwiper = new Swiper ('.swiper-container', {
  spaceBetween: 10,
  freeMode: true,
  direction: 'horizontal',
  loop: true,
  pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })

</script>

<section>
  <div class="container two-boxes-down">
    <div class="row">
      <div class="col">
        <h2 class="display-5">OSS wouldn't work without talented contributors like you.</h2>
        <p class="mb-5">We at tea would like to give a big shout out to all the open-source developers out there. Your contributions and dedication to making the world a better place through technology is truly admirable. Thanks to your hard work and generosity, projects like tea can continue to improve and evolve. If you are interested in joining our team of code crusaders, we welcome you with open arms. Head on over to the tea repository on Github and start contributing today! Let's continue to make a positive impact on the world of technology together.</p>

      </div>

    </div>
    <div class="row p-3" id="contributors-list">
      <div>

      </div>
    </div>
  </div>
</section>

<section>
  <div class="container two-boxes-down">
    <div class="row">
      <div class="col-xl-7 col-lg-7 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1 order-sm-2 order-2 my-auto">
        <h2 class="display-5">A mission to fix open-source development</h2>
        <p class="lead">tea is one of the first legitimate use cases for blockchain technology. Just as the US dollar was once backed by gold, we're building an economy that's backed <em>by code</em>.</p>
        <p>We want to fix one of tech’s biggest problems: hardworking developers <i>not</i> getting compensated for their contributions to the building blocks of the internet. By leveraging blockchain technology we can keep track of who creates & maintains what, remunerate them for their efforts with tea tokens, and keep FAANG corporations from building empires atop unpaid labor.</p>
      </div>
      <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12 col-12 order-xl-2 order-lg-2 order-md-2 order-sm-1 order-1 mb-4">
        <img src="/Images/horizon-illustration.png" class="horizon-img" alt="Over the horizon" style="border-radius:10px; width:100%;">
      </div>
    </div>
  </div>
</section>

<script>

  var contributorsList = $("#contributors-list");

  $.getJSON("https://api.github.com/repos/teaxyz/cli/contributors", function(cliContributors) {
    $.getJSON("https://api.github.com/repos/teaxyz/pantry.extra/contributors", function(extraContributors) {
      var allContributors = cliContributors.concat(extraContributors);
      var uniqueContributors = {};
      $.each(allContributors, function(i, contributor) {
        if (!(contributor.id in uniqueContributors)) {
          uniqueContributors[contributor.id] = true;
          contributorsList.append("<div class='col-3 col-sm-3 col-md-3 col-lg-1 col-xl-1 ps-0'>" + "<a href='" + contributor.html_url + "' target='_blank'><img class='con-img mb-3' src='" + contributor.avatar_url + "'></a>" + "<p class='small' style='hyphens:auto;'>" + contributor.login + "</p>" + "</div>");
        }
      });
    });
  });

</script>

<style>

  .con-img{
    width:100%;
    border-radius: 5px;
    filter: grayscale(100);
    background-color: gray;
    transition: 0.1s ease-in-out;
  }

  .con-img:hover{
    transform: translateY(-5px);
    filter:none;
  }

</style>

{{ end }}