Add animations to homepage gopher badget and cape

layouts/partials/homepage/homepage-content.html

@@ -13,7 +13,7 @@
     <div class="home-row-content first-fade animated">
       <div class="half">
         <div class="svgs">
-          {{partial "svg-icons/gopher-small.svg" .}}
+          {{partial "svg-icons/gopher-small-homepage.svg" .}}
           {{partial "svg-icons/md.svg" .}}
         </div>
         <div class="homepage-terminal">

layouts/partials/svg-icons/gopher-small-homepage.svg

@@ -0,0 +1,50 @@
+<svg width="100%" id="gopher" height="100%" viewBox="0 0 272 282" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1.09329,0,0,1.09329,-135.183,-11.6982)">
+        <path class="gopher-cape animated" d="M167.376,132.778C165.4,163.47 157.387,172.184 150.142,191.552C140.361,210.573 133.102,214.357 127.626,223.012C131.508,226.814 144.79,238.814 159.006,243.911C199.917,251.86 250.261,251.499 284.105,243.911C312.297,238.453 330.566,241.986 350.858,258.146C352.025,218.523 351.604,171.276 333.752,132.778" style="fill:rgb(201,23,126);stroke:rgb(201,23,126);stroke-width:4px;"/>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
+        <path d="M207.3,44.6C200.6,30.9 184.4,43 180.3,38.7C159.3,17.1 133.9,11.7 114,10.7L103,10.7C83,11.2 57.6,17 36.7,38.7C32.6,43 16.3,30.9 9.7,44.6C2,60.6 25.4,62.2 24.2,69.3C21.9,82.1 23.4,101.1 25.2,119.8C28,151.5 4.3,227.4 53.6,257.9C62.9,263.7 88,266.9 109.8,267.4L110,267.4C131.8,266.9 153.9,263.7 163.2,257.9C212.6,227.4 188.9,151.5 191.8,119.8C193.5,101.1 195,82.1 192.8,69.3C191.6,62.2 215,60.5 207.3,44.6Z" style="fill:rgb(140,197,231);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
+        <path d="M143.2,54.3C109.8,58.2 114.3,93 127.2,104.3C151.2,125.3 176.2,104.3 173.4,83.1C170.9,62.7 153.6,53.1 143.2,54.3Z" style="fill:rgb(224,222,220);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
+        <path d="M145.5,72.9C151.792,72.9 156.9,78.008 156.9,84.3C156.9,90.592 151.792,95.7 145.5,95.7C139.208,95.7 134.1,90.592 134.1,84.3C134.1,78.008 139.208,72.9 145.5,72.9ZM71.356,72.746C77.648,72.746 82.756,77.854 82.756,84.146C82.756,90.438 77.648,95.546 71.356,95.546C65.064,95.546 59.956,90.438 59.956,84.146C59.956,77.854 65.064,72.746 71.356,72.746Z" style="fill:rgb(17,18,18);"/>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
+        <path d="M142.5,75.8C144.487,75.8 146.1,77.413 146.1,79.4C146.1,81.387 144.487,83 142.5,83C140.513,83 138.9,81.387 138.9,79.4C138.9,77.413 140.513,75.8 142.5,75.8ZM74.274,75.192C76.261,75.192 77.874,76.805 77.874,78.792C77.874,80.779 76.261,82.392 74.274,82.392C72.287,82.392 70.674,80.779 70.674,78.792C70.674,76.805 72.287,75.192 74.274,75.192Z" style="fill:white;"/>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
+        <path d="M108.5,107C92.5,109.4 86.8,114 88,121.2C90,133 127.7,131.7 128.9,121.8C129.9,113.3 114.8,106.1 108.5,107Z" style="fill:rgb(184,147,127);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
+        <path d="M98.2,111.8C95.5,121.6 119.9,120.1 119.3,113.8C119,110.1 115.7,105.4 107,105.6C103.6,105.7 99.4,107.2 98.2,111.8Z" style="fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
+        <path d="M99,127.7C98.1,128.1 96.6,137.9 101.2,138.4C104.3,138.7 112.8,139.7 114.8,138.4C118.7,135.9 118.3,129.9 116.1,128.4C112.4,126 100,127.2 99,127.7ZM73.6,54.3C107,58.2 102.5,93 89.6,104.3C65.6,125.3 40.6,104.3 43.4,83.1C46,62.7 63.3,53.1 73.6,54.3Z" style="fill:rgb(224,222,220);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
+        <circle cx="71.4" cy="84.3" r="11.4" style="fill:rgb(17,18,18);"/>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
+        <circle cx="74.4" cy="79.4" r="3.6" style="fill:white;"/>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
+        <path d="M193.6,186.7C204.6,186.8 199.2,163.2 192.4,167.9C189.1,170.2 188.5,175.5 188.5,180C188.5,182.5 190.5,186.6 193.6,186.7ZM23.3,186.7C12.3,186.8 17.7,163.2 24.5,167.9C27.8,170.2 28.4,175.5 28.4,180C28.4,182.5 26.4,186.6 23.3,186.7ZM172.7,259.2C166.7,250.3 161.3,257.2 152.6,261.6C148.5,263.7 159.4,271.2 171.6,265.6C174.8,264.1 174.7,262.1 172.7,259.2ZM44.2,260.2C50.2,251.3 55.6,258.2 64.3,262.6C68.4,264.7 57.5,272.2 45.3,266.6C42.1,265.1 42.2,263.1 44.2,260.2Z" style="fill:rgb(184,147,127);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
+        <path d="M188.6,47C188,49.1 190.7,48.8 191.7,55.3C192.1,57.7 200.7,51.8 197.2,47.5C194.3,43.9 189.1,44.9 188.6,47ZM28.3,47C28.9,49.1 26.2,48.8 25.2,55.3C24.8,57.7 16.2,51.8 19.7,47.5C22.5,43.9 27.7,44.9 28.3,47Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(0.219817,0,0,0.219817,92.037,155.985)">
+        <g transform="matrix(2.08706,0,0,2.08706,-39.3863,-48.2414)">
+            <path class="gopher-badge animated" d="M119.631,36.154L203.822,85.066L203.822,181.395L119.631,229.184L35.578,181.395L35.578,85.066L119.631,36.154Z" style="fill:rgb(255,64,136);"/>
+            <path class="gopher-badge animated" d="M207.664,81.239L209.061,83.666L209.061,182.809L207.638,185.253L121.013,234.423L118.245,234.422L31.761,185.251L30.34,182.808L30.34,83.667L31.735,81.242L118.217,30.916L121.041,30.915L207.664,81.239ZM40.817,88.078L40.817,178.348L119.633,223.159L198.584,178.345L198.584,88.081L119.633,42.214L40.817,88.078Z" style="fill:rgb(201,23,126);"/>
+        </g>
+        <g transform="matrix(1.95678,0,0,2.21729,-55.1262,110.024)">
+            <path class="gopher-badge animated" d="M179.238,106.552L154.758,106.552L154.758,62.2L112.134,62.2L112.134,106.552L87.654,106.552L87.654,1.648L112.134,1.648L112.134,45.496L154.758,45.496L154.758,1.648L179.238,1.648L179.238,106.552Z" style="fill:white;fill-rule:nonzero;"/>
+        </g>
+    </g>
+    <g transform="matrix(1.09329,0,0,1.09329,-135.318,-8.1299)">
+        <path class="gopher-cape animated" d="M167.5,129.514C184.792,131.141 216.708,134.608 250.124,148.407C283.576,136.181 294.915,129.585 333.876,129.514" style="fill:none;stroke:rgb(201,23,126);stroke-width:4px;"/>
+    </g>
+</svg>

