Finished Evolution Cycle Page

evolutioncycle.html

@@ -52,16 +52,39 @@ <h2 id="info-title">Evolution Cycle</h2>
 
           <h3 class="info-sub-title">About Game<hr class="info-hr"></h3>
 
-          <p class="info-body-text"></p>
+          <p class="info-body-text">Evolution Cycle is a 2.5D fantasy-styled game that uses Power inputs from a static bike to control gameplay. You are tasked with cycling at different power outputs to overcome obstacles and traverse a once magic forest to fight the enemy and restore magic to the world.</p>
 
+          <p class="info-body-text">Magic is fading from the world, and it is your task to embark on a mission through the forest to the boss’s lair to defeat them and restore magic to the world. Along the way you will encounter several types of obstacles you will have to overcome by pedaling on the bike.</p>
+
           <h3 class="info-sub-title">Contribution<hr class="info-hr"></h3>
 
-          <p class="info-body-text"></p>
+          <p class="info-body-text">My primary contribution to this project was integrating the cycling equiptment with the game. I achieved this by using the Ant+ protocol to send and recieve data from the bike, I developed a sensor connection screen in Unreal Engine to allow for users to connect to their sensor.</p>
 
+          <p class="info-body-text">Within gameplay I implemented reading power data from the bike to control the character, also I added control for the game to control the resistance and target power of the bike to match the gameplay.</p>
+
+          <p class="info-body-text">I also handled most non player related programming, such as the UI power graphs, power ups, all menu logic, level transitioning conditions, and build settings.</p>
+
+          <h3 class="info-sub-title">Gallery<hr class="info-hr"></h3>
+
+          <div style="display: flex; justify-content: center;">
+
+            <img class="info-img" src="/images/ECImage1.webp" alt="Evolution Cycle Image 1">
+
+            <img class="info-img" src="/images/ECImage2.webp" alt="Evolution Cycle Image 2">
+
+            <img class="info-img" src="/images/ECImage3.webp" alt="Evolution Cycle Image 3">
+
+          </div>
+
           <h3 class="info-sub-title">Links<hr class="info-hr"></h3>
 
-          <div style="display: flex;"><button class="info-block-button"><img src="../images/Exe.webp" alt="LinkedIn" title="LinkedIn" class="social-block-icon"><p class="social-block-text">.exe</p></button>
-          <button class="info-block-button"><img src="../images/SourceCode.webp" alt="GitHub" title="GitHub" class="social-block-icon"><p class="social-block-text">Source Code</p></button></div>
+          <div style="display: flex; justify-content: center;">
+
+            <button id="ec-exe-btn" class="info-block-button"><img src="../images/Exe.webp" alt="Executable" title="Executable" class="social-block-icon"><p class="social-block-text">Executable</p></button>
+
+            <button id="ec-source-btn" class="info-block-button"><img src="../images/SourceCode.webp" alt="Source Code" title="Source Code" class="social-block-icon"><p class="social-block-text">Source Code</p></button>
+
+          </div>
 
         </div>
 
@@ -79,6 +102,8 @@ <h3 class="info-sub-title">Links<hr class="info-hr"></h3>
       });
     </script>
 
+    <script src="scripts/infoLinks.js"></script>
+
   </body>
 
 </html>

objects/social.html

@@ -5,4 +5,4 @@
 <button id="twitchbutton" class="social-block-button"><img src="../images/twitch.webp" alt="Twitch" title="Twitch" class="social-block-icon"><p class="social-block-text">Twitch</p></button>
 <button id="emailbutton" class="social-block-button"><img src="../images/mail.webp" alt="Email" title="Email" class="social-block-icon"><p class="social-block-text">Email</p></button>
 
-<script src="scripts/scripts.js"></script>
+<script src="scripts/socialLinks.js"></script>

scripts/infoLinks.js

@@ -0,0 +1,12 @@
+document.getElementById("ec-exe-btn").addEventListener("click", linkToECEXE);
+document.getElementById("ec-source-btn").addEventListener("click", linkToECSource);
+
+function linkToECEXE()
+{
+    window.open("https://drive.google.com/file/d/1or9UE60MnG6gFky3jzfvCODusGNuIPuj/view?usp=sharing");
+}
+
+function linkToECSource()
+{
+    window.open("https://github.com/TomyBDev/AntPlusReader");
+}

styles/global.css

@@ -235,17 +235,6 @@ html {
     filter: grayscale(0);
   }
 
-  .info-block-button:hover .social-block-text {
-    opacity: 1;
-    transform: translate(20%, 0);
-  }
-
-  .info-block-button:hover .social-block-icon {
-    transform: translate(-100%, 0);
-
-    filter: grayscale(0);
-  }
-
   .social-block-button:active, .info-block-button:active {
     background-color: var(--primary-text-color);
     box-shadow: 1px 3px #68aefe;
@@ -449,7 +438,8 @@ html {
 
     width: min(760px, 100%);
 
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: scroll;
   }
 
   #info-title {
@@ -469,7 +459,7 @@ html {
     grid-auto-rows: auto;
     row-gap: 15px;
     column-gap: 0;
-    margin-right: 5%;
+    margin-LEFT: 3%;
 
     width: 36%;
     height: auto;
@@ -518,8 +508,8 @@ html {
 
   .info-sub-title {
     text-align: left;
-    margin-left: 5%;
-    margin-top: 5%;
+    margin-left: 3%;
+    margin-top: 2.5%;
     margin-bottom: 0;
 
 
@@ -531,8 +521,7 @@ html {
 
   .info-body-text {
     text-align: left;
-    margin-left: 5%;
-    margin-right: 5%;
+    margin-left: 3%;
 
 
     color: var(--secondary-text-color);
@@ -553,6 +542,8 @@ html {
     margin: 5%;
     cursor: pointer;
     width: 100%;
+    max-width: 200px;
+    height: 60px;
 
     color: var(--primary-text-color);
     background-color: var(--background-color);
@@ -563,6 +554,23 @@ html {
     border-radius: calc(25px - 2.5%);
   }
 
+  .info-block-button:hover .social-block-text {
+    opacity: 1;
+    transform: translate(20%, 0);
+  }
+
+  .info-block-button:hover .social-block-icon {
+    transform: translate(-125%, 0);
+
+    filter: grayscale(0);
+  }
+
+  .info-img {
+    width: 27%; 
+    height: auto; 
+    padding: 3%;
+  }
+
   /* <---- Fancy Scroll ----> */
 
   ::-webkit-scrollbar {