From aee9944b0e3c378fde768f57296a19816c2f30dd Mon Sep 17 00:00:00 2001
From: Squirrel-314 <schoolarlybay@gmail.com>
Date: Sat, 16 Jan 2021 16:58:53 -0500
Subject: [PATCH] Coming Soon Effect!

---
 index.html |  43 ++++++++++--------
 main.js    |  17 +++++++-
 styles.css | 126 ++++++++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 146 insertions(+), 40 deletions(-)

diff --git a/index.html b/index.html
index a6e076d..40234e2 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
                Hi! I'm Squirrel!
             </h1>
             <br><br>
-            <p class="about-me">I am not a web developer, but I do spend a lot of time programming. I like CSS transitions and I think everyone should use them. I know HTML, CSS, JavaScript, and Electron, and am currently in the process of learing React and Node. Linux is my faviorite OS (I use Kubuntu, looking into Deepin). You can see my GitHub account <a class="hover-link" href="https://github.com/Squirrel-314">here</a>, and check out all the organizations I am in alone. Like my repositories? Please put up issues for any mistakes, and if you have a suggestion, also make an issue. No, I didn't mean it that way, it's just eaisier for me to see.</p>
+            <p class="about-me">I am not a web developer, but I do spend a lot of time programming. I like CSS transitions and I think everyone should use them. I know HTML, CSS, JavaScript, and Electron, and am currently in the process of learing React and Node. Linux is my faviorite OS (I use Kubuntu, looking into Deepin). You can see my GitHub account <a class="hover-link" href="https://github.com/Squirrel-314">here</a>, and check out all the organizations I am in alone. Like my repositories? Please put up issues for any mistakes, and if you have a suggestion, also make an issue. No, I didn't mean it that way, it's just easier for me to see.</p>
          </div>
          <div class="next" id="next" onclick="next()">
             <span class="arrow">&#10230;</span>
@@ -25,6 +25,7 @@
          <ul class="progress">
             <li id="meetIndicator" onclick="ind('meet')"></li>
             <li id="vegetable-dashIndicator" onclick="ind('vegetable-dash')"></li>
+            <li id="gold-rushIndicator" onclick="ind('gold-rush')"></li>
             <li id="coming-soonIndicator" onclick="ind('coming-soon')"></li>
          </ul>
       </div>
@@ -58,23 +59,38 @@
             <p class="about-vegetable">My newest and greatest JavaScript browser game! With all the high quality MS Paint images you could ever wish for, this game is simply fabulous! You can play the game <a href="https://squirrel-314.github.io/vegetable-dash">here</a>, or visit the GitHub repository <a href="https://github.com/squirrel-314/vegetable-dash">here</a>!</p>
          </div>
       </div>
+      <div class="block" id="gold-rush">
+         <div class="text">
+            <br>
+            <h1>Gold Rush!</h1>
+            <p class="about-gold">A simple-but-promising incremental game, made with JavaScript. This was my first game, and recently had a complete redo, with many new features which you will have to find out about yourself! You can play it <a href="https://squirrel-314.github.io">here</a>, or check ou the GitHub repository <a href="https://github.com/Squirrel-314/squirrel-314.github.io">here</a>, and if you use Linux, you can download the 0.9 version app <a href="download-gold-rush.html">here</a>!</p>
+         </div>
+      </div>
       <div class="block" id="coming-soon">
          <div class="text">
             <br><br>
-            <h1>COMING SOON!</h1>
+            <h1>
+               <ul class="coming">
+                  <li>C</li>
+                  <li>O</li>
+                  <li>M</li>
+                  <li>I</li>
+                  <li>N</li>
+                  <li>G</li>
+                  <li class="space"></li>
+                  <li>S</li>
+                  <li>O</li>
+                  <li>O</li>
+                  <li>N</li>
+                  <li>!</li>
+               </ul>
+            </h1>
          </div>
       </div>
 
 
 
 <!--
-      <div class="project" id="vegetable-dash">
-         <br>
-         <img class="display-image-light" src="Images/cheese.png" alt="">
-         <h2>Vegetable Dash!</h2>
-         <h4>My all new farming game! Uses JavaScript, and plenty of high quality MS Paint images! Plant and harvest various vegetables, while discovering new ones! Trade with merchants in the market! (Feature on its way)</h4>
-         <p>You can play it <a href="https://squirrel-314.github.io/vegetable-dash/Game/index.html">here</a>, and you can find the GitHub repository <a href="https://github.com/Squirrel-314/vegetable-dash">here</a>.</p>
-      </div>
       <div class="project" id="glish-translate">
          <br>
          <img class="display-image-dark" src="Images/cheese.png" alt="">
@@ -82,15 +98,6 @@
          <h4>Have you ever had trouble with all of that slang and inelegible texting abbrevations? I certiantly have, but I feel I may be alone in this. Anyway, this Chrome extension is a dictonary that translates glish, more commonly know as text language.</h4>
          <p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/glish-translate">here</a>.</p>
       </div>