layouts/partials/svg-icons/gopher-small.svg

@@ -1,13 +1,50 @@
-<svg id="hugopher-front" width="100%" height="100%" viewBox="0 0 216 282" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+<svg width="100%" height="100%" viewBox="0 0 500 282" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
-    <path d="M207.3,44.6C200.6,30.9 184.4,43 180.3,38.7C159.3,17.1 133.9,11.7 114,10.7L103,10.7C83,11.2 57.6,17 36.7,38.7C32.6,43 16.3,30.9 9.7,44.6C2,60.6 25.4,62.2 24.2,69.3C21.9,82.1 23.4,101.1 25.2,119.8C28,151.5 4.3,227.4 53.6,257.9C62.9,263.7 88,266.9 109.8,267.4L110,267.4C131.8,266.9 153.9,263.7 163.2,257.9C212.6,227.4 188.9,151.5 191.8,119.8C193.5,101.1 195,82.1 192.8,69.3C191.6,62.2 215,60.5 207.3,44.6Z" style="fill:rgb(140,197,231);fill-rule:nonzero;"/>
+    <path d="M167.376,132.778C165.4,163.47 157.387,172.184 150.142,191.552C140.361,210.573 133.102,214.357 127.626,223.012C131.508,226.814 144.79,238.814 159.006,243.911C199.917,251.86 250.261,251.499 284.105,243.911C312.297,238.453 330.566,241.986 350.858,258.146C352.025,218.523 351.604,171.276 333.752,132.778" style="fill:rgb(201,23,126);stroke:rgb(201,23,126);stroke-width:4px;"/>
-    <path d="M143.2,54.3C109.8,58.2 114.3,93 127.2,104.3C151.2,125.3 176.2,104.3 173.4,83.1C170.9,62.7 153.6,53.1 143.2,54.3Z" style="fill:rgb(224,222,220);fill-rule:nonzero;"/>
+    <g transform="matrix(1,0,0,1,142,0)">
-    <path d="M145.5,72.9C151.792,72.9 156.9,78.008 156.9,84.3C156.9,90.592 151.792,95.7 145.5,95.7C139.208,95.7 134.1,90.592 134.1,84.3C134.1,78.008 139.208,72.9 145.5,72.9ZM71.356,72.746C77.648,72.746 82.756,77.854 82.756,84.146C82.756,90.438 77.648,95.546 71.356,95.546C65.064,95.546 59.956,90.438 59.956,84.146C59.956,77.854 65.064,72.746 71.356,72.746Z" style="fill:rgb(17,18,18);" class="eye"/>
+        <path d="M207.3,44.6C200.6,30.9 184.4,43 180.3,38.7C159.3,17.1 133.9,11.7 114,10.7L103,10.7C83,11.2 57.6,17 36.7,38.7C32.6,43 16.3,30.9 9.7,44.6C2,60.6 25.4,62.2 24.2,69.3C21.9,82.1 23.4,101.1 25.2,119.8C28,151.5 4.3,227.4 53.6,257.9C62.9,263.7 88,266.9 109.8,267.4L110,267.4C131.8,266.9 153.9,263.7 163.2,257.9C212.6,227.4 188.9,151.5 191.8,119.8C193.5,101.1 195,82.1 192.8,69.3C191.6,62.2 215,60.5 207.3,44.6Z" style="fill:rgb(140,197,231);fill-rule:nonzero;"/>
-    <path d="M142.5,75.8C144.487,75.8 146.1,77.413 146.1,79.4C146.1,81.387 144.487,83 142.5,83C140.513,83 138.9,81.387 138.9,79.4C138.9,77.413 140.513,75.8 142.5,75.8ZM74.274,75.192C76.261,75.192 77.874,76.805 77.874,78.792C77.874,80.779 76.261,82.392 74.274,82.392C72.287,82.392 70.674,80.779 70.674,78.792C70.674,76.805 72.287,75.192 74.274,75.192Z" style="fill:white;"/>
+    </g>
-    <path d="M108.5,107C92.5,109.4 86.8,114 88,121.2C90,133 127.7,131.7 128.9,121.8C129.9,113.3 114.8,106.1 108.5,107Z" style="fill:rgb(184,147,127);fill-rule:nonzero;"/>
+    <g transform="matrix(1,0,0,1,142,0)">
-    <path d="M98.2,111.8C95.5,121.6 119.9,120.1 119.3,113.8C119,110.1 115.7,105.4 107,105.6C103.6,105.7 99.4,107.2 98.2,111.8Z" style="fill-rule:nonzero;"/>
+        <path d="M143.2,54.3C109.8,58.2 114.3,93 127.2,104.3C151.2,125.3 176.2,104.3 173.4,83.1C170.9,62.7 153.6,53.1 143.2,54.3Z" style="fill:rgb(224,222,220);fill-rule:nonzero;"/>
-    <path d="M99,127.7C98.1,128.1 96.6,137.9 101.2,138.4C104.3,138.7 112.8,139.7 114.8,138.4C118.7,135.9 118.3,129.9 116.1,128.4C112.4,126 100,127.2 99,127.7ZM73.6,54.3C107,58.2 102.5,93 89.6,104.3C65.6,125.3 40.6,104.3 43.4,83.1C46,62.7 63.3,53.1 73.6,54.3Z" style="fill:rgb(224,222,220);fill-rule:nonzero;"/>
+    </g>
-    <circle cx="71.4" cy="84.3" r="11.4" style="fill:rgb(17,18,18);" class="eye"/>
+    <g transform="matrix(1,0,0,1,142,0)">
-    <circle cx="74.4" cy="79.4" r="3.6" style="fill:white;"/>
+        <path d="M145.5,72.9C151.792,72.9 156.9,78.008 156.9,84.3C156.9,90.592 151.792,95.7 145.5,95.7C139.208,95.7 134.1,90.592 134.1,84.3C134.1,78.008 139.208,72.9 145.5,72.9ZM71.356,72.746C77.648,72.746 82.756,77.854 82.756,84.146C82.756,90.438 77.648,95.546 71.356,95.546C65.064,95.546 59.956,90.438 59.956,84.146C59.956,77.854 65.064,72.746 71.356,72.746Z" style="fill:rgb(17,18,18);"/>
-    <path d="M193.6,186.7C204.6,186.8 199.2,163.2 192.4,167.9C189.1,170.2 188.5,175.5 188.5,180C188.5,182.5 190.5,186.6 193.6,186.7ZM23.3,186.7C12.3,186.8 17.7,163.2 24.5,167.9C27.8,170.2 28.4,175.5 28.4,180C28.4,182.5 26.4,186.6 23.3,186.7ZM172.7,259.2C166.7,250.3 161.3,257.2 152.6,261.6C148.5,263.7 159.4,271.2 171.6,265.6C174.8,264.1 174.7,262.1 172.7,259.2ZM44.2,260.2C50.2,251.3 55.6,258.2 64.3,262.6C68.4,264.7 57.5,272.2 45.3,266.6C42.1,265.1 42.2,263.1 44.2,260.2Z" style="fill:rgb(184,147,127);fill-rule:nonzero;"/>
+    </g>
-    <path d="M188.6,47C188,49.1 190.7,48.8 191.7,55.3C192.1,57.7 200.7,51.8 197.2,47.5C194.3,43.9 189.1,44.9 188.6,47ZM28.3,47C28.9,49.1 26.2,48.8 25.2,55.3C24.8,57.7 16.2,51.8 19.7,47.5C22.5,43.9 27.7,44.9 28.3,47Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
+    <g transform="matrix(1,0,0,1,142,0)">
+        <path d="M142.5,75.8C144.487,75.8 146.1,77.413 146.1,79.4C146.1,81.387 144.487,83 142.5,83C140.513,83 138.9,81.387 138.9,79.4C138.9,77.413 140.513,75.8 142.5,75.8ZM74.274,75.192C76.261,75.192 77.874,76.805 77.874,78.792C77.874,80.779 76.261,82.392 74.274,82.392C72.287,82.392 70.674,80.779 70.674,78.792C70.674,76.805 72.287,75.192 74.274,75.192Z" style="fill:white;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,142,0)">
+        <path d="M108.5,107C92.5,109.4 86.8,114 88,121.2C90,133 127.7,131.7 128.9,121.8C129.9,113.3 114.8,106.1 108.5,107Z" style="fill:rgb(184,147,127);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,142,0)">
+        <path d="M98.2,111.8C95.5,121.6 119.9,120.1 119.3,113.8C119,110.1 115.7,105.4 107,105.6C103.6,105.7 99.4,107.2 98.2,111.8Z" style="fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,142,0)">
+        <path d="M99,127.7C98.1,128.1 96.6,137.9 101.2,138.4C104.3,138.7 112.8,139.7 114.8,138.4C118.7,135.9 118.3,129.9 116.1,128.4C112.4,126 100,127.2 99,127.7ZM73.6,54.3C107,58.2 102.5,93 89.6,104.3C65.6,125.3 40.6,104.3 43.4,83.1C46,62.7 63.3,53.1 73.6,54.3Z" style="fill:rgb(224,222,220);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,142,0)">
+        <circle cx="71.4" cy="84.3" r="11.4" style="fill:rgb(17,18,18);"/>
+    </g>
+    <g transform="matrix(1,0,0,1,142,0)">
+        <circle cx="74.4" cy="79.4" r="3.6" style="fill:white;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,142,0)">
+        <path d="M193.6,186.7C204.6,186.8 199.2,163.2 192.4,167.9C189.1,170.2 188.5,175.5 188.5,180C188.5,182.5 190.5,186.6 193.6,186.7ZM23.3,186.7C12.3,186.8 17.7,163.2 24.5,167.9C27.8,170.2 28.4,175.5 28.4,180C28.4,182.5 26.4,186.6 23.3,186.7ZM172.7,259.2C166.7,250.3 161.3,257.2 152.6,261.6C148.5,263.7 159.4,271.2 171.6,265.6C174.8,264.1 174.7,262.1 172.7,259.2ZM44.2,260.2C50.2,251.3 55.6,258.2 64.3,262.6C68.4,264.7 57.5,272.2 45.3,266.6C42.1,265.1 42.2,263.1 44.2,260.2Z" style="fill:rgb(184,147,127);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,142,0)">
+        <path d="M188.6,47C188,49.1 190.7,48.8 191.7,55.3C192.1,57.7 200.7,51.8 197.2,47.5C194.3,43.9 189.1,44.9 188.6,47ZM28.3,47C28.9,49.1 26.2,48.8 25.2,55.3C24.8,57.7 16.2,51.8 19.7,47.5C22.5,43.9 27.7,44.9 28.3,47Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(0.219817,0,0,0.219817,206.037,155.985)">
+        <g>
+            <g transform="matrix(1.90897,0,0,1.90897,-27.8648,-56.0002)">
+                <path id="hugo-badge" d="M119.631,36.154L203.822,85.066L203.822,181.395L119.631,229.184L35.578,181.395L35.578,85.066L119.631,36.154Z" style="fill:rgb(255,64,136);"/>
+                <path d="M207.664,81.239L209.061,83.666L209.061,182.809L207.638,185.253L121.013,234.423L118.245,234.422L31.761,185.251L30.34,182.808L30.34,83.667L31.735,81.242L118.217,30.916L121.041,30.915L207.664,81.239ZM40.817,88.078L40.817,178.348L119.633,223.159L198.584,178.345L198.584,88.081L119.633,42.214L40.817,88.078Z" style="fill:rgb(201,23,126);"/>
+            </g>
+            <g transform="matrix(1.78981,0,0,2.02809,-42.2616,88.7603)">
+                <path d="M179.238,106.552L154.758,106.552L154.758,62.2L112.134,62.2L112.134,106.552L87.654,106.552L87.654,1.648L112.134,1.648L112.134,45.496L154.758,45.496L154.758,1.648L179.238,1.648L179.238,106.552Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+    <g transform="matrix(1,0,0,1,-0.123703,3.26383)">
+        <path d="M167.5,129.514C184.792,131.141 216.708,134.608 250.124,148.407C283.576,136.181 294.915,129.585 333.876,129.514" style="fill:none;stroke:rgb(201,23,126);stroke-width:4px;"/>
+    </g>
 </svg>

