vac.dev-experimental-old/_layouts/home.html

---
layout: default
---

<section class="intro container max-w-screen-xl flex flex-col sm:flex-row pt-10 pb-8 lg:py-10 border-b">
  <div class="heading-block w-full sm:w-2/12 lg:w-3/12"></div>
  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
    <h1 class="text-xl md:text-xxl mb-10 sm:max-w-md lg:max-w-xl">
      VAC researches peer-to-peer, private, censorship resistant communication.
    </h1>
    <a class="link link--external" href="https://vac.dev/" target="_blank" rel="noopener noreferrer"
      >See VAC openings</a
    >
  </div>
</section>

<section id="work" class="work container max-w-screen-xl flex flex-col sm:flex-row py-10 border-b l:pb-16">
  <div class="heading-block w-full sm:w-2/12 lg:w-3/12">
    <h2 class="text-sm font-semibold mb-6 s:text-center lg:text-center">Work</h2>
  </div>
  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
    <p class="section__text text-s lg:text-base italic mb-6 l:max-w-md l:mb-16">
      Building protocols and products at all layers of the stack including underlying transports, p2p overlays and
      routing, initial trust establishment, and semantics for things like group chat.
    </p>
    <div class="work__cards container s:mx-auto flex flex-col sm:flex-row">
      <div
        class="
          work__card
          group
          flex flex-col
          items-center
          border
          pt-5
          p-4
          lg:p-8 lg:pb-10
          mb-8
          sm:mr-5 sm:mb-0
          hover:bg-black
          transition
          duration-500
        "
      >
        <svg
          width="65"
          height="64"
          viewBox="0 0 65 64"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="mb-2 lg:mb-8 l:mt-28 w-16 h-16 fill-current group-hover:text-white"
        >
          <g clip-path="url(#clip0)">
            <path
              d="M4.40096 46.0099C3.92982 46.0099 3.45868 45.7658 3.19484 45.3338C2.79908 44.6578 3.00638 43.7939 3.68482 43.3996C3.77905 43.3432 11.9769 38.4043 18.4975 32.0569C11.7131 25.4465 3.81674 20.6953 3.72252 20.639C3.04407 20.2446 2.83677 19.3808 3.23253 18.7047C3.62829 18.0287 4.49519 17.8221 5.17364 18.2165C5.5317 18.4418 14.2573 23.6625 21.5129 31.0615C22.0405 31.6061 22.0405 32.4888 21.5129 33.0334C14.5965 40.1132 5.5317 45.578 5.13594 45.8221C4.9098 45.9348 4.6648 46.0099 4.40096 46.0099Z"
              class="text-black group-hover:text-white"
            />
            <path
              d="M60.6366 46.0096C60.3916 46.0096 60.1466 45.9533 59.9016 45.803C59.5247 45.5777 50.441 40.1129 43.5247 33.0143C42.997 32.4697 42.997 31.5871 43.5247 31.0425C50.7614 23.6434 59.487 18.4227 59.8639 18.1974C60.5423 17.803 61.4092 18.0096 61.805 18.6856C62.2008 19.3617 61.9935 20.2256 61.315 20.6199C61.2396 20.6763 53.3244 25.4086 46.54 32.0378C53.0606 38.3852 61.2773 43.3429 61.3527 43.3805C62.0123 43.7748 62.2385 44.6387 61.8427 45.3148C61.5789 45.7655 61.1077 46.0096 60.6366 46.0096Z"
              class="text-black group-hover:text-white"
            />
            <path
              d="M32.481 21.4464C32.123 21.4464 31.7649 21.3149 31.501 21.052C24.3962 14.16 18.9121 5.12714 18.6671 4.73278C18.2714 4.05672 18.4975 3.19287 19.1571 2.79851C19.8167 2.40414 20.6836 2.61071 21.0982 3.28677C21.1548 3.38067 26.1112 11.5497 32.481 18.0473C39.1147 11.2868 43.8827 3.41822 43.9392 3.32433C44.335 2.64827 45.2019 2.4417 45.8803 2.83607C46.5399 3.23043 46.7661 4.09428 46.3703 4.77034C46.1442 5.14592 40.9051 13.822 33.4798 21.052C33.1972 21.2962 32.8391 21.4464 32.481 21.4464Z"
              class="text-black group-hover:text-white"
            />
            <path
              d="M19.8921 61.4275C19.6471 61.4275 19.4021 61.3711 19.1571 61.2209C18.4975 60.8265 18.2714 59.9627 18.6671 59.2866C18.8933 58.911 24.3962 49.8594 31.501 42.9674C32.0476 42.4416 32.9333 42.4416 33.4798 42.9674C40.9051 50.1787 46.1442 58.8735 46.3703 59.2491C46.7661 59.9251 46.5588 60.789 45.8803 61.1833C45.2207 61.5777 44.335 61.3711 43.9392 60.6951C43.8827 60.62 39.1336 52.7326 32.481 45.9721C26.1112 52.4697 21.1359 60.6575 21.0982 60.7326C20.8344 61.1833 20.3632 61.4275 19.8921 61.4275Z"
              class="text-black group-hover:text-white"
            />
            <path
              d="M63.0302 29.765C62.1256 29.765 52.2128 29.7087 42.4507 27.1735C41.7158 26.9857 41.2635 26.2345 41.4331 25.4834C43.6757 15.8683 48.6133 6.49744 48.8394 6.12186C49.1975 5.42702 50.0644 5.18289 50.7428 5.5397C51.4401 5.89651 51.704 6.76035 51.3271 7.43641C51.2894 7.53031 46.8229 15.981 44.5238 24.7885C53.7393 26.9669 62.8983 26.9481 63.0868 26.9669C63.8594 26.9669 64.5002 27.5866 64.5002 28.3754C64.5002 29.1641 63.8783 29.7838 63.0868 29.7838C63.0679 29.765 63.0491 29.765 63.0302 29.765Z"
              class="text-black group-hover:text-white"
            />
            <path
              d="M14.9923 58.648C14.7662 58.648 14.54 58.5917 14.3327 58.479C13.6355 58.1222 13.3905 57.2584 13.7485 56.5823C13.7862 56.5072 18.1019 48.357 20.4953 39.2114C11.6567 37.1457 2.10188 37.1081 1.93227 37.1081C1.14075 37.1081 0.5 36.4696 0.5 35.6997C0.5 34.9297 1.12191 34.2912 1.91343 34.2912C2.38457 34.2349 12.9759 34.2912 22.5683 36.8077C23.3033 36.9955 23.7556 37.7466 23.586 38.4978C21.2114 48.5635 16.4623 57.5213 16.255 57.8969C15.9912 58.3663 15.5012 58.648 14.9923 58.648Z"
              class="text-black group-hover:text-white"
            />
            <path
              d="M38.5309 23.0422C37.909 23.0422 37.3437 22.6291 37.174 22.0093C34.498 12.507 34.3095 1.93422 34.3095 1.48352C34.2907 0.713564 34.9126 0.0750666 35.7041 0.0562873H35.7229C36.4956 0.0562873 37.1175 0.676006 37.1364 1.44596C37.1364 1.53986 37.306 11.0985 39.5486 19.9061C48.6888 17.3896 56.7924 12.9577 56.8678 12.9014C57.5462 12.5258 58.4131 12.7699 58.7901 13.446C59.167 14.122 58.922 14.9859 58.2435 15.3615C57.8666 15.568 48.9526 20.4507 38.889 22.9859C38.7571 23.0234 38.644 23.0422 38.5309 23.0422Z"
              class="text-black group-hover:text-white"
            />
            <path
              d="M29.3526 63.9246C28.5799 63.9246 27.958 63.3049 27.9392 62.5349C27.9392 62.441 27.7884 53.2392 25.4515 44.0748C16.6506 46.5162 8.24541 51.0983 8.17003 51.1359C7.49158 51.5115 6.62468 51.2673 6.24777 50.5913C5.87085 49.9152 6.11585 49.0514 6.79429 48.6758C7.19005 48.4692 16.4998 43.38 26.1111 40.995C26.865 40.8072 27.6188 41.2579 27.8072 41.9903C30.5776 51.9434 30.7472 62.0842 30.7472 62.5162C30.766 63.2673 30.1441 63.9058 29.3526 63.9246Z"
              class="text-black group-hover:text-white"
            />
            <path
              d="M26.6957 22.9112C26.5638 22.9112 26.4507 22.8924 26.3188 22.8548C16.764 20.2257 7.5673 14.9487 7.19039 14.7234C6.51194 14.329 6.2858 13.4652 6.68156 12.7891C7.05847 12.1318 7.92537 11.8877 8.60382 12.2821C8.69805 12.3384 16.9902 17.1084 25.7157 19.7562C28.2599 10.6483 28.618 1.46517 28.6368 1.35249C28.6745 0.582537 29.3529 -0.0559611 30.1068 0.000376935C30.8794 0.0191563 31.5013 0.676433 31.4637 1.46517C31.4448 1.87831 31.049 12.0192 28.0337 21.9159C27.8641 22.5168 27.2988 22.9112 26.6957 22.9112Z"
              class="text-black group-hover:text-white"
            />
            <path
              d="M34.9878 63.9998C34.969 63.9998 34.9501 63.9998 34.9313 63.9998C34.1586 63.9623 33.5367 63.3238 33.5744 62.5351C33.5932 62.0843 34.0267 51.5304 36.9289 42.0843C37.1551 41.3519 37.9277 40.9388 38.6627 41.1454C48.6509 43.9059 57.4519 48.9951 57.8288 49.2205C58.5072 49.6149 58.7334 50.4787 58.3376 51.1548C57.9419 51.8308 57.075 52.0562 56.3965 51.6618C56.3211 51.6055 48.3306 47.0045 39.2469 44.2627C36.8158 53.0139 36.4201 62.5726 36.4012 62.6665C36.3824 63.3989 35.7416 63.9998 34.9878 63.9998Z"
              class="text-black group-hover:text-white"
            />
            <path
              d="M1.96996 29.6335C1.93227 29.6335 1.91343 29.6335 1.89458 29.6335C1.12191 29.6335 0.5 28.995 0.5 28.2251C0.5 27.4551 1.12191 26.8542 1.91343 26.8166C1.93227 26.8166 11.6001 26.8166 20.4953 24.7697C18.1396 15.6053 13.8428 7.45512 13.8051 7.38C13.4281 6.68516 13.692 5.84009 14.3893 5.46451C15.0866 5.1077 15.9346 5.37061 16.2927 6.04667C16.5 6.42225 21.2303 15.3988 23.5671 25.4645C23.7367 26.2157 23.2844 26.9481 22.5495 27.1546C13.2585 29.5772 2.98763 29.6335 1.96996 29.6335Z"
              class="text-black group-hover:text-white"
            />
            <path
              d="M49.9891 58.6857C49.4803 58.6857 48.9903 58.404 48.7453 57.9345C48.538 57.5402 43.6193 48.1693 41.3955 38.5542C41.2259 37.8031 41.6782 37.0707 42.4131 36.8829C52.4579 34.3101 62.6534 34.3477 63.0492 34.3289C63.8218 34.3289 64.4626 34.9674 64.4626 35.7373C64.4626 36.5073 63.8218 37.1458 63.0492 37.1458C63.0492 37.1458 63.0492 37.1458 63.0115 37.1458C62.4084 37.1458 53.4379 37.1834 44.4673 39.2679C46.7476 48.0566 51.1952 56.5449 51.2329 56.62C51.591 57.3148 51.3272 58.1599 50.6487 58.5167C50.4414 58.6294 50.2153 58.6857 49.9891 58.6857Z"
              class="text-black group-hover:text-white"
            />
          </g>
          <defs>
            <clipPath id="clip0">
              <rect width="64" height="64" fill="white" transform="translate(0.5)" />
            </clipPath>
          </defs>
        </svg>

        <p
          class="work__heading mb-6 md:mb-5 lg:mb-20 lg:uppercase font-bold text-s lg:text-base group-hover:text-white"
        >
          Waku
        </p>
        <p class="work__text text-s lg:text-base opacity-75 text-left max-w-screen-xxs group-hover:text-white">
          A gossip based messaging protocol for private, secure, p2p messaging with implementations written in go, nim,
          java script.
        </p>
        {%- comment -%}
        <div class="work__link container flex justify-start mt-3 lg:mt-6">
          <a
            class="link link--external group-hover:text-white"
            href="https://vac.dev/"
            target="_blank"
            rel="noopener noreferrer"
            >Visit Vaku</a
          >
        </div>
        {%- endcomment -%}
      </div>
      <div
        class="
          work__card
          group
          flex flex-col
          items-center
          border
          pt-5
          p-4
          lg:p-8 lg:pb-10
          hover:bg-black
          transition
          duration-500
        "
      >
        <svg
          width="62"
          height="64"
          viewBox="0 0 62 64"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="mb-2 lg:mb-8 l:mt-28 w-16 h-16 fill-current group-hover:text-peach"
        >
          <g clip-path="url(#clip0)">
            <path
              d="M48.1706 9.25283C42.8204 6.21844 37.6207 3.26952 32.421 0.320607C31.5401 -0.170879 30.6806 -0.085403 29.8212 0.406083C20.3241 5.8338 10.8271 11.2401 1.35162 16.6679C1.05081 16.8388 0.771486 17.3303 0.771486 17.6722C0.75 28.5062 0.728514 39.3189 0.792973 50.1316C0.792973 50.8368 1.33013 51.8411 1.91027 52.183C7.02404 55.1961 12.2023 58.0809 17.3805 61.0084C17.4235 61.0298 17.5094 61.0084 17.7458 61.0084C17.7458 60.6024 17.7458 60.175 17.7458 59.769C17.7458 49.1273 17.7673 38.5069 17.7243 27.8652C17.7243 26.8608 18.0896 26.3907 18.906 25.942C28.4245 20.557 37.9215 15.1507 47.4185 9.74431C47.6119 9.63747 47.8268 9.48788 48.1706 9.25283Z"
              class="text-black group-hover:text-peach"
            />
            <path
              d="M39.7046 64.0005C39.7046 63.509 39.7046 63.103 39.7046 62.7183C39.7046 55.282 39.7261 47.8456 39.6831 40.3878C39.6831 39.4262 39.9624 38.9133 40.8219 38.4432C47.4397 34.7464 54.0146 30.9855 60.6109 27.2459C60.9332 27.0749 61.234 26.8826 61.6208 26.6476C61.4489 26.498 61.3414 26.3698 61.191 26.2843C56.8937 23.8269 52.575 21.3908 48.2992 18.8906C47.0315 18.1427 45.9357 18.1214 44.625 18.8693C38.222 22.5661 31.7761 26.1988 25.3302 29.8315C24.6211 30.2162 24.4062 30.6649 24.4062 31.4556C24.4277 38.8706 24.4277 46.2643 24.4062 53.6793C24.4062 54.7905 24.75 55.6666 25.7384 56.2222C30.1861 58.7437 34.6123 61.2439 39.06 63.7654C39.2104 63.8509 39.4038 63.8936 39.7046 64.0005Z"
              class="text-black group-hover:text-peach"
            />
            <path
              d="M61.7495 51.5856C56.5713 48.6367 51.5864 45.816 46.4727 42.9098C46.4727 48.7435 46.4727 54.3849 46.4727 60.2614C51.5435 57.3766 56.5283 54.5559 61.7495 51.5856Z"
              class="text-black group-hover:text-peach"
            />
          </g>
          <defs>
            <clipPath id="clip0">
              <rect width="61" height="64" fill="white" transform="translate(0.75)" />
            </clipPath>
          </defs>
        </svg>
        <p
          class="work__heading mb-6 md:mb-5 lg:mb-20 lg:uppercase font-bold text-s lg:text-base group-hover:text-peach"
        >
          DApp Connect
        </p>
        <p class="work__text text-s lg:text-base opacity-75 text-left max-w-screen-xxs group-hover:text-peach">
          The communication layer for Ethereum. A tech stack enabling decentralized communication between DApps and
          people.
        </p>
        {%- comment -%}
        <div class="work__link container flex justify-start mt-3 lg:mt-6">
          <a
            class="link link--external link--dapp group-hover:text-peach"
            href="https://vac.dev/"
            target="_blank"
            rel="noopener noreferrer"
            >Visit DApp Connect</a
          >
        </div>
        {%- endcomment -%}
      </div>
    </div>
  </div>
