removed console warnings

index.html

@@ -19,6 +19,7 @@
       })(window,document,'script','dataLayer','GTM-P437XK4');</script>
       <!-- End Google Tag Manager -->
 
+      <link rel="icon" href="favicon.ico" />
     <link rel="alternate" type="application/json+oembed" href="%PUBLIC_URL%/website-screenshot.png"/>
     <meta property="og:title" content="Ryan Floyd's Portfolio" />
     <meta property="og:description" content="The personal website of Ryan Floyd"/>
@@ -41,23 +42,16 @@
     <div id="joystick-wrapper"></div>
      <div class="fadeOutDiv preload-overlay" id="preload-overlay">
       <div class="start-page-content-div fadeOutDiv">
-        <h1 class="start-page-text postload fadeOutDiv">Hi, I'm <span class="yellow-text">Ryan Floyd!</span></h1>
-        <h4 class="postload start-page-text junior-engineer fadeOutDiv">Junior Software Engineer in Boston, MA</h4>
-        <h2 class="postload start-page-text interactive-site-text fadeOutDiv">This is an interactive 3D site built with Three.js!</h2>
-        <h3 id="appDirections" class="joystick-directions-text postload fadeOutDiv">Move the ball around with the arrow keys on the keyboard.</h3>
-
+        <h1 class="ryan-text postload fadeOutDiv">Hi, I'm <span class="yellow-text">Ryan Floyd!</span></h1>
+        <h1 class="postload start-page-text interactive-site-text fadeOutDiv">This is an interactive 3D site built with Three.js!</h1>
+        <h1 id="appDirections" class="start-page-text joystick-directions-text postload fadeOutDiv">Move the ball around with the arrow keys on the keyboard.</h1>
         <button id="start-button" class="postload fadeOutDiv">EXPLORE</button>
-
       </div>
-     <div class="bottom-webgl-text-div">
-      <p class="postload bottom-webgl-text fadeOutDiv">For best experience, use a modern browser. My static site is available <a id="static-site-link" href="https://ryanfloyd.io" target="_blank">here</a></p><p class="bottom-webgl-text postload"></p>
-     </div>
-
       <div class="trinity-rings-spinner preload">
         <div class="circle preload"></div>
         <div class="circle preload"></div>
         <div class="circle preload"></div>
-    </div>
+      </div>
     <div class="loading-text-div preload">Loading<span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span></div>
     <div id="tooltip"></div>
     <script type="x-shader/x-vertex" id="vertexShader">

src/app.js

@@ -920,7 +920,7 @@ Ammo().then((Ammo) => {
 
   //document loading
   manager.onStart = function (item, loaded, total) {
-    console.log("Loading started");
+    //console.log("Loading started");
   };
 
   manager.onLoad = function () {
@@ -937,18 +937,18 @@ Ammo().then((Ammo) => {
         }
       }
     }, 1000);
-    console.log("Loading complete");
+    //console.log("Loading complete");
   };
 
   manager.onError = function (url) {
-    console.log("Error loading");
+    //console.log("Error loading");
   };
 
   startButton.addEventListener("click", startButtonEventListener);
 
   if (isTouchscreenDevice()) {
     document.getElementById("appDirections").innerHTML =
-      "Use the joystick in the bottom left of the screen to move the ball. Please use this website with your device in portrait orientation.";
+      "Use the joystick in the bottom left to move the ball. Please use your device in portrait orientation!";
     createJoystick(document.getElementById("joystick-wrapper"));
     document.getElementById("joystick-wrapper").style.visibility = "visible";
     document.getElementById("joystick").style.visibility = "visible";
@@ -1070,8 +1070,17 @@ Ammo().then((Ammo) => {
 
     allSkillsSection(-50, 0.025, 20, 40, 40, boxTexture.allSkills);
     allSkillsSection(61, 0.025, 13, 30, 60, inputText.activities);
-    allSkillsSection(9, 0.025, 54, 7, 3.5, boxTexture.skrillex);
-    allSkillsSection(10, 0.01, 45, 15, 15, boxTexture.edmText);
+    allSkillsSection(8.5, 0.025, 54, 7, 3.5, boxTexture.skrillex);
+    allSkillsSection(9, 0.01, 45, 15, 15, boxTexture.edmText);
+    allSkillsSection(
+      9,
+      0.01,
+      20,
+      21,
+      7,
+      inputText.staticPortfolio,
+      URL.ryanfloyd
+    );
 
     //lensflare
     createLensFlare(50, -50, -800, 200, 200, boxTexture.lensFlareMain);
@@ -1083,14 +1092,14 @@ Ammo().then((Ammo) => {
     if (isTouchscreenDevice()) {
       touchText = "Touch boxes with your \nfinger to open links";
       instructionsText =
-        "Use the joystick in the bottom \nleft of the screen to move the ball.";
+        "   Use the joystick in the bottom \nleft of the screen to move the ball.";
     } else {
       touchText = "Click on boxes with \nthe mouse to open links";
       instructionsText =
-        "Use the arrow keys on your \nkeyboard to move the ball.";
+        "Use the arrow keys on your \n keyboard to move the ball.";
     }
 
-    simpleText(8.75, 0.01, 5, instructionsText, 1.25);
+    simpleText(9, 0.01, 5, instructionsText, 1.25);
 
     simpleText(23, 0.01, -60, touchText, 1.5);
     simpleText(-50, 0.01, -5, "SKILLS", 3);

style.css

@@ -155,8 +155,18 @@ select {
   padding: 0px 0px 0px 0px;
 }
 
-.joystick-directions-text {
-  padding: 0px 30px 0px 30px;
+.start-page-text {
+  padding-right: 30px;
+  padding-left: 30px;
+  padding-bottom: 20px;
+  font-size: calc(24px + (20 - 18) * (100vw - 400px) / (800 - 400));
+}
+
+.ryan-text {
+  padding-right: 30px;
+  padding-left: 30px;
+  padding-bottom: 20px;
+  font-size: calc(32px + (24 - 18) * (100vw - 400px) / (800 - 400));
 }
 
 .start-page-content-div {
@@ -167,8 +177,7 @@ select {
 
 #start-button {
   margin: 0 auto;
-  margin-top: 20px;
-  margin-bottom: 100px;
+  margin-bottom: 20vh;
   font-size: 25px;
   background-color: grey;
   border: none;
@@ -178,19 +187,26 @@ select {
   -webkit-appearance: none;
   -webkit-border-radius: none;
   outline: none;
+  transition: 0.25s;
 }
 
 #start-button:hover {
   cursor: pointer;
+  transform: scale(1.15);
 }
 
+/*
 .interactive-site-text {
   margin: 50px 50px 50px 50px;
 }
 
+.joystick-directions-text {
+  padding: 0px 30px 0px 30px;
+}
+
 .junior-engineer {
   margin-bottom: 50px;
-}
+}*/
 
 .yellow-text {
   color: #fffc00;