Adding Github Pages chevron scrolling down

TheWongLife · May 31, 2024 · 181a5be · 181a5be
1 parent d4e3195
commit 181a5be
Show file tree

Hide file tree

Showing 6 changed files with 170 additions and 8 deletions.
diff --git a/404.html b/404.html
@@ -31,6 +31,31 @@
                 text-align: center;
             }
         </style>
+        <style>
+            .scroll-wrapper {text-align:center;}
+            .scroll {   
+                font-size: 50px;
+                color: #000;
+               -webkit-animation: scrolling 3s ease infinite;
+               -moz-animation: scrolling 3s ease infinite;
+               -o-animation: scrolling 3s ease infinite;
+               animation: scrolling 3s ease infinite;
+            }
+
+            @keyframes scrolling {
+              0% {
+                transform: translate(0);
+              }
+
+              50% {
+                transform: translate(0,40px);
+              }
+
+              100% {
+                 transform: translate(0);
+              }
+            }
+        </style>
         <style>
             #btn-back-to-top {
               position: fixed;
@@ -80,15 +105,17 @@
         </nav>
 
         <main>
-            <h4 class="header404">404</h4>
+            <h4 class="header404">404 <i class="fa-solid fa-magnifying-glass fa-sm"></i></h4>
             <div class="content-404">
-                The page you're looking for couldn't be found <i class="fa-solid fa-xmark fa-sm"></i>.
+                The page you're looking for couldn't be found <i class="fa-solid fa-user-xmark fa-sm"></i>.
             </div>
             <p>
                 Please navigate back to <a href="https://thewonglife.is-a.dev">my home <i class="fa-solid fa-house fa-sm"></i> page</a>.
             </p>
         </main>
 
+        <div class="scroll-wrapper"><a href="#footer"><i class="scroll fa-solid fa-chevron-down fa-sm"></i></a></div>
+
         <button
                 type="button"
                 class="btn btn-dark btn-floating btn-lg"
@@ -97,7 +124,7 @@ <h4 class="header404">404</h4>
             <i class="fa-solid fa-chevron-up fa-sm"></i>
         </button>
 
-        <footer class="text-center">
+        <footer class="text-center" id="footer">
             <div class="container pt-4">
               <section class="mb-4">
                 <a

diff --git a/html/about.html b/html/about.html
@@ -15,6 +15,31 @@
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+        <style>
+            .scroll-wrapper {text-align:center;}
+            .scroll {   
+                font-size: 50px;
+                color: #000;
+               -webkit-animation: scrolling 3s ease infinite;
+               -moz-animation: scrolling 3s ease infinite;
+               -o-animation: scrolling 3s ease infinite;
+                animation: scrolling 3s ease infinite;
+            }
+
+            @keyframes scrolling {
+              0% {
+                transform: translate(0);
+              }
+
+              50% {
+                transform: translate(0,40px);
+              }
+
+              100% {
+               transform: translate(0);
+              }
+            }
+        </style>
         <style>
             #btn-back-to-top {
               position: fixed;
@@ -114,6 +139,8 @@ <h3 align="center">Senior @ University of Illinois Urbana-Champaign (UIUC) major
 
 <p><img align="center" src="https://github-readme-streak-stats.herokuapp.com/?user=thewonglife&" alt="thewonglife" /></p>
 
+<div class="scroll-wrapper"><a href="#footer"><i class="scroll fa-solid fa-chevron-down fa-sm"></i></a></div>
+
 <button
         type="button"
         class="btn btn-dark btn-floating btn-lg"
@@ -122,7 +149,7 @@ <h3 align="center">Senior @ University of Illinois Urbana-Champaign (UIUC) major
     <i class="fa-solid fa-chevron-up fa-sm"></i>
 </button>
 
-<footer class="text-center">
+<footer class="text-center" id="footer">
     <div class="container pt-4">
       <section class="mb-4">
         <a

diff --git a/html/contact.html b/html/contact.html
@@ -15,6 +15,31 @@
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+        <style>
+            .scroll-wrapper {text-align:center;}
+            .scroll {   
+                font-size: 50px;
+                color: #000;
+               -webkit-animation: scrolling 3s ease infinite;
+               -moz-animation: scrolling 3s ease infinite;
+               -o-animation: scrolling 3s ease infinite;
+               animation: scrolling 3s ease infinite;
+            }
+
+            @keyframes scrolling {
+              0% {
+                transform: translate(0);
+              }
+
+              50% {
+                transform: translate(0,40px);
+              }
+
+              100% {
+                 transform: translate(0);
+              }
+            }
+        </style>
         <style>
             #btn-back-to-top {
               position: fixed;
@@ -117,6 +142,8 @@ <h1 class="text-center mt-5">Let's start a conversation <i class="fa-solid fa-co
         <input type="hidden" name="_template" value="table">
         </form>
 
+        <div class="scroll-wrapper"><a href="#footer"><i class="scroll fa-solid fa-chevron-down fa-sm"></i></a></div>
+
         <button
                 type="button"
                 class="btn btn-dark btn-floating btn-lg"