layouts/partials/svg-icons/hugo-home.svg

@@ -1,4 +1,4 @@
-<svg width="100%" id="hugo-home" height="100%" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+<svg width="100%" class="animated" id="hugo-home" height="100%" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
     <g transform="matrix(1.90897,0,0,1.90897,-27.8648,-56.0002)">
         <path id="home-icon-filler" d="M119.631,36.154L203.822,85.066L203.822,181.395L119.631,229.184L35.578,181.395L35.578,85.066L119.631,36.154Z" style="fill:rgb(255,64,136);"/>
         <path d="M207.664,81.239L209.061,83.666L209.061,182.809L207.638,185.253L121.013,234.423L118.245,234.422L31.761,185.251L30.34,182.808L30.34,83.667L31.735,81.242L118.217,30.916L121.041,30.915L207.664,81.239ZM40.817,88.078L40.817,178.348L119.633,223.159L198.584,178.345L198.584,88.081L119.633,42.214L40.817,88.078Z" style="fill:rgb(201,23,126);"/>

pipeline/scss/pages/_homepage.scss

@@ -210,6 +210,7 @@ hr,
 .svgs {
   display: flex;
   justify-content: space-around;
+  position: relative;
   // opacity: 0;
   svg,
   .img-wrapper {
@@ -226,11 +227,39 @@ hr,
 }
 
 #hugopher-front {
+  width: 300px;
+  position: relative;
   .eye {
     animation: squeeze 2.4s infinite;
   }
 }
 
