new hero landing page animation

adhadse · Aug 16, 2023 · ee83817 · ee83817
1 parent 05c775e
commit ee83817
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git a/content/assets/css/extra.css b/content/assets/css/extra.css
@@ -135,7 +135,7 @@ html {
 /* home page */
 .hero-container h1 {
   font-family: Poppins, Inter, sans-serif;
-  font-weight: 500 !important;
+  font-weight: 600 !important;
   color: inherit !important;
   font-size: 3rem !important;
 }
@@ -176,7 +176,8 @@ html {
   padding: 0;
   box-sizing: border-box;
   overflow: hidden;
-  color: #1f363d;
+  color: #ffffff;
+  background: #000;
   margin-top: 0 !important;
 }
 

diff --git a/overrides/home.html b/overrides/home.html
@@ -16,11 +16,14 @@
   <!-- Highligh.js -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js" integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/darkula.css" integrity="sha256-Mnoy1/a+4vhQ8P0UqXtjDrRWwJs5gMrolbe2VBmKmiM=" crossorigin="anonymous">
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanta.halo.min.js"></script>
 {% endblock %}
 
 {% block hero %}
   <div class="hero-container">
-    <div class="bg"></div>
+    <div id="hero-bg"></div>
     <div class="hero-content">
       <div class="md-grid">
         <h1>Welcome to <br>my <span>wiki</span>!</h1>
@@ -45,3 +48,22 @@ <h1>Welcome to <br>my <span>wiki</span>!</h1>
 {% block htmltitle %}
 <title>adhadse — Wiki</title>
 {% endblock %}
+
+{% block scripts %}
+  {{ super() }}
+  <script>
+    VANTA.HALO({
+      el: ".hero-container",
+      mouseControls: true,
+      touchControls: true,
+      gyroControls: false,
+      minHeight: 200.00,
+      minWidth: 200.00,
+      baseColor: 0x0,
+      backgroundColor: 0x0,
+      xOffset: 0.09,
+      amplitudeFactor: 0.20,
+      size: 0.90
+    })
+  </script>
+{% endblock %}
diff --git a/overrides/main.html b/overrides/main.html
@@ -11,4 +11,25 @@
   <!-- Highligh.js -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js" integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/darkula.css" integrity="sha256-Mnoy1/a+4vhQ8P0UqXtjDrRWwJs5gMrolbe2VBmKmiM=" crossorigin="anonymous">
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanta.halo.min.js"></script>
 {% endblock %}
+
+{% block scripts %}
+  {{ super() }}
+  <script>
+    VANTA.HALO({
+      el: ".hero-container",
+      mouseControls: true,
+      touchControls: true,
+      gyroControls: false,
+      minHeight: 200.00,
+      minWidth: 200.00,
+      baseColor: 0x0,
+      backgroundColor: 0x0,
+      xOffset: 0.09,
+      size: 0.90
+    })
+  </script>
+{% endblock %}