</section>

<section id="about" class="about container max-w-screen-xl flex flex-col sm:flex-row pt-10 pb-5 lg:pb-2 border-b">
  <div class="heading-block w-full sm:w-2/12 lg:w-3/12">
    <h2 class="text-sm font-semibold mb-5 s:text-center lg:text-center">About</h2>
  </div>
  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
    <p class="section__text text-s lg:text-base italic mb-5 l:max-w-md l:mb-8">
      Our research is designed to remove centralized third parties from our communication. We believe in the right to
      privacy, security, and autonomy of the individual.
    </p>
    <div class="about__cards container s:mx-auto flex flex-col flex-wrap sm:flex-row">
      {% for card in site.data.cards %}
      <div class="about__card flex flex-col w-full sm:w-1/2 lm:max-w-screen-xscard mb-6 lg:mb-10 lm:mr-5">
        <img src="{{ card.src }}" class="about__gif self-center" alt="Gif animation" width="210" height="210" />
        <p class="about__heading mb-4 font-semibold text-s lg:text-sm text-left">{{ card.title }}</p>
        <p class="about__text text-s lg:text-base opacity-75 md:mr-5 lg:mr-0">{{ card.text }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section id="research-log" class="log container max-w-screen-xl flex flex-col sm:flex-row py-10 border-b">
  <div class="heading-block w-full sm:w-2/12 lg:w-3/12">
    <h2 class="text-sm font-semibold mb-5 s:text-center lg:text-center">Research log</h2>
  </div>

  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
    <div class="flex flex-col">
      <ul class="container s:mx-auto flex-row hidden flex-wrap sm:flex">
        {% for post in site.posts limit:8 %} {% include post-preview.html %} {% endfor %}
      </ul>
      <ul class="container s:mx-auto flex flex-col sm:hidden">
        {% for post in site.posts limit:4 %} {% include post-preview.html %} {% endfor %}
      </ul>

      <div class="log__link container flex justify-start">
        <a class="link link--external" href="/research-log/">View all posts</a>
      </div>
    </div>
  </div>
</section>

<section id="media" class="media container max-w-screen-xl flex flex-col sm:flex-row py-10 border-b">
  <div class="heading-block w-full sm:w-2/12 lg:w-3/12">
    <h2 class="text-sm font-semibold mb-5 s:text-center lg:text-center">Media</h2>
  </div>

  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
    <div class="flex flex-col">
      <ul class="container s:mx-auto flex-row hidden flex-wrap sm:flex">
        {% for mediapost in site.data.media limit:8 %} {% include media-preview.html %} {% endfor %}
      </ul>
      <ul class="container s:mx-auto flex flex-col sm:hidden">
        {% for mediapost in site.data.media limit:4 %} {% include media-preview.html %} {% endfor %}
      </ul>

      <div class="media__link container flex justify-start">
        <a class="link link--external" href="/media/">View all media</a>
      </div>
    </div>
  </div>
</section>

<section id="join" class="join container max-w-screen-xl flex flex-col sm:flex-row pt-10 sl:py-10">
  <div class="heading-block w-full sm:w-2/12 lg:w-3/12">
    <h2 class="text-sm font-semibold mb-5 s:text-center lg:text-center">Join</h2>
  </div>

  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
    <div class="flex flex-col sl:flex-row sl:justify-between lg:max-w-screen-ml">
      {% for card in site.data.join %}
      <div class="join__option w-full sl:w-4/12 flex sl:flex-col mb-10 sl:mb-0">
        <div class="flex justify-center items-center h-8 mr-6 sl:mr-0 mb-5 lg:mb-8">
          <a href="{{ card.link }}" target="_blank" rel="noopener noreferrer" class="hover:opacity-50">
            <img src="{{ card.src }}" alt="Join option logo" />
          </a>
        </div>
        <div class="flex flex-col justify-between flex-1">
          <div>
            <h2 class="text-xs lg:text-sm font-semibold mb-3 text-left">{{ card.title }}</h2>
            <p class="w-full text-s lg:text-base mb-3">{{ card.text }}</p>
          </div>
          <div class="media__link container flex justify-start">
            <a class="link link--external" href="{{ card.link }}" target="_blank" rel="noopener noreferrer"
              >{{ card.linkText }}</a
            >
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>