+.gopher-badge {
+  opacity: 0;
+  width: 50px;
+  position: absolute;
+  top: 24px;
+}
+
+.gopher-cape {
+  opacity: 0;
+}
+
+svg {
+  .cape {
+    // opacity: 0;
+  }
+}
+
+#hugo-home {
+  width: 60px;
+  position: absolute;
+  left: 40px;
+  top: 33px;
+  z-index: 50;
+  opacity: 0;
+}
+
 @keyframes squeeze {
   90% {
     transform: none;

static/css/style.min.css

@@ -4,4 +4,4 @@
  * Licensed under the MIT license - http://opensource.org/licenses/MIT
  *
  * Copyright (c) 2016 Daniel Eden
- */.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06)}70%{-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0)}90%{-webkit-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06)}70%{-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0)}90%{-webkit-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05, 1.05, 1.05);transform:scale3d(1.05, 1.05, 1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05, 1.05, 1.05);transform:scale3d(1.05, 1.05, 1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px, 0, 0);transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px, 0, 0);transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:trLine truncated
+ */.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06)}70%{-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0)}90%{-webkit-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06)}70%{-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0)}90%{-webkit-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05, 1.05, 1.05);transform:scale3d(1.05, 1.05, 1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05, 1.05, 1.05);transform:scale3d(1.05, 1.05, 1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px, 0, 0);transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px, 0, 0);transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:trLine truncated

static/js/homepage.js

@@ -9,7 +9,9 @@ $(document).ready(function() {
     scrolled2 = false,
     terminal = $('.homepage-terminal'),
     firstFade = $('.first-fade'),
-    gopher = $('#hugopher-front');
+    gopher = $('#gopher'),
+    cape = $('.gopher-cape'),
+    badge = $('.gopher-badge');
   $(window).scroll(function() {
     let scroll = $(this).scrollTop();
     if (scroll > offset1 && scrolled1 == false) {
@@ -23,7 +25,13 @@ $(document).ready(function() {
         stagger: 60,
         delay: 0,
         complete: function() {
-          gopher.velocity('callout.tada', { duration: 800 });
+          gopher.velocity('callout.tada', {
+            duration: 800,
+            complete: function() {
+              badge.addClass('bounceIn');
+              cape.addClass('fadeIn');
+            }
+          });
         }
       });
       scrolled2 = true;