Cleaned up links

css/style.css

@@ -26,7 +26,7 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
-  animation: fade-in 1750ms ease-out forwards;
+  animation: fade-in 2750ms ease-out forwards;
   opacity: 0;
 }
 
@@ -106,9 +106,32 @@ h1 {
   font-weight: 900;
 }
 
+.links {
+  display: flex;
+  justify-content: space-between;
+  font-weight: 900;
+  align-items: center;
+}
+
+a {
+  color: #ddd;
+  transition: color 100ms ease;
+  height: 20px;
+}
+
+a:hover {
+  color: #eee;
+}
+
 p {
   margin: 0;
-  font-weight: 900;
+}
+
+svg {
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  fill: currentColor;
 }
 
 @keyframes fade-in {

index.html

@@ -6,8 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>Travis Heinström</title>
-    <meta name="description" content="" />
-    <!-- Needs Favicon -->
+    <meta name="description" content="The website of Travis Heinström" />
 
     <link rel="stylesheet" type="text/css" href="./css/style.css" />
   </head>
@@ -21,8 +20,29 @@
             Travis <br />
             Heinström
           </h1>
-          <p>travis@heinstrom.com</p>
-          <p><a href="https://www.linkedin.com/in/heinstrom">LinkedIn</a></p>
+          <div class="links">
+            <span>travis@heinstrom.com</span>
+            <a href="https://www.linkedin.com/in/heinstrom" target="_blank" title="Travis on LinkedIn">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                version="1.1"
+                x="0px"
+                y="0px"
+                viewBox="0 0 455 455"
+                xml:space="preserve"
+              >
+                <path
+                  style="fill-rule: evenodd; clip-rule: evenodd"
+                  d="M246.4,204.35v-0.665c-0.136,0.223-0.324,0.446-0.442,0.665H246.4z"
+                ></path>
+                <path
+                  style="fill-rule: evenodd; clip-rule: evenodd"
+                  d="M0,0v455h455V0H0z M141.522,378.002H74.016V174.906h67.506V378.002z    M107.769,147.186h-0.446C84.678,147.186,70,131.585,70,112.085c0-19.928,15.107-35.087,38.211-35.087   c23.109,0,37.31,15.159,37.752,35.087C145.963,131.585,131.32,147.186,107.769,147.186z M385,378.002h-67.524V269.345   c0-27.291-9.756-45.92-34.195-45.92c-18.664,0-29.755,12.543-34.641,24.693c-1.776,4.34-2.24,10.373-2.24,16.459v113.426h-67.537   c0,0,0.905-184.043,0-203.096H246.4v28.779c8.973-13.807,24.986-33.547,60.856-33.547c44.437,0,77.744,29.02,77.744,91.398V378.002   z"
+                ></path>
+              </svg>
+            </a>
+          </div>
         </figcaption>
       </figure>
     </div>

js/main.js

@@ -128,9 +128,18 @@
       });
     };
 
+    this.debounceLeaveFn = function (e) {
+      e.stopPropagation();
+      clearTimeout(self.timeout);
+      self.timeout = setTimeout(() => {
+        self.mouseleaveFn();
+      }, 5);
+    };
+
     this.DOM.el.addEventListener("mousemove", this.mousemoveFn);
     this.DOM.el.addEventListener("mouseleave", this.mouseleaveFn);
     this.DOM.el.addEventListener("mouseenter", this.mouseenterFn);
+    this.DOM.el.addEventListener("touchend", this.debounceLeaveFn);
   };
 
   TiltFx.prototype._layout = function (ev) {