-      <div class="project" id="gold-rush">
-         <div class="content">
-            <br>
-            <img class="display-image-light" id="gold-rush-icon" src="Images/gold-rush-icon.png" alt="">
-            <h2>Gold Rush</h2>
-            <h4>My first game, a simple incremental game made with JavaScript</h4>
-            <p>You can play it <a href="https://squirrel-314.github.io">here</a>, or download the app <a href="download-gold-rush.html">here</a>. You can find the GitHub repository <a href="https://github.com/Squirrel-314/squirrel-314.github.io">here</a>.</p>
-         </div>
-      </div>
       <div class="project" id="incremental">
          <br>
          <img class="display-image-dark" src="Images/cheese.png" alt="">
diff --git a/main.js b/main.js
index 41bcc96..1443046 100644
--- a/main.js
+++ b/main.js
@@ -8,6 +8,10 @@ function next() {
       pageLocation = "vegetable-dash";
    }
    else if (pageLocation === "vegetable-dash") {
+      document.location = "#gold-rush";
+      pageLocation = "gold-rush";
+   }
+   else if (pageLocation === "gold-rush") {
       document.location = "#coming-soon";
       pageLocation = "coming-soon";
    }
@@ -19,10 +23,14 @@ function last() {
       document.location = "#meet";
       pageLocation = "meet";
    }
-   else if (pageLocation === "coming-soon") {
+   else if (pageLocation === "gold-rush") {
       document.location = "#vegetable-dash";
       pageLocation = "vegetable-dash";
    }
+   else if (pageLocation === "coming-soon") {
+      document.location = "#gold-rush";
+      pageLocation = "gold-rush";
+   }
    buttonVisiblility();
 }
 
@@ -45,6 +53,7 @@ function buttonVisiblility() {
 function where() {
    let meetIndicator = document.getElementById("meetIndicator");
    let vegIndicator = document.getElementById("vegetable-dashIndicator");
+   let goldIndicator = document.getElementById("gold-rushIndicator");
    let comingIndicator = document.getElementById("coming-soonIndicator");
 
    if (pageLocation === "meet") {
@@ -59,6 +68,12 @@ function where() {
    else {
       vegIndicator.style.backgroundColor = "#d6d6d6";
    }
+   if (pageLocation === "gold-rush") {
+      goldIndicator.style.backgroundColor = "#262626";
+   }
+   else {
+      goldIndicator.style.backgroundColor = "#d6d6d6";
+   }
    if (pageLocation === "coming-soon") {
       comingIndicator.style.backgroundColor = "#262626";
    }
diff --git a/styles.css b/styles.css
index 1c04c1c..19a8746 100644
--- a/styles.css
+++ b/styles.css
@@ -329,23 +329,115 @@ Vegetable Dash
    transition-delay: 1.4s;
 }
 
+/*==================================================
+Gold Rush
+==================================================*/
+
+/* General */
+
+#gold-rush h1 {
+   margin: 25px;
+   letter-spacing: 2px;
+}
+
+.about-gold {
+   margin: 50px;
+   font-size: 120%;
+}
+
+/* Animation */
+
+#gold-rush h1 {
+   background: linear-gradient(90deg, #000, #fff, #000);
+   background-size: 80%;
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: rgba(255, 255, 255, 0);
+}
+
+#gold-rush:hover h1 {
+   animation: show-text 1.2s 2 forwards;
+}
+
+@keyframes show-text {
+   0% {
+      background-position: -100%;
+   }
+   100% {
+      background-position: 250%;
+   }
+}
+
+/*==================================================
+Coming Soon!
+==================================================*/
+
+.coming {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   list-style-type: none;
+}
+
+.coming li {
+   transition: 0.2s;
+   margin: 0 3px;
+}
+
+.coming:hover li {
+   animation: shake 1s infinite alternate;
+   margin: 0 4px;
+   text-shadow: 0 25px 2px #262626;
+}
+
+@keyframes shake {
+   0% {
+      transform: rotate(10deg) scaleY(1.2);
+   }
+   20% {
+      transform: rotate(-10deg) scaleY(1);
+   }
+   40% {
+      transform: rotate(10deg) scaleY(1.2);
+   }
+   60% {
+      transform: rotate(-10deg) scaleY(1);
+   }
+   80% {
+      transform: rotate(10deg) scaleY(1.2);
+   }
+   100% {
+      transform: rotate(-10deg) scaleY(1);
+   }
+}
+
+.coming:hover li:nth-child(2) {
+   animation-delay: 0.2s;
+}
+
+.coming:hover li:nth-child(4) {
+   animation-delay: 0.2s;
+}
+
+.coming:hover li:nth-child(6) {
+   animation-delay: 0.2s;
+}
+
+.coming:hover li:nth-child(8) {
+   animation-delay: 0.2s;
+}
+
+.coming:hover li:nth-child(10) {
+   animation-delay: 0.2s;
+}
+
+.coming:hover li:nth-child(12) {
+   animation-delay: 0.2s;
+}
+
 /*==================================================
 Main Sectors
 ==================================================
 
-.project {
-   height: 100vh;
-   overflow: scroll;
-   scroll-snap-align: start;
-}
-
-#vegetable-dash {
-   height: 100vh;
-   width: 100%;
-   background-color: #272727;
-   position: relative;
-}
-
 #glish-translate {
    height: 100vh;
    width: 100%;
@@ -407,14 +499,6 @@ Main Sectors
    overflow-y: hidden;
 }
 
-/*==================================================
-Project Contents
-==================================================
-
-.project h2, .project h4, .project p {
-   margin: 25px 25px;
-}
-
 /*==================================================
 Other
 ==================================================