@@ -125,7 +152,7 @@ <h1 class="text-center mt-5">Let's start a conversation <i class="fa-solid fa-co
             <i class="fa-solid fa-chevron-up fa-sm"></i>
         </button>
 
-        <footer class="text-center">
+        <footer class="text-center" id="footer">
             <div class="container pt-4">
               <section class="mb-4">
                 <a

diff --git a/html/resume.html b/html/resume.html
@@ -15,6 +15,31 @@
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+        <style>
+            .scroll-wrapper {text-align:center;}
+            .scroll {   
+                font-size: 50px;
+                color: #000;
+               -webkit-animation: scrolling 3s ease infinite;
+               -moz-animation: scrolling 3s ease infinite;
+               -o-animation: scrolling 3s ease infinite;
+                animation: scrolling 3s ease infinite;
+            }
+
+            @keyframes scrolling {
+              0% {
+                transform: translate(0);
+              }
+
+              50% {
+                transform: translate(0,40px);
+              }
+
+              100% {
+                transform: translate(0);
+              }
+            }
+        </style>
         <style>
             #btn-back-to-top {
               position: fixed;
@@ -69,6 +94,8 @@ <h1 class="text-center mt-5">Check out my resume <i class="fa-solid fa-file fa-s
         <iframe src="/Nicholas_Wong_Resume.pdf" width="1000" height="1000" title="Nicholas Wong's Resume"></iframe>
         </div>
 
+        <div class="scroll-wrapper"><a href="#footer"><i class="scroll fa-solid fa-chevron-down fa-sm"></i></a></div>
+
         <button
                 type="button"
                 class="btn btn-dark btn-floating btn-lg"
@@ -77,7 +104,7 @@ <h1 class="text-center mt-5">Check out my resume <i class="fa-solid fa-file fa-s
             <i class="fa-solid fa-chevron-up fa-sm"></i>
         </button>
 
-        <footer class="text-center">
+        <footer class="text-center" id="footer">
             <div class="container pt-4">
               <section class="mb-4">
                 <a

diff --git a/html/thanks.html b/html/thanks.html
@@ -15,6 +15,31 @@
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+        <style>
+            .scroll-wrapper {text-align:center;}
+            .scroll {   
+                font-size: 50px;
+                color: #000;
+               -webkit-animation: scrolling 3s ease infinite;
+               -moz-animation: scrolling 3s ease infinite;
+               -o-animation: scrolling 3s ease infinite;
+               animation: scrolling 3s ease infinite;
+            }
+
+            @keyframes scrolling {
+              0% {
+                transform: translate(0);
+              }
+
+              50% {
+                transform: translate(0,40px);
+              }
+
+              100% {
+                 transform: translate(0);
+              }
+            }
+        </style>
         <style>
             #btn-back-to-top {
               position: fixed;
@@ -75,6 +100,8 @@ <h1 class="text-center mt-5">Thank You</h1>
             </div>
         </div>
 
+        <div class="scroll-wrapper"><a href="#footer"><i class="scroll fa-solid fa-chevron-down fa-sm"></i></a></div>
+
         <button
                 type="button"
                 class="btn btn-dark btn-floating btn-lg"
@@ -83,7 +110,7 @@ <h1 class="text-center mt-5">Thank You</h1>
             <i class="fa-solid fa-chevron-up fa-sm"></i>
         </button>
 
-        <footer class="text-center">
+        <footer class="text-center" id="footer">
             <div class="container pt-4">
               <section class="mb-4">
                 <a

diff --git a/index.html b/index.html
@@ -15,6 +15,31 @@
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+        <style>
+            .scroll-wrapper {text-align:center;}
+            .scroll {   
+                font-size: 50px;
+                color: #000;
+               -webkit-animation: scrolling 3s ease infinite;
+               -moz-animation: scrolling 3s ease infinite;
+               -o-animation: scrolling 3s ease infinite;
+               animation: scrolling 3s ease infinite;
+            }
+
+            @keyframes scrolling {
+              0% {
+                transform: translate(0);
+              }
+
+              50% {
+                transform: translate(0,40px);
+              }
+
+              100% {
+                 transform: translate(0);
+              }
+            }
+        </style>
         <style>
             #btn-back-to-top {
               position: fixed;
@@ -183,6 +208,8 @@ <h4>Visual Studio Code</h4>
             </div>
         </div>
 
+        <div class="scroll-wrapper"><a href="#footer"><i class="scroll fa-solid fa-chevron-down fa-sm"></i></a></div>
+
         <button
                 type="button"
                 class="btn btn-dark btn-floating btn-lg"
@@ -191,7 +218,7 @@ <h4>Visual Studio Code</h4>
             <i class="fa-solid fa-chevron-up fa-sm"></i>
         </button>
 
-        <footer class="text-center">
+        <footer class="text-center" id="footer">
             <div class="container pt-4">
               <section class="mb-4">
                 <a