Added animated scroll down button from this article:

https://foolishdeveloper.com/scroll-down-button-html-css/

themes/warwick_portfolio/assets/css/greeter.css

@@ -12,6 +12,7 @@
 #greeter {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
   align-items: center;
   height: 100vh;
   width: 100%;
@@ -34,11 +35,69 @@
   font-size: 133%;
 }
 
-#greeter video {
+/* CSS scroll button */
-  opacity: 0.1;
+.scroll-down-dude {margin: 12px 0px 0px 24px;}
-  width: 100%;
+.scroll-down-dude:before,
-  height: 100%;
+.scroll-down-dude:after {
-  position: absolute;
+  content: "";
-  object-fit: cover;
+  display: block;
-  z-index: 0;
+  width: 12px;
+  height: 12px;
+  transform: rotate(45deg);
+  border-bottom: 4px solid white;
+  border-right: 4px solid white;
+}
+
+.scroll-down-dude:before {
+  -webkit-animation: down-arrow-before 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+          animation: down-arrow-before 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+}
+
+.scroll-down-dude:after {
+  -webkit-animation: down-arrow-after 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+          animation: down-arrow-after 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+}
+
+@-webkit-keyframes down-arrow-before {
+  50% {
+    transform: rotate(45deg) translate(70%, 70%);
+  }
+  100% {
+    transform: rotate(45deg) translate(70%, 70%);
+  }
+}
+
+@keyframes down-arrow-before {
+  50% {
+    transform: rotate(45deg) translate(70%, 70%);
+  }
+  100% {
+    transform: rotate(45deg) translate(70%, 70%);
+  }
+}
+@-webkit-keyframes down-arrow-after {
+  50% {
+    transform: rotate(45deg) translate(110%, 110%);
+    opacity: 0;
+  }
+  51% {
+    transform: rotate(45deg) translate(-130%, -130%);
+  }
+  100% {
+    transform: rotate(45deg) translate(-70%, -70%);
+    opacity: 1;
+  }
+}
+@keyframes down-arrow-after {
+  50% {
+    transform: rotate(45deg) translate(110%, 110%);
+    opacity: 0;
+  }
+  51% {
+    transform: rotate(45deg) translate(-130%, -130%);
+  }
+  100% {
+    transform: rotate(45deg) translate(-70%, -70%);
+    opacity: 1;
+  }
 }

themes/warwick_portfolio/layouts/index.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 {{ partial "greeter.html" .}}
-<header class="homepage-header">
+<header id="homepage-header" class="homepage-header">
   <div class="container">
     <h1>{{.Title}}</h1> 
   </div>

themes/warwick_portfolio/layouts/partials/greeter.html

@@ -5,8 +5,15 @@
   <div id="greeter-content">
     {{ .Content }} 
     <div>
-      Scroll down
     </div>
   </div>
+  <div style="text-align:center; width:100%"> </div>
+  <div>
+
+    <a style="text-align:center" onClick="document.getElementById('homepage-header').scrollIntoView({block: 'start', behavior: 'smooth'});" >
+      Scroll Down
+    </a>
+      <div class="scroll-down-dude" onClick="document.getElementById('homepage-header').scrollIntoView({block: 'start', behavior: 'smooth'});"></div>
+  </div>
 </div>
 {{ end }}